@spscommerce/ds-react 7.18.0-beta → 7.18.0

package/lib/index.cjs.js

@@ -3499,9 +3499,12 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                         SpsTextInput,
                         SpsRadioButton,
                         SpsCheckbox,
+                        addOnChangeErrorKey,
                     } from "@spscommerce/ds-react";
 
                     function DemoComponent() {
+                        addOnChangeErrorKey("mustSelectAColor");
+
                         function mustSelectAColorValidator(value) {
                             if (value.radio === "b") {
                                 if (value.colors.filter(Boolean).length === 0) {
@@ -3514,7 +3517,7 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                         };
 
                         const COLOR_OPTIONS = ["Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet"];
-                        const { formValue, formMeta, updateForm } = useSpsForm({
+                        const { formValue, formMeta, updateForm, validateForm } = useSpsForm({
                             topFieldset: {
                                 text: "",
                                 nestedFieldset: {
@@ -3527,8 +3530,8 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                         });
 
                         React.useEffect(() => {
-                            formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio.markAsDirty();
-                        }, [])
+                            validateForm();
+                          }, []);
 
                         return (
                             <SpsForm formMeta={formMeta}>
@@ -7220,7 +7223,7 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
               <br />
               {JSON.stringify(formValue)}
           </>
-        }`}}}},zN={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean"};function Ca(e){const{numPages:t=0,onPageChange:n,page:r=1,unsafelyReplaceClassName:a,className:o,"data-testid":l,disabled:c=!1,unknownPageCount:p=!1,nextPageBtnDisabled:m=!1,...f}=e,{t:u}=s.useContext($e),[h,g]=s.useState(r),[v,C]=s.useState(r);s.useEffect(()=>{C(r),g(r)},[r]);function E(k){const x=y.constrain(k,[1,t]);k!==v&&(C(x),g(x),n&&typeof n=="function"&&n(x))}function w(k){g(Number(k.target.value)||"")}const N=H(a||"sps-page-selector",o),I=vn();return s.createElement("div",{className:N,"data-testid":l,...f},!p&&s.createElement(s.Fragment,null,s.createElement("div",{className:"sps-pagination__input-wrapper","data-testid":`${l}__input`},s.createElement("div",{className:"sps-form-control sps-pagination__input-sizer"},h),s.createElement("label",{htmlFor:I.current,className:"sr-only"},u("design-system:pagination.page")),s.createElement(ts,{onSubmit:()=>E(Number(h))},s.createElement("input",{id:I.current,type:"text",value:h,onInput:w,onChange:()=>{},className:"sps-form-control sps-pagination__input",disabled:c,onBlur:()=>E(Number(h))}))),s.createElement("span",{className:"sps-page-selector__total-pages","data-testid":`${l}_page-count`},Number.isNaN(t)?u("design-system:pagination.ofMany"):u("design-system:pagination.ofPageCount",{pageCount:t}))),s.createElement("div",{className:"sps-icon-button-panel","data-testid":`${l}__buttons`},s.createElement("div",{className:H("sps-button","sps-button--icon",(v===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>E(v-1),disabled:v===1||c,title:u("design-system:pagination.prevPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-left","aria-hidden":"true"}))),s.createElement("div",{className:H("sps-button","sps-button--icon",(v===t||c||m)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>E(v+1),disabled:v===t||c||m,title:u("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(Ca,{props:zN,displayName:"SpsPageSelector"});const qN={page:"number",pageSize:"number",pageSizeOptions:"Array<number>",totalResults:"number",onPageChange:"(page: number, pageSize: number, indices: [number, number]) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean",resultsOnPage:"number"};function Xi(e){const{className:t,onPageChange:n,page:r=1,pageSizeOptions:a=$.DEFAULT_PAGE_SIZE_OPTIONS,pageSize:o=a[0],"data-testid":l,totalResults:c,unsafelyReplaceClassName:p,disabled:m=!1,unknownPageCount:f=!1,nextPageBtnDisabled:u=!1,resultsOnPage:h,...g}=e,[v,C]=Wt({page:r,pageSize:o,numPages:0,indices:[0,0]});function E(T=v.pageSize){return c!==void 0?Math.ceil(c/T):NaN}function w(T=v.page,O=v.pageSize){const L=E(O),V=T===L&&c!==void 0&&c%O||O,W=h||(L===0?0:V),M=(T-1)*O;return L===0?[0,0]:[M+1,M+W]}function N(T){const O={page:T,indices:w(T)};return C(O),O}function I(T,O){const L={page:O,pageSize:T,numPages:E(T),indices:w(O,T)};return C(L),L}s.useEffect(()=>{C({numPages:E(),indices:w()})},[c,h]),s.useEffect(()=>{r!==v.page&&N(r)},[r]),s.useEffect(()=>{o!==v.pageSize&&I(o,r!==v.page?r:v.page)},[o]);function k(){return typeof c=="number"?c:"many"}function x(T){const O=I(T.target.value,1);n(O.page,O.pageSize,O.indices)}function P(T){const O=N(T);n(O.page,v.pageSize,O.indices)}const _=H(p||"sps-pagination",t);return s.createElement("div",{className:_,"data-testid":l,...g},s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(Wn,{options:a,onChange:x,notClearable:!0,autoFixWidth:!0,value:v.pageSize,className:"ml-1 mr-1",disabled:m}),"Per Page"),f?s.createElement("div",{className:"sps-pagination__details"},`Viewing ${v.indices[0]} - ${v.indices[1]}`):s.createElement("div",{className:"sps-pagination__details"},`Viewing ${v.indices[0]} - ${v.indices[1]} of ${k()}`),s.createElement(Ca,{numPages:v.numPages,page:v.page,onPageChange:P,disabled:m,unknownPageCount:f,nextPageBtnDisabled:u}))}Object.assign(Xi,{props:qN,displayName:"SpsPagination"});const jm={general:{label:"General Usage",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Use the Standard Pagination Bar on a list page (comprised of a Table, Content Rows, or Content Tiles). It should always appear at the bottom of the listed records."),s.createElement("p",null,"Use the Mini Pagination component when a paginated list of results exists inside a smaller Card."))},pagination:{label:"Standard Pagination Bar",description:({Link:e})=>s.createElement(s.Fragment,null,s.createElement("p",null,"The Standard Pagination Bar is comprised of three main sections. The middle section is hidden from view when the width of its container is at the responsive breakpoint of 767 pixels."),s.createElement("ul",null,s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Results-per-page Select")," (left): allows the user to adjust the number of records being displayed per page.*")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Viewing details")," (middle): describes which results are being displayed on the current page.")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Page Navigator")," (right): allows the user to navigate between pages of results"))),s.createElement("i",null,"*Note: For Tables and Content Rows, per-page options should be 25, 50, and 100. For Content Tiles, per-page options should be 24, 48, and 100."),s.createElement("br",null),s.createElement("p",{className:"mt-2"},"To see an example of the Standard Pagination Bar in context with a Table, view the Table Lists section on the ",s.createElement(e,{to:"/style-and-layout/page-types"},"Page Types")," page.")),examples:{basic:{description:()=>s.createElement("h4",null,"Building the Standard Pagination Bar"),react:y.code`
+        }`}}}},zN={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean"};function Ca(e){const{numPages:t=0,onPageChange:n,page:r=1,unsafelyReplaceClassName:a,className:o,"data-testid":l,disabled:c=!1,unknownPageCount:p=!1,nextPageBtnDisabled:m=!1,...f}=e,{t:u}=s.useContext($e),[h,g]=s.useState(r),[v,C]=s.useState(r);s.useEffect(()=>{C(r),g(r)},[r]);function E(k){const x=y.constrain(k,[1,t]);k!==v&&(C(x),g(x),n&&typeof n=="function"&&n(x))}function w(k){g(Number(k.target.value)||"")}const N=H(a||"sps-page-selector",o),I=vn();return s.createElement("div",{className:N,"data-testid":l,...f},!p&&s.createElement(s.Fragment,null,s.createElement("div",{className:"sps-pagination__input-wrapper","data-testid":`${l}__input`},s.createElement("div",{className:"sps-form-control sps-pagination__input-sizer"},h),s.createElement("label",{htmlFor:I.current,className:"sr-only"},u("design-system:pagination.page")),s.createElement(ts,{onSubmit:()=>E(Number(h))},s.createElement("input",{id:I.current,type:"text",value:h,onInput:w,onChange:()=>{},className:"sps-form-control sps-pagination__input",disabled:c,onBlur:()=>E(Number(h))}))),s.createElement("span",{className:"sps-page-selector__total-pages","data-testid":`${l}_page-count`},Number.isNaN(t)?u("design-system:pagination.ofMany"):u("design-system:pagination.ofPageCount",{pageCount:t}))),s.createElement("div",{className:"sps-icon-button-panel","data-testid":`${l}__buttons`},s.createElement("div",{className:H("sps-button","sps-button--icon",(v===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>E(v-1),disabled:v===1||c,title:u("design-system:pagination.prevPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-left","aria-hidden":"true"}))),s.createElement("div",{className:H("sps-button","sps-button--icon",(v===t||c||m)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>E(v+1),disabled:v===t||c||m,title:u("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(Ca,{props:zN,displayName:"SpsPageSelector"});const qN={page:"number",pageSize:"number",pageSizeOptions:"Array<number>",totalResults:"number",onPageChange:"(page: number, pageSize: number, indices: [number, number]) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean",resultsOnPage:"number"};function Xi(e){const{className:t,onPageChange:n,page:r=1,pageSizeOptions:a=$.DEFAULT_PAGE_SIZE_OPTIONS,pageSize:o=a[0],"data-testid":l,totalResults:c,unsafelyReplaceClassName:p,disabled:m=!1,unknownPageCount:f=!1,nextPageBtnDisabled:u=!1,resultsOnPage:h,...g}=e,[v,C]=Wt({page:r,pageSize:o,numPages:0,indices:[0,0]});function E(T=v.pageSize){return c!==void 0?Math.ceil(c/T):NaN}function w(T=v.page,O=v.pageSize){const L=E(O),V=T===L&&c!==void 0&&c%O||O,W=h||(L===0?0:V),M=(T-1)*O;return L===0?[0,0]:[M+1,M+W]}function N(T){const O={page:T,indices:w(T)};return C(O),O}function I(T,O){const L={page:O,pageSize:T,numPages:E(T),indices:w(O,T)};return C(L),L}s.useEffect(()=>{C({numPages:E(),indices:w()})},[c,h]),s.useEffect(()=>{r!==v.page&&N(r)},[r]),s.useEffect(()=>{o!==v.pageSize&&I(o,r!==v.page?r:v.page)},[o]);function k(){return typeof c=="number"?c:"many"}function x(T){const O=I(T.target.value,1);n(O.page,O.pageSize,O.indices)}function P(T){const O=N(T);n(O.page,v.pageSize,O.indices)}const _=H(p||"sps-pagination",t);return s.createElement("div",{className:_,"data-testid":l,...g},s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(Wn,{options:a,onChange:x,notClearable:!0,autoFixWidth:!0,value:v.pageSize,className:"ml-1 mr-1",disabled:m}),"Per Page"),f?s.createElement("div",{className:"sps-pagination__details"},`Viewing ${v.indices[0]} - ${v.indices[1]} of many`):s.createElement("div",{className:"sps-pagination__details"},`Viewing ${v.indices[0]} - ${v.indices[1]} of ${k()}`),s.createElement(Ca,{numPages:v.numPages,page:v.page,onPageChange:P,disabled:m,unknownPageCount:f,nextPageBtnDisabled:u}))}Object.assign(Xi,{props:qN,displayName:"SpsPagination"});const jm={general:{label:"General Usage",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Use the Standard Pagination Bar on a list page (comprised of a Table, Content Rows, or Content Tiles). It should always appear at the bottom of the listed records."),s.createElement("p",null,"Use the Mini Pagination component when a paginated list of results exists inside a smaller Card."))},pagination:{label:"Standard Pagination Bar",description:({Link:e})=>s.createElement(s.Fragment,null,s.createElement("p",null,"The Standard Pagination Bar is comprised of three main sections. The middle section is hidden from view when the width of its container is at the responsive breakpoint of 767 pixels."),s.createElement("ul",null,s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Results-per-page Select")," (left): allows the user to adjust the number of records being displayed per page.*")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Viewing details")," (middle): describes which results are being displayed on the current page.")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Page Navigator")," (right): allows the user to navigate between pages of results"))),s.createElement("i",null,"*Note: For Tables and Content Rows, per-page options should be 25, 50, and 100. For Content Tiles, per-page options should be 24, 48, and 100."),s.createElement("br",null),s.createElement("p",{className:"mt-2"},"To see an example of the Standard Pagination Bar in context with a Table, view the Table Lists section on the ",s.createElement(e,{to:"/style-and-layout/page-types"},"Page Types")," page.")),examples:{basic:{description:()=>s.createElement("h4",null,"Building the Standard Pagination Bar"),react:y.code`
                     import { SpsPagination } from "@spscommerce/ds-react";
                     function Component() {
                         const [page, setPage] = React.useState(2);

package/lib/index.es.js

@@ -18996,9 +18996,12 @@ const tN = {
                         SpsTextInput,
                         SpsRadioButton,
                         SpsCheckbox,
+                        addOnChangeErrorKey,
                     } from "@spscommerce/ds-react";
 
                     function DemoComponent() {
+                        addOnChangeErrorKey("mustSelectAColor");
+
                         function mustSelectAColorValidator(value) {
                             if (value.radio === "b") {
                                 if (value.colors.filter(Boolean).length === 0) {
@@ -19011,7 +19014,7 @@ const tN = {
                         };
 
                         const COLOR_OPTIONS = ["Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet"];
-                        const { formValue, formMeta, updateForm } = useSpsForm({
+                        const { formValue, formMeta, updateForm, validateForm } = useSpsForm({
                             topFieldset: {
                                 text: "",
                                 nestedFieldset: {
@@ -19024,8 +19027,8 @@ const tN = {
                         });
 
                         React.useEffect(() => {
-                            formMeta.fields.topFieldset.fields.nestedFieldset.fields.radio.markAsDirty();
-                        }, [])
+                            validateForm();
+                          }, []);
 
                         return (
                             <SpsForm formMeta={formMeta}>
@@ -25416,7 +25419,7 @@ function Gu(e) {
       className: "ml-1 mr-1",
       disabled: m
     }
-  ), "Per Page"), f ? /* @__PURE__ */ s.createElement("div", { className: "sps-pagination__details" }, `Viewing ${v.indices[0]} - ${v.indices[1]}`) : /* @__PURE__ */ s.createElement("div", { className: "sps-pagination__details" }, `Viewing ${v.indices[0]} - ${v.indices[1]} of ${k()}`), /* @__PURE__ */ s.createElement(
+  ), "Per Page"), f ? /* @__PURE__ */ s.createElement("div", { className: "sps-pagination__details" }, `Viewing ${v.indices[0]} - ${v.indices[1]} of many`) : /* @__PURE__ */ s.createElement("div", { className: "sps-pagination__details" }, `Viewing ${v.indices[0]} - ${v.indices[1]} of ${k()}`), /* @__PURE__ */ s.createElement(
     Ai,
     {
       numPages: v.numPages,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "7.18.0-beta",
+  "version": "7.18.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",