@reach/listbox - npm Package Compare versions

Comparing version 0.8.7 to 0.9.0

dist/index.d.ts

@@ -6,5 +6,21 @@ /**
  *
+ * TODO: OS-specific behavior (ie, Enter key on native select on Windows)
+ * TODO: Consider hack to implement focus controls in forms on iOS
+ *       https://github.com/angular/material/issues/8440
+ *       Instead of a hidden select, maybe use a visually hidden select with
+ *       aria-hidden. When that input gets focus, immediate send focus to the
+ *       ListboxButton, then toggle the hidden input's tabIndex to prevent
+ *       re-focusing it (this is just an idea, may not work, no idea how some
+ *       screen-reader would deal with it).
+ * TODO: Write examples showing fallback to a native select menu for users
+ *       without JavaScript enabled and small-screen users.
+ * TODO: Check positioning on mobile near collision points
+ *       https://twitter.com/PipoPeperoni/status/1237597623508275200
+ * TODO: Test arrow key navigation in forms in Firefox.
+ *       Probably similar solution needed for iOS issue above.
+ *       https://twitter.com/GassnerKendall/status/1237778370118598661
+ *
  * @see Docs     https://reacttraining.com/reach-ui/listbox
  * @see Source   https://github.com/reach/reach-ui/tree/master/packages/listbox
- * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox
+ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
  */
@@ -119,3 +135,3 @@ import React from "react";
  */
-export declare const Listbox: React.ForwardRefExoticComponent<Pick<ListboxProps, "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" | "arrow" | "button"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Listbox: React.ForwardRefExoticComponent<Pick<ListboxProps, "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" | "arrow" | "button" | "portal"> & React.RefAttributes<HTMLDivElement>>;
 /**
@@ -143,2 +159,9 @@ * @see Docs https://reacttraining.com/reach-ui/listbox#listbox-props
     children: React.ReactNode;
+    /**
+     * Whether or not the popover should be rendered inside a portal. Defaults to
+     * `true`.
+     *
+     * @see Docs https://reacttraining.com/reach-ui/listbox#listbox-portal
+     */
+    portal?: boolean;
 };
@@ -236,3 +259,3 @@ /**
  */
-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" | "position" | "portal"> & React.RefAttributes<any>>;
+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>>;
 /**
@@ -349,2 +372,3 @@ * @see Docs https://reacttraining.com/reach-ui/listbox#listboxpopover-props
 export interface ListboxContextValue {
+    ariaLabel?: string;
     refs: MachineToReactRefMap<ListboxEvent>;
@@ -351,0 +375,0 @@ disabled: boolean;

dist/index.js

@@ -0,8 +1,7 @@
+'use strict';
 
-'use strict'
-
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./listbox.cjs.production.min.js')
+  module.exports = require('./listbox.cjs.production.min.js');
 } else {
-  module.exports = require('./listbox.cjs.development.js')
-}
+  module.exports = require('./listbox.cjs.development.js');
+}

dist/listbox.cjs.development.js

@@ -569,2 +569,3 @@ 'use strict';
   var ariaLabelledBy = _ref["aria-labelledby"],
+      ariaLabel = _ref["aria-label"],
       children = _ref.children,
@@ -581,3 +582,3 @@ defaultValue = _ref.defaultValue,
       _componentName = _ref$_componentName === void 0 ? "ListboxInput" : _ref$_componentName,
-      props = _objectWithoutPropertiesLoose(_ref, ["aria-labelledby", "children", "defaultValue", "disabled", "form", "name", "onChange", "required", "value", "_componentName"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["aria-labelledby", "aria-label", "children", "defaultValue", "disabled", "form", "name", "onChange", "required", "value", "_componentName"]);
 
@@ -645,2 +646,3 @@ var _useRef = React.useRef(valueProp != null),
     return {
+      ariaLabel: ariaLabel,
       disabled: disabled,
@@ -668,3 +670,3 @@ ids: {
     };
-  }, [ariaLabelledBy, current, disabled, id, onChange, send, valueLabel]);
+  }, [ariaLabel, ariaLabelledBy, current, disabled, id, onChange, send, valueLabel]);
   utils.useControlledSwitchWarning(valueProp, "value", _componentName); // For uncontrolled listbox components where no `defaultValue` is provided, we
@@ -737,3 +739,3 @@ // will update the value based on the value of the first selectable option.
     "data-reach-listbox-input": "",
-    "data-state": utils.stateToAttributeString(current.value),
+    "data-state": isExpanded(current.value) ? "expanded" : "closed",
     "data-value": current.context.value,
@@ -744,9 +746,10 @@ id: id
     valueLabel: valueLabel
-  }) : children), (disabled || form || name || required) && React__default.createElement("input", {
+  }) : children), (form || name || required) && React__default.createElement("input", {
     ref: hiddenInput,
     disabled: disabled,
     form: form,
-    hidden: true,
     name: name,
+    readOnly: true,
     required: required,
+    tabIndex: -1,
     type: "text",
@@ -792,3 +795,5 @@ value: current.context.value || ""
       children = _ref2.children,
-      props = _objectWithoutPropertiesLoose(_ref2, ["arrow", "button", "children"]);
+      _ref2$portal = _ref2.portal,
+      portal = _ref2$portal === void 0 ? true : _ref2$portal,
+      props = _objectWithoutPropertiesLoose(_ref2, ["arrow", "button", "children", "portal"]);
 
@@ -807,3 +812,5 @@ return React__default.createElement(ListboxInput, Object.assign({}, props, {
       }) : button : undefined
-    }), React__default.createElement(ListboxPopover, null, React__default.createElement(ListboxList, null, children)));
+    }), React__default.createElement(ListboxPopover, {
+      portal: portal
+    }, React__default.createElement(ListboxList, null, children)));
   });
@@ -831,3 +838,4 @@ });
 var ListboxButton = /*#__PURE__*/utils.forwardRefWithAs(function ListboxButton(_ref4, forwardedRef) {
-  var _ref4$arrow = _ref4.arrow,
+  var ariaLabel = _ref4["aria-label"],
+      _ref4$arrow = _ref4.arrow,
       arrow = _ref4$arrow === void 0 ? false : _ref4$arrow,
@@ -840,4 +848,3 @@ _ref4$as = _ref4.as,
       onMouseUp = _ref4.onMouseUp,
-      tabIndex = _ref4.tabIndex,
-      props = _objectWithoutPropertiesLoose(_ref4, ["arrow", "as", "children", "onKeyDown", "onMouseDown", "onMouseUp", "tabIndex"]);
+      props = _objectWithoutPropertiesLoose(_ref4, ["aria-label", "arrow", "as", "children", "onKeyDown", "onMouseDown", "onMouseUp"]);
 
@@ -849,3 +856,2 @@ var _useListboxContext = useListboxContext(),
       labelId = _useListboxContext$id.label,
-      listboxId = _useListboxContext$id.listbox,
       mouseEventStartedRef = _useListboxContext.mouseEventStartedRef,
@@ -903,9 +909,17 @@ buttonRef = _useListboxContext.refs.button,
   }, [children, listboxValueLabel, expanded, listboxValue]);
