@spscommerce/ds-react 5.8.0 → 5.8.1

package/lib/index.es.js

@@ -1290,7 +1290,7 @@ function compareOptions(optionA, optionB, comparisonKey) {
 function isOptionDisabled(disabledOptions, comparisonKey, option) {
   return comparisonKey ? !!(disabledOptions == null ? void 0 : disabledOptions.find((opt) => {
     var _a;
-    return opt[comparisonKey] && opt[comparisonKey] === ((_a = option.value) == null ? void 0 : _a[comparisonKey]);
+    return opt[comparisonKey] && opt[comparisonKey] === ((_a = option == null ? void 0 : option.value) == null ? void 0 : _a[comparisonKey]);
   })) : false;
 }
 const SpsOptionList = React.forwardRef((props2, ref2) => {
@@ -1415,7 +1415,10 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
       }
     }
   }, [isOpen, onSelfToggle]);
-  const selectOption = React.useCallback((option) => {
+  const selectOption = React.useCallback((option, isDisabled) => {
+    if (isDisabled) {
+      return;
+    }
     if (option && !option.disabled) {
       if (typeof option.value === "function") {
         option.value();
@@ -1427,10 +1430,12 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
       }
     }
   }, [onOptionSelected, closeSelf]);
-  const handleOptionClick = React.useCallback((event, option) => {
+  const handleOptionClick = React.useCallback((event, option, isDisabled) => {
     event.stopPropagation();
-    selectOption(option);
+    selectOption(option, isDisabled);
   }, [selectOption]);
+  const disabledOptionsRef = React.useRef(disabledOptions || []);
+  disabledOptionsRef.current = disabledOptions || [];
   const handleArrowKeyDown = React.useCallback((event) => {
     switch (event.key) {
       case "Tab":
@@ -1441,10 +1446,11 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
         if (highlightedOptionIndex > -1) {
           const highlightedOption = optionList[highlightedOptionIndex] || specialActionOption;
           event.preventDefault();
-          if (highlightedOption && typeof onOptionSelected === "function" && typeof highlightedOption.value === "function") {
+          const isDisabled = !!highlightedOption && isOptionDisabled(disabledOptionsRef.current, comparisonKey, highlightedOption);
+          if (!isDisabled && highlightedOption && typeof onOptionSelected === "function" && typeof highlightedOption.value === "function") {
             highlightedOption.value();
           } else if (highlightedOption) {
-            selectOption(highlightedOption);
+            selectOption(highlightedOption, isDisabled);
           }
         }
         break;
@@ -1597,14 +1603,16 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     className: "sps-option-list__loading"
   }, /* @__PURE__ */ React.createElement(SpsSpinner, null)), !loading && !searchState.pending && optionList.map((option, i2) => {
     const identifier = `${id2}-option-${i2}`;
+    const comparisonResult = compareOptions(option.value, selectedOption, comparisonKey);
+    const isOptionDisabledResult = isOptionDisabled(disabledOptionsRef.current, comparisonKey, option);
     return /* @__PURE__ */ React.createElement("a", {
       key: identifier,
       id: identifier,
       role: optionRole,
-      "aria-selected": compareOptions(option.value, selectedOption, comparisonKey),
+      "aria-selected": comparisonResult,
       href: option.href,
-      className: clsx("sps-option-list__option", option.caption && "sps-option-list__option--has-caption", option.disabled && "sps-option-list__option--disabled", option.bold && "sps-option-list__option--bold", (compareOptions(option.value, selectedOption, comparisonKey) || isOptionDisabled(disabledOptions, comparisonKey, option)) && "sps-option-list__option--selected", highlightedOptionIndex === i2 && "sps-option-list__option--highlighted"),
-      onClick: (event) => handleOptionClick(event, option),
+      className: clsx("sps-option-list__option", option.caption && "sps-option-list__option--has-caption", option.disabled && "sps-option-list__option--disabled", option.bold && "sps-option-list__option--bold", (comparisonResult || isOptionDisabledResult) && "sps-option-list__option--selected", highlightedOptionIndex === i2 && "sps-option-list__option--highlighted"),
+      onClick: (event) => handleOptionClick(event, option, isOptionDisabledResult),
       onMouseOver: () => setHighlightedOptionIndex(i2),
       tabIndex: -1,
       ref: highlightedOptionIndex === i2 ? highlightedOptionRef : null,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.8.0",
+  "version": "5.8.1",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,10 +28,10 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.8.0",
-    "@spscommerce/ds-shared": "5.8.0",
-    "@spscommerce/positioning": "5.8.0",
-    "@spscommerce/utils": "5.8.0",
+    "@spscommerce/ds-colors": "5.8.1",
+    "@spscommerce/ds-shared": "5.8.1",
+    "@spscommerce/positioning": "5.8.1",
+    "@spscommerce/utils": "5.8.1",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -39,10 +39,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.8.0",
-    "@spscommerce/ds-shared": "5.8.0",
-    "@spscommerce/positioning": "5.8.0",
-    "@spscommerce/utils": "5.8.0",
+    "@spscommerce/ds-colors": "5.8.1",
+    "@spscommerce/ds-shared": "5.8.1",
+    "@spscommerce/positioning": "5.8.1",
+    "@spscommerce/utils": "5.8.1",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",