@procore/core-react 12.36.0 → 12.37.0

package/dist/SuperSelect/useSuperSelect.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { SuperSelectApi, SuperSelectConfig } from './SuperSelect.types';
-export declare function useSuperSelect({ block, components: customComponents, defaultValue, disabled, draggable, emptyMessage, selectAllEnabled, error, footer, getOptionGroup, getOptionIsBatch, getOptionIsDisabled, getOptionLabel, getOptionIsPartiallySelected, getOptionIsSelected, getOptionValue, onScrollBottom, onOpenChange, header, loading, multiple, onChange, onManualSort, onSelectAll, options: sourceOptions, placeholder, preset, presetProps, search, selectionStyle, setOptionGroup, sort, tabIndex, value: value_, overlayMatchesTriggerWidth, 'aria-label': ariaLabel, }: SuperSelectConfig): SuperSelectApi;
+export declare function useSuperSelect({ block, components: customComponents, defaultValue, disabled, draggable, emptyMessage, selectAllEnabled, error, footer, getOptionGroup, getOptionIsBatch, getOptionIsDisabled, getOptionLabel, getOptionIsPartiallySelected, getOptionIsSelected, getOptionValue, onScrollBottom, onOpenChange, header, loading, multiple, onChange, onManualSort, onUnselectAll, onSelectAll, options: sourceOptions, placeholder, preset, presetProps, search, selectionStyle, setOptionGroup, sort, tabIndex, value: value_, overlayMatchesTriggerWidth, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: SuperSelectConfig): SuperSelectApi;
 export declare const SuperSelectContext: React.Context<SuperSelectApi | null>;
 export declare function useSuperSelectContext(): SuperSelectApi;

package/dist/SuperSelect/useSuperSelect.js

@@ -26,7 +26,7 @@ import { spacing } from '../_styles/spacing';
 import * as defaultComponents from './SuperSelect.components';
 import { draggableOptionIdSymbol, isOptSelectAllSymbol } from './SuperSelect.constants';
 import { extendedSelectMenuWidth } from './SuperSelect.styles';
-import { collectGroupsInOrderOfOccurrence, createOptgroup, getBatchOptionFormatter, getIsAllOptionsUngrouped, getOptionIsOptgroup, getOptionIsOptSelectAll, getOptionsSortingAlgorithm, isMultiple, removeEmptyOptGroups, reorder, sortOptgroups } from './SuperSelect.utils';
+import { collectGroupsInOrderOfOccurrence, createOptgroup, defaultOnUnselectAll, getBatchOptionFormatter, getIsAllOptionsUngrouped, getOptionIsOptgroup, getOptionIsOptSelectAll, getOptionsSortingAlgorithm, isMultiple, removeEmptyOptGroups, reorder, sortOptgroups } from './SuperSelect.utils';
 var listContainerVerticalPadding = spacing.sm * 2;
 function noop() {}
 function defaultGetOptionValue(option) {
@@ -169,6 +169,8 @@ export function useSuperSelect(_ref3) {
     multiple = _ref3$multiple === void 0 ? false : _ref3$multiple,
     onChange = _ref3.onChange,
     onManualSort = _ref3.onManualSort,
+    _ref3$onUnselectAll = _ref3.onUnselectAll,
+    onUnselectAll = _ref3$onUnselectAll === void 0 ? defaultOnUnselectAll : _ref3$onUnselectAll,
     onSelectAll = _ref3.onSelectAll,
     _ref3$options = _ref3.options,
     sourceOptions = _ref3$options === void 0 ? [] : _ref3$options,
@@ -189,7 +191,11 @@ export function useSuperSelect(_ref3) {
     value_ = _ref3.value,
     _ref3$overlayMatchesT = _ref3.overlayMatchesTriggerWidth,
     overlayMatchesTriggerWidth = _ref3$overlayMatchesT === void 0 ? true : _ref3$overlayMatchesT,
-    ariaLabel = _ref3['aria-label'];
+    ariaLabel = _ref3['aria-label'],
+    ariaLabelledBy = _ref3['aria-labelledby'];
+  var valueId = useId();
+  var labelId = useId();
+  var computedLabelledBy = ariaLabel ? undefined : ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : labelId;
   React.useEffect(function () {
     if (!draggable) {
       return;
@@ -227,12 +233,10 @@ export function useSuperSelect(_ref3) {
   var isProcessingAutoSelectionRef = React.useRef(false);
 
   /**
-   * Stores a snapshot of previously available selectable options as a Map.
-   * Key: JSON stringified option value for fast lookups
-   * Value: The SuperSelectOption object
-   * Used to detect newly added options for auto-selection when Select All is active.
+   * Stores a snapshot of previously selected values to compare against
+   * current options for auto-selection.
    */
-  var previousSelectableOptionsRef = React.useRef(new Set());
+  var previousSelectedValuesRef = React.useRef([]);
   function setValue(v) {
     if (!value_) {
       setVal(v);
@@ -313,39 +317,31 @@ export function useSuperSelect(_ref3) {
     if (!isSelectAllActive || !multiple || !Array.isArray(currentValue) || isProcessingAutoSelectionRef.current) {
       return;
     }
-    var selectableOptions = options.filter(function (opt) {
-      return !getOptionIsOptgroup(opt);
-    });
-    var currentOptionKeys = new Set();
+    previousSelectedValuesRef.current = currentValue;
     var newlyAddedOptions = [];
+    var currentValueSet = new Set(currentValue);
     var _iterator2 = _createForOfIteratorHelper(selectableOptions),
       _step2;
     try {
       for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
         var _option = _step2.value;
-        var optionKey = JSON.stringify(getOptionValue(_option));
-        currentOptionKeys.add(optionKey);
-        if (!previousSelectableOptionsRef.current.has(optionKey)) {
+        var _optionValues = getOptionValuesFlat(_option);
+        var hasNewValue = _optionValues.some(function (val) {
+          return !currentValueSet.has(val);
+        });
+        if (hasNewValue) {
           newlyAddedOptions.push(_option);
         }
       }
-
-      // Update reference for next comparison
     } catch (err) {
       _iterator2.e(err);
     } finally {
       _iterator2.f();
     }
-    previousSelectableOptionsRef.current = currentOptionKeys;
-
-    // No new options to auto-select
     if (newlyAddedOptions.length === 0) {
       return;
     }
-
-    // Set processing flag to prevent recursive calls
     isProcessingAutoSelectionRef.current = true;
-    var currentValueSet = new Set(currentValue);
     var newValuesToAdd = [];
 
     // Collect new values that aren't already selected
@@ -644,6 +640,23 @@ export function useSuperSelect(_ref3) {
   var selectedLabel = React.useMemo(function () {
     return selectedOption ? getOptionLabel(selectedOption) : '';
   }, [selectedOption]);
+
+  // Active option id calculation - ensures aria-activedescendant matches the active option
+  // in the combined navigation list, including SelectAll.
+  var activeOptionId = React.useMemo(function () {
+    if (activeMenuIndex === null) {
+      return undefined;
+    }
+    var baseOptions = selectAllEnabled && multiple ? allOptionsWithSelectAll : options;
+    var option = baseOptions[activeMenuIndex];
+    if (!option) {
+      return undefined;
+    }
+    var val = getOptionValue(option);
+    return "item-".concat(val);
+  }, [activeMenuIndex, selectAllEnabled, multiple, allOptionsWithSelectAll, options, getOptionValue]);
+  var isInitialSelectedOpen = open && selectedIndex !== null && activeMenuIndex === selectedIndex;
+  var activeDescendantId = open && !isInitialSelectedOpen && activeOptionId ? activeOptionId : undefined;
   function isSelectableOption(o) {
     return !getOptionIsOptgroup(o) && !getOptionIsDisabled(o);
   }
@@ -675,12 +688,12 @@ export function useSuperSelect(_ref3) {
       return getIsSelected(opt);
     });
     if (allSelected) {
-      setValue([]);
+      var newValue = onUnselectAll(value, options, searchValue, getOptionValuesFlat);
+      setValue(newValue);
     } else {
       if (onSelectAll) {
         onSelectAll(selectableOptions);
       }
-      // Ensure we're working with an array for multiple selection
       var currentValue = Array.isArray(value) ? value : [];
       var valueSet = new Set(currentValue);
       selectableOptions.forEach(function (opt) {
@@ -706,17 +719,15 @@ export function useSuperSelect(_ref3) {
 
   // Centralize select all active state
   React.useEffect(function () {
-    var selectableOptions = options.filter(function (opt) {
-      return !getOptionIsOptgroup(opt);
-    });
-    var shouldBeActive = shouldActivateSelectAll(selectableOptions) && selectableOptions.length && value.length;
+    var shouldBeActive = shouldActivateSelectAll(selectableOptions) && selectableOptions.length && !!value.length;
 
     // When Select All is already active and new selectable options are added,
     // skip updating the Select All active state here. This allows the existing
     // auto-selection logic to handle newly added options without triggering
     // unnecessary state changes in this effect.
-    var hasNewOptions = selectableOptions.length > previousSelectableOptionsRef.current.size;
-    if (isSelectAllActive && hasNewOptions && value.length) {
+    var hasNewOptions = selectableOptions.length > previousSelectedValuesRef.current.length;
+    var hasRemovedValue = (value || []).length < previousSelectedValuesRef.current.length;
+    if (isSelectAllActive && hasNewOptions && !hasRemovedValue && value.length) {
       return;
     }
     if (shouldBeActive) {
@@ -929,22 +940,22 @@ export function useSuperSelect(_ref3) {
         $multiple: multiple,
         $open: open,
         $placeholder: !selectedLabel,
-        'aria-controls': search ? overlayId : listId,
+        'aria-controls': overlayId,
         'aria-expanded': open,
-        'aria-haspopup': search ? 'dialog' : 'listbox'
+        'aria-describedby': valueId,
+        'aria-labelledby': computedLabelledBy
       }, ariaLabel && {
         'aria-label': ariaLabel
       }), {}, {
         onKeyDown: function onKeyDown() {
           setPointer(false);
         },
-        role: 'combobox',
+        role: 'button',
         search: search,
         tabIndex: disabled ? -1 : tabIndex
       }),
       // TODO fix type
       floating: {
-        role: search ? 'dialog' : 'none',
         id: overlayId,
         onKeyDown: function onKeyDown() {
           setPointer(false);
@@ -967,15 +978,24 @@ export function useSuperSelect(_ref3) {
     getItemProps = _useInteractions.getItemProps;
   function getLabelProps() {
     return {
-      $hoverable: false
+      $hoverable: false,
+      id: labelId
     };
   }
   function getMultiInputProps() {
-    return {
+    return _objectSpread(_objectSpread({
       ref: searchRef,
       placeholder: isEmpty() ? placeholder : '',
       disabled: disabled,
+      role: 'combobox',
+      'aria-expanded': open,
       'aria-controls': listId,
+      'aria-haspopup': 'listbox',
+      'aria-labelledby': computedLabelledBy,
+      'aria-activedescendant': activeDescendantId
+    }, ariaLabel && {
+      'aria-label': ariaLabel
+    }), {}, {
       onKeyDown: function onKeyDown(e) {
         if (e.key === 'Tab') {
           if (open) {
@@ -993,7 +1013,7 @@ export function useSuperSelect(_ref3) {
       style: {
         opacity: activeTokenIndex === null ? 1 : 0
       }
-    };
+    });
   }
   function getMultiValueProps(index) {
     return {
@@ -1017,14 +1037,22 @@ export function useSuperSelect(_ref3) {
     };
   }
   function getSearchProps() {
-    return {
+    return _objectSpread(_objectSpread({
+      role: 'combobox',
+      'aria-haspopup': 'listbox',
+      'aria-expanded': open,
       'aria-controls': listId,
+      'aria-labelledby': computedLabelledBy,
+      'aria-activedescendant': activeDescendantId
+    }, ariaLabel && {
+      'aria-label': ariaLabel
+    }), {}, {
       onChange: function onChange(value) {
         setSearchValue(value);
         setActiveTokenIndex(null);
       },
       placeholder: i18n.t('core.select.search')
-    };
+    });
   }
   function getHeaderProps() {
     return {
@@ -1051,7 +1079,6 @@ export function useSuperSelect(_ref3) {
   }
   function getClearProps() {
     return {
-      'aria-hidden': true,
       'aria-label': i18n.t('core.select.clear'),
       onClick: function onClick(e) {
         // prevent the menu from closing
@@ -1078,7 +1105,7 @@ export function useSuperSelect(_ref3) {
     };
     return {
       role: 'listbox',
-      id: search ? overlayId : listId,
+      id: listId,
       data: draggable ? queriedDraggableOptions : options,
       components: {
         Item: components === null || components === void 0 ? void 0 : components.Item // TODO fix type
@@ -1237,6 +1264,8 @@ export function useSuperSelect(_ref3) {
       setActiveMenuIndex: setActiveMenuIndex,
       sourceOptions: sourceOptions,
       value: value,
+      labelId: labelId,
+      valueId: valueId,
       width: width
     },
     props: {