-  return React__default.createElement(Comp, Object.assign({
-    "aria-controls": listboxId,
+  return React__default.createElement(Comp // Applicable to all host language elements regardless of whether a
+  // `role` is applied.
+  // https://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header
+  , Object.assign({
     "aria-disabled": disabled || undefined,
-    "aria-expanded": expanded,
+    "aria-expanded": expanded || undefined,
     "aria-haspopup": "listbox",
-    "aria-labelledby": [labelId, buttonId].filter(Boolean).join(" "),
-    role: "button"
+    "aria-labelledby": ariaLabel ? undefined : [labelId, buttonId].filter(Boolean).join(" "),
+    "aria-label": ariaLabel,
+    // Identifies the element as a button widget.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/button/button.html
+    role: "button",
+    // Includes the element in the tab sequence.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/button/button.html
+    tabIndex: disabled ? -1 : 0
   }, props, {
@@ -917,4 +931,3 @@ ref: ref,
     onMouseDown: utils.wrapEvent(onMouseDown, handleMouseDown),
-    onMouseUp: utils.wrapEvent(onMouseUp, handleMouseUp),
-    tabIndex: disabled ? -1 : tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0
+    onMouseUp: utils.wrapEvent(onMouseUp, handleMouseUp)
   }), label, arrow && React__default.createElement(ListboxArrow, null, utils.isBoolean(arrow) ? null : arrow));
@@ -995,9 +1008,10 @@ });
 
-  var commonProps = _extends({}, props, {
+  var commonProps = _extends({
+    hidden: !isExpanded(state),
+    tabIndex: -1
+  }, props, {
     ref: ref,
     "data-reach-listbox-popover": "",
-    hidden: !isExpanded(state),
     onBlur: utils.wrapEvent(onBlur, handleBlur),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown),
-    tabIndex: -1
+    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown)
   });
@@ -1045,2 +1059,3 @@
   var _useListboxContext4 = useListboxContext(),
+      ariaLabel = _useListboxContext4.ariaLabel,
       _useListboxContext4$i = _useListboxContext4.ids,
@@ -1050,14 +1065,30 @@ listboxId = _useListboxContext4$i.listbox,
       listRef = _useListboxContext4.refs.list,
-      value = _useListboxContext4.state.context.value;
+      _useListboxContext4$s = _useListboxContext4.state,
+      _useListboxContext4$s2 = _useListboxContext4$s.context,
+      value = _useListboxContext4$s2.value,
+      navigationValue = _useListboxContext4$s2.navigationValue,
+      state = _useListboxContext4$s.value;
 
   var ref = utils.useForkedRef(forwardedRef, listRef);
-  return React__default.createElement(Comp, Object.assign({
-    "aria-activedescendant": useOptionId(value),
-    "aria-labelledby": labelId,
-    role: "listbox"
+  return React__default.createElement(Comp // Tells assistive technologies which of the options, if any, is
+  // visually indicated as having keyboard focus. DOM focus remains on the
+  // `ul` element and the idref specified for `aria-activedescendant`
+  // refers to the `li` element that is visually styled as focused. When
+  // navigation keys, such as `Down Arrow`, are pressed, the JavaScript
+  // changes the value.
+  // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-grouped.html
+  , Object.assign({
+    "aria-activedescendant": useOptionId(isExpanded(state) ? navigationValue : value),
+    "aria-labelledby": ariaLabel ? undefined : labelId,
+    "aria-label": ariaLabel,
+    // An element that contains or owns all the listbox options has role
+    // listbox.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
+    role: "listbox",
+    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html
+    tabIndex: -1
   }, props, {
     ref: ref,
     "data-reach-listbox-list": "",
-    id: listboxId,
-    tabIndex: -1
+    id: listboxId
   }));
@@ -1090,5 +1121,6 @@ });
       onMouseUp = _ref8.onMouseUp,
+      onTouchStart = _ref8.onTouchStart,
       value = _ref8.value,
       labelProp = _ref8.label,
-      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "value", "label"]);
+      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"]);
 
