@spscommerce/ds-react 4.37.0 → 4.37.1

package/lib/index.cjs.js

@@ -5876,7 +5876,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                           </React.Fragment>
                         );
                     }
-                `}}}},WI={title:"string",stepsCount:"number",completedStepsCount:"number",disabled:"boolean",showStepsCounter:"boolean",icons:"IconsProps[]",tooltipsData:"TooltipsProps[]"},YI={title:E.exports.string,stepsCount:E.exports.number,completedStepsCount:E.exports.number,disabled:E.exports.bool,showStepsCounter:E.exports.bool,icons:E.exports.arrayOf(ce()),tooltipsData:E.exports.arrayOf(ce())};function cl(e){const{title:t,stepsCount:n,completedStepsCount:a=0,disabled:o,showStepsCounter:i,icons:l,tooltipsData:c,className:u}=e;function p(v){return l&&l.find(T=>T.index===v)}function f(v){return c&&c.find(T=>T.index===v)}const m=Array.from(Array(n)).map(()=>na(null).current),b=B("sps-stepped-progress-bar",a===n&&"sps-stepped-progress-bar--complete",o&&"sps-stepped-progress-bar--disabled",u);return s.createElement("div",{className:b},s.createElement("div",{className:"sps-stepped-progress-bar__content"},(t||i)&&s.createElement("div",{className:"sps-progress-bar__heading"},t&&s.createElement("div",{className:"sps-progress-bar__title"},t),i&&s.createElement("div",{className:"sps-stepped-progress-bar__percentage"},`${a} of ${n} Complete`)),s.createElement("ul",{className:"sps-stepped-progress-bar__bar-background d-flex align-items-center list-unstyled mb-0"},m.map((v,T)=>s.createElement("li",{id:v,className:B("sps-stepped-progress-bar__step",a>T&&"sps-stepped-progress-bar__step-complete")},p(T)&&s.createElement(un,{icon:p(T).icon,size:O.SpsIconSize.SMALL,className:B("d-block",p(T).index>a-1?"gray400":"white")}),f(T)&&s.createElement(Bt,{for:v,title:f(T).title},f(T).description))))))}Object.assign(cl,{props:WI,propTypes:YI,displayName:"SpsSteppedProgressBar"});const xf={general:{label:"General Usage",customSection:()=>s.createElement(s.Fragment,null,s.createElement("h4",null,"General Usage"),s.createElement("p",null,"Progress Bars can be used in a variety of situations, but the most common use case is to show the live progress of a process such as a file upload or the processing of a digital payload."),s.createElement("p",null,"For processes that typically complete within minutes or less, opt for the Standard Progress Bar."),s.createElement("p",null,"For processes that are divided into specific steps that are accomplished over a longer period of time, opt for the Stepped Progress Bar."))},standard:{label:"Standard Progress Bar",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Standard Progress Bars are comprised of the following Required and Optional elements."),s.createElement("img",{src:"assets/images/progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),s.createElement(jn,null,s.createElement(fn,null,s.createElement(at,null,"Section"),s.createElement(at,null,"Content Type"),s.createElement(at,null,"Required"),s.createElement(at,null,"Description/Guidelines")),s.createElement(Dn,null,s.createElement(Pe,null,s.createElement(oe,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"1")),s.createElement(oe,null,"Title"),s.createElement(oe,null,"No"),s.createElement(oe,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),s.createElement(Pe,null,s.createElement(oe,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"2")),s.createElement(oe,null,"Progress Meter"),s.createElement(oe,null,"Yes"),s.createElement(oe,null)),s.createElement(Pe,null,s.createElement(oe,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"3")),s.createElement(oe,null,"Progress Counter"),s.createElement(oe,null,"No"),s.createElement(oe,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),s.createElement(Pe,null,s.createElement(oe,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"4")),s.createElement(oe,null,"Clear Button"),s.createElement(oe,null,"No"),s.createElement(oe,{wrap:400},"If the process requires the option to be cancelled or removed from a list the clear button can be used.")),s.createElement(Pe,null,s.createElement(oe,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"5")),s.createElement(oe,null,"Progress Details"),s.createElement(oe,null,"No"),s.createElement(oe,{wrap:400},"Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),examples:{standard:{label:"Building Standard Progress Bars",description:()=>s.createElement("p",null,"The Standard Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements."),react:D.code`
+                `}}}},WI={title:"string",stepsCount:"number",completedStepsCount:"number",disabled:"boolean",showStepsCounter:"boolean",icons:"IconsProps[]",tooltipsData:"TooltipsProps[]"},YI={title:E.exports.string,stepsCount:E.exports.number,completedStepsCount:E.exports.number,disabled:E.exports.bool,showStepsCounter:E.exports.bool,icons:E.exports.arrayOf(ce()),tooltipsData:E.exports.arrayOf(ce())};function cl(e){const{title:t,stepsCount:n,completedStepsCount:a=0,disabled:o,showStepsCounter:i,icons:l,tooltipsData:c,className:u}=e;function p(v){return l&&l.find(T=>T.index===v)}function f(v){return c&&c.find(T=>T.index===v)}const m=Array.from(Array(n)).map(()=>na(null).current),b=B("sps-stepped-progress-bar",a===n&&"sps-stepped-progress-bar--complete",o&&"sps-stepped-progress-bar--disabled",u);return s.createElement("div",{className:b},s.createElement("div",{className:"sps-stepped-progress-bar__content"},(t||i)&&s.createElement("div",{className:"sps-progress-bar__heading"},t&&s.createElement("div",{className:"sps-progress-bar__title"},t),i&&s.createElement("div",{className:"sps-stepped-progress-bar__percentage"},`${a} of ${n} Complete`)),s.createElement("ul",{className:"sps-stepped-progress-bar__bar-background d-flex align-items-center list-unstyled mb-0"},m.map((v,T)=>s.createElement("li",{id:v,key:v,className:B("sps-stepped-progress-bar__step",a>T&&"sps-stepped-progress-bar__step-complete")},p(T)&&s.createElement(un,{icon:p(T).icon,size:O.SpsIconSize.SMALL,className:B("d-block",p(T).index>a-1?"gray400":"white")}),f(T)&&s.createElement(Bt,{for:v,title:f(T).title},f(T).description))))))}Object.assign(cl,{props:WI,propTypes:YI,displayName:"SpsSteppedProgressBar"});const xf={general:{label:"General Usage",customSection:()=>s.createElement(s.Fragment,null,s.createElement("h4",null,"General Usage"),s.createElement("p",null,"Progress Bars can be used in a variety of situations, but the most common use case is to show the live progress of a process such as a file upload or the processing of a digital payload."),s.createElement("p",null,"For processes that typically complete within minutes or less, opt for the Standard Progress Bar."),s.createElement("p",null,"For processes that are divided into specific steps that are accomplished over a longer period of time, opt for the Stepped Progress Bar."))},standard:{label:"Standard Progress Bar",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Standard Progress Bars are comprised of the following Required and Optional elements."),s.createElement("img",{src:"assets/images/progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),s.createElement(jn,null,s.createElement(fn,null,s.createElement(at,null,"Section"),s.createElement(at,null,"Content Type"),s.createElement(at,null,"Required"),s.createElement(at,null,"Description/Guidelines")),s.createElement(Dn,null,s.createElement(Pe,null,s.createElement(oe,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"1")),s.createElement(oe,null,"Title"),s.createElement(oe,null,"No"),s.createElement(oe,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),s.createElement(Pe,null,s.createElement(oe,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"2")),s.createElement(oe,null,"Progress Meter"),s.createElement(oe,null,"Yes"),s.createElement(oe,null)),s.createElement(Pe,null,s.createElement(oe,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"3")),s.createElement(oe,null,"Progress Counter"),s.createElement(oe,null,"No"),s.createElement(oe,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),s.createElement(Pe,null,s.createElement(oe,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"4")),s.createElement(oe,null,"Clear Button"),s.createElement(oe,null,"No"),s.createElement(oe,{wrap:400},"If the process requires the option to be cancelled or removed from a list the clear button can be used.")),s.createElement(Pe,null,s.createElement(oe,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"5")),s.createElement(oe,null,"Progress Details"),s.createElement(oe,null,"No"),s.createElement(oe,{wrap:400},"Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),examples:{standard:{label:"Building Standard Progress Bars",description:()=>s.createElement("p",null,"The Standard Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements."),react:D.code`
                     function Component() {
                         function handleClose() {
                             console.log("closed");

package/lib/index.es.js

@@ -30999,6 +30999,7 @@ function SpsSteppedProgressBar(props2) {
     className: "sps-stepped-progress-bar__bar-background d-flex align-items-center list-unstyled mb-0"
   }, data.map((id2, index) => /* @__PURE__ */ React.createElement("li", {
     id: id2,
+    key: id2,
     className: clsx("sps-stepped-progress-bar__step", completedStepsCount > index && "sps-stepped-progress-bar__step-complete")
   }, findIcon(index) && /* @__PURE__ */ React.createElement(SpsI, {
     icon: findIcon(index).icon,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "4.37.0",
+  "version": "4.37.1",
   "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": "4.37.0",
-    "@spscommerce/ds-shared": "4.37.0",
-    "@spscommerce/positioning": "4.37.0",
-    "@spscommerce/utils": "4.37.0",
+    "@spscommerce/ds-colors": "4.37.1",
+    "@spscommerce/ds-shared": "4.37.1",
+    "@spscommerce/positioning": "4.37.1",
+    "@spscommerce/utils": "4.37.1",
     "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": "4.37.0",
-    "@spscommerce/ds-shared": "4.37.0",
-    "@spscommerce/positioning": "4.37.0",
-    "@spscommerce/utils": "4.37.0",
+    "@spscommerce/ds-colors": "4.37.1",
+    "@spscommerce/ds-shared": "4.37.1",
+    "@spscommerce/positioning": "4.37.1",
+    "@spscommerce/utils": "4.37.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",