@spscommerce/ds-react 5.4.1 → 5.5.0

package/lib/index.es.js

@@ -1317,7 +1317,8 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     specialAction,
     unsafelyReplaceClassName,
     loading,
-    filterByTextAndCaptionKey
+    filterByTextAndCaptionKey,
+    "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "captionKey",
     "comparisonKey",
@@ -1351,7 +1352,8 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     "specialAction",
     "unsafelyReplaceClassName",
     "loading",
-    "filterByTextAndCaptionKey"
+    "filterByTextAndCaptionKey",
+    "data-testid"
   ]);
   const specialActionOption = React.useMemo(() => specialAction ? new SpsOptionListOption(specialAction, {
     textKey: "label",
@@ -1573,10 +1575,12 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     tabIndex: -1,
     ref: rootRef,
     style: posStyle,
-    onMouseLeave: () => setHighlightedOptionIndex(-1)
+    onMouseLeave: () => setHighlightedOptionIndex(-1),
+    "data-testid": testId
   }, rest), searchElement, /* @__PURE__ */ React.createElement("div", {
     className: optionsClasses,
-    ref: optionsRef
+    ref: optionsRef,
+    "data-testid": `${testId}-options`
   }, !loading && !searchState.pending && zeroState && (searchState.value || !searchState.isAsync) && optionList.length === 0 && /* @__PURE__ */ React.createElement("div", {
     className: "sps-option-list__zero-state"
   }, zeroState), (loading || searchState.pending) && /* @__PURE__ */ React.createElement("div", {
@@ -1593,7 +1597,8 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
       onClick: (event) => handleOptionClick(event, option),
       onMouseOver: () => setHighlightedOptionIndex(i2),
       tabIndex: -1,
-      ref: highlightedOptionIndex === i2 ? highlightedOptionRef : null
+      ref: highlightedOptionIndex === i2 ? highlightedOptionRef : null,
+      "data-testid": `${testId}-option-${i2}`
     }, option.value && option.value.icon && /* @__PURE__ */ React.createElement("i", {
       className: clsx("sps-icon", "sps-option-list__option-icon", `sps-icon-${String(option.value.icon)}`)
     }), (!option.value || !option.value.icon && anyOptionHasIcon) && /* @__PURE__ */ React.createElement("span", {
@@ -29520,7 +29525,8 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     value: valueProp,
     zeroState,
     loading,
-    filterByTextAndCaptionKey
+    filterByTextAndCaptionKey,
+    "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "action",
     "autoFixWidth",
@@ -29544,7 +29550,8 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     "value",
     "zeroState",
     "loading",
-    "filterByTextAndCaptionKey"
+    "filterByTextAndCaptionKey",
+    "data-testid"
   ]);
   const meta = formMeta || formControl2;
   const { wrapperId, controlId } = useFormControlId(id2, meta);
@@ -29666,21 +29673,25 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     formMeta,
     ref: rootElement,
     role: "listbox",
-    "aria-owns": state.optionIds
+    "aria-owns": state.optionIds,
+    "data-testid": testId
   }, rest), /* @__PURE__ */ React.createElement("div", {
     className: clsx("sps-select__dropctrl", disabled && "disabled"),
     id: controlId,
     tabIndex: 0,
     onClick: handleControlButtonClick,
     ref: controlButton,
-    title: valueText
+    title: valueText,
+    "data-testid": `${testId}-dropctrl`
   }, /* @__PURE__ */ React.createElement("div", {
     className: "sps-select__dropctrl-content"
   }, /* @__PURE__ */ React.createElement("span", {
-    className: clsx("sps-select__value", !state.text && "sps-select__value--placeholder")
+    className: clsx("sps-select__value", !state.text && "sps-select__value--placeholder"),
+    "data-testid": `${testId}-value`
   }, valueText), state.value && !notClearable && !disabled && /* @__PURE__ */ React.createElement("i", {
     className: "sps-icon sps-icon-x-circle sps-select__clear-btn",
-    onClick: handleClearIconClick
+    onClick: handleClearIconClick,
+    "data-testid": `${testId}-clear-value`
   }), /* @__PURE__ */ React.createElement("i", {
     className: "sps-icon sps-icon-chevron-down"
   }))), /* @__PURE__ */ React.createElement(SpsOptionList, {
@@ -29708,7 +29719,8 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     onOptionListChanged: handleOptionListChanged,
     zeroState,
     ignoreWidthStyles: autoFixWidth,
-    loading
+    loading,
+    "data-testid": `${testId}-option-list`
   }));
 });
 Object.assign(SpsSelect, {
@@ -33803,6 +33815,7 @@ const SpsTextInput = React.forwardRef((_G, ref2) => {
     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
   })));

package/lib/test-util.d.ts

@@ -1 +1,2 @@
 export declare function waitATick(): void;
+export declare function wait(delay?: number): Promise<unknown>;

package/package.json

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