@spscommerce/ds-react 5.5.0 → 5.8.1

package/lib/index.es.js

@@ -610,29 +610,39 @@ const SpsFormComponentWrapper = React.forwardRef((props2, ref2) => {
     focusInputOnClick,
     formControl: formControl2,
     formMeta,
-    inputRef: inputRefProp
+    inputRef: inputRefProp,
+    onClick
   } = _a, rest = __objRest(_a, [
     "className",
     "children",
     "focusInputOnClick",
     "formControl",
     "formMeta",
-    "inputRef"
+    "inputRef",
+    "onClick"
   ]);
   const fallbackRef = React.useRef();
   const rootRef = ref2 || fallbackRef;
   const inputRef = inputRefProp || rootRef;
-  function doFocusInput() {
+  function doFocusInputOnClick() {
     if (inputRef && inputRef !== ref2 && inputRef.current) {
       inputRef.current.focus();
     }
   }
   const classes = clsx("sps-form-group", (formControl2 && formControl2.isRequired() || formMeta && formMeta.isRequired()) && "sps-form-group--required", (formControl2 && !formControl2.isValid() || formMeta && formMeta.isVisibilyInvalid()) && "sps-form-group--error", className);
+  function handleOnClick(event) {
+    if (focusInputOnClick) {
+      doFocusInputOnClick();
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  }
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classes,
     ref: ref2,
     tabIndex: -1,
-    onClick: focusInputOnClick ? doFocusInput : null
+    onClick: handleOnClick
   }), children);
 });
 Object.assign(SpsFormComponentWrapper, {
@@ -1280,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) => {
@@ -1405,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();
@@ -1417,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":
@@ -1431,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;
@@ -1587,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,
@@ -5473,6 +5491,7 @@ function SpsCheckbox(_m) {
     id: controlId,
     checked,
     disabled,
+    "data-testId": `${testId}__checkbox-input`,
     onChange: handleChange
   }, rest)), /* @__PURE__ */ React.createElement("label", {
     className: "sps-checkable__label",
@@ -25178,7 +25197,8 @@ function SpsLabel(_o) {
     helpIcon = SpsIcon.QUESTION_CIRCLE,
     helpIconColor = "blue200",
     errors,
-    unsafelyReplaceClassName
+    unsafelyReplaceClassName,
+    "data-testid": testId
   } = _p, rest = __objRest(_p, [
     "children",
     "className",
@@ -25189,7 +25209,8 @@ function SpsLabel(_o) {
     "helpIcon",
     "helpIconColor",
     "errors",
-    "unsafelyReplaceClassName"
+    "unsafelyReplaceClassName",
+    "data-testid"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
   const errorIcon = React.useRef();
@@ -25273,9 +25294,11 @@ function SpsLabel(_o) {
     formControl: formControl2
   }, /* @__PURE__ */ React.createElement("label", __spreadValues({
     htmlFor: forProp && "id" in forProp ? forProp.id : void 0,
-    className: classes
+    className: classes,
+    "data-testid": testId
   }, rest), /* @__PURE__ */ React.createElement("i", {
     ref: suggestedIcon,
+    "data-testid": `${testId}__suggested-icon`,
     className: clsx("sps-icon", "sps-icon-exclamation-triangle", "orange200", "sps-form-group__label-suggested-icon", !stronglySuggested && "d-none"),
     onClick: handleSuggestedIconClick,
     onMouseEnter: () => {
@@ -25285,6 +25308,7 @@ function SpsLabel(_o) {
     onMouseLeave: delayedHideTooltips
   }), /* @__PURE__ */ React.createElement("i", {
     ref: errorIcon,
+    "data-testid": `${testId}__error-icon`,
     className: clsx("sps-icon", "sps-icon-exclamation-circle", "sps-form-group__label--error-icon"),
     onClick: handleLabelClick,
     onMouseEnter: doShowPriorityTooltip,
@@ -25293,6 +25317,7 @@ function SpsLabel(_o) {
     className: "sps-form-group__label-content"
   }, children), /* @__PURE__ */ React.createElement("i", {
     ref: helpIconRef,
+    "data-testid": `${testId}__help-icon`,
     className: clsx("sps-icon", `sps-icon-${helpIcon}`, helpIconColor, !help && "d-none"),
     onClick: handleHelpClick,
     onMouseEnter: () => {
@@ -25321,7 +25346,8 @@ function SpsLabel(_o) {
     showOn: TooltipShowTrigger.MANUAL,
     isShown: showSuggestedTip
   }, t2("design-system:label.stronglySuggested")), description && /* @__PURE__ */ React.createElement("div", {
-    className: "sps-form-control__description"
+    className: "sps-form-control__description",
+    "data-testid": `${testId}__description`
   }, description));
 }
 Object.assign(SpsLabel, {
@@ -28945,7 +28971,8 @@ function SpsMultiSelect(_w) {
     value,
     zeroState = "There are no matching options.",
     loading,
-    icon
+    icon,
+    "data-testid": testId
   } = _x, rest = __objRest(_x, [
     "action",
     "captionKey",
@@ -28967,7 +28994,8 @@ function SpsMultiSelect(_w) {
     "value",
     "zeroState",
     "loading",
-    "icon"
+    "icon",
+    "data-testid"
   ]);
   const meta = formMeta || formControl2;
   const { wrapperId, controlId } = useFormControlId(id2, meta);
@@ -29126,6 +29154,7 @@ function SpsMultiSelect(_w) {
   }, textKey ? opt[textKey] : opt)), /* @__PURE__ */ React.createElement("input", __spreadValues({
     type: "text",
     ref: textInput,
+    "data-testid": `${testId}__option-list-input`,
     value: state.searchText,
     className: "sps-text-input__input",
     placeholder: value.length === 0 ? placeholder : void 0,
@@ -29144,6 +29173,7 @@ function SpsMultiSelect(_w) {
   }) : null)), /* @__PURE__ */ React.createElement(SpsOptionList, {
     id: `${wrapperId}_options`,
     ref: optionListRef,
+    "data-testid": `${testId}__option-list`,
     attachTo: inputVisual,
     captionKey,
     disabledOptions: disableSelected ? value : null,
@@ -29515,6 +29545,7 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     notClearable,
     options,
     onChange,
+    onClick,
     placeholder,
     searchDebounce,
     searchPlaceholder = "Search\u2026",
@@ -29540,6 +29571,7 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     "notClearable",
     "options",
     "onChange",
+    "onClick",
     "placeholder",
     "searchDebounce",
     "searchPlaceholder",
@@ -29674,7 +29706,8 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     ref: rootElement,
     role: "listbox",
     "aria-owns": state.optionIds,
-    "data-testid": testId
+    "data-testid": testId,
+    onClick
   }, rest), /* @__PURE__ */ React.createElement("div", {
     className: clsx("sps-select__dropctrl", disabled && "disabled"),
     id: controlId,
@@ -31303,6 +31336,7 @@ function SpsRadioButton(_y) {
     type: "radio",
     ref: inputElement,
     className: "sps-checkable__input",
+    "data-testid": `${testId}__radio-input`,
     id: controlId,
     name,
     checked,
@@ -34010,6 +34044,7 @@ function SpsTextarea(_I) {
     value: value || "",
     disabled
   }, rest)), value && !disabled && /* @__PURE__ */ React.createElement("i", {
+    "data-testid": `${testId}__input_clear`,
     className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn",
     onClick: clear
   })));
@@ -34684,7 +34719,8 @@ function SpsToggle(props2) {
     checked: active || false,
     disabled,
     onChange: handleChange,
-    "aria-describedby": `${statusLabelID},${descriptionID}`
+    "aria-describedby": `${statusLabelID},${descriptionID}`,
+    "data-testid": `${testId}__input`
   }, rest)), /* @__PURE__ */ React.createElement("span", {
     className: "sps-toggle__slider"
   }), label && /* @__PURE__ */ React.createElement("label", {

package/lib/label/SpsLabel.d.ts

@@ -16,5 +16,5 @@ declare const propTypes: {
     unsafelyReplaceClassName: PropTypes.Requireable<string>;
 };
 export declare type SpsLabelProps = PropTypes.InferTS<typeof propTypes, HTMLLabelElement>;
-export declare function SpsLabel({ children, className, description, for: forProp, stronglySuggested, help, helpIcon, helpIconColor, errors, unsafelyReplaceClassName, ...rest }: SpsLabelProps): JSX.Element;
+export declare function SpsLabel({ children, className, description, for: forProp, stronglySuggested, help, helpIcon, helpIconColor, errors, unsafelyReplaceClassName, "data-testid": testId, ...rest }: SpsLabelProps): JSX.Element;
 export {};

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

@@ -30,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, comparisonKey, 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, "data-testid": testId, ...rest }: SpsMultiSelectProps): JSX.Element;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.5.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.5.0",
-    "@spscommerce/ds-shared": "5.5.0",
-    "@spscommerce/positioning": "5.5.0",
-    "@spscommerce/utils": "5.5.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,11 +39,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.5.0",
-    "@spscommerce/ds-shared": "5.5.0",
-    "@spscommerce/positioning": "5.5.0",
-    "@spscommerce/utils": "5.5.0",
-    "@testing-library/jest-dom": "^4.2.4",
+    "@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",

package/lib/setup-jest.d.ts

@@ -1 +0,0 @@
-export {};