@spscommerce/ds-react 6.31.5 → 6.32.0

package/lib/index.es.js

@@ -27770,13 +27770,13 @@ Object.assign(SpsSearchResultsBar, {
   displayName: "SpsSearchResultsBar"
 });
 const propsDoc$R = {
-  results: "number",
+  results: "number || null",
   selections: "{ [key: string]: string[] }",
   zeroStateText: "string",
   onClear: "() => void"
 };
 const propTypes$R = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
-  results: propTypes$1I.exports.number,
+  results: propTypes$1I.exports.oneOfType([propTypes$1I.exports.number, null]),
   selections: impl(),
   zeroStateText: propTypes$1I.exports.string,
   onClear: fun()
@@ -27784,7 +27784,7 @@ const propTypes$R = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
 function SpsSearchResultsBarV2(props2) {
   const _a = props2, {
     className,
-    results = 0,
+    results,
     selections,
     zeroStateText,
     onClear,
@@ -27810,7 +27810,7 @@ function SpsSearchResultsBarV2(props2) {
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: classes,
     "data-testid": `${testId}`
-  }, rest), /* @__PURE__ */ React.createElement("div", {
+  }, rest), results !== null && results !== void 0 && /* @__PURE__ */ React.createElement("div", {
     className: "sps-search-results-bar-v2__results"
   }, /* @__PURE__ */ React.createElement("span", {
     "data-testid": `${testId}__label`
@@ -27912,6 +27912,69 @@ const SpsSearchResultsBarExamples = {
                       )
                   }
                 `
+      },
+      situational: {
+        description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Unknown Results Count"), /* @__PURE__ */ React.createElement("p", null, "In cases where the exact count of results is not able to be determined, Results section won't be displayed.")),
+        react: code`
+                    function Component() {
+                                  
+                      const [advSearch, setAdvSearch] = React.useState({
+                        isOpen: false
+                      });
+                    
+                      const [showSearchBar, setShowSearchBar] = React.useState(true);
+
+                      const initialSelections = {
+                        sender: ["Aktie Sports","Modells Sporting Goods", "Perry Sport"],
+                        receiver: ["FGL Sports", "Foot Asylum", "Hervis", "Lovell Rugby"],
+                      };
+
+                      const [selections, setSelections] = React.useState(initialSelections);
+                      
+                      const initValue = {
+                        searchText: "",
+                      };
+
+                      const { formValue, formMeta, updateForm } = useSpsForm(initValue);
+
+                      function handleToggleAdvancedSearch(isOpen) {
+                        setAdvSearch({ isOpen });
+                      }
+
+                      function handleAdvancedSearchSubmit() {
+                        console.log("submit");
+                        setSelections(initialSelections);
+                      }
+
+                      function handleClear() {
+                          setSelections({});
+                      }
+                  
+                      return (
+                        <>
+                            <SpsListToolbar advancedSearch={advSearch}
+                                onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                            >
+                                <SpsListToolbarSearch>
+                                    <SpsTextInput
+                                        value={formValue.searchText}
+                                        formMeta={formMeta.fields.searchText}
+                                        placeholder="Search fields"
+                                    />
+                                    <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.SEARCH} />
+                                </SpsListToolbarSearch>
+                                <SpsSearchResultsBarV2
+                                  onClear={handleClear}
+                                  selections={selections}
+                                />
+                            </SpsListToolbar>
+                            <SpsAdvancedSearch {...advSearch} onSubmit={handleAdvancedSearchSubmit}>
+                                <i>insert form here</i>
+                            </SpsAdvancedSearch>
+                        </>
+                      )
+                  }
+                `
       }
     }
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.31.5",
+  "version": "6.32.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": "6.31.5",
-    "@spscommerce/ds-illustrations": "6.31.5",
-    "@spscommerce/ds-shared": "6.31.5",
-    "@spscommerce/positioning": "6.31.5",
+    "@spscommerce/ds-colors": "6.32.0",
+    "@spscommerce/ds-illustrations": "6.32.0",
+    "@spscommerce/ds-shared": "6.32.0",
+    "@spscommerce/positioning": "6.32.0",
     "@spscommerce/utils": "^6.11.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
@@ -40,10 +40,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "6.31.5",
-    "@spscommerce/ds-illustrations": "6.31.5",
-    "@spscommerce/ds-shared": "6.31.5",
-    "@spscommerce/positioning": "6.31.5",
+    "@spscommerce/ds-colors": "6.32.0",
+    "@spscommerce/ds-illustrations": "6.32.0",
+    "@spscommerce/ds-shared": "6.32.0",
+    "@spscommerce/positioning": "6.32.0",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^10.4.0",
     "@types/prop-types": "^15.7.1",