Socket
Socket
Sign inDemoInstall

@reach/listbox

Package Overview
Dependencies
Maintainers
4
Versions
34
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@reach/listbox - npm Package Compare versions

Comparing version 0.10.0 to 0.10.1

33

dist/index.d.ts

@@ -29,2 +29,3 @@ /**

import { Descendant } from "@reach/descendants";
import { ListboxNodeRefs } from "./machine";
/**

@@ -161,11 +162,4 @@ * ListboxInput

};
export declare const ListboxButton: React.NamedExoticComponent<import("@reach/utils").PropsWithAs<"span", ListboxButtonProps>>;
/**
* ListboxButton
*
* The interactive toggle button that triggers the popover for the listbox.
*
* @see Docs https://reacttraining.com/reach-ui/listbox#listbox-button
*/
export declare const ListboxButton: import("@reach/utils").ComponentWithAs<"span", ListboxButtonProps>;
/**
* @see Docs https://reacttraining.com/reach-ui/listbox#listboxbutton-props

@@ -227,11 +221,4 @@ */

};
export declare const ListboxArrow: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ListboxArrowProps, "autoComplete" | "autoFocus" | "form" | "name" | "onChange" | "defaultValue" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLSpanElement>>>;
/**
* ListboxArrow
*
* A wrapper component for an arrow to display in the `ListboxButton`
*
* @see Docs https://reacttraining.com/reach-ui/listbox#listboxarrow
*/
export declare const ListboxArrow: React.ForwardRefExoticComponent<Pick<ListboxArrowProps, "autoComplete" | "autoFocus" | "form" | "name" | "onChange" | "defaultValue" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLSpanElement>>;
/**
* @see Docs https://reacttraining.com/reach-ui/listbox#listboxarrow-props

@@ -249,11 +236,4 @@ */

};
export declare const ListboxPopover: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ListboxPopoverProps, "autoComplete" | "autoFocus" | "form" | "name" | "onChange" | "defaultValue" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "portal" | "position" | "unstable_observableRefs"> & React.RefAttributes<any>>>;
/**
* ListboxPopover
*
* The popover containing the list of options.
*
* @see Docs https://reacttraining.com/reach-ui/listbox#listboxpopover
*/
export declare const ListboxPopover: React.ForwardRefExoticComponent<Pick<ListboxPopoverProps, "autoComplete" | "autoFocus" | "form" | "name" | "onChange" | "defaultValue" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "portal" | "position"> & React.RefAttributes<any>>;
/**
* @see Docs https://reacttraining.com/reach-ui/listbox#listboxpopover-props

@@ -281,2 +261,3 @@ */

position?: PopoverProps["position"];
unstable_observableRefs?: PopoverProps["unstable_observableRefs"];
};

@@ -350,3 +331,3 @@ /**

*/
label?: string;
label?: React.ReactNode;
};

