@procore/core-react 12.46.1 → 12.47.1

package/dist/SuperSelect/useSuperSelect.js

@@ -878,7 +878,15 @@ export function useSuperSelect(_ref3) {
       keyboardHandlers: false
     }), useDismiss(floating.context, {
       enabled: !disabled
-    }), useListNavigation(floating.context, {
+    }), {
+      reference: {
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === 'ArrowUp') {
+            e.preventDefault();
+          }
+        }
+      }
+    }, useListNavigation(floating.context, {
       activeIndex: activeMenuIndex,
       disabledIndices: groupIndices,
       enabled: !disabled,
@@ -910,12 +918,12 @@ export function useSuperSelect(_ref3) {
         $placeholder: !selectedLabel,
         'aria-activedescendant': multiple ? undefined : activeDescendantId
       }, !multiple && _objectSpread(_objectSpread({
-        'aria-controls': open ? overlayId : undefined,
+        'aria-controls': open ? listId : undefined,
         'aria-describedby': selectedValueId,
         'aria-expanded': open,
         'aria-haspopup': 'listbox'
       }, getAriaLabelProps()), {}, {
-        role: 'button',
+        role: 'combobox',
         tabIndex: disabled ? -1 : tabIndex
       })), {}, {
         onKeyDown: function onKeyDown() {
@@ -925,10 +933,20 @@ export function useSuperSelect(_ref3) {
       }),
       // TODO fix type
       floating: {
-        role: search ? 'listbox' : 'none',
+        role: 'group',
+        'aria-orientation': undefined,
         id: overlayId,
-        onKeyDown: function onKeyDown() {
+        onKeyDown: function onKeyDown(e) {
           setPointer(false);
+          if (e.key === 'ArrowLeft' && multiple && searchValue === '' && Array.isArray(value) && value.length > 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen(false);
+            requestAnimationFrame(function () {
+              var _tokenRemoveRefs$curr2;
+              (_tokenRemoveRefs$curr2 = tokenRemoveRefs.current[value.length - 1]) === null || _tokenRemoveRefs$curr2 === void 0 ? void 0 : _tokenRemoveRefs$curr2.focus();
+            });
+          }
         },
         onPointerMove: function onPointerMove() {
           setPointer(true);
@@ -956,7 +974,7 @@ export function useSuperSelect(_ref3) {
     var showPlaceholder = isEmpty();
     return _objectSpread(_objectSpread({
       'aria-activedescendant': activeDescendantId,
-      'aria-controls': open ? overlayId : undefined,
+      'aria-controls': open ? listId : undefined,
       'aria-expanded': open,
       'aria-haspopup': 'listbox'
     }, getAriaLabelProps()), {}, {
@@ -966,6 +984,11 @@ export function useSuperSelect(_ref3) {
       placeholder: showPlaceholder ? placeholder : '',
       disabled: disabled,
       onKeyDown: function onKeyDown(e) {
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
         if (e.key === 'Tab') {
           if (open) {
             var _floating$refs$floati;
@@ -974,6 +997,15 @@ export function useSuperSelect(_ref3) {
             (_floating$refs$floati = floating.refs.floating.current) === null || _floating$refs$floati === void 0 ? void 0 : _floating$refs$floati.focus();
           }
         }
+        if (e.key === 'ArrowLeft' && searchValue === '' && Array.isArray(value) && value.length > 0) {
+          e.preventDefault();
+          e.stopPropagation();
+          setOpen(false);
+          requestAnimationFrame(function () {
+            var _tokenRemoveRefs$curr3;
+            (_tokenRemoveRefs$curr3 = tokenRemoveRefs.current[value.length - 1]) === null || _tokenRemoveRefs$curr3 === void 0 ? void 0 : _tokenRemoveRefs$curr3.focus();
+          });
+        }
       }
     });
   }
@@ -989,11 +1021,11 @@ export function useSuperSelect(_ref3) {
           var _searchRef$current2;
           (_searchRef$current2 = searchRef.current) === null || _searchRef$current2 === void 0 ? void 0 : _searchRef$current2.focus();
         } else if (index >= nextVal.length) {
-          var _tokenRemoveRefs$curr2;
-          (_tokenRemoveRefs$curr2 = tokenRemoveRefs.current[nextVal.length - 1]) === null || _tokenRemoveRefs$curr2 === void 0 ? void 0 : _tokenRemoveRefs$curr2.focus();
+          var _tokenRemoveRefs$curr4;
+          (_tokenRemoveRefs$curr4 = tokenRemoveRefs.current[nextVal.length - 1]) === null || _tokenRemoveRefs$curr4 === void 0 ? void 0 : _tokenRemoveRefs$curr4.focus();
         } else {
-          var _tokenRemoveRefs$curr3;
-          (_tokenRemoveRefs$curr3 = tokenRemoveRefs.current[index]) === null || _tokenRemoveRefs$curr3 === void 0 ? void 0 : _tokenRemoveRefs$curr3.focus();
+          var _tokenRemoveRefs$curr5;
+          (_tokenRemoveRefs$curr5 = tokenRemoveRefs.current[index]) === null || _tokenRemoveRefs$curr5 === void 0 ? void 0 : _tokenRemoveRefs$curr5.focus();
         }
       });
     }
@@ -1014,19 +1046,28 @@ export function useSuperSelect(_ref3) {
           e.preventDefault();
           e.stopPropagation();
           if (index > 0) {
-            var _tokenRemoveRefs$curr4;
-            (_tokenRemoveRefs$curr4 = tokenRemoveRefs.current[index - 1]) === null || _tokenRemoveRefs$curr4 === void 0 ? void 0 : _tokenRemoveRefs$curr4.focus();
+            var _tokenRemoveRefs$curr6;
+            (_tokenRemoveRefs$curr6 = tokenRemoveRefs.current[index - 1]) === null || _tokenRemoveRefs$curr6 === void 0 ? void 0 : _tokenRemoveRefs$curr6.focus();
           }
         } else if (e.key === 'ArrowRight') {
           e.preventDefault();
           e.stopPropagation();
           if (isMultiple(multiple, value) && index < value.length - 1) {
-            var _tokenRemoveRefs$curr5;
-            (_tokenRemoveRefs$curr5 = tokenRemoveRefs.current[index + 1]) === null || _tokenRemoveRefs$curr5 === void 0 ? void 0 : _tokenRemoveRefs$curr5.focus();
+            var _tokenRemoveRefs$curr7;
+            (_tokenRemoveRefs$curr7 = tokenRemoveRefs.current[index + 1]) === null || _tokenRemoveRefs$curr7 === void 0 ? void 0 : _tokenRemoveRefs$curr7.focus();
           } else {
             var _searchRef$current3;
             (_searchRef$current3 = searchRef.current) === null || _searchRef$current3 === void 0 ? void 0 : _searchRef$current3.focus();
           }
+        } else if (e.key === 'ArrowDown') {
+          var _searchRef$current4;
+          e.preventDefault();
+          e.stopPropagation();
+          setOpen(true);
+          (_searchRef$current4 = searchRef.current) === null || _searchRef$current4 === void 0 ? void 0 : _searchRef$current4.focus();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          e.stopPropagation();
         }
       }
     };
@@ -1077,14 +1118,34 @@ export function useSuperSelect(_ref3) {
   }
   function getClearProps() {
     return {
-      'aria-hidden': true,
       'aria-label': i18n.t('core.select.clear'),
-      tabIndex: -1,
+      tabIndex: 0,
+      onMouseDown: function onMouseDown(e) {
+        e.preventDefault();
+      },
       onClick: function onClick(e) {
         // prevent the menu from closing
         e.stopPropagation();
         setValue(multiple ? [] : null);
         setOpen(true);
+      },
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          e.stopPropagation();
+          setValue(multiple ? [] : null);
+          if (multiple) {
+            var _searchRef$current5;
+            (_searchRef$current5 = searchRef.current) === null || _searchRef$current5 === void 0 ? void 0 : _searchRef$current5.focus();
+          } else {
+            var _floating$refs$domRef;
+            ;
+            (_floating$refs$domRef = floating.refs.domReference.current) === null || _floating$refs$domRef === void 0 ? void 0 : _floating$refs$domRef.focus();
+          }
+        }
+        if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+          e.stopPropagation();
+        }
       }
     };
   }
@@ -1102,9 +1163,10 @@ export function useSuperSelect(_ref3) {
         onScrollBottom();
       }
     };
-    return {
+    return _objectSpread(_objectSpread({
       role: 'listbox',
-      id: listId,
+      id: listId
+    }, getAriaLabelProps()), {}, {
       data: draggable ? queriedDraggableOptions : options,
       components: {
         Item: components === null || components === void 0 ? void 0 : components.Item // TODO fix type
@@ -1117,7 +1179,7 @@ export function useSuperSelect(_ref3) {
       tabIndex: -1,
       totalListHeightChanged: setListHeight,
       atBottomStateChange: atBottomStateChange
-    };
+    });
   }
   var onDragEnd = React.useCallback(function (result) {
     if (!result.destination) {