@spscommerce/ds-react 5.33.0 → 5.33.3

package/lib/index.cjs.js

@@ -5967,7 +5967,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                     function Component() {
                         return <SpsPageSelector numPages={25} onPageChange={() => {}} disabled />;
                     }
-                `}}}},a_={active:"boolean",as:"React.ElementType"};function Pr(e){const p=e,{active:t,as:n="a",children:a,className:r,unsafelyReplaceClassName:i}=p,l=J(p,["active","as","children","className","unsafelyReplaceClassName"]),c=A(i||"sps-nav__item","sps-nav__link",t&&"active");return s.createElement(n,I({className:c},l),a)}Object.assign(Pr,{props:a_,displayName:"SpsProductBarTab"});const s_={activeTab:"string",fullWidth:"boolean",onTabChange:"(newTab: string) => void",onProductNameClick:"React.MouseEventHandler",productLogoSrc:"string",productName:{type:"string",required:!0},productNameHref:"string",tabs:"Array<string>"},r_=$(I({},q),{activeTab:T.exports.string,fullWidth:T.exports.bool,onTabChange:oe(),onProductNameClick:oe(),productLogoSrc:T.exports.string,productName:T.exports.string.isRequired,productNameHref:T.exports.string,tabs:T.exports.arrayOf(T.exports.string)});function ul(e){const N=e,{activeTab:t,children:n,className:a,fullWidth:r,onProductNameClick:i,onTabChange:l,productLogoSrc:c,productName:p,productNameHref:u,tabs:f=[],unsafelyReplaceClassName:m}=N,g=J(N,["activeTab","children","className","fullWidth","onProductNameClick","onTabChange","productLogoSrc","productName","productNameHref","tabs","unsafelyReplaceClassName"]),v=s.useRef(),[C,D]=Vt(n,[{type:Pr}]),[S,w]=s.useState(t||f[0]);s.useEffect(()=>{w(t)},[t]);function E(_){w(_),l&&l(_)}const y=A(m||"sps-navbar-container","z-stratum-bar",a);return s.createElement("div",$(I({className:y},g),{ref:v}),s.createElement("nav",{className:A("sps-navbar","sps-navbar--expand-lg",r&&"sps-navbar--full-width")},s.createElement("a",{className:"sps-navbar__brand",href:u,onClick:i},c&&s.createElement("img",{className:"sps-navbar__brand-logo",src:c,"aria-hidden":"true",alt:`${p} Logo`}),s.createElement("span",{className:"sps-navbar__brand-name"},p)),s.createElement("span",{className:"sps-vertical-rule"}),s.createElement("div",{className:"sps-navbar__nav"},f.map(_=>s.createElement("a",{className:A("sps-nav__item","sps-nav__link",_===S&&"active"),key:_,onClick:()=>E(_)},s.createElement("span",null,_),_===S&&s.createElement("span",{className:"sr-only"},"(current)"))),C),s.createElement("div",{className:"sps-navbar__content"},s.createElement(It.Provider,{value:{parentElementRef:v,fixed:!0}},D))))}Object.assign(ul,{props:s_,propTypes:r_,displayName:"SpsProductBar"});const Lf={basic:{label:"Basic",description:x.code`
+                `}}}},a_={active:"boolean",as:"React.ElementType"};function Pr(e){const p=e,{active:t,as:n="a",children:a,className:r,unsafelyReplaceClassName:i}=p,l=J(p,["active","as","children","className","unsafelyReplaceClassName"]),c=A(i||"sps-nav__item","sps-nav__link",t&&"active");return s.createElement(n,I({className:c},l),a)}Object.assign(Pr,{props:a_,displayName:"SpsProductBarTab"});const s_={activeTab:"string",fullWidth:"boolean",onTabChange:"(newTab: string) => void",onProductNameClick:"React.MouseEventHandler",productLogoSrc:"string",productName:"string",productNameHref:"string",tabs:"Array<string>"},r_=$(I({},q),{activeTab:T.exports.string,fullWidth:T.exports.bool,onTabChange:oe(),onProductNameClick:oe(),productLogoSrc:T.exports.string,productName:T.exports.string,productNameHref:T.exports.string,tabs:T.exports.arrayOf(T.exports.string)});function ul(e){const N=e,{activeTab:t,children:n,className:a,fullWidth:r,onProductNameClick:i,onTabChange:l,productLogoSrc:c,productName:p,productNameHref:u,tabs:f=[],unsafelyReplaceClassName:m}=N,g=J(N,["activeTab","children","className","fullWidth","onProductNameClick","onTabChange","productLogoSrc","productName","productNameHref","tabs","unsafelyReplaceClassName"]),v=s.useRef(),[C,D]=Vt(n,[{type:Pr}]),[S,w]=s.useState(t||f[0]);s.useEffect(()=>{w(t)},[t]);function E(_){w(_),l&&l(_)}const y=A(m||"sps-navbar-container","z-stratum-bar",a);return s.createElement("div",$(I({className:y},g),{ref:v}),s.createElement("nav",{className:A("sps-navbar","sps-navbar--expand-lg",r&&"sps-navbar--full-width")},p||c?s.createElement(s.Fragment,null,s.createElement("a",{className:"sps-navbar__brand",href:u,onClick:i},c&&s.createElement("img",{className:"sps-navbar__brand-logo",src:c,"aria-hidden":"true",alt:`${p} Logo`}),p&&s.createElement("span",{className:"sps-navbar__brand-name"},p)),s.createElement("span",{className:"sps-vertical-rule"})):null,s.createElement("div",{className:"sps-navbar__nav"},f.map(_=>s.createElement("a",{className:A("sps-nav__item","sps-nav__link",_===S&&"active"),key:_,onClick:()=>E(_)},s.createElement("span",null,_),_===S&&s.createElement("span",{className:"sr-only"},"(current)"))),C),s.createElement("div",{className:"sps-navbar__content"},s.createElement(It.Provider,{value:{parentElementRef:v,fixed:!0}},D))))}Object.assign(ul,{props:s_,propTypes:r_,displayName:"SpsProductBar"});const Lf={basic:{label:"Basic",description:x.code`
             <p>Product navigation bar</p>
         `,examples:{basic:{react:x.code`
                     function DemoComponent() {
@@ -8892,7 +8892,7 @@ function Component() {
                           </>
                         )
                     }