@@ -1101,5 +1133,7 @@ if ( !value) {
       send = _useListboxContext5.send,
-      _useListboxContext5$s = _useListboxContext5.state.context,
-      listboxValue = _useListboxContext5$s.value,
-      navigationValue = _useListboxContext5$s.navigationValue,
+      _useListboxContext5$s = _useListboxContext5.state,
+      state = _useListboxContext5$s.value,
+      _useListboxContext5$s2 = _useListboxContext5$s.context,
+      listboxValue = _useListboxContext5$s2.value,
+      navigationValue = _useListboxContext5$s2.navigationValue,
       onValueChange = _useListboxContext5.onValueChange,
@@ -1154,2 +1188,10 @@ mouseEventStartedRef = _useListboxContext5.mouseEventStartedRef,
 
+  function handleTouchStart() {
+    send({
+      type: ListboxEvents.Navigate,
+      value: value,
+      disabled: !!disabled
+    });
+  }
+
   function handleMouseLeave() {
@@ -1202,5 +1244,11 @@ send({
 
-  return React__default.createElement(Comp, Object.assign({
-    "aria-selected": isSelected,
-    "aria-disabled": disabled ? true : undefined,
+  return React__default.createElement(Comp // In a single-select listbox, the selected option has `aria-selected`
+  // set to `true`.
+  // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
+  , Object.assign({
+    "aria-selected": (isExpanded(state) ? isHighlighted : isSelected) || undefined,
+    "aria-disabled": disabled || undefined,
+    // Each option in the listbox has role `option` and is a DOM descendant
+    // of the element with role `listbox`.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
     role: "option"
@@ -1211,3 +1259,3 @@ }, props, {
     "data-reach-listbox-option": "",
-    "data-highlighted": isHighlighted ? "" : undefined,
+    "data-current": isSelected ? "" : undefined,
     "data-label": label,
@@ -1220,3 +1268,3 @@ "data-value": value,
     onMouseUp: utils.wrapEvent(onMouseUp, handleMouseUp),
-    tabIndex: -1
+    onTouchStart: utils.wrapEvent(onTouchStart, handleTouchStart)
   }), children);
@@ -1258,2 +1306,4 @@ });
     "aria-labelledby": labelId,
+    // Identifies a group of related options
+    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-grouped.html
     role: "group"
@@ -1288,4 +1338,8 @@ }, props, {
 
-  return React__default.createElement(Comp, Object.assign({
-    role: "none"
+  return React__default.createElement(Comp // See examples
+  // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-grouped.html
+  , Object.assign({
+    // See examples
+    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-grouped.html
+    role: "presentation"
   }, props, {
@@ -1362,2 +1416,4 @@ ref: forwardedRef,
       case " ":
+        // Prevent browser from scrolling down
+        event.preventDefault();
         send({
@@ -1418,3 +1474,3 @@ type: ListboxEvents.KeyDownSpace,
 
-  return value ? utils.makeId("option-" + value, input) : "";
+  return value ? utils.makeId("option-" + value, input) : undefined;
 }
@@ -1421,0 +1477,0 @@

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 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 f(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 w(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 D(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 x(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))&&x(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 K(e,t){return!t.disabled}function O(e,t){return t.type!==r.Navigate||!t||!t.disabled}function T(e,t){return!(t&&t.disabled||null==e.navigationValue)}function C(e,t){t.callback&&t.callback(t.value)}function M(e,t){if(t.type===r.KeyDownEnter&&!t.disabled){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}}),_=v.assign({typeaheadQuery:""}),A=v.assign({value:function(e,t){if(t.type===r.UpdateAfterTypeahead&&t.query){var n=W(e.options,t.query);if(n&&!n.disabled)return t.callback&&t.callback(n.value),n.value}return e.value}}),S=v.assign({navigationValue:function(e,t){if(t.type===r.UpdateAfterTypeahead&&t.query){var n=W(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 g({},e,{},t.data,{refs:g({},e.refs,{},t.data.refs||{})})}))},a[r.ValueChange]={actions:[y,C]},a),k=((o={})[r.ClearNavSelection]={actions:[p,I]},o[r.OptionFinishClick]={target:i.Idle,actions:[y,C,m,b],cond:T},o[r.KeyDownEnter]={target:i.Idle,actions:[y,C,m,b],cond:T},o[r.KeyDownSpace]={target:i.Idle,actions:[y,C,m,b],cond:T},o[r.ButtonMouseDown]={target:i.Idle,actions:[m]},o[r.KeyDownEscape]={target:i.Idle,actions:[m]},o);function W(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 V=c.createDescendantContext("ListboxDescendantContext"),U=d.createNamedContext("ListboxContext",{}),P=d.createNamedContext("ListboxGroupContext",{}),B=function(){return t.useContext(U)},q=t.forwardRef((function(e,a){var o=e["aria-labelledby"],l=e.children,s=e.defaultValue,y=e.disabled,T=void 0!==y&&y,C=e.form,W=e.name,P=e.onChange,B=e.required,q=e.value,F=e._componentName,j=void 0===F?"ListboxInput":F,G=f(e,["aria-labelledby","children","defaultValue","disabled","form","name","onChange","required","value","_componentName"]),Y=t.useRef(null!=q).current,H=c.useDescendants(),Q=H[0],z=H[1],J=t.useRef(!1),X=t.useRef(!1),Z=t.useRef(null),$=t.useRef(null),ee=t.useRef(null),te=t.useRef(null),ne=t.useRef(null),ae=v.useCreateMachine(function(e){var t,n,a,o,u,l;return{id:"mixed-checkbox",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:g({},L,(t={},t[r.ButtonMouseDown]={target:i.Navigating,actions:[E,m],cond:K},t[r.KeyDownSpace]={target:i.NavigatingWithKeys,actions:[E,I],cond:K},t[r.KeyDownSearch]={target:i.Idle,actions:R,cond:K},t[r.UpdateAfterTypeahead]={target:i.Idle,actions:[A],cond:K},t[r.ClearTypeahead]={target:i.Idle,actions:_},t[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[E,b],cond:K},t[r.KeyDownEnter]={actions:[M],cond:K},t))},l[i.Interacting]={entry:[p],on:g({},L,{},k,(n={},n[r.KeyDownEnter]=i.Interacting,n[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Navigating,cond:N},{target:i.Interacting,actions:b}],n[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Navigating,cond:x},{target:i.Interacting,actions:b}],n[r.Navigate]={target:i.Navigating,actions:[h],cond:O},n[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},n))},l[i.Navigating]={on:g({},L,{},k,(a={},a[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Navigating,cond:N},{target:i.Interacting,actions:b}],a[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Navigating,cond:x},{target:i.Interacting,actions:b}],a[r.ButtonMouseUp]={target:i.Navigating,actions:[E,I]},a[r.Navigate]={target:i.Navigating,actions:[h],cond:O},a[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},a[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},a[r.UpdateAfterTypeahead]={actions:[S]},a[r.ClearTypeahead]={actions:_},a))},l[i.NavigatingWithKeys]={on:g({},L,{},k,(o={},o[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.NavigatingWithKeys,cond:N},{target:i.Interacting,actions:b}],o[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.NavigatingWithKeys,cond:x},{target:i.Interacting,actions:b}],o[r.Navigate]={target:i.Navigating,actions:[h],cond:O},o[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},o[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},o[r.UpdateAfterTypeahead]={actions:[S]},o[r.ClearTypeahead]={actions:_},o))},l[i.Searching]={on:g({},L,{},k,(u={},u[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Searching,cond:N},{target:i.Interacting,actions:b}],u[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Searching,cond:x},{target:i.Interacting,actions:b}],u[r.Navigate]={target:i.Navigating,actions:[h,b],cond:O},u[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},u[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},u[r.UpdateAfterTypeahead]={actions:[S]},u[r.ClearTypeahead]={actions:_},u))},l)}}({value:(Y?q:s)||null})),oe=v.useMachineLogger(v.useMachine(ae,{button:Z,hiddenInput:$,input:ee,list:te,popover:ne}),!1),ie=oe[0],re=oe[1],ue=u.useId(G.id),le=G.id||d.makeId("listbox-input",ue),se=d.useForkedRef(ee,a),ce=t.useMemo((function(){var e=Q.find((function(e){return e.value===ie.context.value}));return e?e.label:null}),[Q,ie.context.value]),de=t.useMemo((function(){return{disabled:T,ids:{label:o,input:le,listbox:d.makeId("listbox",le),button:d.makeId("button",le)},listboxValue:ie.context.value,listboxValueLabel:ce,mouseEventStartedRef:X,mouseMovedRef:J,onValueChange:P,refs:{button:Z,hiddenInput:$,input:ee,list:te,popover:ne},send:re,state:ie}}),[o,ie,T,le,P,re,ce]);d.useControlledSwitchWarning(q,"value",j);var ve=t.useRef(!1);if(!Y&&!s&&!ve.current&&Q.length){ve.current=!0;var ge=Q.find((function(e){return!e.disabled}));ge&&ge.value&&re({type:r.ValueChange,value:ge.value})}return Y&&q!==ie.context.value&&re({type:r.ValueChange,value:q}),d.useIsomorphicLayoutEffect((function(){re({type:r.GetDerivedData,data:{options:Q}})}),[Q,re]),t.useEffect((function(){function e(e){re({type:r.OutsideMouseDown,relatedTarget:e.relatedTarget||e.target})}return window.addEventListener("mousedown",e),function(){window.removeEventListener("mousedown",e)}}),[re]),t.useEffect((function(){return d.checkStyles("listbox")}),[]),n.createElement(c.DescendantProvider,{context:V,items:Q,set:z},n.createElement(U.Provider,{value:de},n.createElement("div",Object.assign({},G,{ref:se,"data-reach-listbox-input":"","data-state":d.stateToAttributeString(ie.value),"data-value":ie.context.value,id:le}),d.isFunction(l)?l({value:ie.context.value,valueLabel:ce}):l),(T||C||W||B)&&n.createElement("input",{ref:$,disabled:T,form:C,hidden:!0,name:W,required:B,type:"text",value:ie.context.value||""})))})),F=t.forwardRef((function(e,a){var o=e.arrow,i=void 0===o?"▼":o,r=e.button,u=e.children,l=f(e,["arrow","button","children"]);return n.createElement(q,Object.assign({},l,{_componentName:"Listbox",ref:a}),(function(e){var a=e.value,o=e.valueLabel;return n.createElement(t.Fragment,null,n.createElement(j,{arrow:i,children:r?d.isFunction(r)?r({value:a,label:o}):r:void 0}),n.createElement(Y,null,n.createElement(H,null,u)))}))})),j=d.forwardRefWithAs((function(e,a){var o=e.arrow,i=void 0!==o&&o,u=e.as,l=void 0===u?"span":u,s=e.children,c=e.onKeyDown,v=e.onMouseDown,g=e.onMouseUp,p=e.tabIndex,b=f(e,["arrow","as","children","onKeyDown","onMouseDown","onMouseUp","tabIndex"]),y=B(),h=y.disabled,E=y.ids,w=E.button,D=E.label,x=E.listbox,N=y.mouseEventStartedRef,I=y.state,m=y.send,K=y.listboxValueLabel,O=I.context.value,T=d.useForkedRef(y.refs.button,a),C=Z(),M=X(I.value),R=t.useMemo((function(){return s?d.isFunction(s)?s({expanded:M,label:K,value:O}):s:K}),[s,K,M,O]);return n.createElement(l,Object.assign({"aria-controls":x,"aria-disabled":h||void 0,"aria-expanded":M,"aria-haspopup":"listbox","aria-labelledby":[D,w].filter(Boolean).join(" "),role:"button"},b,{ref:T,"data-reach-listbox-button":"",id:w,onKeyDown:d.wrapEvent(c,C),onMouseDown:d.wrapEvent(v,(function(e){d.isRightClick(e.nativeEvent)||(N.current=!0,e.persist(),e.preventDefault(),m({type:r.ButtonMouseDown,disabled:h}))})),onMouseUp:d.wrapEvent(g,(function(e){N.current&&(d.isRightClick(e.nativeEvent)||m({type:r.ButtonMouseUp})),N.current=!1})),tabIndex:h?-1:null!=p?p:0}),R,i&&n.createElement(G,null,d.isBoolean(i)?null:i))})),G=t.forwardRef((function(e,t){var a=e.children,o=f(e,["children"]),i=X(B().state.value),r=i?"▲":"▼";return n.createElement("span",Object.assign({"aria-hidden":!0},o,{ref:t,"data-reach-listbox-arrow":"","data-expanded":i?"":void 0}),d.isFunction(a)?a({expanded:i}):a||r)})),Y=t.forwardRef((function(e,t){var a=e.position,o=void 0===a?l.positionMatchWidth:a,i=e.onBlur,u=e.onKeyDown,c=e.portal,v=void 0===c||c,p=f(e,["position","onBlur","onKeyDown","portal"]),b=B(),y=b.refs,h=y.button,E=b.send,w=b.state.value,D=d.useForkedRef(y.popover,t),x=Z(),N=g({},p,{ref:D,"data-reach-listbox-popover":"",hidden:!X(w),onBlur:d.wrapEvent(i,(function(e){var t=e.nativeEvent;requestAnimationFrame((function(){E({type:r.Blur,relatedTarget:t.relatedTarget||t.target})}))})),onKeyDown:d.wrapEvent(u,x),tabIndex:-1});return v?n.createElement(s,Object.assign({},N,{targetRef:h,position:o})):n.createElement("div",Object.assign({},N))})),H=d.forwardRefWithAs((function(e,t){var a=e.as,o=void 0===a?"ul":a,i=f(e,["as"]),r=B(),u=r.ids,l=u.listbox,s=u.label,c=r.state.context.value,v=d.useForkedRef(t,r.refs.list);return n.createElement(o,Object.assign({"aria-activedescendant":$(c),"aria-labelledby":s,role:"listbox"},i,{ref:v,"data-reach-listbox-list":"",id:l,tabIndex:-1}))})),Q=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,g=e.onMouseLeave,p=e.onMouseMove,b=e.onMouseUp,y=e.value,h=e.label,E=f(e,["as","children","disabled","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseUp","value","label"]),w=B(),D=w.send,x=w.state.context,N=x.value,I=x.navigationValue,m=w.onValueChange,K=w.mouseEventStartedRef,O=w.mouseMovedRef,T=t.useState(h),C=T[1],M=h||T[0]||"",R=t.useRef(null);c.useDescendant({context:V,element:R.current,value:y,label:M,disabled:!!l});var _=t.useCallback((function(e){h||C((function(t){return e.textContent&&t!==e.textContent?e.textContent:t||""}))}),[h]),A=d.useForkedRef(_,a,R),S=!!I&&I===y;return n.createElement(i,Object.assign({"aria-selected":N===y,"aria-disabled":!!l||void 0,role:"option"},E,{ref:A,id:$(y),"data-reach-listbox-option":"","data-highlighted":S?"":void 0,"data-label":M,"data-value":y,onMouseDown:d.wrapEvent(s,(function(e){e.preventDefault(),K.current=!0,d.isRightClick(e.nativeEvent)||D({type:r.OptionStartClick})})),onMouseEnter:d.wrapEvent(v,(function(){O.current&&(O.current=!1,D({type:r.Navigate,value:y,disabled:!!l}))})),onMouseLeave:d.wrapEvent(g,(function(){D({type:r.ClearNavSelection})})),onMouseMove:d.wrapEvent(p,(function(){O.current=!0,I!==y&&D({type:r.Navigate,value:y,disabled:!!l})})),onMouseUp:d.wrapEvent(b,(function(e){K.current&&(K.current=!1,d.isRightClick(e.nativeEvent)||D({type:r.OptionFinishClick,value:y,callback:m,disabled:!!l}))})),tabIndex:-1}),u)})),z=t.forwardRef((function(e,t){var a=e.label,o=e.children,i=f(e,["label","children"]),r=B().ids.listbox,l=d.makeId("label",u.useId(i.id),r);return n.createElement(P.Provider,{value:{labelId:l}},n.createElement("div",Object.assign({"aria-labelledby":l,role:"group"},i,{"data-reach-listbox-group":"",ref:t}),a&&n.createElement(J,null,a),o))})),J=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"span":o,r=f(e,["as"]),u=t.useContext(P);return n.createElement(i,Object.assign({role:"none"},r,{ref:a,"data-reach-listbox-group-label":"",id:u.labelId}))}));function X(e){return[i.Navigating,i.NavigatingWithKeys,i.Interacting,i.Searching].includes(e)}function Z(){var e=B(),n=e.disabled,a=e.onValueChange,o=e.state.context,i=o.navigationValue,u=o.typeaheadQuery,l=e.send,s=t.useContext(V).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 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(V,{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 t=B();return e?d.makeId("option-"+e,t.ids.input):""}exports.Listbox=F,exports.ListboxArrow=G,exports.ListboxButton=j,exports.ListboxGroup=z,exports.ListboxGroupLabel=J,exports.ListboxInput=q,exports.ListboxList=H,exports.ListboxOption=Q,exports.ListboxPopover=Y;
+"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 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 f(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 w(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 D(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 x(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))&&x(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 K(e,t){return!t.disabled}function O(e,t){return t.type!==r.Navigate||!t||!t.disabled}function T(e,t){return!(t&&t.disabled||null==e.navigationValue)}function C(e,t){t.callback&&t.callback(t.value)}function M(e,t){if(t.type===r.KeyDownEnter&&!t.disabled){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 g({},e,{},t.data,{refs:g({},e.refs,{},t.data.refs||{})})}))},a[r.ValueChange]={actions:[y,C]},a),k=((o={})[r.ClearNavSelection]={actions:[p,I]},o[r.OptionFinishClick]={target:i.Idle,actions:[y,C,m,b],cond:T},o[r.KeyDownEnter]={target:i.Idle,actions:[y,C,m,b],cond:T},o[r.KeyDownSpace]={target:i.Idle,actions:[y,C,m,b],cond:T},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=function(){return t.useContext(U)},q=t.forwardRef((function(e,a){var o=e["aria-labelledby"],l=e["aria-label"],s=e.children,y=e.defaultValue,T=e.disabled,C=void 0!==T&&T,V=e.form,P=e.name,B=e.onChange,q=e.required,F=e.value,j=e._componentName,G=void 0===j?"ListboxInput":j,Y=f(e,["aria-labelledby","aria-label","children","defaultValue","disabled","form","name","onChange","required","value","_componentName"]),H=t.useRef(null!=F).current,Q=c.useDescendants(),z=Q[0],J=Q[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:"mixed-checkbox",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:g({},L,(t={},t[r.ButtonMouseDown]={target:i.Navigating,actions:[E,m],cond:K},t[r.KeyDownSpace]={target:i.NavigatingWithKeys,actions:[E,I],cond:K},t[r.KeyDownSearch]={target:i.Idle,actions:R,cond:K},t[r.UpdateAfterTypeahead]={target:i.Idle,actions:[_],cond:K},t[r.ClearTypeahead]={target:i.Idle,actions:S},t[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[E,b],cond:K},t[r.KeyDownEnter]={actions:[M],cond:K},t))},l[i.Interacting]={entry:[p],on:g({},L,{},k,(n={},n[r.KeyDownEnter]=i.Interacting,n[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Navigating,cond:N},{target:i.Interacting,actions:b}],n[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Navigating,cond:x},{target:i.Interacting,actions:b}],n[r.Navigate]={target:i.Navigating,actions:[h],cond:O},n[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},n))},l[i.Navigating]={on:g({},L,{},k,(a={},a[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Navigating,cond:N},{target:i.Interacting,actions:b}],a[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Navigating,cond:x},{target:i.Interacting,actions:b}],a[r.ButtonMouseUp]={target:i.Navigating,actions:[E,I]},a[r.Navigate]={target:i.Navigating,actions:[h],cond:O},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:g({},L,{},k,(o={},o[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.NavigatingWithKeys,cond:N},{target:i.Interacting,actions:b}],o[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.NavigatingWithKeys,cond:x},{target:i.Interacting,actions:b}],o[r.Navigate]={target:i.Navigating,actions:[h],cond:O},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:g({},L,{},k,(u={},u[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Searching,cond:N},{target:i.Interacting,actions:b}],u[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Searching,cond:x},{target:i.Interacting,actions:b}],u[r.Navigate]={target:i.Navigating,actions:[h,b],cond:O},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:(H?F: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(Y.id),ce=Y.id||d.makeId("listbox-input",se),de=d.useForkedRef(ne,a),ve=t.useMemo((function(){var e=z.find((function(e){return e.value===ue.context.value}));return e?e.label:null}),[z,ue.context.value]),ge=t.useMemo((function(){return{ariaLabel:l,disabled:C,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:B,refs:{button:ee,hiddenInput:te,input:ne,list:ae,popover:oe},send:le,state:ue}}),[l,o,ue,C,ce,B,le,ve]);d.useControlledSwitchWarning(F,"value",G);var fe=t.useRef(!1);if(!H&&!y&&!fe.current&&z.length){fe.current=!0;var pe=z.find((function(e){return!e.disabled}));pe&&pe.value&&le({type:r.ValueChange,value:pe.value})}return H&&F!==ue.context.value&&le({type:r.ValueChange,value:F}),d.useIsomorphicLayoutEffect((function(){le({type:r.GetDerivedData,data:{options:z}})}),[z,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]),t.useEffect((function(){return d.checkStyles("listbox")}),[]),n.createElement(c.DescendantProvider,{context:W,items:z,set:J},n.createElement(U.Provider,{value:ge},n.createElement("div",Object.assign({},Y,{ref:de,"data-reach-listbox-input":"","data-state":X(ue.value)?"expanded":"closed","data-value":ue.context.value,id:ce}),d.isFunction(s)?s({value:ue.context.value,valueLabel:ve}):s),(V||P||q)&&n.createElement("input",{ref:te,disabled:C,form:V,name:P,readOnly:!0,required:q,tabIndex:-1,type:"text",value:ue.context.value||""})))})),F=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=f(e,["arrow","button","children","portal"]);return n.createElement(q,Object.assign({},c,{_componentName:"Listbox",ref:a}),(function(e){var a=e.value,o=e.valueLabel;return n.createElement(t.Fragment,null,n.createElement(j,{arrow:i,children:r?d.isFunction(r)?r({value:a,label:o}):r:void 0}),n.createElement(Y,{portal:s},n.createElement(H,null,u)))}))})),j=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,g=e.onMouseDown,p=e.onMouseUp,b=f(e,["aria-label","arrow","as","children","onKeyDown","onMouseDown","onMouseUp"]),y=B(),h=y.disabled,E=y.ids,w=E.button,D=E.label,x=y.mouseEventStartedRef,N=y.state,I=y.send,m=y.listboxValueLabel,K=N.context.value,O=d.useForkedRef(y.refs.button,a),T=Z(),C=X(N.value),M=t.useMemo((function(){return c?d.isFunction(c)?c({expanded:C,label:m,value:K}):c:m}),[c,m,C,K]);return n.createElement(s,Object.assign({"aria-disabled":h||void 0,"aria-expanded":C||void 0,"aria-haspopup":"listbox","aria-labelledby":o?void 0:[D,w].filter(Boolean).join(" "),"aria-label":o,role:"button",tabIndex:h?-1:0},b,{ref:O,"data-reach-listbox-button":"",id:w,onKeyDown:d.wrapEvent(v,T),onMouseDown:d.wrapEvent(g,(function(e){d.isRightClick(e.nativeEvent)||(x.current=!0,e.persist(),e.preventDefault(),I({type:r.ButtonMouseDown,disabled:h}))})),onMouseUp:d.wrapEvent(p,(function(e){x.current&&(d.isRightClick(e.nativeEvent)||I({type:r.ButtonMouseUp})),x.current=!1}))}),M,u&&n.createElement(G,null,d.isBoolean(u)?null:u))})),G=t.forwardRef((function(e,t){var a=e.children,o=f(e,["children"]),i=X(B().state.value),r=i?"▲":"▼";return n.createElement("span",Object.assign({"aria-hidden":!0},o,{ref:t,"data-reach-listbox-arrow":"","data-expanded":i?"":void 0}),d.isFunction(a)?a({expanded:i}):a||r)})),Y=t.forwardRef((function(e,t){var a=e.position,o=void 0===a?l.positionMatchWidth:a,i=e.onBlur,u=e.onKeyDown,c=e.portal,v=void 0===c||c,p=f(e,["position","onBlur","onKeyDown","portal"]),b=B(),y=b.refs,h=y.button,E=b.send,w=b.state.value,D=d.useForkedRef(y.popover,t),x=Z(),N=g({hidden:!X(w),tabIndex:-1},p,{ref:D,"data-reach-listbox-popover":"",onBlur:d.wrapEvent(i,(function(e){var t=e.nativeEvent;requestAnimationFrame((function(){E({type:r.Blur,relatedTarget:t.relatedTarget||t.target})}))})),onKeyDown:d.wrapEvent(u,x)});return v?n.createElement(s,Object.assign({},N,{targetRef:h,position:o})):n.createElement("div",Object.assign({},N))})),H=d.forwardRefWithAs((function(e,t){var a=e.as,o=void 0===a?"ul":a,i=f(e,["as"]),r=B(),u=r.ariaLabel,l=r.ids,s=l.listbox,c=l.label,v=r.state,g=v.context,p=g.value,b=g.navigationValue,y=v.value,h=d.useForkedRef(t,r.refs.list);return n.createElement(o,Object.assign({"aria-activedescendant":$(X(y)?b:p),"aria-labelledby":u?void 0:c,"aria-label":u,role:"listbox",tabIndex:-1},i,{ref:h,"data-reach-listbox-list":"",id:s}))})),Q=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,g=e.onMouseLeave,p=e.onMouseMove,b=e.onMouseUp,y=e.onTouchStart,h=e.value,E=e.label,w=f(e,["as","children","disabled","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseUp","onTouchStart","value","label"]),D=B(),x=D.send,N=D.state,I=N.value,m=N.context,K=m.value,O=m.navigationValue,T=D.onValueChange,C=D.mouseEventStartedRef,M=D.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=!!O&&O===h,U=K===h;return n.createElement(i,Object.assign({"aria-selected":(X(I)?V:U)||void 0,"aria-disabled":l||void 0,role:"option"},w,{ref:k,id:$(h),"data-reach-listbox-option":"","data-current":U?"":void 0,"data-label":_,"data-value":h,onMouseDown:d.wrapEvent(s,(function(e){e.preventDefault(),C.current=!0,d.isRightClick(e.nativeEvent)||x({type:r.OptionStartClick})})),onMouseEnter:d.wrapEvent(v,(function(){M.current&&(M.current=!1,x({type:r.Navigate,value:h,disabled:!!l}))})),onMouseLeave:d.wrapEvent(g,(function(){x({type:r.ClearNavSelection})})),onMouseMove:d.wrapEvent(p,(function(){M.current=!0,O!==h&&x({type:r.Navigate,value:h,disabled:!!l})})),onMouseUp:d.wrapEvent(b,(function(e){C.current&&(C.current=!1,d.isRightClick(e.nativeEvent)||x({type:r.OptionFinishClick,value:h,callback:T,disabled:!!l}))})),onTouchStart:d.wrapEvent(y,(function(){x({type:r.Navigate,value:h,disabled:!!l})}))}),u)})),z=t.forwardRef((function(e,t){var a=e.label,o=e.children,i=f(e,["label","children"]),r=B().ids.listbox,l=d.makeId("label",u.useId(i.id),r);return n.createElement(P.Provider,{value:{labelId:l}},n.createElement("div",Object.assign({"aria-labelledby":l,role:"group"},i,{"data-reach-listbox-group":"",ref:t}),a&&n.createElement(J,null,a),o))})),J=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"span":o,r=f(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 X(e){return[i.Navigating,i.NavigatingWithKeys,i.Interacting,i.Searching].includes(e)}function Z(){var e=B(),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 t=B();return e?d.makeId("option-"+e,t.ids.input):void 0}exports.Listbox=F,exports.ListboxArrow=G,exports.ListboxButton=j,exports.ListboxGroup=z,exports.ListboxGroupLabel=J,exports.ListboxInput=q,exports.ListboxList=H,exports.ListboxOption=Q,exports.ListboxPopover=Y;
 //# sourceMappingURL=listbox.cjs.production.min.js.map

dist/listbox.esm.js

@@ -6,3 +6,3 @@ import React, { forwardRef, useRef, useMemo, useEffect, Fragment, useContext, useState, useCallback } from 'react';
 import { useDescendants, DescendantProvider, useDescendant, useDescendantKeyDown, createDescendantContext } from '@reach/descendants';
-import { getOwnerDocument, makeId, useForkedRef, useControlledSwitchWarning, useIsomorphicLayoutEffect, checkStyles, stateToAttributeString, isFunction, forwardRefWithAs, wrapEvent, isBoolean, isString, createNamedContext, isRightClick } from '@reach/utils';
+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';
@@ -563,2 +563,3 @@
   var ariaLabelledBy = _ref["aria-labelledby"],
+      ariaLabel = _ref["aria-label"],
       children = _ref.children,
@@ -575,3 +576,3 @@ defaultValue = _ref.defaultValue,
       _componentName = _ref$_componentName === void 0 ? "ListboxInput" : _ref$_componentName,
-      props = _objectWithoutPropertiesLoose(_ref, ["aria-labelledby", "children", "defaultValue", "disabled", "form", "name", "onChange", "required", "value", "_componentName"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["aria-labelledby", "aria-label", "children", "defaultValue", "disabled", "form", "name", "onChange", "required", "value", "_componentName"]);
 
@@ -639,2 +640,3 @@ var _useRef = useRef(valueProp != null),
     return {
+      ariaLabel: ariaLabel,
       disabled: disabled,
@@ -662,3 +664,3 @@ ids: {
     };
-  }, [ariaLabelledBy, current, disabled, id, onChange, send, valueLabel]);
+  }, [ariaLabel, ariaLabelledBy, current, disabled, id, onChange, send, valueLabel]);
   useControlledSwitchWarning(valueProp, "value", _componentName); // For uncontrolled listbox components where no `defaultValue` is provided, we
