@spscommerce/ds-react 6.11.2 → 6.12.0

package/lib/index.es.js

@@ -1776,7 +1776,8 @@ const spsOptionListPassthroughProps = {
     zeroState: "string",
     maxHeightPx: "number",
     maxHeightRem: "number",
-    disableOptionsMemoization: "boolean"
+    disableOptionsMemoization: "boolean",
+    onSpecialActionSelect: "() => void"
   },
   propTypes: {
     captionKey: propTypes$1G.exports.string,
@@ -1801,7 +1802,8 @@ const searchableOptionListProps = {
   search: propTypes$1G.exports.string,
   searchDebounce: propTypes$1G.exports.number,
   searchPlaceholder: propTypes$1G.exports.string,
-  searchInputRef: ref()
+  searchInputRef: ref(),
+  onSpecialActionSelect: fun()
 };
 const propTypes$1C = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, spsGlobalPropTypes), spsOptionListPassthroughProps.propTypes), searchableOptionListProps), {
   attachTo: ref().isRequired,
@@ -2117,6 +2119,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     search,
     searchDebounce,
     searchPlaceholder,
+    onSpecialActionSelect,
     attachTo,
     className,
     conformWidth,
@@ -2155,6 +2158,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     "search",
     "searchDebounce",
     "searchPlaceholder",
+    "onSpecialActionSelect",
     "attachTo",
     "className",
     "conformWidth",
@@ -2237,6 +2241,9 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     if (option && !option.disabled) {
       if (typeof option.value === "function") {
         option.value();
+        if (onSpecialActionSelect) {
+          onSpecialActionSelect();
+        }
       } else if (typeof onOptionSelected === "function") {
         onOptionSelected(option.value);
       }
@@ -29632,6 +29639,12 @@ function SpsMultiSelect(_O) {
       optionIds: new Array(filteredListLength).fill("").map((s, i2) => `${wrapperId}-options-option-${i2}`).join(",")
     });
   }
+  const onSpecialActionSelect = React.useCallback(() => {
+    patchState({
+      searchText: ""
+    });
+    focusTextInput();
+  }, []);
   const classes = clsx(unsafelyReplaceClassName || "sps-multi-select", showPopup && "sps-multi-select--open", showPopup && "z-stratum-dropdown", state.opensUpward && "sps-multi-select--opens-upward", disabled && "sps-form-control--disabled", className);
   const tagIds = new Array(value.length).fill(0).map((_, i2) => `${wrapperId}_tag-${i2}`);
   return /* @__PURE__ */ React.createElement(SpsFormComponentWrapper, {
@@ -29708,7 +29721,8 @@ function SpsMultiSelect(_O) {
     loading,
     maxHeightPx: maxHeightOptionListPx,
     maxHeightRem: maxHeightOptionListRem,
-    disableOptionsMemoization
+    disableOptionsMemoization,
+    onSpecialActionSelect
   }));
 }
 Object.assign(SpsMultiSelect, {

package/lib/option-list/SpsOptionListProps.d.ts

@@ -16,6 +16,7 @@ export declare const spsOptionListPassthroughProps: {
         maxHeightPx: string;
         maxHeightRem: string;
         disableOptionsMemoization: string;
+        onSpecialActionSelect: string;
     };
     propTypes: {
         captionKey: PropTypes.Requireable<string>;
@@ -37,6 +38,7 @@ export declare const searchableOptionListProps: {
     searchDebounce: PropTypes.Requireable<number>;
     searchPlaceholder: PropTypes.Requireable<string>;
     searchInputRef: PropTypes.Requireable<import("react").MutableRefObject<HTMLInputElement>>;
+    onSpecialActionSelect: PropTypes.Requireable<() => void>;
 };
 export declare const propTypes: {
     attachTo: PropTypes.Validator<import("react").MutableRefObject<HTMLElement>>;
@@ -65,6 +67,7 @@ export declare const propTypes: {
     searchDebounce: PropTypes.Requireable<number>;
     searchPlaceholder: PropTypes.Requireable<string>;
     searchInputRef: PropTypes.Requireable<import("react").MutableRefObject<HTMLInputElement>>;
+    onSpecialActionSelect: PropTypes.Requireable<() => void>;
     captionKey: PropTypes.Requireable<string>;
     comparisonKey: PropTypes.Requireable<string>;
     disabledOptions: PropTypes.Requireable<any[]>;

package/package.json

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