-                `}}}};function NM(){const[e,t]=s.useState([]),n=s.useCallback(()=>e.map((r,i)=>s.createElement(Ir,{id:r.id,key:r.id,title:r.title,kind:r.kind,imgSrc:r.imgSrc,onClose:()=>{r.onClose&&r.onClose(),r.closed=!0,e.every(l=>l.closed)&&t([])}},At(r.content))),[e]),a=s.useCallback(r=>{t(i=>[...i,$(I({},r),{kind:r.kind||M.GrowlerKind.INFO,id:r.id||Dn()})])},[]);return[n,a]}const IM={color:"TagKind",href:"String",icon:"SpsIcon",tagKey:{type:"String",required:!0},value:{type:"String",required:!0}},_M=$(I({},q),{color:be(M.TagKind),href:T.exports.string,icon:be(M.SpsIcon),tagKey:T.exports.string.isRequired,value:T.exports.string.isRequired});function Dh(e){const f=e,{color:t=M.TagKind.KEY,"data-testid":n,href:a,icon:r,tagKey:i,value:l,unsafelyReplaceClassName:c}=f,p=J(f,["color","data-testid","href","icon","tagKey","value","unsafelyReplaceClassName"]),u=A(c||"sps-key-value-tag",a&&"sps-key-value-tag--link");return s.createElement("span",I({className:u,"data-testid":`${n}__key-value-tag`},p),s.createElement(Ot,{icon:r,kind:t,className:"sps-key-value-tag--key"},i),s.createElement(Ot,{className:"sps-key-value-tag--value"},a&&s.createElement("a",{href:a},l),!a&&l))}Object.assign(Dh,{props:IM,propTypes:_M,displayName:"SpsKeyValueTag"});const MM={basic:{label:"Basic",examples:{basic:{react:x.code`
+                `}}}};function NM(){const[e,t]=s.useState([]),n=s.useCallback(()=>e.map((r,i)=>s.createElement(Ir,{id:r.id,key:r.id,title:r.title,kind:r.kind,imgSrc:r.imgSrc,onClose:()=>{r.onClose&&r.onClose(),r.closed=!0,e.every(l=>l.closed)&&t([])}},At(r.content))),[e]),a=s.useCallback(r=>{t(i=>[...i,$(I({},r),{kind:r.kind||M.GrowlerKind.INFO,id:r.id||Dn()})])},[]);return[n,a]}const IM={color:"TagKind",href:"String",icon:"SpsIcon",tagKey:{type:"String",required:!0},value:{type:"String",required:!0}},_M=$(I({},q),{color:be(M.TagKind),href:T.exports.string,icon:be(M.SpsIcon),tagKey:T.exports.string.isRequired,value:T.exports.string.isRequired});function Dh(e){const m=e,{color:t=M.TagKind.KEY,className:n,"data-testid":a,href:r,icon:i,tagKey:l,value:c,unsafelyReplaceClassName:p}=m,u=J(m,["color","className","data-testid","href","icon","tagKey","value","unsafelyReplaceClassName"]),f=A(p||"sps-key-value-tag",r&&"sps-key-value-tag--link",n);return s.createElement("span",I({className:f,"data-testid":`${a}__key-value-tag`},u),s.createElement(Ot,{icon:i,kind:t,className:"sps-key-value-tag--key"},l),s.createElement(Ot,{className:"sps-key-value-tag--value"},r&&s.createElement("a",{href:r},c),!r&&c))}Object.assign(Dh,{props:IM,propTypes:_M,displayName:"SpsKeyValueTag"});const MM={basic:{label:"Basic",examples:{basic:{react:x.code`
                     function Component() {
                         return (
                             <>

package/lib/index.es.js

@@ -31398,7 +31398,7 @@ const propsDoc$I = {
   onTabChange: "(newTab: string) => void",
   onProductNameClick: "React.MouseEventHandler",
   productLogoSrc: "string",
-  productName: { type: "string", required: true },
+  productName: "string",
   productNameHref: "string",
   tabs: "Array<string>"
 };
@@ -31408,7 +31408,7 @@ const propTypes$L = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onTabChange: fun(),
   onProductNameClick: fun(),
   productLogoSrc: propTypes$1O.exports.string,
-  productName: propTypes$1O.exports.string.isRequired,
+  productName: propTypes$1O.exports.string,
   productNameHref: propTypes$1O.exports.string,
   tabs: propTypes$1O.exports.arrayOf(propTypes$1O.exports.string)
 });