@@ -731,3 +733,3 @@ // will update the value based on the value of the first selectable option.
     "data-reach-listbox-input": "",
-    "data-state": stateToAttributeString(current.value),
+    "data-state": isExpanded(current.value) ? "expanded" : "closed",
     "data-value": current.context.value,
@@ -738,9 +740,10 @@ id: id
     valueLabel: valueLabel
-  }) : children), (disabled || form || name || required) && React.createElement("input", {
+  }) : children), (form || name || required) && React.createElement("input", {
     ref: hiddenInput,
     disabled: disabled,
     form: form,
-    hidden: true,
     name: name,
+    readOnly: true,
     required: required,
+    tabIndex: -1,
     type: "text",
@@ -786,3 +789,5 @@ value: current.context.value || ""
       children = _ref2.children,
-      props = _objectWithoutPropertiesLoose(_ref2, ["arrow", "button", "children"]);
+      _ref2$portal = _ref2.portal,
+      portal = _ref2$portal === void 0 ? true : _ref2$portal,
+      props = _objectWithoutPropertiesLoose(_ref2, ["arrow", "button", "children", "portal"]);
 
@@ -801,3 +806,5 @@ return React.createElement(ListboxInput, Object.assign({}, props, {
       }) : button : undefined
-    }), React.createElement(ListboxPopover, null, React.createElement(ListboxList, null, children)));
+    }), React.createElement(ListboxPopover, {
+      portal: portal
+    }, React.createElement(ListboxList, null, children)));
   });
@@ -825,3 +832,4 @@ });
 var ListboxButton = /*#__PURE__*/forwardRefWithAs(function ListboxButton(_ref4, forwardedRef) {
-  var _ref4$arrow = _ref4.arrow,
+  var ariaLabel = _ref4["aria-label"],
+      _ref4$arrow = _ref4.arrow,
       arrow = _ref4$arrow === void 0 ? false : _ref4$arrow,
@@ -834,4 +842,3 @@ _ref4$as = _ref4.as,
       onMouseUp = _ref4.onMouseUp,
-      tabIndex = _ref4.tabIndex,
-      props = _objectWithoutPropertiesLoose(_ref4, ["arrow", "as", "children", "onKeyDown", "onMouseDown", "onMouseUp", "tabIndex"]);
+      props = _objectWithoutPropertiesLoose(_ref4, ["aria-label", "arrow", "as", "children", "onKeyDown", "onMouseDown", "onMouseUp"]);
 
@@ -843,3 +850,2 @@ var _useListboxContext = useListboxContext(),
       labelId = _useListboxContext$id.label,
-      listboxId = _useListboxContext$id.listbox,
       mouseEventStartedRef = _useListboxContext.mouseEventStartedRef,
@@ -897,9 +903,17 @@ buttonRef = _useListboxContext.refs.button,
   }, [children, listboxValueLabel, expanded, listboxValue]);