@@ -379,4 +360,6 @@ /**

isExpanded: boolean;
highlightedOptionRef: React.RefObject<ListboxNodeRefs["highlightedOption"]>;
selectedOptionRef: React.RefObject<ListboxNodeRefs["selectedOption"]>;
value: ListboxValue | null;
valueLabel: string | null;
};

862

dist/listbox.cjs.development.js

@@ -50,3 +50,3 @@ 'use strict';

var _commonEvents, _openEvents;
var _commonEvents;
// States

@@ -58,9 +58,9 @@

// Resting/closed state.
ListboxStates["Idle"] = "IDLE"; // The user is navigate the list with a pointer
ListboxStates["Idle"] = "IDLE"; // Listbox is open but the user is not yet navigating.
ListboxStates["Navigating"] = "NAVIGATING"; // The user is navigate the list with a keyboard
ListboxStates["Open"] = "OPEN"; // The user is navigating the list
ListboxStates["NavigatingWithKeys"] = "NAVIGATING_WITH_KEYS"; // The user is searching for an option with the keyboard
ListboxStates["Navigating"] = "NAVIGATING"; // The user has moused-down but hasn't made a selection yet
ListboxStates["Searching"] = "SEARCHING"; // The user is interacting with arbitrary elements inside the popover
ListboxStates["Dragging"] = "DRAGGING"; // The user is interacting with arbitrary elements inside the popover

@@ -88,10 +88,12 @@ ListboxStates["Interacting"] = "INTERACTING";

ListboxEvents["KeyDownShiftTab"] = "KEY_DOWN_SHIFT_TAB";
ListboxEvents["Navigate"] = "NAVIGATE";
ListboxEvents["OptionTouchStart"] = "OPTION_TOUCH_START";
ListboxEvents["OptionMouseMove"] = "OPTION_MOUSE_MOVE";
ListboxEvents["OptionMouseEnter"] = "OPTION_MOUSE_ENTER";
ListboxEvents["OutsideMouseDown"] = "OUTSIDE_MOUSE_DOWN"; // Uncontrolled value changes come from specific events (click, key, etc.)
ListboxEvents["OutsideMouseDown"] = "OUTSIDE_MOUSE_DOWN";
ListboxEvents["OutsideMouseUp"] = "OUTSIDE_MOUSE_UP"; // Uncontrolled value changes come from specific events (click, key, etc.)
// ValueChange > Value change may have come from somewhere else
ListboxEvents["ValueChange"] = "VALUE_CHANGE";
ListboxEvents["OptionStartClick"] = "OPTION_START_CLICK";
ListboxEvents["OptionFinishClick"] = "OPTION_FINISH_CLICK";
ListboxEvents["OptionMouseDown"] = "OPTION_MOUSE_DOWN";
ListboxEvents["OptionMouseUp"] = "OPTION_MOUSE_UP";
ListboxEvents["PopoverPointerDown"] = "POPOVER_POINTER_DOWN";

@@ -107,3 +109,3 @@ ListboxEvents["PopoverPointerUp"] = "POPOVER_POINTER_UP";

});
var clearTypeaheadQuery = /*#__PURE__*/machine.assign({
var clearTypeahead = /*#__PURE__*/machine.assign({
typeaheadQuery: null

@@ -154,3 +156,3 @@ });

function clickedOutsideOfListbox(data, event) {
if (event.type === ListboxEvents.OutsideMouseDown) {
if (event.type === ListboxEvents.OutsideMouseDown || event.type === ListboxEvents.OutsideMouseUp) {
var _event$refs2 = event.refs,

@@ -176,8 +178,10 @@ button = _event$refs2.button,

function shouldNavigateWithKeys(data, event) {
var popover = event.refs.popover;
var relatedTarget = event.relatedTarget; // When a blur event happens, we want to move to NavigatingWithKeys state
// unless the user is interacting with elements inside the popover...
function shouldNavigate(data, event) {
var _event$refs3 = event.refs,
popover = _event$refs3.popover,
list = _event$refs3.list;
var relatedTarget = event.relatedTarget; // When a blur event happens, we want to move to Navigating state unless the
// user is interacting with elements inside the popover...
if (popover && relatedTarget && popover.contains(relatedTarget)) {
if (popover && relatedTarget && popover.contains(relatedTarget) && relatedTarget !== list) {
return false;

@@ -205,3 +209,3 @@ } // ...otherwise, just make sure the next option is selectable

function optionIsNavigable(data, event) {
if (event.type === ListboxEvents.Navigate) {
if (event.type === ListboxEvents.OptionTouchStart) {
if (event && event.disabled) {

@@ -265,5 +269,2 @@ return false;

});
var clearTypeahead = /*#__PURE__*/machine.assign({
typeaheadQuery: ""
});
var setValueFromTypeahead = /*#__PURE__*/machine.assign({

@@ -298,37 +299,7 @@ value: function value(data, event) {

actions: /*#__PURE__*/machine.assign(function (ctx, event) {
return _extends({}, ctx, {}, event.data, {
refs: _extends({}, ctx.refs, {}, event.data.refs || {})
});
return _extends({}, ctx, {}, event.data);
})
}, _commonEvents[ListboxEvents.ValueChange] = {
actions: [assignValue, selectOption]
}, _commonEvents);
var openEvents = (_openEvents = {}, _openEvents[ListboxEvents.ClearNavSelection] = {
actions: [clearNavigationValue, focusList]
}, _openEvents[ListboxEvents.OptionFinishClick] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeaheadQuery, focusButton, selectOption],
cond: optionIsSelectable
}, _openEvents[ListboxEvents.KeyDownEnter] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeaheadQuery, focusButton, selectOption],
cond: optionIsSelectable
}, _openEvents[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeaheadQuery, focusButton, selectOption],
cond: optionIsSelectable
}, _openEvents[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Idle,
// When the user triggers a mouseDown event on the button, we call
// event.preventDefault() because the browser will naturally call mouseUp
// and click, which will reopen the button (which we don't want). As such,
// the click won't blur the open list or re-focus the trigger, so we call
// `focusButton` to do that manually. We could work around this with
// deferred transitions with xstate, but @xstate/fsm currently doesn't
// support that feature and this works good enough for the moment.
actions: [focusButton]
}, _openEvents[ListboxEvents.KeyDownEscape] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _openEvents); ////////////////////////////////////////////////////////////////////////////////
}, _commonEvents); ////////////////////////////////////////////////////////////////////////////////

@@ -351,9 +322,2 @@ /**

value: value,
refs: {
button: null,
input: null,
list: null,
popover: null,
hiddenInput: null
},
options: [],

@@ -365,7 +329,7 @@ navigationValue: null,

on: _extends({}, commonEvents, (_extends2 = {}, _extends2[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Navigating,
target: ListboxStates.Open,
actions: [navigateFromCurrentValue],
cond: listboxIsNotDisabled
}, _extends2[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.NavigatingWithKeys,
target: ListboxStates.Navigating,
actions: [navigateFromCurrentValue, focusList],

@@ -385,4 +349,4 @@ cond: listboxIsNotDisabled

}, _extends2[ListboxEvents.KeyDownNavigate] = {
target: ListboxStates.NavigatingWithKeys,
actions: [navigateFromCurrentValue, clearTypeaheadQuery, focusList],
target: ListboxStates.Navigating,
actions: [navigateFromCurrentValue, clearTypeahead, focusList],
cond: listboxIsNotDisabled

@@ -395,45 +359,101 @@ }, _extends2[ListboxEvents.KeyDownEnter] = {

entry: [clearNavigationValue],
on: _extends({}, commonEvents, {}, openEvents, (_extends3 = {}, _extends3[ListboxEvents.KeyDownEnter] = ListboxStates.Interacting, _extends3[ListboxEvents.Blur] = [{
on: _extends({}, commonEvents, (_extends3 = {}, _extends3[ListboxEvents.ClearNavSelection] = {
actions: [clearNavigationValue, focusList]
}, _extends3[ListboxEvents.KeyDownEnter] = {
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeaheadQuery
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends3[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends3[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Idle,
// When the user triggers a mouseDown event on the button, we call
// event.preventDefault() because the browser will naturally send a
// mouseup event and click, which will reopen the button (which we
// don't want). As such, the click won't blur the open list or
// re-focus the trigger, so we call `focusButton` to do that manually.
// We could work around this with deferred transitions with xstate,
// but @xstate/fsm currently doesn't support that feature and this
// works good enough for the moment.
actions: [focusButton]
}, _extends3[ListboxEvents.KeyDownEscape] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends3[ListboxEvents.OptionMouseDown] = {
target: ListboxStates.Dragging
}, _extends3[ListboxEvents.OutsideMouseDown] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeahead
}, {
target: ListboxStates.Dragging,
actions: clearTypeahead,
cond: optionIsActive
}], _extends3[ListboxEvents.OutsideMouseUp] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
cond: shouldNavigateWithKeys
cond: optionIsActive
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends3[ListboxEvents.OutsideMouseDown] = [{
actions: clearTypeahead
}], _extends3[ListboxEvents.KeyDownEnter] = ListboxStates.Interacting, _extends3[ListboxEvents.Blur] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeaheadQuery
cond: listboxLostFocus,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
cond: optionIsActive
cond: shouldNavigate
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends3[ListboxEvents.Navigate] = {
actions: clearTypeahead
}], _extends3[ListboxEvents.OptionTouchStart] = {
target: ListboxStates.Navigating,
actions: [navigate],
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends3[ListboxEvents.OptionMouseEnter] = {
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends3[ListboxEvents.KeyDownNavigate] = {
target: ListboxStates.NavigatingWithKeys,
actions: [navigate, clearTypeaheadQuery, focusList]
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead, focusList]
}, _extends3))
}, _states[ListboxStates.Navigating] = {
on: _extends({}, commonEvents, {}, openEvents, (_extends4 = {}, _extends4[ListboxEvents.Blur] = [{
}, _states[ListboxStates.Open] = {
on: _extends({}, commonEvents, (_extends4 = {}, _extends4[ListboxEvents.ClearNavSelection] = {
actions: [clearNavigationValue]
}, _extends4[ListboxEvents.KeyDownEnter] = {
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeaheadQuery
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends4[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends4[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends4[ListboxEvents.KeyDownEscape] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends4[ListboxEvents.OptionMouseDown] = {
target: ListboxStates.Dragging
}, _extends4[ListboxEvents.OutsideMouseDown] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
cond: shouldNavigateWithKeys
target: ListboxStates.Dragging,
cond: optionIsActive
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends4[ListboxEvents.OutsideMouseDown] = [{
actions: clearTypeahead
}], _extends4[ListboxEvents.OutsideMouseUp] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeaheadQuery
actions: clearTypeahead
}, {

@@ -444,15 +464,25 @@ target: ListboxStates.Navigating,

target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
actions: clearTypeahead
}], _extends4[ListboxEvents.Blur] = [{
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
cond: shouldNavigate
}, {
target: ListboxStates.Interacting,
actions: clearTypeahead
}], _extends4[ListboxEvents.ButtonMouseUp] = {
target: ListboxStates.Navigating,
actions: [navigateFromCurrentValue, focusList]
}, _extends4[ListboxEvents.Navigate] = {
}, _extends4[ListboxEvents.OptionTouchStart] = {
target: ListboxStates.Navigating,
actions: [navigate],
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends4[ListboxEvents.KeyDownNavigate] = {
target: ListboxStates.NavigatingWithKeys,
actions: [navigate, clearTypeaheadQuery, focusList]
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead, focusList]
}, _extends4[ListboxEvents.KeyDownSearch] = {
target: ListboxStates.NavigatingWithKeys,
target: ListboxStates.Navigating,
actions: setTypeahead

@@ -463,33 +493,75 @@ }, _extends4[ListboxEvents.UpdateAfterTypeahead] = {

actions: clearTypeahead
}, _extends4))
}, _states[ListboxStates.NavigatingWithKeys] = {
on: _extends({}, commonEvents, {}, openEvents, (_extends5 = {}, _extends5[ListboxEvents.Blur] = [{
}, _extends4[ListboxEvents.OptionMouseMove] = [{
target: ListboxStates.Dragging,
actions: [navigate],
cond: optionIsNavigable
}, {
target: ListboxStates.Dragging
}], _extends4))
}, _states[ListboxStates.Dragging] = {
on: _extends({}, commonEvents, (_extends5 = {}, _extends5[ListboxEvents.ClearNavSelection] = {
actions: [clearNavigationValue]
}, _extends5[ListboxEvents.KeyDownEnter] = {
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeaheadQuery
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends5[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends5[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends5[ListboxEvents.KeyDownEscape] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends5[ListboxEvents.OptionMouseDown] = {
target: ListboxStates.Dragging
}, _extends5[ListboxEvents.OutsideMouseDown] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeahead
}, {
target: ListboxStates.NavigatingWithKeys,
cond: shouldNavigateWithKeys
target: ListboxStates.Navigating,
cond: optionIsActive
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends5[ListboxEvents.OutsideMouseDown] = [{
actions: clearTypeahead
}], _extends5[ListboxEvents.OutsideMouseUp] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeaheadQuery
actions: clearTypeahead
}, {
target: ListboxStates.NavigatingWithKeys,
cond: optionIsActive
target: ListboxStates.Navigating,
cond: optionIsActive,
actions: focusList
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends5[ListboxEvents.Navigate] = {
actions: [clearTypeahead, focusList]
}], _extends5[ListboxEvents.Blur] = [{
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
actions: [navigate],
cond: shouldNavigate
}, {
target: ListboxStates.Interacting,
actions: clearTypeahead
}], _extends5[ListboxEvents.ButtonMouseUp] = {
target: ListboxStates.Navigating,
actions: [navigateFromCurrentValue, focusList]
}, _extends5[ListboxEvents.OptionTouchStart] = {
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends5[ListboxEvents.OptionMouseEnter] = {
target: ListboxStates.Dragging,
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends5[ListboxEvents.KeyDownNavigate] = {
target: ListboxStates.NavigatingWithKeys,
actions: [navigate, clearTypeaheadQuery, focusList]
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead, focusList]
}, _extends5[ListboxEvents.KeyDownSearch] = {
target: ListboxStates.NavigatingWithKeys,
target: ListboxStates.Navigating,
actions: setTypeahead

@@ -500,33 +572,78 @@ }, _extends5[ListboxEvents.UpdateAfterTypeahead] = {

actions: clearTypeahead
}, _extends5[ListboxEvents.OptionMouseMove] = [{
target: ListboxStates.Navigating,
actions: [navigate],
cond: optionIsNavigable
}, {
target: ListboxStates.Navigating
}], _extends5[ListboxEvents.OptionMouseUp] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends5))
}, _states[ListboxStates.Searching] = {
on: _extends({}, commonEvents, {}, openEvents, (_extends6 = {}, _extends6[ListboxEvents.Blur] = [{
}, _states[ListboxStates.Navigating] = {
on: _extends({}, commonEvents, (_extends6 = {}, _extends6[ListboxEvents.ClearNavSelection] = {
actions: [clearNavigationValue, focusList]
}, _extends6[ListboxEvents.KeyDownEnter] = {
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeaheadQuery
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends6[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends6[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends6[ListboxEvents.KeyDownEscape] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends6[ListboxEvents.OptionMouseDown] = {
target: ListboxStates.Dragging
}, _extends6[ListboxEvents.OutsideMouseDown] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeahead
}, {
target: ListboxStates.Searching,
cond: shouldNavigateWithKeys
target: ListboxStates.Navigating,
cond: optionIsActive
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends6[ListboxEvents.OutsideMouseDown] = [{
actions: clearTypeahead
}], _extends6[ListboxEvents.OutsideMouseUp] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeaheadQuery
actions: clearTypeahead
}, {
target: ListboxStates.Searching,
target: ListboxStates.Navigating,
cond: optionIsActive
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends6[ListboxEvents.Navigate] = {
actions: clearTypeahead
}], _extends6[ListboxEvents.Blur] = [{
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
actions: [navigate, clearTypeaheadQuery],
cond: shouldNavigate
}, {
target: ListboxStates.Interacting,
actions: clearTypeahead
}], _extends6[ListboxEvents.ButtonMouseUp] = {
target: ListboxStates.Navigating,
actions: [navigateFromCurrentValue, focusList]
}, _extends6[ListboxEvents.OptionTouchStart] = {
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends6[ListboxEvents.OptionMouseEnter] = {
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends6[ListboxEvents.KeyDownNavigate] = {
target: ListboxStates.NavigatingWithKeys,
actions: [navigate, clearTypeaheadQuery, focusList]
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead, focusList]
}, _extends6[ListboxEvents.KeyDownSearch] = {
target: ListboxStates.NavigatingWithKeys,
target: ListboxStates.Navigating,
actions: setTypeahead

@@ -537,3 +654,9 @@ }, _extends6[ListboxEvents.UpdateAfterTypeahead] = {

actions: clearTypeahead
}, _extends6))
}, _extends6[ListboxEvents.OptionMouseMove] = [{
target: ListboxStates.Navigating,
actions: [navigate],
cond: optionIsNavigable
}, {
target: ListboxStates.Navigating
}], _extends6))
}, _states)

@@ -561,4 +684,3 @@ };

var DEBUG = // set here if we want to debug during development
false ; ////////////////////////////////////////////////////////////////////////////////
var DEBUG = false; ////////////////////////////////////////////////////////////////////////////////
// ListboxContext

@@ -587,3 +709,3 @@

name = _ref.name,
onChange = _ref.onChange,
onChangeProp = _ref.onChange,
required = _ref.required,

@@ -595,42 +717,34 @@ valueProp = _ref.value,

var _useRef = React.useRef(valueProp != null),
isControlled = _useRef.current;
var isControlled = React.useRef(valueProp != null);
var _useDescendants = descendants.useDescendants(),
options = _useDescendants[0],
setOptions = _useDescendants[1]; // We will track when a mouse has moved in a ref, then reset it to false each
// time a popover closes. This is useful because we want the selected value of
// the listbox to be highlighted when the user opens it, but if the pointer
// is resting above an option it will steal the highlight.
// TODO: Use state machine instead
setOptions = _useDescendants[1];
var onChange = utils.useCallbackProp(onChangeProp); // DOM refs
var mouseMovedRef = React.useRef(false); // If a user clicks the button while the listbox is open, the blur event
// will close the popover and send us back to IDLE. The mousup event will
// then fire and send us right back to NAVIGATING, which we probably don't
// want.
// TODO: We can probably do this better in the state machine, but for now
// this ref will track where these mouse events are starting so we can
// conditionally send events based on this value. Old habits die hard 🙃
var mouseEventStartedRef = React.useRef(false); // DOM refs
var button = React.useRef(null);
var hiddenInput = React.useRef(null);
var input = React.useRef(null);
var list = React.useRef(null);
var popover = React.useRef(null);
var buttonRef = React.useRef(null);
var hiddenInputRef = React.useRef(null);
var highlightedOptionRef = React.useRef(null);
var inputRef = React.useRef(null);
var listRef = React.useRef(null);
var popoverRef = React.useRef(null);
var selectedOptionRef = React.useRef(null);
var machine$1 = machine.useCreateMachine(createMachineDefinition({
value: (isControlled ? valueProp : defaultValue) || null
// The initial value of our machine should come from the `value` or
// `defaultValue` props if they exist.
value: (isControlled.current ? valueProp : defaultValue) || null
}));
var _useMachineLogger = machine.useMachineLogger(machine.useMachine(machine$1, {
button: button,
hiddenInput: hiddenInput,
input: input,
list: list,
popover: popover
}), DEBUG),
current = _useMachineLogger[0],
send = _useMachineLogger[1]; // IDs for aria attributes
var _useMachine = machine.useMachine(machine$1, {
button: buttonRef,
hiddenInput: hiddenInputRef,
highlightedOption: highlightedOptionRef,
input: inputRef,
list: listRef,
popover: popoverRef,
selectedOption: selectedOptionRef
}, DEBUG),
state = _useMachine[0],
send = _useMachine[1]; // IDs for aria attributes

@@ -641,3 +755,3 @@

var id = props.id || utils.makeId("listbox-input", _id);
var ref = utils.useForkedRef(input, forwardedRef); // If the button has children, we just render them as the label.
var ref = utils.useForkedRef(inputRef, forwardedRef); // If the button has children, we just render them as the label.
// Otherwise we'll find the option with a value that matches the listbox value

@@ -651,33 +765,31 @@ // and use its label in the button. We'll get that here and send it to the

var valueLabel = React.useMemo(function () {
return getLabelFromValue(current.context.value, options);
}, [options, current.context.value]); // TODO: Remove duplication and memoize
var selected = options.find(function (option) {
return option.value === state.context.value;
});
return selected ? selected.label : null;
}, [options, state.context.value]);
var isExpanded = isListboxExpanded(state.value); // TODO: Remove duplication and memoize
var context = {
ariaLabel: ariaLabel,
disabled: disabled,
ids: {
label: ariaLabelledBy,
input: id,
listbox: utils.makeId("listbox", id),
button: utils.makeId("button", id)
},
listboxValue: current.context.value,
listboxValueLabel: valueLabel,
mouseEventStartedRef: mouseEventStartedRef,
mouseMovedRef: mouseMovedRef,
onValueChange: onChange,
refs: {
button: button,
hiddenInput: hiddenInput,
input: input,
list: list,
popover: popover
},
send: send,
state: current
};
utils.useControlledSwitchWarning(valueProp, "value", _componentName); // For uncontrolled listbox components where no `defaultValue` is provided, we
var context = React.useMemo(function () {
return {
ariaLabel: ariaLabel,
ariaLabelledBy: ariaLabelledBy,
disabled: disabled,
isExpanded: isExpanded,
listboxId: id,
listboxValueLabel: valueLabel,
onValueChange: onChange,
buttonRef: buttonRef,
listRef: listRef,
popoverRef: popoverRef,
selectedOptionRef: selectedOptionRef,
highlightedOptionRef: highlightedOptionRef,
send: send,
state: state.value,
stateData: state.context
};
}, [ariaLabel, ariaLabelledBy, state.value, state.context, disabled, id, isExpanded, onChange, send, valueLabel]); // For uncontrolled listbox components where no `defaultValue` is provided, we
// will update the value based on the value of the first selectable option.
// We call the update directly because:
// A) we only ever need to do this once, so we can guard with a mounted ref
// A) we only ever need to do this once, so we can guard with a ref
// B) useLayoutEffect races useDecendant, so we might not have options yet

@@ -688,19 +800,24 @@ // C) useEffect will cause a flash

if (!isControlled && !defaultValue && !mounted.current && options.length) {
mounted.current = true;
var first = options.find(function (option) {
return !option.disabled;
});
if (!isControlled.current && // the app is not controlling state
defaultValue == null && // there is no default value
!mounted.current && // we haven't done this already
options.length // we have some options
) {
mounted.current = true;
var first = options.find(function (option) {
return !option.disabled;
});
if (first && first.value) {
send({
type: ListboxEvents.ValueChange,
value: first.value
});
if (first && first.value) {
send({
type: ListboxEvents.ValueChange,
value: first.value
});
}
}
} // We need to get some data from props to pass to the state machine in the
// event that they change
utils.useControlledSwitchWarning(valueProp, "value", _componentName); // Even if the app controls state, we still need to update it internally to
// run the state machine transitions
if (isControlled && valueProp !== current.context.value) {
useControlledStateSync(valueProp, state.context.value, function () {
send({

@@ -710,4 +827,3 @@ type: ListboxEvents.ValueChange,

});
}
});
utils.useIsomorphicLayoutEffect(function () {

@@ -722,29 +838,44 @@ send({

React.useEffect(function () {
function listener(event) {
function handleMouseDown(event) {
var target = event.target,
relatedTarget = event.relatedTarget;
send({
type: ListboxEvents.OutsideMouseDown,
relatedTarget: relatedTarget || target
});
if (!targetIsInPopover(target, popoverRef.current)) {
send({
type: ListboxEvents.OutsideMouseDown,
relatedTarget: relatedTarget || target
});
}
}
window.addEventListener("mousedown", listener);
if (isExpanded) {
window.addEventListener("mousedown", handleMouseDown);
}
return function () {
window.removeEventListener("mousedown", listener);
window.removeEventListener("mousedown", handleMouseDown);
};
}, [send]);
var childrenProps = React.useMemo(function () {
return {
id: id,
isExpanded: isListboxExpanded(current.value),
value: current.context.value,
valueLabel: valueLabel,
// TODO: Remove in 1.0
expanded: isListboxExpanded(current.value)
}, [send, isExpanded]);
React.useEffect(function () {
function handleMouseUp(event) {
var target = event.target,
relatedTarget = event.relatedTarget;
if (!targetIsInPopover(target, popoverRef.current)) {
send({
type: ListboxEvents.OutsideMouseUp,
relatedTarget: relatedTarget || target
});
}
}
if (isExpanded) {
window.addEventListener("mouseup", handleMouseUp);
}
return function () {
window.removeEventListener("mouseup", handleMouseUp);
};
}, [current.context.value, current.value, id, valueLabel]);
React.useEffect(function () {
return utils.checkStyles("listbox");
}, []);
}, [send, isExpanded]);
utils.useCheckStyles("listbox");
return React__default.createElement(descendants.DescendantProvider, {

@@ -759,7 +890,16 @@ context: ListboxDescendantContext,

"data-reach-listbox-input": "",
"data-state": isListboxExpanded(current.value) ? "expanded" : "closed",
"data-value": current.context.value,
"data-state": isExpanded ? "expanded" : "closed",
"data-value": state.context.value,
id: id
}), utils.isFunction(children) ? children(childrenProps) : children), (form || name || required) && React__default.createElement("input", {
ref: hiddenInput,
}), utils.isFunction(children) ? children({
id: id,
isExpanded: isExpanded,
value: state.context.value,
selectedOptionRef: selectedOptionRef,
highlightedOptionRef: highlightedOptionRef,
valueLabel: valueLabel,
// TODO: Remove in 1.0
expanded: isExpanded
}) : children), (form || name || required) && React__default.createElement("input", {
ref: hiddenInputRef,
disabled: disabled,

@@ -772,3 +912,3 @@ form: form,

type: "text",
value: current.context.value || ""
value: state.context.value || ""
})));

@@ -852,3 +992,3 @@ });

var ListboxButton = /*#__PURE__*/utils.forwardRefWithAs(function ListboxButton(_ref4, forwardedRef) {
var ListboxButtonImpl = /*#__PURE__*/utils.forwardRefWithAs(function ListboxButton(_ref4, forwardedRef) {
var ariaLabel = _ref4["aria-label"],

@@ -866,13 +1006,12 @@ _ref4$arrow = _ref4.arrow,

var _useContext = React.useContext(ListboxContext),
ariaLabelledBy = _useContext.ariaLabelledBy,
buttonRef = _useContext.buttonRef,
disabled = _useContext.disabled,
_useContext$ids = _useContext.ids,
buttonId = _useContext$ids.button,
labelId = _useContext$ids.label,
mouseEventStartedRef = _useContext.mouseEventStartedRef,
buttonRef = _useContext.refs.button,
state = _useContext.state,
isExpanded = _useContext.isExpanded,
listboxId = _useContext.listboxId,
stateData = _useContext.stateData,
send = _useContext.send,
listboxValueLabel = _useContext.listboxValueLabel;
var listboxValue = state.context.value;
var listboxValue = stateData.value;
var ref = utils.useForkedRef(buttonRef, forwardedRef);

@@ -883,4 +1022,4 @@ var handleKeyDown = useKeyDown();

if (!utils.isRightClick(event.nativeEvent)) {
mouseEventStartedRef.current = true;
event.preventDefault();
event.stopPropagation();
send({

@@ -894,15 +1033,12 @@ type: ListboxEvents.ButtonMouseDown,

function handleMouseUp(event) {
if (mouseEventStartedRef.current) {
if (!utils.isRightClick(event.nativeEvent)) {
event.preventDefault();
send({
type: ListboxEvents.ButtonMouseUp
});
}
if (!utils.isRightClick(event.nativeEvent)) {
event.preventDefault();
event.stopPropagation();
send({
type: ListboxEvents.ButtonMouseUp
});
}
mouseEventStartedRef.current = false;
}
var isExpanded = isListboxExpanded(state.value); // If the button has children, we just render them as the label
var id = utils.makeId("button", listboxId); // If the button has children, we just render them as the label
// If a user needs the label on the server to prevent hydration mismatch

@@ -934,3 +1070,3 @@ // errors, they need to control the state of the component and pass a label

"aria-haspopup": "listbox",
"aria-labelledby": ariaLabel ? undefined : [labelId, buttonId].filter(Boolean).join(" "),
"aria-labelledby": ariaLabel ? undefined : [ariaLabelledBy, id].filter(Boolean).join(" "),
"aria-label": ariaLabel,

@@ -946,3 +1082,3 @@ // Identifies the element as a button widget.

"data-reach-listbox-button": "",
id: buttonId,
id: id,
onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown),

@@ -955,9 +1091,11 @@ onMouseDown: utils.wrapEvent(onMouseDown, handleMouseDown),

{
ListboxButton.displayName = "ListboxButton";
ListboxButton.propTypes = {
ListboxButtonImpl.displayName = "ListboxButton";
ListboxButtonImpl.propTypes = {
arrow: /*#__PURE__*/PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
children: /*#__PURE__*/PropTypes.oneOfType([PropTypes.node, PropTypes.func])
};
} ////////////////////////////////////////////////////////////////////////////////
}
var ListboxButton = /*#__PURE__*/React.memo(ListboxButtonImpl); ////////////////////////////////////////////////////////////////////////////////
/**

@@ -971,4 +1109,3 @@ * ListboxArrow

var ListboxArrow = /*#__PURE__*/React.forwardRef(function ListboxArrow(_ref5, forwardedRef) {
var ListboxArrowImpl = /*#__PURE__*/React.forwardRef(function ListboxArrow(_ref5, forwardedRef) {
var children = _ref5.children,

@@ -978,6 +1115,4 @@ props = _objectWithoutPropertiesLoose(_ref5, ["children"]);

var _useContext2 = React.useContext(ListboxContext),
state = _useContext2.state.value;
isExpanded = _useContext2.isExpanded;
var isExpanded = isListboxExpanded(state);
var defaultArrow = isExpanded ? "▲" : "▼";
return React__default.createElement("span", Object.assign({

@@ -993,12 +1128,14 @@ "aria-hidden": true

expanded: isExpanded
}) : children || defaultArrow);
}) : children || "▼");
});
{
ListboxArrow.displayName = "ListboxArrow";
ListboxArrow.propTypes = {
ListboxArrowImpl.displayName = "ListboxArrow";
ListboxArrowImpl.propTypes = {
children: /*#__PURE__*/PropTypes.oneOfType([PropTypes.node, PropTypes.func])
};
} ////////////////////////////////////////////////////////////////////////////////
}
var ListboxArrow = /*#__PURE__*/React.memo(ListboxArrowImpl); ////////////////////////////////////////////////////////////////////////////////
/**

@@ -1012,4 +1149,3 @@ * ListboxPopover

var ListboxPopover = /*#__PURE__*/React.forwardRef(function ListboxPopover(_ref6, forwardedRef) {
var ListboxPopoverImpl = /*#__PURE__*/React.forwardRef(function ListboxPopover(_ref6, forwardedRef) {
var _ref6$position = _ref6.position,

@@ -1021,10 +1157,10 @@ position = _ref6$position === void 0 ? Popover.positionMatchWidth : _ref6$position,

portal = _ref6$portal === void 0 ? true : _ref6$portal,
props = _objectWithoutPropertiesLoose(_ref6, ["position", "onBlur", "onKeyDown", "portal"]);
unstable_observableRefs = _ref6.unstable_observableRefs,
props = _objectWithoutPropertiesLoose(_ref6, ["position", "onBlur", "onKeyDown", "portal", "unstable_observableRefs"]);
var _useContext3 = React.useContext(ListboxContext),
_useContext3$refs = _useContext3.refs,
popoverRef = _useContext3$refs.popover,
buttonRef = _useContext3$refs.button,
buttonRef = _useContext3.buttonRef,
popoverRef = _useContext3.popoverRef,
send = _useContext3.send,
state = _useContext3.state.value;
isExpanded = _useContext3.isExpanded;

@@ -1035,3 +1171,3 @@ var ref = utils.useForkedRef(popoverRef, forwardedRef);

var commonProps = _extends({
hidden: !isListboxExpanded(state),
hidden: !isExpanded,
tabIndex: -1

@@ -1057,3 +1193,4 @@ }, props, {

targetRef: buttonRef,
position: position
position: position,
unstable_observableRefs: unstable_observableRefs
})) : React__default.createElement("div", Object.assign({}, commonProps));

@@ -1063,4 +1200,4 @@ });

{
ListboxPopover.displayName = "ListboxPopover";
ListboxPopover.propTypes = {
ListboxPopoverImpl.displayName = "ListboxPopover";
ListboxPopoverImpl.propTypes = {
children: PropTypes.node.isRequired,

@@ -1070,4 +1207,6 @@ portal: PropTypes.bool,

};
} ////////////////////////////////////////////////////////////////////////////////
}
var ListboxPopover = /*#__PURE__*/React.memo(ListboxPopoverImpl); ////////////////////////////////////////////////////////////////////////////////
/**

@@ -1081,3 +1220,2 @@ * ListboxList

var ListboxList = /*#__PURE__*/utils.forwardRefWithAs(function ListboxList(_ref7, forwardedRef) {

@@ -1090,11 +1228,9 @@ var _ref7$as = _ref7.as,

ariaLabel = _useContext4.ariaLabel,
_useContext4$ids = _useContext4.ids,
listboxId = _useContext4$ids.listbox,
labelId = _useContext4$ids.label,
listRef = _useContext4.refs.list,
_useContext4$state = _useContext4.state,
_useContext4$state$co = _useContext4$state.context,
value = _useContext4$state$co.value,
navigationValue = _useContext4$state$co.navigationValue,
state = _useContext4$state.value;
ariaLabelledBy = _useContext4.ariaLabelledBy,
isExpanded = _useContext4.isExpanded,
listboxId = _useContext4.listboxId,
listRef = _useContext4.listRef,
_useContext4$stateDat = _useContext4.stateData,
value = _useContext4$stateDat.value,
navigationValue = _useContext4$stateDat.navigationValue;

@@ -1110,4 +1246,4 @@ var ref = utils.useForkedRef(forwardedRef, listRef);

, Object.assign({
"aria-activedescendant": useOptionId(isListboxExpanded(state) ? navigationValue : value),
"aria-labelledby": ariaLabel ? undefined : labelId,
"aria-activedescendant": useOptionId(isExpanded ? navigationValue : value),
"aria-labelledby": ariaLabel ? undefined : ariaLabelledBy,
"aria-label": ariaLabel,

@@ -1123,3 +1259,3 @@ // An element that contains or owns all the listbox options has role

"data-reach-listbox-list": "",
id: listboxId
id: utils.makeId("listbox", listboxId)
}));

@@ -1162,11 +1298,11 @@ });

var _useContext5 = React.useContext(ListboxContext),
highlightedOptionRef = _useContext5.highlightedOptionRef,
isExpanded = _useContext5.isExpanded,
onValueChange = _useContext5.onValueChange,
selectedOptionRef = _useContext5.selectedOptionRef,
send = _useContext5.send,
_useContext5$state = _useContext5.state,
state = _useContext5$state.value,
_useContext5$state$co = _useContext5$state.context,
listboxValue = _useContext5$state$co.value,
navigationValue = _useContext5$state$co.navigationValue,
onValueChange = _useContext5.onValueChange,
mouseEventStartedRef = _useContext5.mouseEventStartedRef,
mouseMovedRef = _useContext5.mouseMovedRef;
state = _useContext5.state,
_useContext5$stateDat = _useContext5.stateData,
listboxValue = _useContext5$stateDat.value,
navigationValue = _useContext5$stateDat.navigationValue;

@@ -1190,3 +1326,3 @@ var _useState = React.useState(labelProp),

var getLabelFromDomNode = React.useCallback(function (node) {
if (!labelProp) {
if (!labelProp && node) {
setLabel(function (prevState) {

@@ -1201,18 +1337,12 @@ if (node.textContent && prevState !== node.textContent) {

}, [labelProp]);
var ref = utils.useForkedRef(getLabelFromDomNode, forwardedRef, ownRef);
var isHighlighted = navigationValue ? navigationValue === value : false;
var isSelected = listboxValue === value;
var ref = utils.useForkedRef(getLabelFromDomNode, forwardedRef, ownRef, isSelected ? selectedOptionRef : null, isHighlighted ? highlightedOptionRef : null);
function handleMouseEnter() {
// If the user hasn't moved their mouse but mouse enter event still fires
// (this happens if the popup opens due to a keyboard event), we don't
// want to change the navigationSelect value
if (mouseMovedRef.current) {
mouseMovedRef.current = false;
send({
type: ListboxEvents.Navigate,
value: value,
disabled: !!disabled
});
}
send({
type: ListboxEvents.OptionMouseEnter,
value: value,
disabled: !!disabled
});
}

@@ -1222,3 +1352,3 @@

send({
type: ListboxEvents.Navigate,
type: ListboxEvents.OptionTouchStart,
value: value,

@@ -1237,8 +1367,6 @@ disabled: !!disabled

// Prevent blur event from firing and bubbling to the popover
event.preventDefault();
mouseEventStartedRef.current = true;
if (!utils.isRightClick(event.nativeEvent)) {
event.preventDefault();
send({
type: ListboxEvents.OptionStartClick
type: ListboxEvents.OptionMouseDown
});

@@ -1249,13 +1377,9 @@ }

function handleMouseUp(event) {
if (mouseEventStartedRef.current) {
mouseEventStartedRef.current = false;
if (!utils.isRightClick(event.nativeEvent)) {
send({
type: ListboxEvents.OptionFinishClick,
value: value,
callback: onValueChange,
disabled: !!disabled
});
}
if (!utils.isRightClick(event.nativeEvent)) {
send({
type: ListboxEvents.OptionMouseUp,
value: value,
callback: onValueChange,
disabled: !!disabled
});
}

@@ -1265,9 +1389,9 @@ }

function handleMouseMove() {
mouseMovedRef.current = true; // We don't really *need* this guard if we put this in the state machine,
// but in this case it seems wise not to needlessly run our transitions
// every time the user's mouse moves. Seems like a lot.
if (navigationValue !== value) {
// We don't really *need* these guards since we put all of our transition
// logic in the state machine, but in this case it seems wise not to
// needlessly run our transitions every time the user's mouse moves. Seems
// like a lot. 🙃
if (state === ListboxStates.Open || navigationValue !== value) {
send({
type: ListboxEvents.Navigate,
type: ListboxEvents.OptionMouseMove,
value: value,

@@ -1283,3 +1407,3 @@ disabled: !!disabled

, Object.assign({
"aria-selected": (isListboxExpanded(state) ? isHighlighted : isSelected) || undefined,
"aria-selected": (isExpanded ? isHighlighted : isSelected) || undefined,
"aria-disabled": disabled || undefined,

@@ -1330,3 +1454,3 @@ // Each option in the listbox has role `option` and is a DOM descendant

var _useContext6 = React.useContext(ListboxContext),
listboxId = _useContext6.ids.listbox;
listboxId = _useContext6.listboxId;

@@ -1352,3 +1476,3 @@ var labelId = utils.makeId("label", autoId.useId(props.id), listboxId);

ListboxGroup.propTypes = {
label: PropTypes.string
label: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element])
};

@@ -1399,43 +1523,36 @@ } ////////////////////////////////////////////////////////////////////////////////

var _useContext8 = React.useContext(ListboxContext),
input = _useContext8.ids.input,
_useContext8$state = _useContext8.state,
value = _useContext8$state.value,
context = _useContext8$state.context;
highlightedOptionRef = _useContext8.highlightedOptionRef,
listboxId = _useContext8.listboxId,
listboxValueLabel = _useContext8.listboxValueLabel,
isExpanded = _useContext8.isExpanded,
selectedOptionRef = _useContext8.selectedOptionRef,
value = _useContext8.stateData.value;
var _useContext9 = React.useContext(ListboxDescendantContext),
options = _useContext9.descendants;
var isExpanded = isListboxExpanded(value);
return React.useMemo(function () {
return {
id: input,
id: listboxId,
isExpanded: isExpanded,
selectedOptionRef: selectedOptionRef,
highlightedOptionRef: highlightedOptionRef,
value: value,
valueLabel: getLabelFromValue(context.value, options)
valueLabel: listboxValueLabel
};
}, [context.value, input, isExpanded, options, value]);
}, [listboxId, isExpanded, value, listboxValueLabel, selectedOptionRef, highlightedOptionRef]);
} ////////////////////////////////////////////////////////////////////////////////
function getLabelFromValue(value, options) {
var selected = options.find(function (option) {
return option.value === value;
});
return selected ? selected.label : null;
}
function isListboxExpanded(state) {
return [ListboxStates.Navigating, ListboxStates.NavigatingWithKeys, ListboxStates.Interacting, ListboxStates.Searching].includes(state);
return [ListboxStates.Navigating, ListboxStates.Open, ListboxStates.Dragging, ListboxStates.Interacting].includes(state);
}
function useKeyDown() {
var _useContext10 = React.useContext(ListboxContext),
listboxDisabled = _useContext10.disabled,
onValueChange = _useContext10.onValueChange,
_useContext10$state$c = _useContext10.state.context,
navigationValue = _useContext10$state$c.navigationValue,
typeaheadQuery = _useContext10$state$c.typeaheadQuery,
send = _useContext10.send;
var _useContext9 = React.useContext(ListboxContext),
listboxDisabled = _useContext9.disabled,
onValueChange = _useContext9.onValueChange,
_useContext9$stateDat = _useContext9.stateData,
navigationValue = _useContext9$stateDat.navigationValue,
typeaheadQuery = _useContext9$stateDat.typeaheadQuery,
send = _useContext9.send;
var _useContext11 = React.useContext(ListboxDescendantContext),
options = _useContext11.descendants;
var _useContext10 = React.useContext(ListboxDescendantContext),
options = _useContext10.descendants;

@@ -1538,8 +1655,21 @@ React.useEffect(function () {

function useOptionId(value) {
var _useContext12 = React.useContext(ListboxContext),
input = _useContext12.ids.input;
var _useContext11 = React.useContext(ListboxContext),
listboxId = _useContext11.listboxId;
return value ? utils.makeId("option-" + value, input) : undefined;
return value ? utils.makeId("option-" + value, listboxId) : undefined;
}
function targetIsInPopover(element, popover) {
return !!(element === popover || (popover === null || popover === void 0 ? void 0 : popover.contains(element)));
}
function useControlledStateSync(controlPropValue, internalValue, send) {
var _useRef = React.useRef(controlPropValue != null),
isControlled = _useRef.current;
if (isControlled && controlPropValue !== internalValue) {
send();
}
}
exports.Listbox = Listbox;

@@ -1546,0 +1676,0 @@ exports.ListboxArrow = ListboxArrow;

2

dist/listbox.cjs.production.min.js

@@ -1,2 +0,2 @@

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t);require("prop-types");var a,o,i,r,u=require("@reach/auto-id"),l=require("@reach/popover"),s=e(l),c=require("@reach/descendants"),d=require("@reach/utils"),v=require("@reach/machine");function f(){return(f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function g(e,t){if(null==e)return{};var n,a,o={},i=Object.keys(e);for(a=0;a<i.length;a++)t.indexOf(n=i[a])>=0||(o[n]=e[n]);return o}!function(e){e.Idle="IDLE",e.Navigating="NAVIGATING",e.NavigatingWithKeys="NAVIGATING_WITH_KEYS",e.Searching="SEARCHING",e.Interacting="INTERACTING"}(i||(i={})),function(e){e.ButtonMouseDown="BUTTON_MOUSE_DOWN",e.ButtonMouseUp="BUTTON_MOUSE_UP",e.Blur="BLUR",e.ClearNavSelection="CLEAR_NAV_SELECTION",e.ClearTypeahead="CLEAR_TYPEAHEAD",e.GetDerivedData="GET_DERIVED_DATA",e.KeyDownEscape="KEY_DOWN_ESCAPE",e.KeyDownEnter="KEY_DOWN_ENTER",e.KeyDownSpace="KEY_DOWN_SPACE",e.KeyDownNavigate="KEY_DOWN_NAVIGATE",e.KeyDownSearch="KEY_DOWN_SEARCH",e.KeyDownTab="KEY_DOWN_TAB",e.KeyDownShiftTab="KEY_DOWN_SHIFT_TAB",e.Navigate="NAVIGATE",e.OptionMouseEnter="OPTION_MOUSE_ENTER",e.OutsideMouseDown="OUTSIDE_MOUSE_DOWN",e.ValueChange="VALUE_CHANGE",e.OptionStartClick="OPTION_START_CLICK",e.OptionFinishClick="OPTION_FINISH_CLICK",e.PopoverPointerDown="POPOVER_POINTER_DOWN",e.PopoverPointerUp="POPOVER_POINTER_UP",e.UpdateAfterTypeahead="UPDATE_AFTER_TYPEAHEAD"}(r||(r={}));var p=v.assign({navigationValue:null}),b=v.assign({typeaheadQuery:null}),y=v.assign({value:function(e,t){return t.value}}),h=v.assign({navigationValue:function(e,t){return t.value}}),E=v.assign({navigationValue:function(e){var t,n,a=(t=e.value)?e.options.find((function(e){return e.value===t})):void 0;return a&&!a.disabled?e.value:(null===(n=e.options.find((function(e){return!e.disabled})))||void 0===n?void 0:n.value)||null}});function x(e,t){if(t.type===r.Blur){var n=t.refs,a=n.list,o=n.popover,i=t.relatedTarget,u=o&&d.getOwnerDocument(o)||document;return!(u.activeElement===a||!o||o.contains(i||u.activeElement))}return!1}function w(e,t){if(t.type===r.OutsideMouseDown){var n=t.refs,a=n.button,o=n.popover,i=t.relatedTarget;return!(i===a||!a||a.contains(i)||!o||o.contains(i))}return!1}function D(e,t){return!!e.options.find((function(t){return t.value===e.navigationValue}))}function N(e,t){var n=t.refs.popover,a=t.relatedTarget;return!(n&&a&&n.contains(a))&&D(e)}function I(e,t){requestAnimationFrame((function(){t.refs.list&&t.refs.list.focus()}))}function m(e,t){t.refs.button&&t.refs.button.focus()}function C(e,t){return!t.disabled}function K(e,t){return t.type!==r.Navigate||!t||!t.disabled}function O(e,t){return!(t&&t.disabled||null==e.navigationValue)}function T(e,t){t.callback&&t.callback(t.value)}function M(e,t){if(t.type===r.KeyDownEnter){var n=t.refs.hiddenInput;if(n&&n.form){var a=n.form.querySelector("button,[type='submit']");a&&a.click()}}}var R=v.assign({typeaheadQuery:function(e,t){return(e.typeaheadQuery||"")+t.query}}),S=v.assign({typeaheadQuery:""}),_=v.assign({value:function(e,t){if(t.type===r.UpdateAfterTypeahead&&t.query){var n=V(e.options,t.query);if(n&&!n.disabled)return t.callback&&t.callback(n.value),n.value}return e.value}}),A=v.assign({navigationValue:function(e,t){if(t.type===r.UpdateAfterTypeahead&&t.query){var n=V(e.options,t.query);if(n&&!n.disabled)return n.value}return e.navigationValue}}),L=((a={})[r.GetDerivedData]={actions:v.assign((function(e,t){return f({},e,{},t.data,{refs:f({},e.refs,{},t.data.refs||{})})}))},a[r.ValueChange]={actions:[y,T]},a),k=((o={})[r.ClearNavSelection]={actions:[p,I]},o[r.OptionFinishClick]={target:i.Idle,actions:[y,b,m,T],cond:O},o[r.KeyDownEnter]={target:i.Idle,actions:[y,b,m,T],cond:O},o[r.KeyDownSpace]={target:i.Idle,actions:[y,b,m,T],cond:O},o[r.ButtonMouseDown]={target:i.Idle,actions:[m]},o[r.KeyDownEscape]={target:i.Idle,actions:[m]},o);function V(e,t){return void 0===t&&(t=""),t&&e.find((function(e){return!e.disabled&&e.label&&e.label.toLowerCase().startsWith(t.toLowerCase())}))||null}var W=c.createDescendantContext("ListboxDescendantContext"),U=d.createNamedContext("ListboxContext",{}),P=d.createNamedContext("ListboxGroupContext",{}),B=t.forwardRef((function(e,a){var o=e["aria-labelledby"],l=e["aria-label"],s=e.children,y=e.defaultValue,m=e.disabled,O=void 0!==m&&m,T=e.form,V=e.name,P=e.onChange,B=e.required,q=e.value,F=e._componentName,j=void 0===F?"ListboxInput":F,G=g(e,["aria-labelledby","aria-label","children","defaultValue","disabled","form","name","onChange","required","value","_componentName"]),Y=t.useRef(null!=q).current,H=c.useDescendants(),Q=H[0],z=H[1],Z=t.useRef(!1),$=t.useRef(!1),ee=t.useRef(null),te=t.useRef(null),ne=t.useRef(null),ae=t.useRef(null),oe=t.useRef(null),ie=v.useCreateMachine(function(e){var t,n,a,o,u,l;return{id:"listbox",initial:i.Idle,context:{value:e.value,refs:{button:null,input:null,list:null,popover:null,hiddenInput:null},options:[],navigationValue:null,typeaheadQuery:null},states:(l={},l[i.Idle]={on:f({},L,(t={},t[r.ButtonMouseDown]={target:i.Navigating,actions:[E],cond:C},t[r.KeyDownSpace]={target:i.NavigatingWithKeys,actions:[E,I],cond:C},t[r.KeyDownSearch]={target:i.Idle,actions:R,cond:C},t[r.UpdateAfterTypeahead]={target:i.Idle,actions:[_],cond:C},t[r.ClearTypeahead]={target:i.Idle,actions:S},t[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[E,b,I],cond:C},t[r.KeyDownEnter]={actions:[M],cond:C},t))},l[i.Interacting]={entry:[p],on:f({},L,{},k,(n={},n[r.KeyDownEnter]=i.Interacting,n[r.Blur]=[{target:i.Idle,cond:x,actions:b},{target:i.Navigating,cond:N},{target:i.Interacting,actions:b}],n[r.OutsideMouseDown]=[{target:i.Idle,cond:w,actions:b},{target:i.Navigating,cond:D},{target:i.Interacting,actions:b}],n[r.Navigate]={target:i.Navigating,actions:[h],cond:K},n[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},n))},l[i.Navigating]={on:f({},L,{},k,(a={},a[r.Blur]=[{target:i.Idle,cond:x,actions:b},{target:i.Navigating,cond:N},{target:i.Interacting,actions:b}],a[r.OutsideMouseDown]=[{target:i.Idle,cond:w,actions:b},{target:i.Navigating,cond:D},{target:i.Interacting,actions:b}],a[r.ButtonMouseUp]={target:i.Navigating,actions:[E,I]},a[r.Navigate]={target:i.Navigating,actions:[h],cond:K},a[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},a[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},a[r.UpdateAfterTypeahead]={actions:[A]},a[r.ClearTypeahead]={actions:S},a))},l[i.NavigatingWithKeys]={on:f({},L,{},k,(o={},o[r.Blur]=[{target:i.Idle,cond:x,actions:b},{target:i.NavigatingWithKeys,cond:N},{target:i.Interacting,actions:b}],o[r.OutsideMouseDown]=[{target:i.Idle,cond:w,actions:b},{target:i.NavigatingWithKeys,cond:D},{target:i.Interacting,actions:b}],o[r.Navigate]={target:i.Navigating,actions:[h],cond:K},o[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},o[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},o[r.UpdateAfterTypeahead]={actions:[A]},o[r.ClearTypeahead]={actions:S},o))},l[i.Searching]={on:f({},L,{},k,(u={},u[r.Blur]=[{target:i.Idle,cond:x,actions:b},{target:i.Searching,cond:N},{target:i.Interacting,actions:b}],u[r.OutsideMouseDown]=[{target:i.Idle,cond:w,actions:b},{target:i.Searching,cond:D},{target:i.Interacting,actions:b}],u[r.Navigate]={target:i.Navigating,actions:[h,b],cond:K},u[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},u[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},u[r.UpdateAfterTypeahead]={actions:[A]},u[r.ClearTypeahead]={actions:S},u))},l)}}({value:(Y?q:y)||null})),re=v.useMachineLogger(v.useMachine(ie,{button:ee,hiddenInput:te,input:ne,list:ae,popover:oe}),!1),ue=re[0],le=re[1],se=u.useId(G.id),ce=G.id||d.makeId("listbox-input",se),de=d.useForkedRef(ne,a),ve=t.useMemo((function(){return J(ue.context.value,Q)}),[Q,ue.context.value]),fe={ariaLabel:l,disabled:O,ids:{label:o,input:ce,listbox:d.makeId("listbox",ce),button:d.makeId("button",ce)},listboxValue:ue.context.value,listboxValueLabel:ve,mouseEventStartedRef:$,mouseMovedRef:Z,onValueChange:P,refs:{button:ee,hiddenInput:te,input:ne,list:ae,popover:oe},send:le,state:ue};d.useControlledSwitchWarning(q,"value",j);var ge=t.useRef(!1);if(!Y&&!y&&!ge.current&&Q.length){ge.current=!0;var pe=Q.find((function(e){return!e.disabled}));pe&&pe.value&&le({type:r.ValueChange,value:pe.value})}Y&&q!==ue.context.value&&le({type:r.ValueChange,value:q}),d.useIsomorphicLayoutEffect((function(){le({type:r.GetDerivedData,data:{options:Q}})}),[Q,le]),t.useEffect((function(){function e(e){le({type:r.OutsideMouseDown,relatedTarget:e.relatedTarget||e.target})}return window.addEventListener("mousedown",e),function(){window.removeEventListener("mousedown",e)}}),[le]);var be=t.useMemo((function(){return{id:ce,isExpanded:X(ue.value),value:ue.context.value,valueLabel:ve,expanded:X(ue.value)}}),[ue.context.value,ue.value,ce,ve]);return t.useEffect((function(){return d.checkStyles("listbox")}),[]),n.createElement(c.DescendantProvider,{context:W,items:Q,set:z},n.createElement(U.Provider,{value:fe},n.createElement("div",Object.assign({},G,{ref:de,"data-reach-listbox-input":"","data-state":X(ue.value)?"expanded":"closed","data-value":ue.context.value,id:ce}),d.isFunction(s)?s(be):s),(T||V||B)&&n.createElement("input",{ref:te,disabled:O,form:T,name:V,readOnly:!0,required:B,tabIndex:-1,type:"text",value:ue.context.value||""})))})),q=t.forwardRef((function(e,a){var o=e.arrow,i=void 0===o?"▼":o,r=e.button,u=e.children,l=e.portal,s=void 0===l||l,c=g(e,["arrow","button","children","portal"]);return n.createElement(B,Object.assign({},c,{_componentName:"Listbox",ref:a}),(function(e){var a=e.value,o=e.valueLabel;return n.createElement(t.Fragment,null,n.createElement(F,{arrow:i,children:r?d.isFunction(r)?r({value:a,label:o}):r:void 0}),n.createElement(G,{portal:s},n.createElement(Y,null,u)))}))})),F=d.forwardRefWithAs((function(e,a){var o=e["aria-label"],i=e.arrow,u=void 0!==i&&i,l=e.as,s=void 0===l?"span":l,c=e.children,v=e.onKeyDown,f=e.onMouseDown,p=e.onMouseUp,b=g(e,["aria-label","arrow","as","children","onKeyDown","onMouseDown","onMouseUp"]),y=t.useContext(U),h=y.disabled,E=y.ids,x=E.button,w=E.label,D=y.mouseEventStartedRef,N=y.state,I=y.send,m=y.listboxValueLabel,C=N.context.value,K=d.useForkedRef(y.refs.button,a),O=Z(),T=X(N.value),M=t.useMemo((function(){return c?d.isFunction(c)?c({isExpanded:T,label:m,value:C,expanded:T}):c:m}),[c,m,T,C]);return n.createElement(s,Object.assign({"aria-disabled":h||void 0,"aria-expanded":T||void 0,"aria-haspopup":"listbox","aria-labelledby":o?void 0:[w,x].filter(Boolean).join(" "),"aria-label":o,role:"button",tabIndex:h?-1:0},b,{ref:K,"data-reach-listbox-button":"",id:x,onKeyDown:d.wrapEvent(v,O),onMouseDown:d.wrapEvent(f,(function(e){d.isRightClick(e.nativeEvent)||(D.current=!0,e.preventDefault(),I({type:r.ButtonMouseDown,disabled:h}))})),onMouseUp:d.wrapEvent(p,(function(e){D.current&&(d.isRightClick(e.nativeEvent)||(e.preventDefault(),I({type:r.ButtonMouseUp}))),D.current=!1}))}),M,u&&n.createElement(j,null,d.isBoolean(u)?null:u))})),j=t.forwardRef((function(e,a){var o=e.children,i=g(e,["children"]),r=X(t.useContext(U).state.value),u=r?"▲":"▼";return n.createElement("span",Object.assign({"aria-hidden":!0},i,{ref:a,"data-reach-listbox-arrow":"","data-expanded":r?"":void 0}),d.isFunction(o)?o({isExpanded:r,expanded:r}):o||u)})),G=t.forwardRef((function(e,a){var o=e.position,i=void 0===o?l.positionMatchWidth:o,u=e.onBlur,c=e.onKeyDown,v=e.portal,p=void 0===v||v,b=g(e,["position","onBlur","onKeyDown","portal"]),y=t.useContext(U),h=y.refs,E=h.button,x=y.send,w=y.state.value,D=d.useForkedRef(h.popover,a),N=Z(),I=f({hidden:!X(w),tabIndex:-1},b,{ref:D,"data-reach-listbox-popover":"",onBlur:d.wrapEvent(u,(function(e){var t=e.nativeEvent;requestAnimationFrame((function(){x({type:r.Blur,relatedTarget:t.relatedTarget||t.target})}))})),onKeyDown:d.wrapEvent(c,N)});return p?n.createElement(s,Object.assign({},I,{targetRef:E,position:i})):n.createElement("div",Object.assign({},I))})),Y=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"ul":o,r=g(e,["as"]),u=t.useContext(U),l=u.ariaLabel,s=u.ids,c=s.listbox,v=s.label,f=u.state,p=f.context,b=p.value,y=p.navigationValue,h=f.value,E=d.useForkedRef(a,u.refs.list);return n.createElement(i,Object.assign({"aria-activedescendant":$(X(h)?y:b),"aria-labelledby":l?void 0:v,"aria-label":l,role:"listbox",tabIndex:-1},r,{ref:E,"data-reach-listbox-list":"",id:c}))})),H=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"li":o,u=e.children,l=e.disabled,s=e.onMouseDown,v=e.onMouseEnter,f=e.onMouseLeave,p=e.onMouseMove,b=e.onMouseUp,y=e.onTouchStart,h=e.value,E=e.label,x=g(e,["as","children","disabled","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseUp","onTouchStart","value","label"]),w=t.useContext(U),D=w.send,N=w.state,I=N.value,m=N.context,C=m.value,K=m.navigationValue,O=w.onValueChange,T=w.mouseEventStartedRef,M=w.mouseMovedRef,R=t.useState(E),S=R[1],_=E||R[0]||"",A=t.useRef(null);c.useDescendant({context:W,element:A.current,value:h,label:_,disabled:!!l});var L=t.useCallback((function(e){E||S((function(t){return e.textContent&&t!==e.textContent?e.textContent:t||""}))}),[E]),k=d.useForkedRef(L,a,A),V=!!K&&K===h,P=C===h;return n.createElement(i,Object.assign({"aria-selected":(X(I)?V:P)||void 0,"aria-disabled":l||void 0,role:"option"},x,{ref:k,id:$(h),"data-reach-listbox-option":"","data-current":P?"":void 0,"data-label":_,"data-value":h,onMouseDown:d.wrapEvent(s,(function(e){e.preventDefault(),T.current=!0,d.isRightClick(e.nativeEvent)||D({type:r.OptionStartClick})})),onMouseEnter:d.wrapEvent(v,(function(){M.current&&(M.current=!1,D({type:r.Navigate,value:h,disabled:!!l}))})),onMouseLeave:d.wrapEvent(f,(function(){D({type:r.ClearNavSelection})})),onMouseMove:d.wrapEvent(p,(function(){M.current=!0,K!==h&&D({type:r.Navigate,value:h,disabled:!!l})})),onMouseUp:d.wrapEvent(b,(function(e){T.current&&(T.current=!1,d.isRightClick(e.nativeEvent)||D({type:r.OptionFinishClick,value:h,callback:O,disabled:!!l}))})),onTouchStart:d.wrapEvent(y,(function(){D({type:r.Navigate,value:h,disabled:!!l})}))}),u)})),Q=t.forwardRef((function(e,a){var o=e.label,i=e.children,r=g(e,["label","children"]),l=t.useContext(U).ids.listbox,s=d.makeId("label",u.useId(r.id),l);return n.createElement(P.Provider,{value:{labelId:s}},n.createElement("div",Object.assign({"aria-labelledby":s,role:"group"},r,{"data-reach-listbox-group":"",ref:a}),o&&n.createElement(z,null,o),i))})),z=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"span":o,r=g(e,["as"]),u=t.useContext(P);return n.createElement(i,Object.assign({role:"presentation"},r,{ref:a,"data-reach-listbox-group-label":"",id:u.labelId}))}));function J(e,t){var n=t.find((function(t){return t.value===e}));return n?n.label:null}function X(e){return[i.Navigating,i.NavigatingWithKeys,i.Interacting,i.Searching].includes(e)}function Z(){var e=t.useContext(U),n=e.disabled,a=e.onValueChange,o=e.state.context,i=o.navigationValue,u=o.typeaheadQuery,l=e.send,s=t.useContext(W).descendants;t.useEffect((function(){u&&l({type:r.UpdateAfterTypeahead,query:u,callback:a});var e=window.setTimeout((function(){null!=u&&l({type:r.ClearTypeahead})}),1e3);return function(){window.clearTimeout(e)}}),[a,l,u]);var v=s.findIndex((function(e){return e.value===i}));return d.wrapEvent((function(e){var t=e.key,o=d.isString(t)&&1===t.length,u=s.find((function(e){return e.value===i}));switch(t){case"Enter":return void l({type:r.KeyDownEnter,value:i,callback:a,disabled:!!((null==u?void 0:u.disabled)||n)});case" ":return e.preventDefault(),void l({type:r.KeyDownSpace,value:i,callback:a,disabled:!!((null==u?void 0:u.disabled)||n)});case"Escape":return void l({type:r.KeyDownEscape});case"Tab":return void l({type:e.shiftKey?r.KeyDownShiftTab:r.KeyDownTab});default:return void(o&&l({type:r.KeyDownSearch,query:t,disabled:n}))}}),c.useDescendantKeyDown(W,{currentIndex:v,orientation:"vertical",key:"index",rotate:!0,filter:function(e){return!e.disabled},callback:function(e){l({type:r.KeyDownNavigate,value:s[e].value,disabled:n})}}))}function $(e){var n=t.useContext(U);return e?d.makeId("option-"+e,n.ids.input):void 0}exports.Listbox=q,exports.ListboxArrow=j,exports.ListboxButton=F,exports.ListboxGroup=Q,exports.ListboxGroupLabel=z,exports.ListboxInput=B,exports.ListboxList=Y,exports.ListboxOption=H,exports.ListboxPopover=G,exports.useListboxContext=function(){var e=t.useContext(U),n=e.ids.input,a=e.state,o=a.value,i=a.context,r=t.useContext(W).descendants,u=X(o);return t.useMemo((function(){return{id:n,isExpanded:u,value:o,valueLabel:J(i.value,r)}}),[i.value,n,u,r,o])};
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t);require("prop-types");var a,o,i,r=require("@reach/auto-id"),u=require("@reach/popover"),s=e(u),l=require("@reach/descendants"),d=require("@reach/utils"),c=require("@reach/machine");function g(){return(g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function v(e,t){if(null==e)return{};var n,a,o={},i=Object.keys(e);for(a=0;a<i.length;a++)t.indexOf(n=i[a])>=0||(o[n]=e[n]);return o}!function(e){e.Idle="IDLE",e.Open="OPEN",e.Navigating="NAVIGATING",e.Dragging="DRAGGING",e.Interacting="INTERACTING"}(o||(o={})),function(e){e.ButtonMouseDown="BUTTON_MOUSE_DOWN",e.ButtonMouseUp="BUTTON_MOUSE_UP",e.Blur="BLUR",e.ClearNavSelection="CLEAR_NAV_SELECTION",e.ClearTypeahead="CLEAR_TYPEAHEAD",e.GetDerivedData="GET_DERIVED_DATA",e.KeyDownEscape="KEY_DOWN_ESCAPE",e.KeyDownEnter="KEY_DOWN_ENTER",e.KeyDownSpace="KEY_DOWN_SPACE",e.KeyDownNavigate="KEY_DOWN_NAVIGATE",e.KeyDownSearch="KEY_DOWN_SEARCH",e.KeyDownTab="KEY_DOWN_TAB",e.KeyDownShiftTab="KEY_DOWN_SHIFT_TAB",e.OptionTouchStart="OPTION_TOUCH_START",e.OptionMouseMove="OPTION_MOUSE_MOVE",e.OptionMouseEnter="OPTION_MOUSE_ENTER",e.OutsideMouseDown="OUTSIDE_MOUSE_DOWN",e.OutsideMouseUp="OUTSIDE_MOUSE_UP",e.ValueChange="VALUE_CHANGE",e.OptionMouseDown="OPTION_MOUSE_DOWN",e.OptionMouseUp="OPTION_MOUSE_UP",e.PopoverPointerDown="POPOVER_POINTER_DOWN",e.PopoverPointerUp="POPOVER_POINTER_UP",e.UpdateAfterTypeahead="UPDATE_AFTER_TYPEAHEAD"}(i||(i={}));var p=c.assign({navigationValue:null}),f=c.assign({typeaheadQuery:null}),b=c.assign({value:function(e,t){return t.value}}),E=c.assign({navigationValue:function(e,t){return t.value}}),y=c.assign({navigationValue:function(e){var t,n,a=(t=e.value)?e.options.find((function(e){return e.value===t})):void 0;return a&&!a.disabled?e.value:(null===(n=e.options.find((function(e){return!e.disabled})))||void 0===n?void 0:n.value)||null}});function D(e,t){if(t.type===i.Blur){var n=t.refs,a=n.list,o=n.popover,r=t.relatedTarget,u=o&&d.getOwnerDocument(o)||document;return!(u.activeElement===a||!o||o.contains(r||u.activeElement))}return!1}function w(e,t){if(t.type===i.OutsideMouseDown||t.type===i.OutsideMouseUp){var n=t.refs,a=n.button,o=n.popover,r=t.relatedTarget;return!(r===a||!a||a.contains(r)||!o||o.contains(r))}return!1}function h(e,t){return!!e.options.find((function(t){return t.value===e.navigationValue}))}function O(e,t){var n=t.refs,a=n.popover,o=n.list,i=t.relatedTarget;return!(a&&i&&a.contains(i)&&i!==o)&&h(e)}function x(e,t){requestAnimationFrame((function(){t.refs.list&&t.refs.list.focus()}))}function I(e,t){t.refs.button&&t.refs.button.focus()}function M(e,t){return!t.disabled}function N(e,t){return t.type!==i.OptionTouchStart||!t||!t.disabled}function m(e,t){return!(t&&t.disabled||null==e.navigationValue)}function T(e,t){t.callback&&t.callback(t.value)}function R(e,t){if(t.type===i.KeyDownEnter){var n=t.refs.hiddenInput;if(n&&n.form){var a=n.form.querySelector("button,[type='submit']");a&&a.click()}}}var C=c.assign({typeaheadQuery:function(e,t){return(e.typeaheadQuery||"")+t.query}}),K=c.assign({value:function(e,t){if(t.type===i.UpdateAfterTypeahead&&t.query){var n=U(e.options,t.query);if(n&&!n.disabled)return t.callback&&t.callback(n.value),n.value}return e.value}}),_=c.assign({navigationValue:function(e,t){if(t.type===i.UpdateAfterTypeahead&&t.query){var n=U(e.options,t.query);if(n&&!n.disabled)return n.value}return e.navigationValue}}),S=((a={})[i.GetDerivedData]={actions:c.assign((function(e,t){return g({},e,{},t.data)}))},a[i.ValueChange]={actions:[b,T]},a);function U(e,t){return void 0===t&&(t=""),t&&e.find((function(e){return!e.disabled&&e.label&&e.label.toLowerCase().startsWith(t.toLowerCase())}))||null}var L=l.createDescendantContext("ListboxDescendantContext"),A=d.createNamedContext("ListboxContext",{}),P=d.createNamedContext("ListboxGroupContext",{}),B=t.forwardRef((function(e,a){var u=e["aria-labelledby"],s=e["aria-label"],U=e.children,P=e.defaultValue,B=e.disabled,V=void 0!==B&&B,k=e.form,q=e.name,W=e.onChange,j=e.required,G=e.value,F=e._componentName,Y=void 0===F?"ListboxInput":F,H=v(e,["aria-labelledby","aria-label","children","defaultValue","disabled","form","name","onChange","required","value","_componentName"]),Q=t.useRef(null!=G),z=l.useDescendants(),J=z[0],X=z[1],$=d.useCallbackProp(W),ee=t.useRef(null),te=t.useRef(null),ne=t.useRef(null),ae=t.useRef(null),oe=t.useRef(null),ie=t.useRef(null),re=t.useRef(null),ue=c.useCreateMachine(function(e){var t,n,a,r,u,s;return{id:"listbox",initial:o.Idle,context:{value:e.value,options:[],navigationValue:null,typeaheadQuery:null},states:(s={},s[o.Idle]={on:g({},S,(t={},t[i.ButtonMouseDown]={target:o.Open,actions:[y],cond:M},t[i.KeyDownSpace]={target:o.Navigating,actions:[y,x],cond:M},t[i.KeyDownSearch]={target:o.Idle,actions:C,cond:M},t[i.UpdateAfterTypeahead]={target:o.Idle,actions:[K],cond:M},t[i.ClearTypeahead]={target:o.Idle,actions:f},t[i.KeyDownNavigate]={target:o.Navigating,actions:[y,f,x],cond:M},t[i.KeyDownEnter]={actions:[R],cond:M},t))},s[o.Interacting]={entry:[p],on:g({},S,(n={},n[i.ClearNavSelection]={actions:[p,x]},n[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},n[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},n[i.ButtonMouseDown]={target:o.Idle,actions:[I]},n[i.KeyDownEscape]={target:o.Idle,actions:[I]},n[i.OptionMouseDown]={target:o.Dragging},n[i.OutsideMouseDown]=[{target:o.Idle,cond:w,actions:f},{target:o.Dragging,actions:f,cond:h}],n[i.OutsideMouseUp]=[{target:o.Idle,cond:w,actions:f},{target:o.Navigating,cond:h},{target:o.Interacting,actions:f}],n[i.KeyDownEnter]=o.Interacting,n[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],n[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},n[i.OptionMouseEnter]={target:o.Navigating,actions:[E,f],cond:N},n[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},n))},s[o.Open]={on:g({},S,(a={},a[i.ClearNavSelection]={actions:[p]},a[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},a[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},a[i.ButtonMouseDown]={target:o.Idle,actions:[I]},a[i.KeyDownEscape]={target:o.Idle,actions:[I]},a[i.OptionMouseDown]={target:o.Dragging},a[i.OutsideMouseDown]=[{target:o.Idle,cond:w,actions:f},{target:o.Dragging,cond:h},{target:o.Interacting,actions:f}],a[i.OutsideMouseUp]=[{target:o.Idle,cond:w,actions:f},{target:o.Navigating,cond:h},{target:o.Interacting,actions:f}],a[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],a[i.ButtonMouseUp]={target:o.Navigating,actions:[y,x]},a[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},a[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},a[i.KeyDownSearch]={target:o.Navigating,actions:C},a[i.UpdateAfterTypeahead]={actions:[_]},a[i.ClearTypeahead]={actions:f},a[i.OptionMouseMove]=[{target:o.Dragging,actions:[E],cond:N},{target:o.Dragging}],a))},s[o.Dragging]={on:g({},S,(r={},r[i.ClearNavSelection]={actions:[p]},r[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},r[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},r[i.ButtonMouseDown]={target:o.Idle,actions:[I]},r[i.KeyDownEscape]={target:o.Idle,actions:[I]},r[i.OptionMouseDown]={target:o.Dragging},r[i.OutsideMouseDown]=[{target:o.Idle,cond:w,actions:f},{target:o.Navigating,cond:h},{target:o.Interacting,actions:f}],r[i.OutsideMouseUp]=[{target:o.Idle,cond:w,actions:f},{target:o.Navigating,cond:h,actions:x},{target:o.Interacting,actions:[f,x]}],r[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],r[i.ButtonMouseUp]={target:o.Navigating,actions:[y,x]},r[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},r[i.OptionMouseEnter]={target:o.Dragging,actions:[E,f],cond:N},r[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},r[i.KeyDownSearch]={target:o.Navigating,actions:C},r[i.UpdateAfterTypeahead]={actions:[_]},r[i.ClearTypeahead]={actions:f},r[i.OptionMouseMove]=[{target:o.Navigating,actions:[E],cond:N},{target:o.Navigating}],r[i.OptionMouseUp]={target:o.Idle,actions:[b,f,I,T],cond:m},r))},s[o.Navigating]={on:g({},S,(u={},u[i.ClearNavSelection]={actions:[p,x]},u[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},u[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},u[i.ButtonMouseDown]={target:o.Idle,actions:[I]},u[i.KeyDownEscape]={target:o.Idle,actions:[I]},u[i.OptionMouseDown]={target:o.Dragging},u[i.OutsideMouseDown]=[{target:o.Idle,cond:w,actions:f},{target:o.Navigating,cond:h},{target:o.Interacting,actions:f}],u[i.OutsideMouseUp]=[{target:o.Idle,cond:w,actions:f},{target:o.Navigating,cond:h},{target:o.Interacting,actions:f}],u[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],u[i.ButtonMouseUp]={target:o.Navigating,actions:[y,x]},u[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},u[i.OptionMouseEnter]={target:o.Navigating,actions:[E,f],cond:N},u[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},u[i.KeyDownSearch]={target:o.Navigating,actions:C},u[i.UpdateAfterTypeahead]={actions:[_]},u[i.ClearTypeahead]={actions:f},u[i.OptionMouseMove]=[{target:o.Navigating,actions:[E],cond:N},{target:o.Navigating}],u))},s)}}({value:(Q.current?G:P)||null})),se=c.useMachine(ue,{button:ee,hiddenInput:te,highlightedOption:ne,input:ae,list:oe,popover:ie,selectedOption:re},!1),le=se[0],de=se[1],ce=r.useId(H.id),ge=H.id||d.makeId("listbox-input",ce),ve=d.useForkedRef(ae,a),pe=t.useMemo((function(){var e=J.find((function(e){return e.value===le.context.value}));return e?e.label:null}),[J,le.context.value]),fe=function(e){return[o.Navigating,o.Open,o.Dragging,o.Interacting].includes(e)}(le.value),be=t.useMemo((function(){return{ariaLabel:s,ariaLabelledBy:u,disabled:V,isExpanded:fe,listboxId:ge,listboxValueLabel:pe,onValueChange:$,buttonRef:ee,listRef:oe,popoverRef:ie,selectedOptionRef:re,highlightedOptionRef:ne,send:de,state:le.value,stateData:le.context}}),[s,u,le.value,le.context,V,ge,fe,$,de,pe]),Ee=t.useRef(!1);if(!Q.current&&null==P&&!Ee.current&&J.length){Ee.current=!0;var ye=J.find((function(e){return!e.disabled}));ye&&ye.value&&de({type:i.ValueChange,value:ye.value})}return d.useControlledSwitchWarning(G,"value",Y),function(e,n,a){t.useRef(null!=e).current&&e!==n&&a()}(G,le.context.value,(function(){de({type:i.ValueChange,value:G})})),d.useIsomorphicLayoutEffect((function(){de({type:i.GetDerivedData,data:{options:J}})}),[J,de]),t.useEffect((function(){function e(e){var t=e.target,n=e.relatedTarget;Z(t,ie.current)||de({type:i.OutsideMouseDown,relatedTarget:n||t})}return fe&&window.addEventListener("mousedown",e),function(){window.removeEventListener("mousedown",e)}}),[de,fe]),t.useEffect((function(){function e(e){var t=e.target,n=e.relatedTarget;Z(t,ie.current)||de({type:i.OutsideMouseUp,relatedTarget:n||t})}return fe&&window.addEventListener("mouseup",e),function(){window.removeEventListener("mouseup",e)}}),[de,fe]),d.useCheckStyles("listbox"),n.createElement(l.DescendantProvider,{context:L,items:J,set:X},n.createElement(A.Provider,{value:be},n.createElement("div",Object.assign({},H,{ref:ve,"data-reach-listbox-input":"","data-state":fe?"expanded":"closed","data-value":le.context.value,id:ge}),d.isFunction(U)?U({id:ge,isExpanded:fe,value:le.context.value,selectedOptionRef:re,highlightedOptionRef:ne,valueLabel:pe,expanded:fe}):U),(k||q||j)&&n.createElement("input",{ref:te,disabled:V,form:k,name:q,readOnly:!0,required:j,tabIndex:-1,type:"text",value:le.context.value||""})))})),V=t.forwardRef((function(e,a){var o=e.arrow,i=void 0===o?"▼":o,r=e.button,u=e.children,s=e.portal,l=void 0===s||s,c=v(e,["arrow","button","children","portal"]);return n.createElement(B,Object.assign({},c,{_componentName:"Listbox",ref:a}),(function(e){var a=e.value,o=e.valueLabel;return n.createElement(t.Fragment,null,n.createElement(q,{arrow:i,children:r?d.isFunction(r)?r({value:a,label:o}):r:void 0}),n.createElement(F,{portal:l},n.createElement(Y,null,u)))}))})),k=d.forwardRefWithAs((function(e,a){var o=e["aria-label"],r=e.arrow,u=void 0!==r&&r,s=e.as,l=void 0===s?"span":s,c=e.children,g=e.onKeyDown,p=e.onMouseDown,f=e.onMouseUp,b=v(e,["aria-label","arrow","as","children","onKeyDown","onMouseDown","onMouseUp"]),E=t.useContext(A),y=E.ariaLabelledBy,D=E.disabled,w=E.isExpanded,h=E.listboxId,O=E.send,x=E.listboxValueLabel,I=E.stateData.value,M=d.useForkedRef(E.buttonRef,a),N=J(),m=d.makeId("button",h),T=t.useMemo((function(){return c?d.isFunction(c)?c({isExpanded:w,label:x,value:I,expanded:w}):c:x}),[c,x,w,I]);return n.createElement(l,Object.assign({"aria-disabled":D||void 0,"aria-expanded":w||void 0,"aria-haspopup":"listbox","aria-labelledby":o?void 0:[y,m].filter(Boolean).join(" "),"aria-label":o,role:"button",tabIndex:D?-1:0},b,{ref:M,"data-reach-listbox-button":"",id:m,onKeyDown:d.wrapEvent(g,N),onMouseDown:d.wrapEvent(p,(function(e){d.isRightClick(e.nativeEvent)||(e.preventDefault(),e.stopPropagation(),O({type:i.ButtonMouseDown,disabled:D}))})),onMouseUp:d.wrapEvent(f,(function(e){d.isRightClick(e.nativeEvent)||(e.preventDefault(),e.stopPropagation(),O({type:i.ButtonMouseUp}))}))}),T,u&&n.createElement(j,null,d.isBoolean(u)?null:u))})),q=t.memo(k),W=t.forwardRef((function(e,a){var o=e.children,i=v(e,["children"]),r=t.useContext(A).isExpanded;return n.createElement("span",Object.assign({"aria-hidden":!0},i,{ref:a,"data-reach-listbox-arrow":"","data-expanded":r?"":void 0}),d.isFunction(o)?o({isExpanded:r,expanded:r}):o||"▼")})),j=t.memo(W),G=t.forwardRef((function(e,a){var o=e.position,r=void 0===o?u.positionMatchWidth:o,l=e.onBlur,c=e.onKeyDown,p=e.portal,f=void 0===p||p,b=e.unstable_observableRefs,E=v(e,["position","onBlur","onKeyDown","portal","unstable_observableRefs"]),y=t.useContext(A),D=y.buttonRef,w=y.send,h=y.isExpanded,O=d.useForkedRef(y.popoverRef,a),x=J(),I=g({hidden:!h,tabIndex:-1},E,{ref:O,"data-reach-listbox-popover":"",onBlur:d.wrapEvent(l,(function(e){var t=e.nativeEvent;requestAnimationFrame((function(){w({type:i.Blur,relatedTarget:t.relatedTarget||t.target})}))})),onKeyDown:d.wrapEvent(c,x)});return f?n.createElement(s,Object.assign({},I,{targetRef:D,position:r,unstable_observableRefs:b})):n.createElement("div",Object.assign({},I))})),F=t.memo(G),Y=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"ul":o,r=v(e,["as"]),u=t.useContext(A),s=u.ariaLabel,l=u.ariaLabelledBy,c=u.isExpanded,g=u.listboxId,p=u.stateData,f=p.value,b=p.navigationValue,E=d.useForkedRef(a,u.listRef);return n.createElement(i,Object.assign({"aria-activedescendant":X(c?b:f),"aria-labelledby":s?void 0:l,"aria-label":s,role:"listbox",tabIndex:-1},r,{ref:E,"data-reach-listbox-list":"",id:d.makeId("listbox",g)}))})),H=d.forwardRefWithAs((function(e,a){var r=e.as,u=void 0===r?"li":r,s=e.children,c=e.disabled,g=e.onMouseDown,p=e.onMouseEnter,f=e.onMouseLeave,b=e.onMouseMove,E=e.onMouseUp,y=e.onTouchStart,D=e.value,w=e.label,h=v(e,["as","children","disabled","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseUp","onTouchStart","value","label"]),O=t.useContext(A),x=O.highlightedOptionRef,I=O.isExpanded,M=O.onValueChange,N=O.selectedOptionRef,m=O.send,T=O.state,R=O.stateData,C=R.value,K=R.navigationValue,_=t.useState(w),S=_[1],U=w||_[0]||"",P=t.useRef(null);l.useDescendant({context:L,element:P.current,value:D,label:U,disabled:!!c});var B=t.useCallback((function(e){!w&&e&&S((function(t){return e.textContent&&t!==e.textContent?e.textContent:t||""}))}),[w]),V=!!K&&K===D,k=C===D,q=d.useForkedRef(B,a,P,k?N:null,V?x:null);return n.createElement(u,Object.assign({"aria-selected":(I?V:k)||void 0,"aria-disabled":c||void 0,role:"option"},h,{ref:q,id:X(D),"data-reach-listbox-option":"","data-current":k?"":void 0,"data-label":U,"data-value":D,onMouseDown:d.wrapEvent(g,(function(e){d.isRightClick(e.nativeEvent)||(e.preventDefault(),m({type:i.OptionMouseDown}))})),onMouseEnter:d.wrapEvent(p,(function(){m({type:i.OptionMouseEnter,value:D,disabled:!!c})})),onMouseLeave:d.wrapEvent(f,(function(){m({type:i.ClearNavSelection})})),onMouseMove:d.wrapEvent(b,(function(){T!==o.Open&&K===D||m({type:i.OptionMouseMove,value:D,disabled:!!c})})),onMouseUp:d.wrapEvent(E,(function(e){d.isRightClick(e.nativeEvent)||m({type:i.OptionMouseUp,value:D,callback:M,disabled:!!c})})),onTouchStart:d.wrapEvent(y,(function(){m({type:i.OptionTouchStart,value:D,disabled:!!c})}))}),s)})),Q=t.forwardRef((function(e,a){var o=e.label,i=e.children,u=v(e,["label","children"]),s=t.useContext(A).listboxId,l=d.makeId("label",r.useId(u.id),s);return n.createElement(P.Provider,{value:{labelId:l}},n.createElement("div",Object.assign({"aria-labelledby":l,role:"group"},u,{"data-reach-listbox-group":"",ref:a}),o&&n.createElement(z,null,o),i))})),z=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"span":o,r=v(e,["as"]),u=t.useContext(P);return n.createElement(i,Object.assign({role:"presentation"},r,{ref:a,"data-reach-listbox-group-label":"",id:u.labelId}))}));function J(){var e=t.useContext(A),n=e.disabled,a=e.onValueChange,o=e.stateData,r=o.navigationValue,u=o.typeaheadQuery,s=e.send,c=t.useContext(L).descendants;t.useEffect((function(){u&&s({type:i.UpdateAfterTypeahead,query:u,callback:a});var e=window.setTimeout((function(){null!=u&&s({type:i.ClearTypeahead})}),1e3);return function(){window.clearTimeout(e)}}),[a,s,u]);var g=c.findIndex((function(e){return e.value===r}));return d.wrapEvent((function(e){var t=e.key,o=d.isString(t)&&1===t.length,u=c.find((function(e){return e.value===r}));switch(t){case"Enter":return void s({type:i.KeyDownEnter,value:r,callback:a,disabled:!(!(null==u?void 0:u.disabled)&&!n)});case" ":return e.preventDefault(),void s({type:i.KeyDownSpace,value:r,callback:a,disabled:!(!(null==u?void 0:u.disabled)&&!n)});case"Escape":return void s({type:i.KeyDownEscape});case"Tab":return void s({type:e.shiftKey?i.KeyDownShiftTab:i.KeyDownTab});default:return void(o&&s({type:i.KeyDownSearch,query:t,disabled:n}))}}),l.useDescendantKeyDown(L,{currentIndex:g,orientation:"vertical",key:"index",rotate:!0,filter:function(e){return!e.disabled},callback:function(e){s({type:i.KeyDownNavigate,value:c[e].value,disabled:n})}}))}function X(e){var n=t.useContext(A);return e?d.makeId("option-"+e,n.listboxId):void 0}function Z(e,t){return!(e!==t&&!(null==t?void 0:t.contains(e)))}exports.Listbox=V,exports.ListboxArrow=j,exports.ListboxButton=q,exports.ListboxGroup=Q,exports.ListboxGroupLabel=z,exports.ListboxInput=B,exports.ListboxList=Y,exports.ListboxOption=H,exports.ListboxPopover=F,exports.useListboxContext=function(){var e=t.useContext(A),n=e.highlightedOptionRef,a=e.listboxId,o=e.listboxValueLabel,i=e.isExpanded,r=e.selectedOptionRef,u=e.stateData.value;return t.useMemo((function(){return{id:a,isExpanded:i,selectedOptionRef:r,highlightedOptionRef:n,value:u,valueLabel:o}}),[a,i,u,o,r,n])};
//# sourceMappingURL=listbox.cjs.production.min.js.map

871

dist/listbox.esm.js

@@ -1,8 +0,8 @@

import React, { forwardRef, useRef, useMemo, useEffect, Fragment, useContext, useState, useCallback } from 'react';
import React, { forwardRef, useRef, useMemo, useEffect, Fragment, memo, useContext, useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { useId } from '@reach/auto-id';
import Popover, { positionMatchWidth } from '@reach/popover';
import { useDescendants, DescendantProvider, useDescendant, useDescendantKeyDown, createDescendantContext } from '@reach/descendants';
import { getOwnerDocument, makeId, useForkedRef, useControlledSwitchWarning, useIsomorphicLayoutEffect, checkStyles, isFunction, forwardRefWithAs, wrapEvent, isBoolean, isString, createNamedContext, isRightClick } from '@reach/utils';
import { assign, useCreateMachine, useMachineLogger, useMachine } from '@reach/machine';
import { useDescendants, DescendantProvider, useDescendant, createDescendantContext, useDescendantKeyDown } from '@reach/descendants';
import { getOwnerDocument, useCallbackProp, makeId, useForkedRef, useControlledSwitchWarning, useIsomorphicLayoutEffect, useCheckStyles, isFunction, forwardRefWithAs, wrapEvent, createNamedContext, isBoolean, isRightClick, isString } from '@reach/utils';
import { assign, useCreateMachine, useMachine } from '@reach/machine';

@@ -42,3 +42,3 @@ function _extends() {

var _commonEvents, _openEvents;
var _commonEvents;
// States

@@ -50,9 +50,9 @@

// Resting/closed state.
ListboxStates["Idle"] = "IDLE"; // The user is navigate the list with a pointer
ListboxStates["Idle"] = "IDLE"; // Listbox is open but the user is not yet navigating.
ListboxStates["Navigating"] = "NAVIGATING"; // The user is navigate the list with a keyboard
ListboxStates["Open"] = "OPEN"; // The user is navigating the list
ListboxStates["NavigatingWithKeys"] = "NAVIGATING_WITH_KEYS"; // The user is searching for an option with the keyboard
ListboxStates["Navigating"] = "NAVIGATING"; // The user has moused-down but hasn't made a selection yet
ListboxStates["Searching"] = "SEARCHING"; // The user is interacting with arbitrary elements inside the popover
ListboxStates["Dragging"] = "DRAGGING"; // The user is interacting with arbitrary elements inside the popover

@@ -80,10 +80,12 @@ ListboxStates["Interacting"] = "INTERACTING";

ListboxEvents["KeyDownShiftTab"] = "KEY_DOWN_SHIFT_TAB";
ListboxEvents["Navigate"] = "NAVIGATE";
ListboxEvents["OptionTouchStart"] = "OPTION_TOUCH_START";
ListboxEvents["OptionMouseMove"] = "OPTION_MOUSE_MOVE";
ListboxEvents["OptionMouseEnter"] = "OPTION_MOUSE_ENTER";
ListboxEvents["OutsideMouseDown"] = "OUTSIDE_MOUSE_DOWN"; // Uncontrolled value changes come from specific events (click, key, etc.)
ListboxEvents["OutsideMouseDown"] = "OUTSIDE_MOUSE_DOWN";
ListboxEvents["OutsideMouseUp"] = "OUTSIDE_MOUSE_UP"; // Uncontrolled value changes come from specific events (click, key, etc.)
// ValueChange > Value change may have come from somewhere else
ListboxEvents["ValueChange"] = "VALUE_CHANGE";
ListboxEvents["OptionStartClick"] = "OPTION_START_CLICK";
ListboxEvents["OptionFinishClick"] = "OPTION_FINISH_CLICK";
ListboxEvents["OptionMouseDown"] = "OPTION_MOUSE_DOWN";
ListboxEvents["OptionMouseUp"] = "OPTION_MOUSE_UP";
ListboxEvents["PopoverPointerDown"] = "POPOVER_POINTER_DOWN";

@@ -99,3 +101,3 @@ ListboxEvents["PopoverPointerUp"] = "POPOVER_POINTER_UP";

});
var clearTypeaheadQuery = /*#__PURE__*/assign({
var clearTypeahead = /*#__PURE__*/assign({
typeaheadQuery: null

@@ -146,3 +148,3 @@ });

function clickedOutsideOfListbox(data, event) {
if (event.type === ListboxEvents.OutsideMouseDown) {
if (event.type === ListboxEvents.OutsideMouseDown || event.type === ListboxEvents.OutsideMouseUp) {
var _event$refs2 = event.refs,

@@ -168,8 +170,10 @@ button = _event$refs2.button,

function shouldNavigateWithKeys(data, event) {
var popover = event.refs.popover;
var relatedTarget = event.relatedTarget; // When a blur event happens, we want to move to NavigatingWithKeys state
// unless the user is interacting with elements inside the popover...
function shouldNavigate(data, event) {
var _event$refs3 = event.refs,
popover = _event$refs3.popover,
list = _event$refs3.list;
var relatedTarget = event.relatedTarget; // When a blur event happens, we want to move to Navigating state unless the
// user is interacting with elements inside the popover...
if (popover && relatedTarget && popover.contains(relatedTarget)) {
if (popover && relatedTarget && popover.contains(relatedTarget) && relatedTarget !== list) {
return false;

@@ -197,3 +201,3 @@ } // ...otherwise, just make sure the next option is selectable

function optionIsNavigable(data, event) {
if (event.type === ListboxEvents.Navigate) {
if (event.type === ListboxEvents.OptionTouchStart) {
if (event && event.disabled) {

@@ -257,5 +261,2 @@ return false;

});
var clearTypeahead = /*#__PURE__*/assign({
typeaheadQuery: ""
});
var setValueFromTypeahead = /*#__PURE__*/assign({

@@ -290,37 +291,7 @@ value: function value(data, event) {

actions: /*#__PURE__*/assign(function (ctx, event) {
return _extends({}, ctx, {}, event.data, {
refs: _extends({}, ctx.refs, {}, event.data.refs || {})
});
return _extends({}, ctx, {}, event.data);
})
}, _commonEvents[ListboxEvents.ValueChange] = {
actions: [assignValue, selectOption]
}, _commonEvents);
var openEvents = (_openEvents = {}, _openEvents[ListboxEvents.ClearNavSelection] = {
actions: [clearNavigationValue, focusList]
}, _openEvents[ListboxEvents.OptionFinishClick] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeaheadQuery, focusButton, selectOption],
cond: optionIsSelectable
}, _openEvents[ListboxEvents.KeyDownEnter] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeaheadQuery, focusButton, selectOption],
cond: optionIsSelectable
}, _openEvents[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeaheadQuery, focusButton, selectOption],
cond: optionIsSelectable
}, _openEvents[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Idle,
// When the user triggers a mouseDown event on the button, we call
// event.preventDefault() because the browser will naturally call mouseUp
// and click, which will reopen the button (which we don't want). As such,
// the click won't blur the open list or re-focus the trigger, so we call
// `focusButton` to do that manually. We could work around this with
// deferred transitions with xstate, but @xstate/fsm currently doesn't
// support that feature and this works good enough for the moment.
actions: [focusButton]
}, _openEvents[ListboxEvents.KeyDownEscape] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _openEvents); ////////////////////////////////////////////////////////////////////////////////
}, _commonEvents); ////////////////////////////////////////////////////////////////////////////////

@@ -343,9 +314,2 @@ /**

value: value,
refs: {
button: null,
input: null,
list: null,
popover: null,
hiddenInput: null
},
options: [],

@@ -357,7 +321,7 @@ navigationValue: null,

on: _extends({}, commonEvents, (_extends2 = {}, _extends2[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Navigating,
target: ListboxStates.Open,
actions: [navigateFromCurrentValue],
cond: listboxIsNotDisabled
}, _extends2[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.NavigatingWithKeys,
target: ListboxStates.Navigating,
actions: [navigateFromCurrentValue, focusList],

@@ -377,4 +341,4 @@ cond: listboxIsNotDisabled

}, _extends2[ListboxEvents.KeyDownNavigate] = {
target: ListboxStates.NavigatingWithKeys,
actions: [navigateFromCurrentValue, clearTypeaheadQuery, focusList],
target: ListboxStates.Navigating,
actions: [navigateFromCurrentValue, clearTypeahead, focusList],
cond: listboxIsNotDisabled

@@ -387,45 +351,101 @@ }, _extends2[ListboxEvents.KeyDownEnter] = {

entry: [clearNavigationValue],
on: _extends({}, commonEvents, {}, openEvents, (_extends3 = {}, _extends3[ListboxEvents.KeyDownEnter] = ListboxStates.Interacting, _extends3[ListboxEvents.Blur] = [{
on: _extends({}, commonEvents, (_extends3 = {}, _extends3[ListboxEvents.ClearNavSelection] = {
actions: [clearNavigationValue, focusList]
}, _extends3[ListboxEvents.KeyDownEnter] = {
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeaheadQuery
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends3[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends3[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Idle,
// When the user triggers a mouseDown event on the button, we call
// event.preventDefault() because the browser will naturally send a
// mouseup event and click, which will reopen the button (which we
// don't want). As such, the click won't blur the open list or
// re-focus the trigger, so we call `focusButton` to do that manually.
// We could work around this with deferred transitions with xstate,
// but @xstate/fsm currently doesn't support that feature and this
// works good enough for the moment.
actions: [focusButton]
}, _extends3[ListboxEvents.KeyDownEscape] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends3[ListboxEvents.OptionMouseDown] = {
target: ListboxStates.Dragging
}, _extends3[ListboxEvents.OutsideMouseDown] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeahead
}, {
target: ListboxStates.Dragging,
actions: clearTypeahead,
cond: optionIsActive
}], _extends3[ListboxEvents.OutsideMouseUp] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
cond: shouldNavigateWithKeys
cond: optionIsActive
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends3[ListboxEvents.OutsideMouseDown] = [{
actions: clearTypeahead
}], _extends3[ListboxEvents.KeyDownEnter] = ListboxStates.Interacting, _extends3[ListboxEvents.Blur] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeaheadQuery
cond: listboxLostFocus,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
cond: optionIsActive
cond: shouldNavigate
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends3[ListboxEvents.Navigate] = {
actions: clearTypeahead
}], _extends3[ListboxEvents.OptionTouchStart] = {
target: ListboxStates.Navigating,
actions: [navigate],
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends3[ListboxEvents.OptionMouseEnter] = {
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends3[ListboxEvents.KeyDownNavigate] = {
target: ListboxStates.NavigatingWithKeys,
actions: [navigate, clearTypeaheadQuery, focusList]
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead, focusList]
}, _extends3))
}, _states[ListboxStates.Navigating] = {
on: _extends({}, commonEvents, {}, openEvents, (_extends4 = {}, _extends4[ListboxEvents.Blur] = [{
}, _states[ListboxStates.Open] = {
on: _extends({}, commonEvents, (_extends4 = {}, _extends4[ListboxEvents.ClearNavSelection] = {
actions: [clearNavigationValue]
}, _extends4[ListboxEvents.KeyDownEnter] = {
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeaheadQuery
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends4[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends4[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends4[ListboxEvents.KeyDownEscape] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends4[ListboxEvents.OptionMouseDown] = {
target: ListboxStates.Dragging
}, _extends4[ListboxEvents.OutsideMouseDown] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
cond: shouldNavigateWithKeys
target: ListboxStates.Dragging,
cond: optionIsActive
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends4[ListboxEvents.OutsideMouseDown] = [{
actions: clearTypeahead
}], _extends4[ListboxEvents.OutsideMouseUp] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeaheadQuery
actions: clearTypeahead
}, {

@@ -436,15 +456,25 @@ target: ListboxStates.Navigating,

target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
actions: clearTypeahead
}], _extends4[ListboxEvents.Blur] = [{
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
cond: shouldNavigate
}, {
target: ListboxStates.Interacting,
actions: clearTypeahead
}], _extends4[ListboxEvents.ButtonMouseUp] = {
target: ListboxStates.Navigating,
actions: [navigateFromCurrentValue, focusList]
}, _extends4[ListboxEvents.Navigate] = {
}, _extends4[ListboxEvents.OptionTouchStart] = {
target: ListboxStates.Navigating,
actions: [navigate],
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends4[ListboxEvents.KeyDownNavigate] = {
target: ListboxStates.NavigatingWithKeys,
actions: [navigate, clearTypeaheadQuery, focusList]
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead, focusList]
}, _extends4[ListboxEvents.KeyDownSearch] = {
target: ListboxStates.NavigatingWithKeys,
target: ListboxStates.Navigating,
actions: setTypeahead

@@ -455,33 +485,75 @@ }, _extends4[ListboxEvents.UpdateAfterTypeahead] = {

actions: clearTypeahead
}, _extends4))
}, _states[ListboxStates.NavigatingWithKeys] = {
on: _extends({}, commonEvents, {}, openEvents, (_extends5 = {}, _extends5[ListboxEvents.Blur] = [{
}, _extends4[ListboxEvents.OptionMouseMove] = [{
target: ListboxStates.Dragging,
actions: [navigate],
cond: optionIsNavigable
}, {
target: ListboxStates.Dragging
}], _extends4))
}, _states[ListboxStates.Dragging] = {
on: _extends({}, commonEvents, (_extends5 = {}, _extends5[ListboxEvents.ClearNavSelection] = {
actions: [clearNavigationValue]
}, _extends5[ListboxEvents.KeyDownEnter] = {
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeaheadQuery
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends5[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends5[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends5[ListboxEvents.KeyDownEscape] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends5[ListboxEvents.OptionMouseDown] = {
target: ListboxStates.Dragging
}, _extends5[ListboxEvents.OutsideMouseDown] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeahead
}, {
target: ListboxStates.NavigatingWithKeys,
cond: shouldNavigateWithKeys
target: ListboxStates.Navigating,
cond: optionIsActive
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends5[ListboxEvents.OutsideMouseDown] = [{
actions: clearTypeahead
}], _extends5[ListboxEvents.OutsideMouseUp] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeaheadQuery
actions: clearTypeahead
}, {
target: ListboxStates.NavigatingWithKeys,
cond: optionIsActive
target: ListboxStates.Navigating,
cond: optionIsActive,
actions: focusList
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends5[ListboxEvents.Navigate] = {
actions: [clearTypeahead, focusList]
}], _extends5[ListboxEvents.Blur] = [{
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
actions: [navigate],
cond: shouldNavigate
}, {
target: ListboxStates.Interacting,
actions: clearTypeahead
}], _extends5[ListboxEvents.ButtonMouseUp] = {
target: ListboxStates.Navigating,
actions: [navigateFromCurrentValue, focusList]
}, _extends5[ListboxEvents.OptionTouchStart] = {
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends5[ListboxEvents.OptionMouseEnter] = {
target: ListboxStates.Dragging,
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends5[ListboxEvents.KeyDownNavigate] = {
target: ListboxStates.NavigatingWithKeys,
actions: [navigate, clearTypeaheadQuery, focusList]
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead, focusList]
}, _extends5[ListboxEvents.KeyDownSearch] = {
target: ListboxStates.NavigatingWithKeys,
target: ListboxStates.Navigating,
actions: setTypeahead

@@ -492,33 +564,78 @@ }, _extends5[ListboxEvents.UpdateAfterTypeahead] = {

actions: clearTypeahead
}, _extends5[ListboxEvents.OptionMouseMove] = [{
target: ListboxStates.Navigating,
actions: [navigate],
cond: optionIsNavigable
}, {
target: ListboxStates.Navigating
}], _extends5[ListboxEvents.OptionMouseUp] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends5))
}, _states[ListboxStates.Searching] = {
on: _extends({}, commonEvents, {}, openEvents, (_extends6 = {}, _extends6[ListboxEvents.Blur] = [{
}, _states[ListboxStates.Navigating] = {
on: _extends({}, commonEvents, (_extends6 = {}, _extends6[ListboxEvents.ClearNavSelection] = {
actions: [clearNavigationValue, focusList]
}, _extends6[ListboxEvents.KeyDownEnter] = {
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeaheadQuery
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends6[ListboxEvents.KeyDownSpace] = {
target: ListboxStates.Idle,
actions: [assignValue, clearTypeahead, focusButton, selectOption],
cond: optionIsSelectable
}, _extends6[ListboxEvents.ButtonMouseDown] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends6[ListboxEvents.KeyDownEscape] = {
target: ListboxStates.Idle,
actions: [focusButton]
}, _extends6[ListboxEvents.OptionMouseDown] = {
target: ListboxStates.Dragging
}, _extends6[ListboxEvents.OutsideMouseDown] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeahead
}, {
target: ListboxStates.Searching,
cond: shouldNavigateWithKeys
target: ListboxStates.Navigating,
cond: optionIsActive
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends6[ListboxEvents.OutsideMouseDown] = [{
actions: clearTypeahead
}], _extends6[ListboxEvents.OutsideMouseUp] = [{
target: ListboxStates.Idle,
cond: clickedOutsideOfListbox,
actions: clearTypeaheadQuery
actions: clearTypeahead
}, {
target: ListboxStates.Searching,
target: ListboxStates.Navigating,
cond: optionIsActive
}, {
target: ListboxStates.Interacting,
actions: clearTypeaheadQuery
}], _extends6[ListboxEvents.Navigate] = {
actions: clearTypeahead
}], _extends6[ListboxEvents.Blur] = [{
target: ListboxStates.Idle,
cond: listboxLostFocus,
actions: clearTypeahead
}, {
target: ListboxStates.Navigating,
actions: [navigate, clearTypeaheadQuery],
cond: shouldNavigate
}, {
target: ListboxStates.Interacting,
actions: clearTypeahead
}], _extends6[ListboxEvents.ButtonMouseUp] = {
target: ListboxStates.Navigating,
actions: [navigateFromCurrentValue, focusList]
}, _extends6[ListboxEvents.OptionTouchStart] = {
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends6[ListboxEvents.OptionMouseEnter] = {
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead],
cond: optionIsNavigable
}, _extends6[ListboxEvents.KeyDownNavigate] = {
target: ListboxStates.NavigatingWithKeys,
actions: [navigate, clearTypeaheadQuery, focusList]
target: ListboxStates.Navigating,
actions: [navigate, clearTypeahead, focusList]
}, _extends6[ListboxEvents.KeyDownSearch] = {
target: ListboxStates.NavigatingWithKeys,
target: ListboxStates.Navigating,
actions: setTypeahead

@@ -529,3 +646,9 @@ }, _extends6[ListboxEvents.UpdateAfterTypeahead] = {

actions: clearTypeahead
}, _extends6))
}, _extends6[ListboxEvents.OptionMouseMove] = [{
target: ListboxStates.Navigating,
actions: [navigate],
cond: optionIsNavigable
}, {
target: ListboxStates.Navigating
}], _extends6))
}, _states)

@@ -553,5 +676,3 @@ };

var DEBUG = process.env.NODE_ENV !== "production" ? // set here if we want to debug during development
false : // leave this alone!
false; ////////////////////////////////////////////////////////////////////////////////
var DEBUG = false; ////////////////////////////////////////////////////////////////////////////////
// ListboxContext

@@ -580,3 +701,3 @@

name = _ref.name,
onChange = _ref.onChange,
onChangeProp = _ref.onChange,
required = _ref.required,

@@ -588,42 +709,34 @@ valueProp = _ref.value,

var _useRef = useRef(valueProp != null),
isControlled = _useRef.current;
var isControlled = useRef(valueProp != null);
var _useDescendants = useDescendants(),
options = _useDescendants[0],
setOptions = _useDescendants[1]; // We will track when a mouse has moved in a ref, then reset it to false each
// time a popover closes. This is useful because we want the selected value of
// the listbox to be highlighted when the user opens it, but if the pointer
// is resting above an option it will steal the highlight.
// TODO: Use state machine instead
setOptions = _useDescendants[1];
var onChange = useCallbackProp(onChangeProp); // DOM refs
var mouseMovedRef = useRef(false); // If a user clicks the button while the listbox is open, the blur event
// will close the popover and send us back to IDLE. The mousup event will
// then fire and send us right back to NAVIGATING, which we probably don't
// want.
// TODO: We can probably do this better in the state machine, but for now
// this ref will track where these mouse events are starting so we can
// conditionally send events based on this value. Old habits die hard 🙃
var mouseEventStartedRef = useRef(false); // DOM refs
var button = useRef(null);
var hiddenInput = useRef(null);
var input = useRef(null);
var list = useRef(null);
var popover = useRef(null);
var buttonRef = useRef(null);
var hiddenInputRef = useRef(null);
var highlightedOptionRef = useRef(null);
var inputRef = useRef(null);
var listRef = useRef(null);
var popoverRef = useRef(null);
var selectedOptionRef = useRef(null);
var machine = useCreateMachine(createMachineDefinition({
value: (isControlled ? valueProp : defaultValue) || null
// The initial value of our machine should come from the `value` or
// `defaultValue` props if they exist.
value: (isControlled.current ? valueProp : defaultValue) || null
}));
var _useMachineLogger = useMachineLogger(useMachine(machine, {
button: button,
hiddenInput: hiddenInput,
input: input,
list: list,
popover: popover
}), DEBUG),
current = _useMachineLogger[0],
send = _useMachineLogger[1]; // IDs for aria attributes
var _useMachine = useMachine(machine, {
button: buttonRef,
hiddenInput: hiddenInputRef,
highlightedOption: highlightedOptionRef,
input: inputRef,
list: listRef,
popover: popoverRef,
selectedOption: selectedOptionRef
}, DEBUG),
state = _useMachine[0],
send = _useMachine[1]; // IDs for aria attributes

@@ -634,3 +747,3 @@

var id = props.id || makeId("listbox-input", _id);
var ref = useForkedRef(input, forwardedRef); // If the button has children, we just render them as the label.
var ref = useForkedRef(inputRef, forwardedRef); // If the button has children, we just render them as the label.
// Otherwise we'll find the option with a value that matches the listbox value

@@ -644,33 +757,31 @@ // and use its label in the button. We'll get that here and send it to the

var valueLabel = useMemo(function () {
return getLabelFromValue(current.context.value, options);
}, [options, current.context.value]); // TODO: Remove duplication and memoize
var selected = options.find(function (option) {
return option.value === state.context.value;
});
return selected ? selected.label : null;
}, [options, state.context.value]);
var isExpanded = isListboxExpanded(state.value); // TODO: Remove duplication and memoize
var context = {
ariaLabel: ariaLabel,
disabled: disabled,
ids: {
label: ariaLabelledBy,
input: id,
listbox: makeId("listbox", id),
button: makeId("button", id)
},
listboxValue: current.context.value,
listboxValueLabel: valueLabel,
mouseEventStartedRef: mouseEventStartedRef,
mouseMovedRef: mouseMovedRef,
onValueChange: onChange,
refs: {
button: button,
hiddenInput: hiddenInput,
input: input,
list: list,
popover: popover
},
send: send,
state: current
};
useControlledSwitchWarning(valueProp, "value", _componentName); // For uncontrolled listbox components where no `defaultValue` is provided, we
var context = useMemo(function () {
return {
ariaLabel: ariaLabel,
ariaLabelledBy: ariaLabelledBy,
disabled: disabled,
isExpanded: isExpanded,
listboxId: id,
listboxValueLabel: valueLabel,
onValueChange: onChange,
buttonRef: buttonRef,
listRef: listRef,
popoverRef: popoverRef,
selectedOptionRef: selectedOptionRef,
highlightedOptionRef: highlightedOptionRef,
send: send,
state: state.value,
stateData: state.context
};
}, [ariaLabel, ariaLabelledBy, state.value, state.context, disabled, id, isExpanded, onChange, send, valueLabel]); // For uncontrolled listbox components where no `defaultValue` is provided, we
// will update the value based on the value of the first selectable option.
// We call the update directly because:
// A) we only ever need to do this once, so we can guard with a mounted ref
// A) we only ever need to do this once, so we can guard with a ref
// B) useLayoutEffect races useDecendant, so we might not have options yet

@@ -681,19 +792,24 @@ // C) useEffect will cause a flash

if (!isControlled && !defaultValue && !mounted.current && options.length) {
mounted.current = true;
var first = options.find(function (option) {
return !option.disabled;
});
if (!isControlled.current && // the app is not controlling state
defaultValue == null && // there is no default value
!mounted.current && // we haven't done this already
options.length // we have some options
) {
mounted.current = true;
var first = options.find(function (option) {
return !option.disabled;
});
if (first && first.value) {
send({
type: ListboxEvents.ValueChange,
value: first.value
});
if (first && first.value) {
send({
type: ListboxEvents.ValueChange,
value: first.value
});
}
}
} // We need to get some data from props to pass to the state machine in the
// event that they change
useControlledSwitchWarning(valueProp, "value", _componentName); // Even if the app controls state, we still need to update it internally to
// run the state machine transitions
if (isControlled && valueProp !== current.context.value) {
useControlledStateSync(valueProp, state.context.value, function () {
send({

@@ -703,4 +819,3 @@ type: ListboxEvents.ValueChange,

});
}
});
useIsomorphicLayoutEffect(function () {

@@ -715,29 +830,44 @@ send({

useEffect(function () {
function listener(event) {
function handleMouseDown(event) {
var target = event.target,
relatedTarget = event.relatedTarget;
send({
type: ListboxEvents.OutsideMouseDown,
relatedTarget: relatedTarget || target
});
if (!targetIsInPopover(target, popoverRef.current)) {
send({
type: ListboxEvents.OutsideMouseDown,
relatedTarget: relatedTarget || target
});
}
}
window.addEventListener("mousedown", listener);
if (isExpanded) {
window.addEventListener("mousedown", handleMouseDown);
}
return function () {
window.removeEventListener("mousedown", listener);
window.removeEventListener("mousedown", handleMouseDown);
};
}, [send]);
var childrenProps = useMemo(function () {
return {
id: id,
isExpanded: isListboxExpanded(current.value),
value: current.context.value,
valueLabel: valueLabel,
// TODO: Remove in 1.0
expanded: isListboxExpanded(current.value)
}, [send, isExpanded]);
useEffect(function () {
function handleMouseUp(event) {
var target = event.target,
relatedTarget = event.relatedTarget;
if (!targetIsInPopover(target, popoverRef.current)) {
send({
type: ListboxEvents.OutsideMouseUp,
relatedTarget: relatedTarget || target
});
}
}
if (isExpanded) {
window.addEventListener("mouseup", handleMouseUp);
}
return function () {
window.removeEventListener("mouseup", handleMouseUp);
};
}, [current.context.value, current.value, id, valueLabel]);
useEffect(function () {
return checkStyles("listbox");
}, []);
}, [send, isExpanded]);
useCheckStyles("listbox");
return React.createElement(DescendantProvider, {

@@ -752,7 +882,16 @@ context: ListboxDescendantContext,

"data-reach-listbox-input": "",
"data-state": isListboxExpanded(current.value) ? "expanded" : "closed",
"data-value": current.context.value,
"data-state": isExpanded ? "expanded" : "closed",
"data-value": state.context.value,
id: id
}), isFunction(children) ? children(childrenProps) : children), (form || name || required) && React.createElement("input", {
ref: hiddenInput,
}), isFunction(children) ? children({
id: id,
isExpanded: isExpanded,
value: state.context.value,
selectedOptionRef: selectedOptionRef,
highlightedOptionRef: highlightedOptionRef,
valueLabel: valueLabel,
// TODO: Remove in 1.0
expanded: isExpanded
}) : children), (form || name || required) && React.createElement("input", {
ref: hiddenInputRef,
disabled: disabled,

@@ -765,3 +904,3 @@ form: form,

type: "text",
value: current.context.value || ""
value: state.context.value || ""
})));

@@ -845,3 +984,3 @@ });

var ListboxButton = /*#__PURE__*/forwardRefWithAs(function ListboxButton(_ref4, forwardedRef) {
var ListboxButtonImpl = /*#__PURE__*/forwardRefWithAs(function ListboxButton(_ref4, forwardedRef) {
var ariaLabel = _ref4["aria-label"],

@@ -859,13 +998,12 @@ _ref4$arrow = _ref4.arrow,

var _useContext = useContext(ListboxContext),
ariaLabelledBy = _useContext.ariaLabelledBy,
buttonRef = _useContext.buttonRef,
disabled = _useContext.disabled,
_useContext$ids = _useContext.ids,
buttonId = _useContext$ids.button,
labelId = _useContext$ids.label,
mouseEventStartedRef = _useContext.mouseEventStartedRef,
buttonRef = _useContext.refs.button,
state = _useContext.state,
isExpanded = _useContext.isExpanded,
listboxId = _useContext.listboxId,
stateData = _useContext.stateData,
send = _useContext.send,
listboxValueLabel = _useContext.listboxValueLabel;
var listboxValue = state.context.value;
var listboxValue = stateData.value;
var ref = useForkedRef(buttonRef, forwardedRef);

@@ -876,4 +1014,4 @@ var handleKeyDown = useKeyDown();

if (!isRightClick(event.nativeEvent)) {
mouseEventStartedRef.current = true;
event.preventDefault();
event.stopPropagation();
send({

@@ -887,15 +1025,12 @@ type: ListboxEvents.ButtonMouseDown,

function handleMouseUp(event) {
if (mouseEventStartedRef.current) {
if (!isRightClick(event.nativeEvent)) {
event.preventDefault();
send({
type: ListboxEvents.ButtonMouseUp
});
}
if (!isRightClick(event.nativeEvent)) {
event.preventDefault();
event.stopPropagation();
send({
type: ListboxEvents.ButtonMouseUp
});
}
mouseEventStartedRef.current = false;
}
var isExpanded = isListboxExpanded(state.value); // If the button has children, we just render them as the label
var id = makeId("button", listboxId); // If the button has children, we just render them as the label
// If a user needs the label on the server to prevent hydration mismatch

@@ -927,3 +1062,3 @@ // errors, they need to control the state of the component and pass a label

"aria-haspopup": "listbox",
"aria-labelledby": ariaLabel ? undefined : [labelId, buttonId].filter(Boolean).join(" "),
"aria-labelledby": ariaLabel ? undefined : [ariaLabelledBy, id].filter(Boolean).join(" "),
"aria-label": ariaLabel,

@@ -939,3 +1074,3 @@ // Identifies the element as a button widget.

"data-reach-listbox-button": "",
id: buttonId,
id: id,
onKeyDown: wrapEvent(onKeyDown, handleKeyDown),

@@ -948,9 +1083,11 @@ onMouseDown: wrapEvent(onMouseDown, handleMouseDown),

if (process.env.NODE_ENV !== "production") {
ListboxButton.displayName = "ListboxButton";
ListboxButton.propTypes = {
ListboxButtonImpl.displayName = "ListboxButton";
ListboxButtonImpl.propTypes = {
arrow: /*#__PURE__*/PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
children: /*#__PURE__*/PropTypes.oneOfType([PropTypes.node, PropTypes.func])
};
} ////////////////////////////////////////////////////////////////////////////////
}
var ListboxButton = /*#__PURE__*/memo(ListboxButtonImpl); ////////////////////////////////////////////////////////////////////////////////
/**

@@ -964,4 +1101,3 @@ * ListboxArrow

var ListboxArrow = /*#__PURE__*/forwardRef(function ListboxArrow(_ref5, forwardedRef) {
var ListboxArrowImpl = /*#__PURE__*/forwardRef(function ListboxArrow(_ref5, forwardedRef) {
var children = _ref5.children,

@@ -971,6 +1107,4 @@ props = _objectWithoutPropertiesLoose(_ref5, ["children"]);

var _useContext2 = useContext(ListboxContext),
state = _useContext2.state.value;
isExpanded = _useContext2.isExpanded;
var isExpanded = isListboxExpanded(state);
var defaultArrow = isExpanded ? "▲" : "▼";
return React.createElement("span", Object.assign({

@@ -986,12 +1120,14 @@ "aria-hidden": true

expanded: isExpanded
}) : children || defaultArrow);
}) : children || "▼");
});
if (process.env.NODE_ENV !== "production") {
ListboxArrow.displayName = "ListboxArrow";
ListboxArrow.propTypes = {
ListboxArrowImpl.displayName = "ListboxArrow";
ListboxArrowImpl.propTypes = {
children: /*#__PURE__*/PropTypes.oneOfType([PropTypes.node, PropTypes.func])
};
} ////////////////////////////////////////////////////////////////////////////////
}
var ListboxArrow = /*#__PURE__*/memo(ListboxArrowImpl); ////////////////////////////////////////////////////////////////////////////////
/**

@@ -1005,4 +1141,3 @@ * ListboxPopover

var ListboxPopover = /*#__PURE__*/forwardRef(function ListboxPopover(_ref6, forwardedRef) {
var ListboxPopoverImpl = /*#__PURE__*/forwardRef(function ListboxPopover(_ref6, forwardedRef) {
var _ref6$position = _ref6.position,

@@ -1014,10 +1149,10 @@ position = _ref6$position === void 0 ? positionMatchWidth : _ref6$position,

portal = _ref6$portal === void 0 ? true : _ref6$portal,
props = _objectWithoutPropertiesLoose(_ref6, ["position", "onBlur", "onKeyDown", "portal"]);
unstable_observableRefs = _ref6.unstable_observableRefs,
props = _objectWithoutPropertiesLoose(_ref6, ["position", "onBlur", "onKeyDown", "portal", "unstable_observableRefs"]);
var _useContext3 = useContext(ListboxContext),
_useContext3$refs = _useContext3.refs,
popoverRef = _useContext3$refs.popover,
buttonRef = _useContext3$refs.button,
buttonRef = _useContext3.buttonRef,
popoverRef = _useContext3.popoverRef,
send = _useContext3.send,
state = _useContext3.state.value;
isExpanded = _useContext3.isExpanded;

@@ -1028,3 +1163,3 @@ var ref = useForkedRef(popoverRef, forwardedRef);

var commonProps = _extends({
hidden: !isListboxExpanded(state),
hidden: !isExpanded,
tabIndex: -1

@@ -1050,3 +1185,4 @@ }, props, {

targetRef: buttonRef,
position: position
position: position,
unstable_observableRefs: unstable_observableRefs
})) : React.createElement("div", Object.assign({}, commonProps));

@@ -1056,4 +1192,4 @@ });

if (process.env.NODE_ENV !== "production") {
ListboxPopover.displayName = "ListboxPopover";
ListboxPopover.propTypes = {
ListboxPopoverImpl.displayName = "ListboxPopover";
ListboxPopoverImpl.propTypes = {
children: PropTypes.node.isRequired,

@@ -1063,4 +1199,6 @@ portal: PropTypes.bool,

};
} ////////////////////////////////////////////////////////////////////////////////
}
var ListboxPopover = /*#__PURE__*/memo(ListboxPopoverImpl); ////////////////////////////////////////////////////////////////////////////////
/**

@@ -1074,3 +1212,2 @@ * ListboxList

var ListboxList = /*#__PURE__*/forwardRefWithAs(function ListboxList(_ref7, forwardedRef) {

@@ -1083,11 +1220,9 @@ var _ref7$as = _ref7.as,

ariaLabel = _useContext4.ariaLabel,
_useContext4$ids = _useContext4.ids,
listboxId = _useContext4$ids.listbox,
labelId = _useContext4$ids.label,
listRef = _useContext4.refs.list,
_useContext4$state = _useContext4.state,
_useContext4$state$co = _useContext4$state.context,
value = _useContext4$state$co.value,
navigationValue = _useContext4$state$co.navigationValue,
state = _useContext4$state.value;
ariaLabelledBy = _useContext4.ariaLabelledBy,
isExpanded = _useContext4.isExpanded,
listboxId = _useContext4.listboxId,
listRef = _useContext4.listRef,
_useContext4$stateDat = _useContext4.stateData,
value = _useContext4$stateDat.value,
navigationValue = _useContext4$stateDat.navigationValue;

@@ -1103,4 +1238,4 @@ var ref = useForkedRef(forwardedRef, listRef);

, Object.assign({
"aria-activedescendant": useOptionId(isListboxExpanded(state) ? navigationValue : value),
"aria-labelledby": ariaLabel ? undefined : labelId,
"aria-activedescendant": useOptionId(isExpanded ? navigationValue : value),
"aria-labelledby": ariaLabel ? undefined : ariaLabelledBy,
"aria-label": ariaLabel,

@@ -1116,3 +1251,3 @@ // An element that contains or owns all the listbox options has role

"data-reach-listbox-list": "",
id: listboxId
id: makeId("listbox", listboxId)
}));

@@ -1155,11 +1290,11 @@ });

var _useContext5 = useContext(ListboxContext),
highlightedOptionRef = _useContext5.highlightedOptionRef,
isExpanded = _useContext5.isExpanded,
onValueChange = _useContext5.onValueChange,
selectedOptionRef = _useContext5.selectedOptionRef,
send = _useContext5.send,
_useContext5$state = _useContext5.state,
state = _useContext5$state.value,
_useContext5$state$co = _useContext5$state.context,
listboxValue = _useContext5$state$co.value,
navigationValue = _useContext5$state$co.navigationValue,
onValueChange = _useContext5.onValueChange,
mouseEventStartedRef = _useContext5.mouseEventStartedRef,
mouseMovedRef = _useContext5.mouseMovedRef;
state = _useContext5.state,
_useContext5$stateDat = _useContext5.stateData,
listboxValue = _useContext5$stateDat.value,
navigationValue = _useContext5$stateDat.navigationValue;

@@ -1183,3 +1318,3 @@ var _useState = useState(labelProp),

var getLabelFromDomNode = useCallback(function (node) {
if (!labelProp) {
if (!labelProp && node) {
setLabel(function (prevState) {

@@ -1194,18 +1329,12 @@ if (node.textContent && prevState !== node.textContent) {

}, [labelProp]);
var ref = useForkedRef(getLabelFromDomNode, forwardedRef, ownRef);
var isHighlighted = navigationValue ? navigationValue === value : false;
var isSelected = listboxValue === value;
var ref = useForkedRef(getLabelFromDomNode, forwardedRef, ownRef, isSelected ? selectedOptionRef : null, isHighlighted ? highlightedOptionRef : null);
function handleMouseEnter() {
// If the user hasn't moved their mouse but mouse enter event still fires
// (this happens if the popup opens due to a keyboard event), we don't
// want to change the navigationSelect value
if (mouseMovedRef.current) {
mouseMovedRef.current = false;
send({
type: ListboxEvents.Navigate,
value: value,
disabled: !!disabled
});
}
send({
type: ListboxEvents.OptionMouseEnter,
value: value,
disabled: !!disabled
});
}

@@ -1215,3 +1344,3 @@

send({
type: ListboxEvents.Navigate,
type: ListboxEvents.OptionTouchStart,
value: value,

@@ -1230,8 +1359,6 @@ disabled: !!disabled

// Prevent blur event from firing and bubbling to the popover
event.preventDefault();
mouseEventStartedRef.current = true;
if (!isRightClick(event.nativeEvent)) {
event.preventDefault();
send({
type: ListboxEvents.OptionStartClick
type: ListboxEvents.OptionMouseDown
});

@@ -1242,13 +1369,9 @@ }

function handleMouseUp(event) {
if (mouseEventStartedRef.current) {
mouseEventStartedRef.current = false;
if (!isRightClick(event.nativeEvent)) {
send({
type: ListboxEvents.OptionFinishClick,
value: value,
callback: onValueChange,
disabled: !!disabled
});
}
if (!isRightClick(event.nativeEvent)) {
send({
type: ListboxEvents.OptionMouseUp,
value: value,
callback: onValueChange,
disabled: !!disabled
});
}

@@ -1258,9 +1381,9 @@ }

function handleMouseMove() {
mouseMovedRef.current = true; // We don't really *need* this guard if we put this in the state machine,
// but in this case it seems wise not to needlessly run our transitions
// every time the user's mouse moves. Seems like a lot.
if (navigationValue !== value) {
// We don't really *need* these guards since we put all of our transition
// logic in the state machine, but in this case it seems wise not to
// needlessly run our transitions every time the user's mouse moves. Seems
// like a lot. 🙃
if (state === ListboxStates.Open || navigationValue !== value) {
send({
type: ListboxEvents.Navigate,
type: ListboxEvents.OptionMouseMove,
value: value,

@@ -1276,3 +1399,3 @@ disabled: !!disabled

, Object.assign({
"aria-selected": (isListboxExpanded(state) ? isHighlighted : isSelected) || undefined,
"aria-selected": (isExpanded ? isHighlighted : isSelected) || undefined,
"aria-disabled": disabled || undefined,

@@ -1323,3 +1446,3 @@ // Each option in the listbox has role `option` and is a DOM descendant

var _useContext6 = useContext(ListboxContext),
listboxId = _useContext6.ids.listbox;
listboxId = _useContext6.listboxId;

@@ -1345,3 +1468,3 @@ var labelId = makeId("label", useId(props.id), listboxId);

ListboxGroup.propTypes = {
label: PropTypes.string
label: /*#__PURE__*/PropTypes.oneOfType([PropTypes.string, PropTypes.element])
};

@@ -1392,43 +1515,36 @@ } ////////////////////////////////////////////////////////////////////////////////

var _useContext8 = useContext(ListboxContext),
input = _useContext8.ids.input,
_useContext8$state = _useContext8.state,
value = _useContext8$state.value,
context = _useContext8$state.context;
highlightedOptionRef = _useContext8.highlightedOptionRef,
listboxId = _useContext8.listboxId,
listboxValueLabel = _useContext8.listboxValueLabel,
isExpanded = _useContext8.isExpanded,
selectedOptionRef = _useContext8.selectedOptionRef,
value = _useContext8.stateData.value;
var _useContext9 = useContext(ListboxDescendantContext),
options = _useContext9.descendants;
var isExpanded = isListboxExpanded(value);
return useMemo(function () {
return {
id: input,
id: listboxId,
isExpanded: isExpanded,
selectedOptionRef: selectedOptionRef,
highlightedOptionRef: highlightedOptionRef,
value: value,
valueLabel: getLabelFromValue(context.value, options)
valueLabel: listboxValueLabel
};
}, [context.value, input, isExpanded, options, value]);
}, [listboxId, isExpanded, value, listboxValueLabel, selectedOptionRef, highlightedOptionRef]);
} ////////////////////////////////////////////////////////////////////////////////
function getLabelFromValue(value, options) {
var selected = options.find(function (option) {
return option.value === value;
});
return selected ? selected.label : null;
}
function isListboxExpanded(state) {
return [ListboxStates.Navigating, ListboxStates.NavigatingWithKeys, ListboxStates.Interacting, ListboxStates.Searching].includes(state);
return [ListboxStates.Navigating, ListboxStates.Open, ListboxStates.Dragging, ListboxStates.Interacting].includes(state);
}
function useKeyDown() {
var _useContext10 = useContext(ListboxContext),
listboxDisabled = _useContext10.disabled,
onValueChange = _useContext10.onValueChange,
_useContext10$state$c = _useContext10.state.context,
navigationValue = _useContext10$state$c.navigationValue,
typeaheadQuery = _useContext10$state$c.typeaheadQuery,
send = _useContext10.send;
var _useContext9 = useContext(ListboxContext),
listboxDisabled = _useContext9.disabled,
onValueChange = _useContext9.onValueChange,
_useContext9$stateDat = _useContext9.stateData,
navigationValue = _useContext9$stateDat.navigationValue,
typeaheadQuery = _useContext9$stateDat.typeaheadQuery,
send = _useContext9.send;
var _useContext11 = useContext(ListboxDescendantContext),
options = _useContext11.descendants;
var _useContext10 = useContext(ListboxDescendantContext),
options = _useContext10.descendants;

@@ -1531,9 +1647,22 @@ useEffect(function () {

function useOptionId(value) {
var _useContext12 = useContext(ListboxContext),
input = _useContext12.ids.input;
var _useContext11 = useContext(ListboxContext),
listboxId = _useContext11.listboxId;
return value ? makeId("option-" + value, input) : undefined;
return value ? makeId("option-" + value, listboxId) : undefined;
}
function targetIsInPopover(element, popover) {
return !!(element === popover || (popover === null || popover === void 0 ? void 0 : popover.contains(element)));
}
function useControlledStateSync(controlPropValue, internalValue, send) {
var _useRef = useRef(controlPropValue != null),
isControlled = _useRef.current;
if (isControlled && controlPropValue !== internalValue) {
send();
}
}
export { Listbox, ListboxArrow, ListboxButton, ListboxGroup, ListboxGroupLabel, ListboxInput, ListboxList, ListboxOption, ListboxPopover, useListboxContext };
//# sourceMappingURL=listbox.esm.js.map

36

dist/machine.d.ts

@@ -5,5 +5,5 @@ import { MachineEventWithRefs, StateMachine } from "@reach/machine";

Idle = "IDLE",
Open = "OPEN",
Navigating = "NAVIGATING",
NavigatingWithKeys = "NAVIGATING_WITH_KEYS",
Searching = "SEARCHING",
Dragging = "DRAGGING",
Interacting = "INTERACTING"

@@ -25,8 +25,10 @@ }

KeyDownShiftTab = "KEY_DOWN_SHIFT_TAB",
Navigate = "NAVIGATE",
OptionTouchStart = "OPTION_TOUCH_START",
OptionMouseMove = "OPTION_MOUSE_MOVE",
OptionMouseEnter = "OPTION_MOUSE_ENTER",
OutsideMouseDown = "OUTSIDE_MOUSE_DOWN",
OutsideMouseUp = "OUTSIDE_MOUSE_UP",
ValueChange = "VALUE_CHANGE",
OptionStartClick = "OPTION_START_CLICK",
OptionFinishClick = "OPTION_FINISH_CLICK",
OptionMouseDown = "OPTION_MOUSE_DOWN",
OptionMouseUp = "OPTION_MOUSE_UP",
PopoverPointerDown = "POPOVER_POINTER_DOWN",

@@ -60,2 +62,4 @@ PopoverPointerUp = "POPOVER_POINTER_UP",

popover: HTMLElement | null;
selectedOption: HTMLElement | null;
highlightedOption: HTMLElement | null;
};

@@ -72,6 +76,7 @@ /**

} | {
type: ListboxEvents.OutsideMouseUp;
relatedTarget: EventTarget | null;
} | {
type: ListboxEvents.GetDerivedData;
data: Omit<Partial<ListboxStateData>, "refs"> & {
refs?: Partial<ListboxStateData["refs"]>;
};
data: Partial<ListboxStateData>;
} | {

@@ -85,6 +90,14 @@ type: ListboxEvents.ButtonMouseDown;

} | {
type: ListboxEvents.Navigate;
type: ListboxEvents.OptionTouchStart;
value: ListboxValue;
disabled: boolean;
} | {
type: ListboxEvents.OptionMouseEnter;
value: ListboxValue;
disabled: boolean;
} | {
type: ListboxEvents.OptionMouseMove;
value: ListboxValue;
disabled: boolean;
} | {
type: ListboxEvents.ValueChange;

@@ -114,5 +127,5 @@ value: ListboxValue;

} | {
type: ListboxEvents.OptionStartClick;
type: ListboxEvents.OptionMouseDown;
} | {
type: ListboxEvents.OptionFinishClick;
type: ListboxEvents.OptionMouseUp;
value: ListboxValue | null | undefined;

@@ -141,3 +154,2 @@ callback?: ((newValue: ListboxValue) => void) | null | undefined;

navigationValue: ListboxValue | null;
refs: ListboxNodeRefs;
typeaheadQuery: string | null;

@@ -144,0 +156,0 @@ value: ListboxValue | null;

14

package.json
{
"name": "@reach/listbox",
"version": "0.10.0",
"version": "0.10.1",
"description": "Accessible React listbox input.",

@@ -16,7 +16,7 @@ "author": "React Training <hello@reacttraining.com>",

"dependencies": {
"@reach/auto-id": "^0.10.0",
"@reach/descendants": "^0.10.0",
"@reach/machine": "^0.10.0",
"@reach/popover": "^0.10.0",
"@reach/utils": "^0.10.0",
"@reach/auto-id": "^0.10.1",
"@reach/descendants": "^0.10.1",
"@reach/machine": "^0.10.1",
"@reach/popover": "^0.10.1",
"@reach/utils": "^0.10.1",
"prop-types": "^15.7.2"

@@ -36,3 +36,3 @@ },

],
"gitHead": "e95268bdcebc7f0b5311beff4b6a8e29636decfe"
"gitHead": "c279bc0fb9ae84aa77306c5f1a9909d088bc665c"
}
dist/listbox.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/listbox.cjs.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/listbox.esm.js.map

Sorry, the diff of this file is not supported yet

styles.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc