@reach/listbox - npm Package Compare versions

Comparing version 0.13.2 to 0.14.0

dist/declarations/src/machine.d.ts

@@ -27,7 +27,9 @@ import type { ListboxDescendant, ListboxValue } from "./index";
     OptionMouseEnter = "OPTION_MOUSE_ENTER",
+    OptionMouseDown = "OPTION_MOUSE_DOWN",
+    OptionMouseUp = "OPTION_MOUSE_UP",
+    OptionClick = "OPTION_CLICK",
+    OptionPress = "OPTION_PRESS",
     OutsideMouseDown = "OUTSIDE_MOUSE_DOWN",
     OutsideMouseUp = "OUTSIDE_MOUSE_UP",
     ValueChange = "VALUE_CHANGE",
-    OptionMouseDown = "OPTION_MOUSE_DOWN",
-    OptionMouseUp = "OPTION_MOUSE_UP",
     PopoverPointerDown = "POPOVER_POINTER_DOWN",
@@ -130,2 +132,12 @@ PopoverPointerUp = "POPOVER_POINTER_UP",
 } | {
+    type: ListboxEvents.OptionClick;
+    value: ListboxValue | null | undefined;
+    callback?: ((newValue: ListboxValue) => void) | null | undefined;
+    disabled: boolean;
+} | {
+    type: ListboxEvents.OptionPress;
+    value: ListboxValue | null | undefined;
+    callback?: ((newValue: ListboxValue) => void) | null | undefined;
+    disabled: boolean;
+} | {
     type: ListboxEvents.KeyDownTab;
@@ -132,0 +144,0 @@ } | {

dist/reach-listbox.cjs.dev.js

@@ -84,7 +84,9 @@ 'use strict';
   ListboxEvents["OptionMouseEnter"] = "OPTION_MOUSE_ENTER";
+  ListboxEvents["OptionMouseDown"] = "OPTION_MOUSE_DOWN";
+  ListboxEvents["OptionMouseUp"] = "OPTION_MOUSE_UP";
+  ListboxEvents["OptionClick"] = "OPTION_CLICK";
+  ListboxEvents["OptionPress"] = "OPTION_PRESS";
   ListboxEvents["OutsideMouseDown"] = "OUTSIDE_MOUSE_DOWN";
   ListboxEvents["OutsideMouseUp"] = "OUTSIDE_MOUSE_UP";
   ListboxEvents["ValueChange"] = "VALUE_CHANGE";
-  ListboxEvents["OptionMouseDown"] = "OPTION_MOUSE_DOWN";
-  ListboxEvents["OptionMouseUp"] = "OPTION_MOUSE_UP";
   ListboxEvents["PopoverPointerDown"] = "POPOVER_POINTER_DOWN";
@@ -205,6 +207,10 @@ ListboxEvents["PopoverPointerUp"] = "POPOVER_POINTER_UP";
 function optionIsSelectable(data, event) {
-  if (event && event.disabled) {
+  if ("disabled" in event && event.disabled) {
     return false;
   }
 
+  if ("value" in event) {
+    return event.value != null;
+  }
+
   return data.navigationValue != null;
@@ -398,2 +404,10 @@ }
         cond: optionIsNavigable
+      }, _default3[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default3[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default3[ListboxEvents.OptionMouseEnter] = {
@@ -463,2 +477,10 @@ target: ListboxStates.Navigating,
         cond: optionIsNavigable
+      }, _default4[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default4[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default4[ListboxEvents.KeyDownNavigate] = {
@@ -538,2 +560,10 @@ target: ListboxStates.Navigating,
         cond: optionIsNavigable
+      }, _default5[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default5[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default5[ListboxEvents.OptionMouseEnter] = {
@@ -620,2 +650,10 @@ target: ListboxStates.Dragging,
         cond: optionIsNavigable
+      }, _default6[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default6[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default6[ListboxEvents.OptionMouseEnter] = {
@@ -706,5 +744,4 @@ target: ListboxStates.Navigating,
       options = _useDescendantsInit[0],
-      setOptions = _useDescendantsInit[1];
+      setOptions = _useDescendantsInit[1]; // DOM refs
 
-  var stableOnChange = utils.useStableCallback(onChange); // DOM refs
 
@@ -734,4 +771,9 @@ var buttonRef = React.useRef(null);
       state = _useMachine[0],
-      send = _useMachine[1]; // IDs for aria attributes
+      send = _useMachine[1];
 
+  var stableOnChange = utils.useStableCallback(function (newValue) {
+    if (newValue !== state.context.value) {
+      onChange == null ? void 0 : onChange(newValue);
+    }
+  }); // IDs for aria attributes
 
@@ -1293,2 +1335,3 @@ var _id = autoId.useId(props.id);
       disabled = _ref8.disabled,
+      onClick = _ref8.onClick,
       onMouseDown = _ref8.onMouseDown,
@@ -1302,3 +1345,3 @@ onMouseEnter = _ref8.onMouseEnter,
       labelProp = _ref8.label,
-      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"]);
+      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onClick", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"]);
 
@@ -1393,2 +1436,18 @@ if (process.env.NODE_ENV !== "production" && !value) {
 
+  function handleClick(event) {
+    // Generally an option will be selected on mouseup, but in case this isn't
+    // handled correctly by the device (whether because it's a touch/pen or
+    // virtual click event) we want to handle selection on a full click event
+    // just in case. This should address issues with screenreader selection,
+    // but this needs more robust testing.
+    if (!utils.isRightClick(event.nativeEvent)) {
+      send({
+        type: ListboxEvents.OptionClick,
+        value: value,
+        callback: onValueChange,
+        disabled: !!disabled
+      });
+    }
+  }
+
   function handleMouseMove() {
@@ -1425,5 +1484,7 @@ // We don't really *need* these guards since we put all of our transition
     "data-reach-listbox-option": "",
-    "data-current": isSelected ? "" : undefined,
+    "data-current-nav": isHighlighted ? "" : undefined,
+    "data-current-selected": isSelected ? "" : undefined,
     "data-label": label,
     "data-value": value,
+    onClick: utils.wrapEvent(onClick, handleClick),
     onMouseDown: utils.wrapEvent(onMouseDown, handleMouseDown),
@@ -1430,0 +1491,0 @@ onMouseEnter: utils.wrapEvent(onMouseEnter, handleMouseEnter),

dist/reach-listbox.cjs.prod.js

@@ -80,7 +80,9 @@ 'use strict';
   ListboxEvents["OptionMouseEnter"] = "OPTION_MOUSE_ENTER";
+  ListboxEvents["OptionMouseDown"] = "OPTION_MOUSE_DOWN";
+  ListboxEvents["OptionMouseUp"] = "OPTION_MOUSE_UP";
+  ListboxEvents["OptionClick"] = "OPTION_CLICK";
+  ListboxEvents["OptionPress"] = "OPTION_PRESS";
   ListboxEvents["OutsideMouseDown"] = "OUTSIDE_MOUSE_DOWN";
   ListboxEvents["OutsideMouseUp"] = "OUTSIDE_MOUSE_UP";
   ListboxEvents["ValueChange"] = "VALUE_CHANGE";
-  ListboxEvents["OptionMouseDown"] = "OPTION_MOUSE_DOWN";
-  ListboxEvents["OptionMouseUp"] = "OPTION_MOUSE_UP";
   ListboxEvents["PopoverPointerDown"] = "POPOVER_POINTER_DOWN";
@@ -201,6 +203,10 @@ ListboxEvents["PopoverPointerUp"] = "POPOVER_POINTER_UP";
 function optionIsSelectable(data, event) {
-  if (event && event.disabled) {
+  if ("disabled" in event && event.disabled) {
     return false;
   }
 
+  if ("value" in event) {
+    return event.value != null;
+  }
+
   return data.navigationValue != null;
@@ -394,2 +400,10 @@ }
         cond: optionIsNavigable
+      }, _default3[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default3[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default3[ListboxEvents.OptionMouseEnter] = {
@@ -459,2 +473,10 @@ target: ListboxStates.Navigating,
         cond: optionIsNavigable
+      }, _default4[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default4[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default4[ListboxEvents.KeyDownNavigate] = {
@@ -534,2 +556,10 @@ target: ListboxStates.Navigating,
         cond: optionIsNavigable
+      }, _default5[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default5[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default5[ListboxEvents.OptionMouseEnter] = {
@@ -616,2 +646,10 @@ target: ListboxStates.Dragging,
         cond: optionIsNavigable
+      }, _default6[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default6[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default6[ListboxEvents.OptionMouseEnter] = {
@@ -702,5 +740,4 @@ target: ListboxStates.Navigating,
       options = _useDescendantsInit[0],
-      setOptions = _useDescendantsInit[1];
+      setOptions = _useDescendantsInit[1]; // DOM refs
 
-  var stableOnChange = utils.useStableCallback(onChange); // DOM refs
 
@@ -730,4 +767,9 @@ var buttonRef = React.useRef(null);
       state = _useMachine[0],
-      send = _useMachine[1]; // IDs for aria attributes
+      send = _useMachine[1];
 
+  var stableOnChange = utils.useStableCallback(function (newValue) {
+    if (newValue !== state.context.value) {
+      onChange == null ? void 0 : onChange(newValue);
+    }
+  }); // IDs for aria attributes
 
@@ -1237,2 +1279,3 @@ var _id = autoId.useId(props.id);
       disabled = _ref8.disabled,
+      onClick = _ref8.onClick,
       onMouseDown = _ref8.onMouseDown,
@@ -1246,3 +1289,3 @@ onMouseEnter = _ref8.onMouseEnter,
       labelProp = _ref8.label,
-      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"]);
+      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onClick", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"]);
 
@@ -1333,2 +1376,18 @@ var _React$useContext5 = React.useContext(ListboxContext),
 
+  function handleClick(event) {
+    // Generally an option will be selected on mouseup, but in case this isn't
+    // handled correctly by the device (whether because it's a touch/pen or
+    // virtual click event) we want to handle selection on a full click event
+    // just in case. This should address issues with screenreader selection,
+    // but this needs more robust testing.
+    if (!utils.isRightClick(event.nativeEvent)) {
+      send({
+        type: ListboxEvents.OptionClick,
+        value: value,
+        callback: onValueChange,
+        disabled: !!disabled
+      });
+    }
+  }
+
   function handleMouseMove() {
@@ -1365,5 +1424,7 @@ // We don't really *need* these guards since we put all of our transition
     "data-reach-listbox-option": "",
-    "data-current": isSelected ? "" : undefined,
+    "data-current-nav": isHighlighted ? "" : undefined,
+    "data-current-selected": isSelected ? "" : undefined,
     "data-label": label,
     "data-value": value,
+    onClick: utils.wrapEvent(onClick, handleClick),
     onMouseDown: utils.wrapEvent(onMouseDown, handleMouseDown),
@@ -1370,0 +1431,0 @@ onMouseEnter: utils.wrapEvent(onMouseEnter, handleMouseEnter),

dist/reach-listbox.esm.js

@@ -76,7 +76,9 @@ import { useRef, useMemo, useEffect, createElement, Fragment, useContext, useState, useCallback } from 'react';
   ListboxEvents["OptionMouseEnter"] = "OPTION_MOUSE_ENTER";
+  ListboxEvents["OptionMouseDown"] = "OPTION_MOUSE_DOWN";
+  ListboxEvents["OptionMouseUp"] = "OPTION_MOUSE_UP";
+  ListboxEvents["OptionClick"] = "OPTION_CLICK";
+  ListboxEvents["OptionPress"] = "OPTION_PRESS";
   ListboxEvents["OutsideMouseDown"] = "OUTSIDE_MOUSE_DOWN";
   ListboxEvents["OutsideMouseUp"] = "OUTSIDE_MOUSE_UP";
   ListboxEvents["ValueChange"] = "VALUE_CHANGE";
-  ListboxEvents["OptionMouseDown"] = "OPTION_MOUSE_DOWN";
-  ListboxEvents["OptionMouseUp"] = "OPTION_MOUSE_UP";
   ListboxEvents["PopoverPointerDown"] = "POPOVER_POINTER_DOWN";
@@ -197,6 +199,10 @@ ListboxEvents["PopoverPointerUp"] = "POPOVER_POINTER_UP";
 function optionIsSelectable(data, event) {
-  if (event && event.disabled) {
+  if ("disabled" in event && event.disabled) {
     return false;
   }
 
+  if ("value" in event) {
+    return event.value != null;
+  }
+
   return data.navigationValue != null;
@@ -390,2 +396,10 @@ }
         cond: optionIsNavigable
+      }, _default3[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default3[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default3[ListboxEvents.OptionMouseEnter] = {
@@ -455,2 +469,10 @@ target: ListboxStates.Navigating,
         cond: optionIsNavigable
+      }, _default4[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default4[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default4[ListboxEvents.KeyDownNavigate] = {
@@ -530,2 +552,10 @@ target: ListboxStates.Navigating,
         cond: optionIsNavigable
+      }, _default5[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default5[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default5[ListboxEvents.OptionMouseEnter] = {
@@ -612,2 +642,10 @@ target: ListboxStates.Dragging,
         cond: optionIsNavigable
+      }, _default6[ListboxEvents.OptionClick] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
+      }, _default6[ListboxEvents.OptionPress] = {
+        target: ListboxStates.Idle,
+        actions: [assignValue, clearTypeahead, focusButton, selectOption],
+        cond: optionIsSelectable
       }, _default6[ListboxEvents.OptionMouseEnter] = {
@@ -698,5 +736,4 @@ target: ListboxStates.Navigating,
       options = _useDescendantsInit[0],
-      setOptions = _useDescendantsInit[1];
+      setOptions = _useDescendantsInit[1]; // DOM refs
 
-  var stableOnChange = useStableCallback(onChange); // DOM refs
 
@@ -726,4 +763,9 @@ var buttonRef = useRef(null);
       state = _useMachine[0],
-      send = _useMachine[1]; // IDs for aria attributes
+      send = _useMachine[1];
 
+  var stableOnChange = useStableCallback(function (newValue) {
+    if (newValue !== state.context.value) {
+      onChange == null ? void 0 : onChange(newValue);
+    }
+  }); // IDs for aria attributes
 
@@ -1285,2 +1327,3 @@ var _id = useId(props.id);
       disabled = _ref8.disabled,
+      onClick = _ref8.onClick,
       onMouseDown = _ref8.onMouseDown,
@@ -1294,3 +1337,3 @@ onMouseEnter = _ref8.onMouseEnter,
       labelProp = _ref8.label,
-      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"]);
+      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onClick", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"]);
 
@@ -1385,2 +1428,18 @@ if (process.env.NODE_ENV !== "production" && !value) {
 
+  function handleClick(event) {
+    // Generally an option will be selected on mouseup, but in case this isn't
+    // handled correctly by the device (whether because it's a touch/pen or
+    // virtual click event) we want to handle selection on a full click event
+    // just in case. This should address issues with screenreader selection,
+    // but this needs more robust testing.
+    if (!isRightClick(event.nativeEvent)) {
+      send({
+        type: ListboxEvents.OptionClick,
+        value: value,
+        callback: onValueChange,
+        disabled: !!disabled
+      });
+    }
+  }
+
   function handleMouseMove() {
@@ -1417,5 +1476,7 @@ // We don't really *need* these guards since we put all of our transition
     "data-reach-listbox-option": "",
-    "data-current": isSelected ? "" : undefined,
+    "data-current-nav": isHighlighted ? "" : undefined,
+    "data-current-selected": isSelected ? "" : undefined,
     "data-label": label,
     "data-value": value,
+    onClick: wrapEvent(onClick, handleClick),
     onMouseDown: wrapEvent(onMouseDown, handleMouseDown),
@@ -1422,0 +1483,0 @@ onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),

package.json

 {
   "name": "@reach/listbox",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "Accessible React listbox input.",
   "author": "React Training <[e-mail]>",
   "license": "MIT",
+  "sideEffects": false,
   "repository": {
@@ -13,7 +14,7 @@ "type": "git",
   "dependencies": {
-    "@reach/auto-id": "0.13.2",
-    "@reach/descendants": "0.13.2",
-    "@reach/machine": "0.13.2",
-    "@reach/popover": "0.13.2",
-    "@reach/utils": "0.13.2",
+    "@reach/auto-id": "0.14.0",
+    "@reach/descendants": "0.14.0",
+    "@reach/machine": "0.14.0",
+    "@reach/popover": "0.14.0",
+    "@reach/utils": "0.14.0",
     "prop-types": "^15.7.2"
@@ -41,3 +42,3 @@ },
   ],
-  "gitHead": "9e2a19717eb581722e9af99b0f8f3d976de9a55f"
+  "gitHead": "80f6ca5f8d25a10887e2bd34d60094402b9bc0a7"
 }

No alert changes

Improved metrics

Total package byte prevSize

209986

increased by4.1%

Lines of code

5293

increased by3.7%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@reach/auto-id@0.14.0

• Updated@reach/descendants@0.14.0

• Updated@reach/machine@0.14.0

• Updated@reach/popover@0.14.0

• Updated@reach/utils@0.14.0