@spscommerce/ds-react 5.19.0 → 5.20.0

package/lib/index.es.js

@@ -2463,7 +2463,7 @@ function documentClickHandlerFactory(rootRef, popupRef, doHidePopup) {
     }
   };
 }
-function useInputPopup(rootRef, popupRef) {
+function useInputPopup(rootRef, popupRef, onHide) {
   const suppressPopup = React.useRef(false);
   const [showPopup, setShowPopup] = React.useState(false);
   const doShowPopup = React.useCallback(() => {
@@ -2476,6 +2476,9 @@ function useInputPopup(rootRef, popupRef) {
   const doHidePopup = React.useCallback((suppressNextShow = false) => {
     setShowPopup(false);
     suppressPopup.current = suppressNextShow;
+    if (onHide) {
+      onHide();
+    }
   }, []);
   useDocumentEventListener("click", documentClickHandlerFactory, [
     rootRef,
@@ -15350,7 +15353,7 @@ function SpsContentRowCol(props2) {
       ].join(" "));
     }
   }, [leaner]);
-  const classes = clsx(unsafelyReplaceClassName || "sps-content-row__col", borderless && "sps-content-row__col--borderless", (lean || leaner) && "sps-content-row__col--lean");
+  const classes = clsx(unsafelyReplaceClassName || "sps-content-row__col", borderless && "sps-content-row__col--borderless", (lean || leaner) && "sps-content-row__col--lean", className);
   const width = widthPx ? widthPx / 16 : widthRem;
   const inlineStyles = width ? __spreadProps(__spreadValues({}, style2), {
     width: `${width}rem`
@@ -29901,6 +29904,7 @@ const SpsModalExamples = {
 };
 const propsDoc$P = {
   captionKey: "string",
+  clearSearchOnBlur: "boolean",
   debounce: "number",
   disabled: "boolean",
   disableSelected: "boolean",
@@ -29909,6 +29913,7 @@ const propsDoc$P = {
   hideSelected: "boolean",
   icon: "SpsIcon",
   onChange: "ChangeEventHandler",
+  onSearchChange: "(searchText: string) => void",
   options: "Eventually<any[]> | (filter?: string) => Eventually<any[]>",
   placeholder: "string",
   tallOptionList: "boolean",
@@ -29922,6 +29927,7 @@ const propsDoc$P = {
 const propTypes$R = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   action: fun(),
   captionKey: propTypes$1O.exports.string,
+  clearSearchOnBlur: propTypes$1O.exports.bool,
   debounce: propTypes$1O.exports.number,
   disabled: propTypes$1O.exports.bool,
   disableSelected: propTypes$1O.exports.bool,
@@ -29931,6 +29937,7 @@ const propTypes$R = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   hideSelected: propTypes$1O.exports.bool,
   icon: enumValue(SpsIcon),
   onChange: fun(),
+  onSearchChange: fun(),
   options: propTypes$1O.exports.oneOfType([
     propTypes$1O.exports.array,
     propTypes$1O.exports.instanceOf(Promise),
@@ -29950,6 +29957,7 @@ function SpsMultiSelect(_w) {
     action,
     captionKey,
     className,
+    clearSearchOnBlur,
     debounce: debounce2,
     disabled,
     disableSelected = false,
@@ -29959,6 +29967,7 @@ function SpsMultiSelect(_w) {
     hideSelected,
     id: id2,
     onChange,
+    onSearchChange,
     options,
     placeholder,
     tallOptionList,
@@ -29975,6 +29984,7 @@ function SpsMultiSelect(_w) {
     "action",
     "captionKey",
     "className",
+    "clearSearchOnBlur",
     "debounce",
     "disabled",
     "disableSelected",
@@ -29984,6 +29994,7 @@ function SpsMultiSelect(_w) {
     "hideSelected",
     "id",
     "onChange",
+    "onSearchChange",
     "options",
     "placeholder",
     "tallOptionList",
@@ -30006,15 +30017,27 @@ function SpsMultiSelect(_w) {
     activeTagIndex: null,
     optionIds: ""
   });
+  React.useEffect(() => {
+    if (onSearchChange) {
+      onSearchChange(state.searchText);
+    }
+  }, [state.searchText]);
   const rootElement = React.useRef();
   const inputVisual = React.useRef();
   const textInput = React.useRef();
   const optionListRef = React.useRef();
+  function handleBlur() {
+    if (clearSearchOnBlur) {
+      patchState({
+        searchText: ""
+      });
+    }
+  }
   const {
     showPopup,
     doShowPopup,
     doHidePopup
-  } = useInputPopup(rootElement, optionListRef);
+  } = useInputPopup(rootElement, optionListRef, handleBlur);
   function open() {
     patchState({ activeTagIndex: null });
     doShowPopup();
@@ -30362,6 +30385,56 @@ const SpsMultiSelectExamples = {
                 `
       }
     }
+  },
+  searchText: {
+    label: "Search text",
+    description: "Get search text",
+    examples: {
+      a_actionWithSearchText: {
+        react: code`
+           function Component() {
+              const [opts] = React.useState(["foo", "bar", "baz", "orp"]);
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                tags: [opts[0]],
+              });
+            
+              const [searchText, setSearchText] = React.useState("");
+            
+              React.useEffect(() => {
+                  updateAction({
+                  label: searchText ? \`Create a New Tag "\${searchText}"\` : "Create a New Tag",
+                  });
+              }, [searchText, opts]);
+              
+              const handleSearchChange = (searchTextValue) => {
+                setSearchText(searchTextValue)
+              }
+            
+              const [action, updateAction] = useSpsAction(
+                {
+                  label: "Create a New Tag",
+                  icon: SpsIcon.PLUS_SIGN,
+                },
+                () => console.log("New Tag has been created")
+              );
+            
+              return (
+                <>
+                  <SpsLabel for={formMeta.fields.tags}>Tags</SpsLabel>
+                  <SpsMultiSelect
+                    disableSelected
+                    icon={SpsIcon.FILTER}
+                    options={opts}
+                    action={action}
+                    formMeta={formMeta.fields.tags}
+                    value={formValue.tags}
+                    onSearchChange={handleSearchChange}
+                  />
+                </>
+              );
+          }`
+      }
+    }
   }
 };
 const propsDoc$O = {};

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

@@ -8,6 +8,7 @@ import type { SpsFormFieldMeta } from "../form/hooks/useSpsForm";
 declare const propTypes: {
     action: PropTypes.Requireable<SpsActionMethod>;
     captionKey: PropTypes.Requireable<string>;
+    clearSearchOnBlur: PropTypes.Requireable<boolean>;
     debounce: PropTypes.Requireable<number>;
     disabled: PropTypes.Requireable<boolean>;
     disableSelected: PropTypes.Requireable<boolean>;
@@ -17,6 +18,7 @@ declare const propTypes: {
     hideSelected: PropTypes.Requireable<boolean>;
     icon: PropTypes.Requireable<SpsIcon>;
     onChange: PropTypes.Requireable<React.ChangeEventHandler<Element>>;
+    onSearchChange: PropTypes.Requireable<(searchText: string) => void>;
     options: PropTypes.Validator<any[] | Promise<any[]> | ((filter?: string) => Eventually<any[]>)>;
     placeholder: PropTypes.Requireable<string>;
     tallOptionList: PropTypes.Requireable<boolean>;
@@ -32,5 +34,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, maxHeightOptionListPx, maxHeightOptionListRem, "data-testid": testId, ...rest }: SpsMultiSelectProps): JSX.Element;
+export declare function SpsMultiSelect({ action, captionKey, className, clearSearchOnBlur, debounce, disabled, disableSelected, comparisonKey, formControl, formMeta, hideSelected, id, onChange, onSearchChange, options, placeholder, tallOptionList, textKey, unsafelyReplaceClassName, value, zeroState, loading, icon, maxHeightOptionListPx, maxHeightOptionListRem, "data-testid": testId, ...rest }: SpsMultiSelectProps): JSX.Element;
 export {};

package/lib/utils/useInputPopup.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export declare function useInputPopup(rootRef: React.MutableRefObject<HTMLElement>, popupRef: React.MutableRefObject<HTMLElement>): {
+export declare function useInputPopup(rootRef: React.MutableRefObject<HTMLElement>, popupRef: React.MutableRefObject<HTMLElement>, onHide?: () => void): {
     showPopup: boolean;
     doShowPopup: () => void;
     doHidePopup: (suppressNextShow?: any) => void;

package/package.json

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