@@ -31457,7 +31457,7 @@ function SpsProductBar(props2) {
     ref: rootElement
   }), /* @__PURE__ */ React.createElement("nav", {
     className: clsx("sps-navbar", "sps-navbar--expand-lg", fullWidth && "sps-navbar--full-width")
-  }, /* @__PURE__ */ React.createElement("a", {
+  }, productName || productLogoSrc ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("a", {
     className: "sps-navbar__brand",
     href: productNameHref,
     onClick: onProductNameClick
@@ -31466,11 +31466,11 @@ function SpsProductBar(props2) {
     src: productLogoSrc,
     "aria-hidden": "true",
     alt: `${productName} Logo`
-  }), /* @__PURE__ */ React.createElement("span", {
+  }), productName && /* @__PURE__ */ React.createElement("span", {
     className: "sps-navbar__brand-name"
   }, productName)), /* @__PURE__ */ React.createElement("span", {
     className: "sps-vertical-rule"
-  }), /* @__PURE__ */ React.createElement("div", {
+  })) : null, /* @__PURE__ */ React.createElement("div", {
     className: "sps-navbar__nav"
   }, tabs.map((tab2) => /* @__PURE__ */ React.createElement("a", {
     className: clsx("sps-nav__item", "sps-nav__link", tab2 === activeTab && "active"),
@@ -38534,6 +38534,7 @@ const propTypes$7 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
 function SpsKeyValueTag(props2) {
   const _a = props2, {
     color = TagKind.KEY,
+    className,
     "data-testid": testId,
     href,
     icon,
@@ -38542,6 +38543,7 @@ function SpsKeyValueTag(props2) {
     unsafelyReplaceClassName
   } = _a, rest = __objRest(_a, [
     "color",
+    "className",
     "data-testid",
     "href",
     "icon",
@@ -38549,7 +38551,7 @@ function SpsKeyValueTag(props2) {
     "value",
     "unsafelyReplaceClassName"
   ]);
-  const classes = clsx(unsafelyReplaceClassName || "sps-key-value-tag", href && "sps-key-value-tag--link");
+  const classes = clsx(unsafelyReplaceClassName || "sps-key-value-tag", href && "sps-key-value-tag--link", className);
   return /* @__PURE__ */ React.createElement("span", __spreadValues({
     className: classes,
     "data-testid": `${testId}__key-value-tag`

package/lib/product-bar/SpsProductBar.d.ts

@@ -6,7 +6,7 @@ declare const propTypes: {
     onTabChange: PropTypes.Requireable<(newTab: string) => void>;
     onProductNameClick: PropTypes.Requireable<React.MouseEventHandler<Element>>;
     productLogoSrc: PropTypes.Requireable<string>;
-    productName: PropTypes.Validator<string>;
+    productName: PropTypes.Requireable<string>;
     productNameHref: PropTypes.Requireable<string>;
     tabs: PropTypes.Requireable<string[]>;
     children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/package.json

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