@spscommerce/ds-react 7.7.3 → 7.7.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +2 -2
- package/lib/index.es.js +17 -17
- package/package.json +12 -12
package/lib/index.cjs.js
CHANGED
|
@@ -5788,7 +5788,7 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
|
|
|
5788
5788
|
import { FeedbackBlockKind } from "@spscommerce/ds-shared";
|
|
5789
5789
|
`,jsx:y.code`
|
|
5790
5790
|
<SpsMicroBlock kind={FeedbackBlockKind.TIP} message="Pro Tip: Don't be a loser."/>
|
|
5791
|
-
`}}}},AN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function ca({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(ca,{props:{},propTypes:{},displayName:"SpsModalFooter"});function Ki({children:e,className:t,id:n,kind:r=$.ModalKind.GENERAL,size:a=$.ModalSize.SMALL,onClose:o,focusElementOnOpen:l,title:c,fullHeight:p=!1,...u}){const m=Nn(n),f=H("sps-modal","z-stratum-dialog",`sps-modal--${r}`,`sps-modal--${a}`,t),{t:h}=s.useContext(Re),g=s.useRef(null),
|
|
5791
|
+
`}}}},AN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function ca({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(ca,{props:{},propTypes:{},displayName:"SpsModalFooter"});function Ki({children:e,className:t,id:n,kind:r=$.ModalKind.GENERAL,size:a=$.ModalSize.SMALL,onClose:o,focusElementOnOpen:l,title:c,fullHeight:p=!1,...u}){const m=Nn(n),f=H("sps-modal","z-stratum-dialog",`sps-modal--${r}`,`sps-modal--${a}`,t),{t:h}=s.useContext(Re),g=s.useRef(null),E=s.useRef(document.body.style.overflow||""),w=s.useRef(document.body.style.paddingRight||"");s.useLayoutEffect(()=>{let k=!1;if(document.body.style.overflow!=="hidden"){const b=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=b,document.body.style.overflow="hidden",k=!0}return()=>{k&&(document.body.style.overflow=E.current,document.body.style.paddingRight=w.current)}},[]),s.useEffect(()=>{l&&l.current?l.current.focus():g.current&&g.current.focus()},[l]);const T=s.useCallback(k=>{if(k&&k.key==="Escape"&&o&&o(),k&&k.key==="Tab"&&g.current){const b=g.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),I=b[0],L=b[b.length-1];b.length===0?k.preventDefault():k.shiftKey&&k.target===I?(k.preventDefault(),L.focus()):!k.shiftKey&&k.target===L&&(k.preventDefault(),I.focus())}},[o]),[[D],N]=Et(e,[{type:ca}]);return s.createElement("div",{id:m.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${m.current}-title`,className:f,onKeyDown:T,tabIndex:-1,ref:g},s.createElement("div",{...u,className:H("sps-modal__dialog",{"sps-modal__dialog-full-height":p})},s.createElement("div",{className:"sps-modal__titlebar"},s.createElement("div",{className:"sps-modal__title",id:`${m.current}-title`},c||h(`design-system:modal.defaultTitle.${r}`)),o&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:o},s.createElement("button",{"aria-label":h("design-system:modal.close"),type:"button"},s.createElement("i",{className:"sps-icon sps-icon-x"})))),s.createElement("div",{className:"sps-modal__body"},s.createElement(yt.Provider,{value:{parentElementRef:g,fixed:!0}},N)),D||s.createElement("div",{className:"sps-modal__footer"},s.createElement($e,{kind:r===$.ModalKind.SERIOUS_WARNING?$.ButtonKind.DELETE:$.ButtonKind.KEY,onClick:o},h("design-system:modal.defaultButtonLabel")))))}Object.assign(Ki,{props:AN,displayName:"SpsModal"});const $N={title:"string",show:"boolean",closeOnEscapePressed:"boolean",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>"};function Hi({children:e,className:t,id:n,show:r,closeOnEscapePressed:a=!0,onClose:o,focusElementOnOpen:l,title:c,...p}){const u=Nn(n),m=H("sps-slide-in-panel","z-stratum-dialog",r?"open":"",t),f=s.useRef(document.body.style.overflow||""),h=s.useRef(document.body.style.paddingRight||""),{t:g}=s.useContext(Re),E=s.useRef(null);s.useEffect(()=>{if(r){const D=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=D,document.body.style.overflow="hidden"}else document.body.style.overflow=f.current,document.body.style.paddingRight=h.current;return()=>{document.body.style.overflow=f.current,document.body.style.paddingRight=h.current}},[r]),s.useEffect(()=>{l&&l.current?l.current.focus():E.current&&E.current.focus()},[l]);const w=s.useCallback(D=>{if(a&&D&&D.key==="Escape"&&o&&o(),D&&D.key==="Tab"&&E.current){const N=E.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),k=N[0],b=N[N.length-1];N.length===0?D.preventDefault():D.shiftKey&&D.target===k?(D.preventDefault(),b.focus()):!D.shiftKey&&D.target===b&&(D.preventDefault(),k.focus())}},[o]);s.useEffect(()=>(window.addEventListener("keydown",w),()=>{window.removeEventListener("keydown",w)}),[w]);const[T]=Et(e);return s.createElement("div",{id:u.current,role:"dialog","aria-labelledby":`${u.current}-title`,className:m,tabIndex:-1,ref:E},s.createElement("div",{...p,className:`sps-slide-in-panel__dialog ${r?"open":""}`},s.createElement("div",{className:"sps-slide-in-panel__titlebar"},s.createElement("div",{className:"sps-slide-in-panel__title",id:`${u.current}-title`},c||g("design-system:slideInPanel.defaultTitle")),o&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:o},s.createElement("button",{"aria-label":g("design-system:slideInPanel.close"),type:"button"},s.createElement("i",{className:"sps-icon sps-icon-x"})))),s.createElement("div",{className:"sps-slide-in-panel__body"},s.createElement(yt.Provider,{value:{parentElementRef:E,fixed:!0}},T))))}Object.assign(Hi,{props:$N,displayName:"SpsSlideInPanel"});const Gm={generalUsage:{label:"General Usage",description:()=>s.createElement(s.Fragment,null),examples:{noCloseButton:{description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Click on the button below to show the slide-in panel.")),react:y.code`
|
|
5792
5792
|
import { SpsButton, SpsSlideInPanel } from "@spscommerce/ds-react";
|
|
5793
5793
|
import { ButtonKind } from "@spscommerce/ds-shared";
|
|
5794
5794
|
function Component() {
|
|
@@ -6603,7 +6603,7 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
|
|
|
6603
6603
|
<br />
|
|
6604
6604
|
{JSON.stringify(formValue)}
|
|
6605
6605
|
</>
|
|
6606
|
-
}`}}}},KN={action:"SpsActionMethod",captionKey:"string",comparisonKey:"string",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",notClearable:"boolean",options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",onChange:"ChangeEventHandler",onOpen:"OnOpenHandler",placeholder:"string",searchDebounce:"number",searchPlaceholder:"string",tallOptionList:"boolean",textKey:"string",valueKey:"string",value:"any",zeroState:"string",autoFixWidth:"boolean",loading:"boolean",filterByTextAndCaptionKey:"boolean",maxHeightOptionListPx:"number",maxHeightOptionListRem:"number",disableOptionsMemoization:"boolean"},da=s.forwardRef((e,t)=>{const{action:n,autoFixWidth:r=!1,captionKey:a,className:o,comparisonKey:l,disabled:c,formControl:p,formMeta:u,id:m,notClearable:f,options:h,onChange:g,onClick:E,onOpen:w,placeholder:T,searchDebounce:D,searchPlaceholder:N="Search\u2026",tallOptionList:k,textKey:b,valueKey:I,unsafelyReplaceClassName:L,value:M,zeroState:O,loading:R,filterByTextAndCaptionKey:W,maxHeightOptionListPx:_,maxHeightOptionListRem:V,"data-testid":x,disableOptionsMemoization:F,disableDefaultOptionsFiltering:Z,...te}=e,z=u||p,{wrapperId:X,controlId:G}=vt(m,z),A=s.useRef(null),q=s.useRef(null),J=s.useRef(null),{t:ne}=s.useContext(Re),[ee,U]=Rt({isOpen:!1,value:M,text:"",keyDown:null,opensUpward:!1,optionIds:""});function le(ge){U({value:ge,text:ge&&b?ge[b]:ge})}function se(ge){le(ge);const _e=ge&&I&&typeof ge=="object"?ge[I]:ge;z&&(z.setValue(_e),z.markAsDirty()),g&&g(new sn({value:_e}))}s.useEffect(()=>{le(M)},[M,b]);function de(){se(void 0)}function re(){U({isOpen:!1})}function xe(ge){ge.nativeEvent.stopImmediatePropagation(),c||U({isOpen:!ee.isOpen})}function Te(ge){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(ge.key)>-1&&ge.preventDefault(),ge.persist(),U({keyDown:ge}))}function ae(ge){U({isOpen:ge})}function Ge(ge){U({opensUpward:ge})}function Ve(ge){ge.detail!==X&&U({isOpen:!1})}function rt(ge){U({optionIds:new Array(ge).fill("").map((_e,Se)=>`${X}-options-option-${Se}`).join(",")})}s.useEffect(()=>(document.addEventListener("click",re),document.addEventListener("DropdownOpened",Ve),()=>{document.removeEventListener("click",re),document.removeEventListener("DropdownOpened",Ve)}),[]),s.useLayoutEffect(()=>{if(r&&J.current&&A.current){A.current.style.width="";const _e=`${A.current.getBoundingClientRect().width+6}px`;A.current.style.width=_e,J.current.style.width=_e,J.current.style.maxWidth=_e}}),Wo(()=>{var ge;if(ee.isOpen){w==null||w();const _e=document.createEvent("CustomEvent");_e.initCustomEvent("DropdownOpened",!1,!1,X),document.dispatchEvent(_e)}else(ge=q.current)==null||ge.focus()},[ee.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{var ge;(ge=q.current)==null||ge.focus()}}));const mt=H(L||"sps-select",ee.isOpen&&"sps-select--open",ee.isOpen&&"z-stratum-dropdown",ee.opensUpward&&"sps-select--opens-upward",o),st=ee.text||T||ne("design-system:select.defaultPlaceholder");return s.createElement(nt,{id:X,className:mt,onKeyDown:Te,formControl:p,formMeta:u,ref:q,role:"listbox","aria-owns":ee.optionIds,"data-testid":x,onClick:E,...te},s.createElement("div",{className:H("sps-select__dropctrl",c&&"disabled"),id:G,tabIndex:0,onClick:xe,ref:J,title:st,"data-testid":`${x}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:H("sps-select__value",!ee.text&&"sps-select__value--placeholder"),"data-testid":`${x}-value`},st),ee.value&&!f&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:de,"data-testid":`${x}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down"}))),s.createElement(Kr,{id:`${X}-options`,ref:A,attachTo:J,captionKey:a,comparisonKey:l,isOpen:ee.isOpen,keyDown:ee.keyDown,options:h,onOptionSelected:se,onPositionFlip:Ge,onSelfToggle:ae,searchDebounce:D,searchPlaceholder:N,selectedOption:ee.value,specialAction:n,tall:k,textKey:b,filterByTextAndCaptionKey:W,optionRole:"option",valueKey:I,onOptionListChanged:rt,zeroState:O,ignoreWidthStyles:r,loading:R,maxHeightPx:_,maxHeightRem:V,disableOptionsMemoization:F,disableDefaultOptionsFiltering:Z,"data-testid":`${x}-option-list`}))});Object.assign(da,{props:KN,displayName:"SpsSelect"});const HN={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean"};function pa(e){const{numPages:t=0,onPageChange:n,page:r=1,unsafelyReplaceClassName:a,className:o,"data-testid":l,disabled:c=!1,unknownPageCount:p=!1,nextPageBtnDisabled:u=!1,...m}=e,{t:f}=s.useContext(Re),[h,g]=s.useState(r),[E,w]=s.useState(r);s.useEffect(()=>{w(r),g(r)},[r]);function T(b){const I=y.constrain(b,[1,t]);b!==E&&(w(I),g(I),n&&typeof n=="function"&&n(I))}function D(b){g(Number(b.target.value)||"")}const N=H(a||"sps-page-selector",o),k=Nn();return s.createElement("div",{className:N,"data-testid":l,...m},!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:k.current,className:"sr-only"},f("design-system:pagination.page")),s.createElement($r,{onSubmit:()=>T(Number(h))},s.createElement("input",{id:k.current,type:"text",value:h,onInput:D,onChange:()=>{},className:"sps-form-control sps-pagination__input",disabled:c,onBlur:()=>T(Number(h))}))),s.createElement("span",{className:"sps-page-selector__total-pages","data-testid":`${l}_page-count`},Number.isNaN(t)?f("design-system:pagination.ofMany"):f("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",(E===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(E-1),disabled:E===1||c,title:f("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",(E===t||c||u)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(E+1),disabled:E===t||c||u,title:f("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(pa,{props:HN,displayName:"SpsPageSelector"});const WN={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 Gi(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:u=!1,unknownPageCount:m=!1,nextPageBtnDisabled:f=!1,resultsOnPage:h,...g}=e,[E,w]=Rt({page:r,pageSize:o,numPages:0,indices:[0,0]});function T(O=E.pageSize){return c!==void 0?Math.ceil(c/O):NaN}function D(O=E.page,R=E.pageSize){const W=T(R),_=O===W&&c!==void 0&&c%R||R,V=h||(W===0?0:_),x=(O-1)*R;return W===0?[0,0]:[x+1,x+V]}function N(O){const R={page:O,indices:D(O)};return w(R),R}function k(O,R){const W={page:R,pageSize:O,numPages:T(O),indices:D(R,O)};return w(W),W}s.useEffect(()=>{r!==E.page&&N(r)},[r]),s.useEffect(()=>{o!==E.pageSize&&k(o,r!==E.page?r:E.page)},[o]),s.useEffect(()=>{w({numPages:T(),indices:D()})},[c,h]);function b(){return typeof c=="number"?c:"many"}function I(O){const R=k(O.target.value,1);n(R.page,R.pageSize,R.indices)}function L(O){const R=N(O);n(R.page,E.pageSize,R.indices)}const M=H(p||"sps-pagination",t);return s.createElement("div",{className:M,"data-testid":l,...g},s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(da,{options:a,onChange:I,notClearable:!0,autoFixWidth:!0,value:E.pageSize,className:"ml-1 mr-1",disabled:u}),"Per Page"),m?s.createElement("div",{className:"sps-pagination__details"},`Viewing ${E.indices[0]} - ${E.indices[1]}`):s.createElement("div",{className:"sps-pagination__details"},`Viewing ${E.indices[0]} - ${E.indices[1]} of ${b()}`),s.createElement(pa,{numPages:E.numPages,page:E.page,onPageChange:L,disabled:u,unknownPageCount:m,nextPageBtnDisabled:f}))}Object.assign(Gi,{props:WN,displayName:"SpsPagination"});const zm={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`
|
|
6606
|
+
}`}}}},KN={action:"SpsActionMethod",captionKey:"string",comparisonKey:"string",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",notClearable:"boolean",options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",onChange:"ChangeEventHandler",onOpen:"OnOpenHandler",placeholder:"string",searchDebounce:"number",searchPlaceholder:"string",tallOptionList:"boolean",textKey:"string",valueKey:"string",value:"any",zeroState:"string",autoFixWidth:"boolean",loading:"boolean",filterByTextAndCaptionKey:"boolean",maxHeightOptionListPx:"number",maxHeightOptionListRem:"number",disableOptionsMemoization:"boolean"},da=s.forwardRef((e,t)=>{const{action:n,autoFixWidth:r=!1,captionKey:a,className:o,comparisonKey:l,disabled:c,formControl:p,formMeta:u,id:m,notClearable:f,options:h,onChange:g,onClick:E,onOpen:w,placeholder:T,searchDebounce:D,searchPlaceholder:N="Search\u2026",tallOptionList:k,textKey:b,valueKey:I,unsafelyReplaceClassName:L,value:M,zeroState:O,loading:R,filterByTextAndCaptionKey:W,maxHeightOptionListPx:_,maxHeightOptionListRem:V,"data-testid":x,disableOptionsMemoization:F,disableDefaultOptionsFiltering:Z,...te}=e,z=u||p,{wrapperId:X,controlId:G}=vt(m,z),A=s.useRef(null),q=s.useRef(null),J=s.useRef(null),{t:ne}=s.useContext(Re),[ee,U]=Rt({isOpen:!1,value:M,text:"",keyDown:null,opensUpward:!1,optionIds:""});function le(ge){U({value:ge,text:ge&&b?ge[b]:ge})}function se(ge){le(ge);const _e=ge&&I&&typeof ge=="object"?ge[I]:ge;z&&(z.setValue(_e),z.markAsDirty()),g&&g(new sn({value:_e}))}s.useEffect(()=>{le(M)},[M,b]);function de(){se(void 0)}function re(){U({isOpen:!1})}function xe(ge){ge.nativeEvent.stopImmediatePropagation(),c||U({isOpen:!ee.isOpen})}function Te(ge){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(ge.key)>-1&&ge.preventDefault(),ge.persist(),U({keyDown:ge}))}function ae(ge){U({isOpen:ge})}function Ge(ge){U({opensUpward:ge})}function Ve(ge){ge.detail!==X&&U({isOpen:!1})}function rt(ge){U({optionIds:new Array(ge).fill("").map((_e,Se)=>`${X}-options-option-${Se}`).join(",")})}s.useEffect(()=>(document.addEventListener("click",re),document.addEventListener("DropdownOpened",Ve),()=>{document.removeEventListener("click",re),document.removeEventListener("DropdownOpened",Ve)}),[]),s.useLayoutEffect(()=>{if(r&&J.current&&A.current){A.current.style.width="";const _e=`${A.current.getBoundingClientRect().width+6}px`;A.current.style.width=_e,J.current.style.width=_e,J.current.style.maxWidth=_e}}),Wo(()=>{var ge;if(ee.isOpen){w==null||w();const _e=document.createEvent("CustomEvent");_e.initCustomEvent("DropdownOpened",!1,!1,X),document.dispatchEvent(_e)}else(ge=q.current)==null||ge.focus()},[ee.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{var ge;(ge=q.current)==null||ge.focus()}}));const mt=H(L||"sps-select",ee.isOpen&&"sps-select--open",ee.isOpen&&"z-stratum-dropdown",ee.opensUpward&&"sps-select--opens-upward",o),st=ee.text||T||ne("design-system:select.defaultPlaceholder");return s.createElement(nt,{id:X,className:mt,onKeyDown:Te,formControl:p,formMeta:u,ref:q,role:"listbox","aria-owns":ee.optionIds,"data-testid":x,onClick:E,...te},s.createElement("div",{className:H("sps-select__dropctrl",c&&"disabled"),id:G,tabIndex:0,onClick:xe,ref:J,title:st,"data-testid":`${x}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:H("sps-select__value",!ee.text&&"sps-select__value--placeholder"),"data-testid":`${x}-value`},st),ee.value&&!f&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:de,"data-testid":`${x}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down"}))),s.createElement(Kr,{id:`${X}-options`,ref:A,attachTo:J,captionKey:a,comparisonKey:l,isOpen:ee.isOpen,keyDown:ee.keyDown,options:h,onOptionSelected:se,onPositionFlip:Ge,onSelfToggle:ae,searchDebounce:D,searchPlaceholder:N,selectedOption:ee.value,specialAction:n,tall:k,textKey:b,filterByTextAndCaptionKey:W,optionRole:"option",valueKey:I,onOptionListChanged:rt,zeroState:O,ignoreWidthStyles:r,loading:R,maxHeightPx:_,maxHeightRem:V,disableOptionsMemoization:F,disableDefaultOptionsFiltering:Z,"data-testid":`${x}-option-list`}))});Object.assign(da,{props:KN,displayName:"SpsSelect"});const HN={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean"};function pa(e){const{numPages:t=0,onPageChange:n,page:r=1,unsafelyReplaceClassName:a,className:o,"data-testid":l,disabled:c=!1,unknownPageCount:p=!1,nextPageBtnDisabled:u=!1,...m}=e,{t:f}=s.useContext(Re),[h,g]=s.useState(r),[E,w]=s.useState(r);s.useEffect(()=>{w(r),g(r)},[r]);function T(b){const I=y.constrain(b,[1,t]);b!==E&&(w(I),g(I),n&&typeof n=="function"&&n(I))}function D(b){g(Number(b.target.value)||"")}const N=H(a||"sps-page-selector",o),k=Nn();return s.createElement("div",{className:N,"data-testid":l,...m},!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:k.current,className:"sr-only"},f("design-system:pagination.page")),s.createElement($r,{onSubmit:()=>T(Number(h))},s.createElement("input",{id:k.current,type:"text",value:h,onInput:D,onChange:()=>{},className:"sps-form-control sps-pagination__input",disabled:c,onBlur:()=>T(Number(h))}))),s.createElement("span",{className:"sps-page-selector__total-pages","data-testid":`${l}_page-count`},Number.isNaN(t)?f("design-system:pagination.ofMany"):f("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",(E===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(E-1),disabled:E===1||c,title:f("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",(E===t||c||u)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(E+1),disabled:E===t||c||u,title:f("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(pa,{props:HN,displayName:"SpsPageSelector"});const WN={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 Gi(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:u=!1,unknownPageCount:m=!1,nextPageBtnDisabled:f=!1,resultsOnPage:h,...g}=e,[E,w]=Rt({page:r,pageSize:o,numPages:0,indices:[0,0]});function T(O=E.pageSize){return c!==void 0?Math.ceil(c/O):NaN}function D(O=E.page,R=E.pageSize){const W=T(R),_=O===W&&c!==void 0&&c%R||R,V=h||(W===0?0:_),x=(O-1)*R;return W===0?[0,0]:[x+1,x+V]}function N(O){const R={page:O,indices:D(O)};return w(R),R}function k(O,R){const W={page:R,pageSize:O,numPages:T(O),indices:D(R,O)};return w(W),W}s.useEffect(()=>{w({numPages:T(),indices:D()})},[c,h]),s.useEffect(()=>{r!==E.page&&N(r)},[r]),s.useEffect(()=>{o!==E.pageSize&&k(o,r!==E.page?r:E.page)},[o]);function b(){return typeof c=="number"?c:"many"}function I(O){const R=k(O.target.value,1);n(R.page,R.pageSize,R.indices)}function L(O){const R=N(O);n(R.page,E.pageSize,R.indices)}const M=H(p||"sps-pagination",t);return s.createElement("div",{className:M,"data-testid":l,...g},s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(da,{options:a,onChange:I,notClearable:!0,autoFixWidth:!0,value:E.pageSize,className:"ml-1 mr-1",disabled:u}),"Per Page"),m?s.createElement("div",{className:"sps-pagination__details"},`Viewing ${E.indices[0]} - ${E.indices[1]}`):s.createElement("div",{className:"sps-pagination__details"},`Viewing ${E.indices[0]} - ${E.indices[1]} of ${b()}`),s.createElement(pa,{numPages:E.numPages,page:E.page,onPageChange:L,disabled:u,unknownPageCount:m,nextPageBtnDisabled:f}))}Object.assign(Gi,{props:WN,displayName:"SpsPagination"});const zm={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`
|
|
6607
6607
|
import { SpsPagination } from "@spscommerce/ds-react";
|
|
6608
6608
|
function Component() {
|
|
6609
6609
|
const [page, setPage] = React.useState(2);
|
package/lib/index.es.js
CHANGED
|
@@ -22110,19 +22110,19 @@ function Wu({
|
|
|
22110
22110
|
`sps-modal--${n}`,
|
|
22111
22111
|
`sps-modal--${a}`,
|
|
22112
22112
|
t
|
|
22113
|
-
), { t: h } = s.useContext(Ae), S = s.useRef(null),
|
|
22114
|
-
s.
|
|
22115
|
-
|
|
22116
|
-
|
|
22117
|
-
b
|
|
22118
|
-
|
|
22119
|
-
|
|
22120
|
-
|
|
22121
|
-
|
|
22113
|
+
), { t: h } = s.useContext(Ae), S = s.useRef(null), y = s.useRef(document.body.style.overflow || ""), w = s.useRef(document.body.style.paddingRight || "");
|
|
22114
|
+
s.useLayoutEffect(() => {
|
|
22115
|
+
let k = !1;
|
|
22116
|
+
if (document.body.style.overflow !== "hidden") {
|
|
22117
|
+
const b = `${window.innerWidth - document.body.clientWidth}px`;
|
|
22118
|
+
document.body.style.paddingRight = b, document.body.style.overflow = "hidden", k = !0;
|
|
22119
|
+
}
|
|
22120
|
+
return () => {
|
|
22121
|
+
k && (document.body.style.overflow = y.current, document.body.style.paddingRight = w.current);
|
|
22122
22122
|
};
|
|
22123
22123
|
}, []), s.useEffect(() => {
|
|
22124
22124
|
l && l.current ? l.current.focus() : S.current && S.current.focus();
|
|
22125
|
-
}, [l
|
|
22125
|
+
}, [l]);
|
|
22126
22126
|
const T = s.useCallback(
|
|
22127
22127
|
(k) => {
|
|
22128
22128
|
if (k && k.key === "Escape" && o && o(), k && k.key === "Tab" && S.current) {
|
|
@@ -22137,7 +22137,7 @@ function Wu({
|
|
|
22137
22137
|
[D],
|
|
22138
22138
|
N
|
|
22139
22139
|
] = Lt(e, [{ type: xi }]);
|
|
22140
|
-
return
|
|
22140
|
+
return /* @__PURE__ */ s.createElement("div", {
|
|
22141
22141
|
id: m.current,
|
|
22142
22142
|
role: "dialog",
|
|
22143
22143
|
"aria-modal": !0,
|
|
@@ -22174,7 +22174,7 @@ function Wu({
|
|
|
22174
22174
|
}, /* @__PURE__ */ s.createElement(He, {
|
|
22175
22175
|
kind: n === Rl.SERIOUS_WARNING ? Ge.DELETE : Ge.KEY,
|
|
22176
22176
|
onClick: o
|
|
22177
|
-
}, h("design-system:modal.defaultButtonLabel")))))
|
|
22177
|
+
}, h("design-system:modal.defaultButtonLabel")))));
|
|
22178
22178
|
}
|
|
22179
22179
|
Object.assign(Wu, {
|
|
22180
22180
|
props: MN,
|
|
@@ -23943,15 +23943,15 @@ function Yu(e) {
|
|
|
23943
23943
|
return w(K), K;
|
|
23944
23944
|
}
|
|
23945
23945
|
s.useEffect(() => {
|
|
23946
|
-
n !== y.page && N(n);
|
|
23947
|
-
}, [n]), s.useEffect(() => {
|
|
23948
|
-
o !== y.pageSize && k(o, n !== y.page ? n : y.page);
|
|
23949
|
-
}, [o]), s.useEffect(() => {
|
|
23950
23946
|
w({
|
|
23951
23947
|
numPages: T(),
|
|
23952
23948
|
indices: D()
|
|
23953
23949
|
});
|
|
23954
|
-
}, [c, h])
|
|
23950
|
+
}, [c, h]), s.useEffect(() => {
|
|
23951
|
+
n !== y.page && N(n);
|
|
23952
|
+
}, [n]), s.useEffect(() => {
|
|
23953
|
+
o !== y.pageSize && k(o, n !== y.page ? n : y.page);
|
|
23954
|
+
}, [o]);
|
|
23955
23955
|
function b() {
|
|
23956
23956
|
return typeof c == "number" ? c : "many";
|
|
23957
23957
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spscommerce/ds-react",
|
|
3
3
|
"description": "SPS Design System React components",
|
|
4
|
-
"version": "7.7.
|
|
4
|
+
"version": "7.7.5",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"@react-stately/collections": "^3.6.0",
|
|
44
|
-
"@sps-woodland/illustrations": "7.7.
|
|
45
|
-
"@sps-woodland/tabs": "7.7.
|
|
46
|
-
"@spscommerce/ds-colors": "7.7.
|
|
47
|
-
"@spscommerce/ds-shared": "7.7.
|
|
48
|
-
"@spscommerce/positioning": "7.7.
|
|
44
|
+
"@sps-woodland/illustrations": "7.7.5",
|
|
45
|
+
"@sps-woodland/tabs": "7.7.5",
|
|
46
|
+
"@spscommerce/ds-colors": "7.7.5",
|
|
47
|
+
"@spscommerce/ds-shared": "7.7.5",
|
|
48
|
+
"@spscommerce/positioning": "7.7.5",
|
|
49
49
|
"@spscommerce/utils": "^6.11.3",
|
|
50
50
|
"moment": "^2.25.3",
|
|
51
51
|
"moment-timezone": "^0.5.28",
|
|
@@ -59,11 +59,11 @@
|
|
|
59
59
|
"@react-types/select": "^3.6.1",
|
|
60
60
|
"@react-types/shared": "^3.8.0",
|
|
61
61
|
"@react-types/tabs": "^3.0.1",
|
|
62
|
-
"@sps-woodland/illustrations": "7.7.
|
|
63
|
-
"@sps-woodland/tabs": "7.7.
|
|
64
|
-
"@spscommerce/ds-colors": "7.7.
|
|
65
|
-
"@spscommerce/ds-shared": "7.7.
|
|
66
|
-
"@spscommerce/positioning": "7.7.
|
|
62
|
+
"@sps-woodland/illustrations": "7.7.5",
|
|
63
|
+
"@sps-woodland/tabs": "7.7.5",
|
|
64
|
+
"@spscommerce/ds-colors": "7.7.5",
|
|
65
|
+
"@spscommerce/ds-shared": "7.7.5",
|
|
66
|
+
"@spscommerce/positioning": "7.7.5",
|
|
67
67
|
"@spscommerce/utils": "^6.12.1",
|
|
68
68
|
"@testing-library/dom": "^8.17.1",
|
|
69
69
|
"@testing-library/react": "^10.0.0",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"raf-stub": "^2.0.2",
|
|
78
78
|
"react": "^16.9.0",
|
|
79
79
|
"react-dom": "^16.9.0",
|
|
80
|
-
"test": "7.7.
|
|
80
|
+
"test": "7.7.5"
|
|
81
81
|
},
|
|
82
82
|
"scripts": {
|
|
83
83
|
"build": "pnpm run build:js && pnpm run build:types",
|