@spscommerce/ds-react 5.2.4 → 5.2.5

package/lib/index.es.js

@@ -1277,6 +1277,12 @@ const LETTER_KEYS = [
 function compareOptions(optionA, optionB, comparisonKey) {
   return comparisonKey ? (optionA && optionA[comparisonKey]) === (optionB && optionB[comparisonKey]) : optionA === optionB;
 }
+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]);
+  })) : false;
+}
 const SpsOptionList = React.forwardRef((props2, ref2) => {
   const _a = props2, {
     captionKey,
@@ -1583,7 +1589,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
       role: optionRole,
       "aria-selected": compareOptions(option.value, selectedOption, comparisonKey),
       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) && "sps-option-list__option--selected", highlightedOptionIndex === i2 && "sps-option-list__option--highlighted"),
+      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),
       onMouseOver: () => setHighlightedOptionIndex(i2),
       tabIndex: -1,
@@ -28805,6 +28811,7 @@ const propsDoc$Q = {
   debounce: "number",
   disabled: "boolean",
   disableSelected: "boolean",
+  comparisonKey: "string",
   formMeta: "SpsFormFieldMeta<any[]>",
   hideSelected: "boolean",
   icon: "SpsIcon",
@@ -28823,6 +28830,7 @@ const propTypes$S = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   debounce: propTypes$1L.exports.number,
   disabled: propTypes$1L.exports.bool,
   disableSelected: propTypes$1L.exports.bool,
+  comparisonKey: propTypes$1L.exports.string,
   formControl: impl(),
   formMeta: impl(),
   hideSelected: propTypes$1L.exports.bool,
@@ -28848,6 +28856,7 @@ function SpsMultiSelect(_w) {
     debounce: debounce2,
     disabled,
     disableSelected = false,
+    comparisonKey,
     formControl: formControl2,
     formMeta,
     hideSelected,
@@ -28869,6 +28878,7 @@ function SpsMultiSelect(_w) {
     "debounce",
     "disabled",
     "disableSelected",
+    "comparisonKey",
     "formControl",
     "formMeta",
     "hideSelected",
@@ -29063,6 +29073,7 @@ function SpsMultiSelect(_w) {
     captionKey,
     disabledOptions: disableSelected ? value : null,
     isOpen: showPopup,
+    comparisonKey,
     keepOpen: true,
     keyDown: state.keyDown,
     options,

package/lib/multi-select/SpsMultiSelect.d.ts

@@ -11,6 +11,7 @@ declare const propTypes: {
     debounce: PropTypes.Requireable<number>;
     disabled: PropTypes.Requireable<boolean>;
     disableSelected: PropTypes.Requireable<boolean>;
+    comparisonKey: PropTypes.Requireable<string>;
     formControl: PropTypes.Requireable<SpsFormControl<any[]>>;
     formMeta: PropTypes.Requireable<SpsFormFieldMeta<any[]>>;
     hideSelected: PropTypes.Requireable<boolean>;
@@ -29,5 +30,5 @@ declare const propTypes: {
     unsafelyReplaceClassName: PropTypes.Requireable<string>;
 };
 export declare type SpsMultiSelectProps = PropTypes.InferTS<typeof propTypes, HTMLInputElement>;
-export declare function SpsMultiSelect({ action, captionKey, className, debounce, disabled, disableSelected, formControl, formMeta, hideSelected, id, onChange, options, placeholder, tallOptionList, textKey, unsafelyReplaceClassName, value, zeroState, loading, icon, ...rest }: SpsMultiSelectProps): JSX.Element;
+export declare function SpsMultiSelect({ action, captionKey, className, debounce, disabled, disableSelected, comparisonKey, formControl, formMeta, hideSelected, id, onChange, options, placeholder, tallOptionList, textKey, unsafelyReplaceClassName, value, zeroState, loading, icon, ...rest }: SpsMultiSelectProps): JSX.Element;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.2.4",
+  "version": "5.2.5",
   "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.2.4",
-    "@spscommerce/ds-shared": "5.2.4",
-    "@spscommerce/positioning": "5.2.4",
-    "@spscommerce/utils": "5.2.4",
+    "@spscommerce/ds-colors": "5.2.5",
+    "@spscommerce/ds-shared": "5.2.5",
+    "@spscommerce/positioning": "5.2.5",
+    "@spscommerce/utils": "5.2.5",
     "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.2.4",
-    "@spscommerce/ds-shared": "5.2.4",
-    "@spscommerce/positioning": "5.2.4",
-    "@spscommerce/utils": "5.2.4",
+    "@spscommerce/ds-colors": "5.2.5",
+    "@spscommerce/ds-shared": "5.2.5",
+    "@spscommerce/positioning": "5.2.5",
+    "@spscommerce/utils": "5.2.5",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",