-  return React.createElement(Comp, Object.assign({
-    "aria-controls": listboxId,
+  return React.createElement(Comp // Applicable to all host language elements regardless of whether a
+  // `role` is applied.
+  // https://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header
+  , Object.assign({
     "aria-disabled": disabled || undefined,
-    "aria-expanded": expanded,
+    "aria-expanded": expanded || undefined,
     "aria-haspopup": "listbox",
-    "aria-labelledby": [labelId, buttonId].filter(Boolean).join(" "),
-    role: "button"
+    "aria-labelledby": ariaLabel ? undefined : [labelId, buttonId].filter(Boolean).join(" "),
+    "aria-label": ariaLabel,
+    // Identifies the element as a button widget.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/button/button.html
+    role: "button",
+    // Includes the element in the tab sequence.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/button/button.html
+    tabIndex: disabled ? -1 : 0
   }, props, {
@@ -911,4 +925,3 @@ ref: ref,
     onMouseDown: wrapEvent(onMouseDown, handleMouseDown),
-    onMouseUp: wrapEvent(onMouseUp, handleMouseUp),
-    tabIndex: disabled ? -1 : tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0
+    onMouseUp: wrapEvent(onMouseUp, handleMouseUp)
   }), label, arrow && React.createElement(ListboxArrow, null, isBoolean(arrow) ? null : arrow));
@@ -989,9 +1002,10 @@ });
 
-  var commonProps = _extends({}, props, {
+  var commonProps = _extends({
+    hidden: !isExpanded(state),
+    tabIndex: -1
+  }, props, {
     ref: ref,
     "data-reach-listbox-popover": "",
-    hidden: !isExpanded(state),
     onBlur: wrapEvent(onBlur, handleBlur),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    tabIndex: -1
+    onKeyDown: wrapEvent(onKeyDown, handleKeyDown)
   });
@@ -1039,2 +1053,3 @@
   var _useListboxContext4 = useListboxContext(),
+      ariaLabel = _useListboxContext4.ariaLabel,
       _useListboxContext4$i = _useListboxContext4.ids,
@@ -1044,14 +1059,30 @@ listboxId = _useListboxContext4$i.listbox,
       listRef = _useListboxContext4.refs.list,
-      value = _useListboxContext4.state.context.value;
+      _useListboxContext4$s = _useListboxContext4.state,
+      _useListboxContext4$s2 = _useListboxContext4$s.context,
+      value = _useListboxContext4$s2.value,
+      navigationValue = _useListboxContext4$s2.navigationValue,
+      state = _useListboxContext4$s.value;
 
   var ref = useForkedRef(forwardedRef, listRef);
-  return React.createElement(Comp, Object.assign({
-    "aria-activedescendant": useOptionId(value),
-    "aria-labelledby": labelId,
-    role: "listbox"
+  return React.createElement(Comp // Tells assistive technologies which of the options, if any, is
+  // visually indicated as having keyboard focus. DOM focus remains on the
+  // `ul` element and the idref specified for `aria-activedescendant`
+  // refers to the `li` element that is visually styled as focused. When
+  // navigation keys, such as `Down Arrow`, are pressed, the JavaScript
+  // changes the value.
+  // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-grouped.html
+  , Object.assign({
+    "aria-activedescendant": useOptionId(isExpanded(state) ? navigationValue : value),
+    "aria-labelledby": ariaLabel ? undefined : labelId,
+    "aria-label": ariaLabel,
+    // An element that contains or owns all the listbox options has role
+    // listbox.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
+    role: "listbox",
+    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html
+    tabIndex: -1
   }, props, {
     ref: ref,
     "data-reach-listbox-list": "",
-    id: listboxId,
-    tabIndex: -1
+    id: listboxId
   }));
@@ -1084,5 +1115,6 @@ });
       onMouseUp = _ref8.onMouseUp,
+      onTouchStart = _ref8.onTouchStart,
       value = _ref8.value,
       labelProp = _ref8.label,
-      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "value", "label"]);
+      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"]);
 
@@ -1095,5 +1127,7 @@ if (process.env.NODE_ENV !== "production" && !value) {
       send = _useListboxContext5.send,
-      _useListboxContext5$s = _useListboxContext5.state.context,
-      listboxValue = _useListboxContext5$s.value,
-      navigationValue = _useListboxContext5$s.navigationValue,
+      _useListboxContext5$s = _useListboxContext5.state,
+      state = _useListboxContext5$s.value,
+      _useListboxContext5$s2 = _useListboxContext5$s.context,
+      listboxValue = _useListboxContext5$s2.value,
+      navigationValue = _useListboxContext5$s2.navigationValue,
       onValueChange = _useListboxContext5.onValueChange,
@@ -1148,2 +1182,10 @@ mouseEventStartedRef = _useListboxContext5.mouseEventStartedRef,
 
+  function handleTouchStart() {
+    send({
+      type: ListboxEvents.Navigate,
+      value: value,
+      disabled: !!disabled
+    });
+  }
+
   function handleMouseLeave() {
@@ -1196,5 +1238,11 @@ send({
 
-  return React.createElement(Comp, Object.assign({
-    "aria-selected": isSelected,
-    "aria-disabled": disabled ? true : undefined,
+  return React.createElement(Comp // In a single-select listbox, the selected option has `aria-selected`
+  // set to `true`.
+  // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
+  , Object.assign({
+    "aria-selected": (isExpanded(state) ? isHighlighted : isSelected) || undefined,
+    "aria-disabled": disabled || undefined,
+    // Each option in the listbox has role `option` and is a DOM descendant
+    // of the element with role `listbox`.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
     role: "option"
@@ -1205,3 +1253,3 @@ }, props, {
     "data-reach-listbox-option": "",
-    "data-highlighted": isHighlighted ? "" : undefined,
+    "data-current": isSelected ? "" : undefined,
     "data-label": label,
@@ -1214,3 +1262,3 @@ "data-value": value,
     onMouseUp: wrapEvent(onMouseUp, handleMouseUp),
-    tabIndex: -1
+    onTouchStart: wrapEvent(onTouchStart, handleTouchStart)
   }), children);
@@ -1252,2 +1300,4 @@ });
     "aria-labelledby": labelId,
+    // Identifies a group of related options
+    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-grouped.html
     role: "group"
@@ -1282,4 +1332,8 @@ }, props, {
 
-  return React.createElement(Comp, Object.assign({
-    role: "none"
+  return React.createElement(Comp // See examples
+  // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-grouped.html
+  , Object.assign({
+    // See examples
+    // https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-grouped.html
+    role: "presentation"
   }, props, {
@@ -1356,2 +1410,4 @@ ref: forwardedRef,
       case " ":
+        // Prevent browser from scrolling down
+        event.preventDefault();
         send({
@@ -1412,3 +1468,3 @@ type: ListboxEvents.KeyDownSpace,
 
-  return value ? makeId("option-" + value, input) : "";
+  return value ? makeId("option-" + value, input) : undefined;
 }
@@ -1415,0 +1471,0 @@

package.json

 {
   "name": "@reach/listbox",
-  "version": "0.8.7",
+  "version": "0.9.0",
   "description": "Accessible React listbox input.",
@@ -13,12 +13,10 @@ "author": "React Training <[e-mail]>",
   "scripts": {
-    "build": "yarn clean && yarn compile",
-    "clean": "rm -rf ./dist",
-    "compile": "cross-env NODE_ENV=production tsdx build --format=cjs,esm --tsconfig tsconfig.build.json"
+    "build": "ts-node ../../scripts/build"
   },
   "dependencies": {
-    "@reach/auto-id": "^0.8.6",
-    "@reach/descendants": "^0.8.6",
-    "@reach/machine": "^0.8.6",
-    "@reach/popover": "^0.8.6",
-    "@reach/utils": "^0.8.6",
+    "@reach/auto-id": "^0.9.0",
+    "@reach/descendants": "^0.9.0",
+    "@reach/machine": "^0.9.0",
+    "@reach/popover": "^0.9.0",
+    "@reach/utils": "^0.9.0",
     "prop-types": "^15.7.2"
@@ -38,3 +36,3 @@ },
   ],
-  "gitHead": "7f3f6c3338bf65e7a78e4bbca71b0ebc311de2c8"
+  "gitHead": "0c789bb48554bf13c62dd09210ebdf2f9af33d30"
 }

README.md

@@ -5,3 +5,3 @@ # @reach/listbox
 
-[Docs](https://reacttraining.com/reach-ui/listbox) | [Source](https://github.com/reach/reach-ui/tree/master/packages/listbox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox)
+[Docs](https://reacttraining.com/reach-ui/listbox) | [Source](https://github.com/reach/reach-ui/tree/master/packages/listbox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox)
 
@@ -8,0 +8,0 @@ An accessible listbox for custom select inputs.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

468396

increased by5.78%

Lines of code

3386

increased by4.12%

Dependency changes

• + Added@reach/auto-id@0.9.0(transitive)

• + Added@reach/descendants@0.9.1(transitive)

• + Added@reach/machine@0.9.0(transitive)

• + Added@reach/popover@0.9.0(transitive)

• + Added@reach/portal@0.9.0(transitive)

• + Added@reach/rect@0.9.0(transitive)

• + Added@reach/utils@0.9.0(transitive)

• - Removed@reach/auto-id@0.8.6(transitive)

• - Removed@reach/descendants@0.8.6(transitive)

• - Removed@reach/machine@0.8.6(transitive)

• - Removed@reach/popover@0.8.6(transitive)

• - Removed@reach/portal@0.8.6(transitive)

• - Removed@reach/rect@0.8.6(transitive)

• - Removed@reach/utils@0.8.6(transitive)

• Updated@reach/auto-id@^0.9.0

• Updated@reach/descendants@^0.9.0

• Updated@reach/machine@^0.9.0

• Updated@reach/popover@^0.9.0

• Updated@reach/utils@^0.9.0