@spscommerce/ds-react 5.14.1 → 5.15.0

package/lib/index.es.js

@@ -204,7 +204,7 @@ function SpsButton(props2) {
     className: clsx("sps-icon", `sps-icon-${icon}`),
     "aria-hidden": "true"
   });
-  const spinner = /* @__PURE__ */ React.createElement("div", {
+  const spinner = spinning && /* @__PURE__ */ React.createElement("div", {
     className: "sps-spinner"
   }, spinningTitle || t2("design-system:button.spinningTitle"));
   return /* @__PURE__ */ React.createElement("div", {
@@ -2546,7 +2546,8 @@ function SpsAutocomplete(_a) {
     zeroState,
     loading,
     maxHeightOptionListPx,
-    maxHeightOptionListRem
+    maxHeightOptionListRem,
+    "data-testid": testId
   } = _b, rest = __objRest(_b, [
     "className",
     "debounce",
@@ -2564,7 +2565,8 @@ function SpsAutocomplete(_a) {
     "zeroState",
     "loading",
     "maxHeightOptionListPx",
-    "maxHeightOptionListRem"
+    "maxHeightOptionListRem",
+    "data-testid"
   ]);
   const meta = formMeta || formControl2;
   const { wrapperId, controlId } = useFormControlId(id2, meta);
@@ -2635,7 +2637,8 @@ function SpsAutocomplete(_a) {
     inputRef: textInput,
     ref: rootRef,
     focusInputOnClick: true,
-    onClick: (event) => event.nativeEvent.stopImmediatePropagation()
+    onClick: (event) => event.nativeEvent.stopImmediatePropagation(),
+    "data-testId": `${testId}`
   }, /* @__PURE__ */ React.createElement("div", {
     className: "sps-text-input"
   }, /* @__PURE__ */ React.createElement("div", {
@@ -2653,8 +2656,10 @@ function SpsAutocomplete(_a) {
     onChange: handleChange,
     onKeyDown: handleKeyDown,
     disabled,
-    id: controlId
+    id: controlId,
+    "data-testid": `${testId}__input`
   }, rest)), value && !disabled && /* @__PURE__ */ React.createElement("i", {
+    "aria-label": "clear",
     className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn",
     onClick: (event) => clear(event)
   }))), /* @__PURE__ */ React.createElement(SpsOptionList, {
@@ -24232,7 +24237,7 @@ const SpsFormExamples = {
   },
   custom_errors: {
     label: "Custom errors",
-    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "When using custom validators you can specify when to show the errors - on Change, on Blur or on Submit.", /* @__PURE__ */ React.createElement("br", null), "On Blur is the the default behavior. If you want to change that behavior you can use ", /* @__PURE__ */ React.createElement("b", null, "useCustomValidator hook"), ". It takes validation function as first argument, validator configuration (object containing errorKey as key and ValidationMode as value) as second argument and dependencies as third argument. useCustomValidator returns a React callback of the validation function with the given dependencies."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("b", null, "!Note:"), " useCustomValidator hook will make changes to the global scope and once you set a custom error key you can't change it.")),
+    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "When using custom validators you can specify when to show the errors - on Change, on Blur or on Submit.", /* @__PURE__ */ React.createElement("br", null), "On Blur is the default behavior. If you want to change that behavior you can use ", /* @__PURE__ */ React.createElement("b", null, "useCustomValidator hook"), ". It takes validation function as first argument, validator configuration (object containing errorKey as key and ValidationMode as value) as second argument and dependencies as third argument. useCustomValidator returns a React callback of the validation function with the given dependencies."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("b", null, "!Note:"), " useCustomValidator hook will make changes to the global scope and once you set a custom error key you can't change it.")),
     examples: {
       basic: {
         react: code`
@@ -28257,7 +28262,8 @@ const propsDoc$S = {
   isSelected: "boolean",
   isIndeterminate: "boolean",
   onSelectionChange: "(boolean) => void",
-  pinResultsBar: "boolean"
+  pinResultsBar: "boolean",
+  pinToolbar: "boolean"
 };
 const propTypes$U = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   activeTab: impl(),
@@ -28274,7 +28280,8 @@ const propTypes$U = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   isSelected: propTypes$1N.exports.bool,
   isIndeterminate: propTypes$1N.exports.bool,
   onSelectionChange: fun(),
-  pinResultsBar: propTypes$1N.exports.bool
+  pinResultsBar: propTypes$1N.exports.bool,
+  pinToolbar: propTypes$1N.exports.bool
 });
 function SpsListToolbar(props2) {
   const _a = props2, {
@@ -28293,6 +28300,7 @@ function SpsListToolbar(props2) {
     isIndeterminate,
     onSelectionChange,
     pinResultsBar,
+    pinToolbar = true,
     "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "activeTab",
@@ -28310,6 +28318,7 @@ function SpsListToolbar(props2) {
     "isIndeterminate",
     "onSelectionChange",
     "pinResultsBar",
+    "pinToolbar",
     "data-testid"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
@@ -28378,7 +28387,7 @@ function SpsListToolbar(props2) {
   React.useEffect(() => {
     emitToolbarPinned(isPinned);
   }, [isPinned]);
-  const classes = clsx(unsafelyReplaceClassName || "sps-list-toolbar", isPinned && "sps-list-toolbar--pinned", isPinned && "z-stratum-bar", advancedSearch && advancedSearch.isOpen && "sps-list-toolbar--advanced-search-open", className);
+  const classes = clsx(unsafelyReplaceClassName || "sps-list-toolbar", isPinned && pinToolbar && "sps-list-toolbar--pinned", isPinned && pinToolbar && "z-stratum-bar", advancedSearch && advancedSearch.isOpen && "sps-list-toolbar--advanced-search-open", className);
   const [
     listToolbarSearch,
     listToolbarSearchInfo,

package/lib/list-toolbar/SpsListToolbar.d.ts

@@ -16,6 +16,7 @@ declare const propTypes: {
     isIndeterminate: PropTypes.Requireable<boolean>;
     onSelectionChange: PropTypes.Requireable<(boolean: any) => void>;
     pinResultsBar: PropTypes.Requireable<boolean>;
+    pinToolbar: PropTypes.Requireable<boolean>;
     children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     className: PropTypes.Requireable<string>;
     "data-testid": PropTypes.Requireable<string>;

package/package.json

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