@spscommerce/ds-react 7.11.1 → 7.11.3

package/lib/index.cjs.js

@@ -3558,7 +3558,7 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
           calc(100% - ${p}px) 0, 
           ${c}px ${-a}px,
           calc(100% - ${p+r}px) ${-a}px`}else e.current.style.backgroundPosition=`0 0, 100% 0, 0 ${-a}px, 
-          calc(100% - ${r}px) ${-a}px`};return e.current&&(t(),e.current.addEventListener("scroll",t),window.addEventListener("scroll",t)),()=>{e.current&&e.current.removeEventListener("scroll",t),window.removeEventListener("scroll",t)}})},ON=(e,t,n)=>{s.useLayoutEffect(()=>{const r=e.current;if(!r)return;const a=r==null?void 0:r.querySelector("thead"),o=r==null?void 0:r.querySelector("table"),l=o==null?void 0:o.querySelector("tbody>tr"),c=l==null?void 0:l.querySelectorAll("td"),p=(a==null?void 0:a.querySelectorAll("th"))||[],u=document.body.querySelector(".sps-navbar-container");let m=r==null?void 0:r.querySelector(".placeholder-head"),f;const h=()=>{a&&(a.style.position=t?"sticky":"",a.style.top=t?"0":"",a.style.overflow="",a.style.maxWidth="",a.style.width="",a.style.minWidth=""),m&&(m.style.width="",m.style.height=""),c&&Array.from(c).forEach((T,D)=>{const x=p[D];if(x){const k=x.getAttribute("data-resizekey"),b=k&&n?n[k]:void 0;if(b){const I=`${b}px`;x.style.minWidth=I,x.style.maxWidth=I,x.style.width=I,T.style.minWidth=I,T.style.maxWidth=I,T.style.width=I}else x.style.minWidth="",x.style.width="",x.style.maxWidth="",T.style.minWidth="",T.style.width="",T.style.maxWidth=""}else T.style.minWidth="",T.style.width="",T.style.maxWidth=""})},g=()=>{a&&r&&(a.scrollLeft=r.scrollLeft)},E=()=>{let T=null;f===window?T=u?u.getBoundingClientRect().height:0:f instanceof HTMLElement&&(T=f.getBoundingClientRect().top);const D=r.scrollLeft,x=a==null?void 0:a.getBoundingClientRect(),k=r.getBoundingClientRect();if(T&&x&&x.top<=T&&T<=k.bottom-x.height&&k.top<=T){if(c&&Array.from(c).forEach((b,I)=>{const O=b.getBoundingClientRect().width,M=p[I].getBoundingClientRect().width,L=`${Math.max(O,M)}px`;p[I].style.minWidth=L,p[I].style.width=L,p[I].style.maxWidth=L,b.style.minWidth=L,b.style.width=L,b.style.maxWidth=L}),a&&e.current){a.style.position="fixed",a.style.top=`${T}px`,a.style.overflow="hidden";const b=e.current.offsetWidth-e.current.clientWidth,I=`${k.width-b}px`;a.style.maxWidth=I,a.style.width=I,a.style.minWidth=I}m||(m=document.createElement("div"),m.style.width=`${x.width}px`,m.style.height=`${x.height}px`,m.className="placeholder-head",r.insertBefore(m,o))}else m&&(r.removeChild(m),m=null,h());r.scrollLeft=D,g()},w=()=>{h(),E(),g()};return a&&a.classList.contains("sps-table__head--pinned")&&(f=_N(r)||window,f.addEventListener("scroll",E),window.addEventListener("resize",w),r.addEventListener("scroll",g),w()),()=>{f&&(f.removeEventListener("scroll",E),window.removeEventListener("resize",w)),r.removeEventListener("scroll",g)}})},RN=(e,t)=>{const n=()=>{if(!e.current||!t)return;const r=e.current,a=r==null?void 0:r.querySelector("table > thead"),o=r==null?void 0:r.querySelector("table"),l=r==null?void 0:r.querySelector(".shadow--top"),c=r==null?void 0:r.querySelector(".shadow--bottom");if(a&&o&&l&&c){c.style.left="0",c.style.bottom="0",l.style.left="0";const p=r.offsetHeight-(r==null?void 0:r.clientHeight),u=o.getBoundingClientRect().height,m=a.getBoundingClientRect().height,f=r.scrollTop,h=u+p-r.getBoundingClientRect().height-r.scrollTop,g=r.scrollLeft;c.style.bottom=`${-f}px`,c.style.left=`${g}px`,c.style.opacity=h>0?"1":"0",l.style.top=`${f+m}px`,l.style.left=`${g}px`,l.style.opacity=f>0?"1":"0"}};s.useLayoutEffect(()=>{if(e.current&&t){const r=e.current.querySelector("table > thead");return r&&(r.style.position="sticky",r.style.top="0",r.style.zIndex="2",r.style.backgroundColor="#fff"),e.current.addEventListener("scroll",n),()=>{var a;(a=e.current)==null||a.removeEventListener("scroll",n)}}},[]),s.useLayoutEffect(()=>{e.current&&t&&n()})},PN={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean",maxHeightPx:"number",maxHeightRem:"number",resizeable:"boolean",resizeState:"ResizeState",onResizeStateChange:"ResizeStateChangeHandler"};function Bn({children:e,className:t,onSortChange:n,sort:r,"data-testid":a,unsafelyReplaceClassName:o,maxHeightPx:l,maxHeightRem:c,resizeable:p,resizeState:u,onResizeStateChange:m,...f}){const h=H(o||"sps-table-container",t),g=l?l/16:c,E=g?{maxHeight:`${g}rem`}:{},w=s.useRef(null);return RN(w,g),LN(w),ON(w,g,u),s.createElement(MN,{resizeable:p,resizeState:u,onResizeStateChange:m,sort:r,onSortChange:n},s.createElement("div",{ref:w,className:h,style:E},s.createElement("div",{className:"sps-table__shadow shadow--top"}),s.createElement("div",{className:"sps-table__shadow shadow--bottom"}),s.createElement("table",{className:"sps-table",role:"table","data-testid":`${a}`,...f},e)))}Object.assign(Bn,{props:PN,displayName:"SpsTable"});function km(e){if(!e||!e.parentElement)return null;let t=e.parentElement;for(;t;){if(t.tagName.toLowerCase()==="table")return t;t=t.parentElement}return null}const Mm=({tableHeaderRef:e,resizerRef:t,resizeKey:n})=>{const{resizeable:r,resizeState:a,setSingleResizeState:o}=s.useContext(ma),l=!!r&&!!n,c=l?a==null?void 0:a[n]:0;return s.useLayoutEffect(()=>{var O,M;let p,u=c,m=0;const f=km(e.current),h=(O=e.current)==null?void 0:O.querySelector(".sps-table__column-resizer"),g=(M=e.current)==null?void 0:M.querySelector(".sps-table__column-resizer-guide");function E(){if(e.current&&p&&(h&&(h.style.backgroundColor=wo.colors.blue200),g&&f&&(g.style.height=`${f.getBoundingClientRect().height}px`,g.style.display="block"),f)){const L=f.querySelectorAll("thead > tr > th");for(let R=0;R<L.length;R+=1){const W=L[R].querySelector(".sps-table__column-resizer");L[R].style.cursor="col-resize",L[R]!==e.current&&W&&(L[R].classList.remove("sps-table__header--resizeable"),W.style.display="none")}}}function w(){e.current&&p&&h&&g&&(h.style.right=`${m}px`,g.style.right=`${m}px`)}function T(){if(e.current){const L=u?`${u}px`:"";e.current.style.width=L,e.current.style.maxWidth=L,e.current.style.minWidth=L;const R=e.current.querySelector(".sps-table__header-cell-body");if(R&&(R.style.overflow=L?"hidden":"",R.style.textOverflow=L?"ellipsis":""),h&&g&&(h.style.right="0",h.style.backgroundColor="",g.style.right="0",g.style.display="none"),e.current.classList.contains("sps-table__cell--pinned")||(e.current.style.position="relative"),f){const W=f.querySelectorAll("thead > tr > th");for(let _=0;_<W.length;_+=1){const $=W[_].querySelector(".sps-table__header-cell-body"),N=W[_].querySelector(".sps-table__column-resizer");W[_].style.cursor="default",W[_]!==e.current&&N&&(W[_].classList.add("sps-table__header--resizeable"),N.style.display="block"),($==null?void 0:$.textContent)&&!$.title&&($.title=$.textContent)}}}}const D=L=>{!e.current||(L.preventDefault(),p=L.clientX,u=e.current.clientWidth,E())},x=L=>{if(!p||!e.current)return;const R=Math.max(Math.min(p-L.clientX,40),-40);R!==0&&(p=L.clientX,m+=R,u=Math.max(u-R,40),w())},k=()=>{!e.current||(p=0,m=0,T(),o(n,u))},b=()=>{u=0,T(),o(n,u)};let I=!1;return l&&t.current&&(t.current.addEventListener("dragstart",D),t.current.addEventListener("mousedown",D),t.current.addEventListener("dblclick",b),window.addEventListener("mousemove",x),window.addEventListener("dragend",k),window.addEventListener("mouseup",k),I=!0,T()),()=>{t.current&&I&&(t.current.removeEventListener("dragstart",D),t.current.removeEventListener("mousedown",D),t.current.removeEventListener("dblclick",b)),I&&(window.removeEventListener("mousemove",x),window.removeEventListener("dragend",k),window.removeEventListener("mouseup",k))}},[l,c,n,o]),{isResizeable:l}},_m=e=>{const{resizeable:t,resizeState:n}=s.useContext(ma);s.useLayoutEffect(()=>{if(!t||!n||!e.current)return;const r=km(e.current);if(!r)return;const a=r.querySelector(`thead > tr > th:nth-of-type(${e.current.cellIndex+1})`);if(!a)return;const o=a.getAttribute("data-resizekey");if(!o)return;const l=n[o],c=l?`${l}px`:"";e.current.style.width=c,e.current.style.maxWidth=c,e.current.style.minWidth=c,e.current.style.overflowWrap=c?"break-word":"",e.current.style.whiteSpace=c?"normal":"",e.current.title||(e.current.title=e.current.textContent||"")})},Lm={controlCell:"boolean",sortKey:"string",resizeKey:"string",pinned:"boolean"};function Ge({children:e,className:t,controlCell:n,sortKey:r,resizeKey:a="","data-testid":o,unsafelyReplaceClassName:l,pinned:c=!1,...p}){const{sort:u,setSort:m}=s.useContext(ma),f=u==null?void 0:u.find(x=>x.key===r),h=()=>{if(r&&!n){const x=(f==null?void 0:f.direction)===V.SortDirection.ASCENDING?V.SortDirection.DESCENDING:V.SortDirection.ASCENDING;m([{key:r,direction:x}])}},g=x=>{(x.key==="Enter"||x.key===" "||x.key==="Spacebar")&&(x.preventDefault(),h())},E=s.useRef(null);Im(c,E);const w=s.useRef(null),{isResizeable:T}=Mm({tableHeaderRef:E,resizerRef:w,resizeKey:a}),D=H(l||"sps-table__header",n&&"sps-table__header--control",!r&&"sps-table__header--sort-disabled",(f==null?void 0:f.direction)===V.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",(f==null?void 0:f.direction)===V.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",c&&"sps-table__cell--pinned",T&&"sps-table__header--resizeable",t);return s.createElement("th",{className:D,ref:E,role:"columnheader","aria-sort":(f==null?void 0:f.direction)||"none","data-testid":`${o}__header`,"data-resizekey":a||void 0,...p},s.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${o}__header-cell-body`,onClick:h,tabIndex:r?0:void 0,onKeyDown:g},e),T&&s.createElement(s.Fragment,null,s.createElement("span",{ref:w,className:H("sps-table__column-resizer")}),s.createElement("span",{className:H("sps-table__column-resizer-guide")})))}Object.assign(Ge,{props:Lm,displayName:"SpsTableHeader"});function Om(e){return s.createElement(Ge,{...e})}Object.assign(Om,{props:Lm,displayName:"SpsTh"});const Rm={pinned:"boolean"};function pn({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:r,pinned:a,...o}){const l=H(r||"sps-table__head",a&&"sps-table__head--pinned",t);return s.createElement("thead",{className:l,"data-testid":`${n}__head`,...o},e)}Object.assign(pn,{props:Rm,displayName:"SpsTableHead"});function Pm(e){return s.createElement(pn,{...e})}Object.assign(Pm,{props:Rm,displayName:"SpsThead"});const Bm={};function Be({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:r,...a}){const o=H(r||"sps-table__row",t);return s.createElement("tr",{className:o,role:"row","data-testid":`${n}__row`,...a},e)}Object.assign(Be,{props:Bm,displayName:"SpsTableRow"});function Am(e){return s.createElement(Be,{...e})}Object.assign(Am,{props:Bm,displayName:"SpsTr"});const Fm={};function un(e){const{children:t,className:n,"data-testid":r,unsafelyReplaceClassName:a,...o}=e,l=H(a||"sps-table__body",n);return s.createElement("tbody",{className:l,"data-testid":`${r}__body`,...o},t)}Object.assign(un,{props:Fm,displayName:"SpsTableBody"});function $m(e){return s.createElement(un,{...e})}Object.assign($m,{props:Fm,displayName:"SpsTbody"});const Vm={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth",pinned:"boolean"};function ie(e){const{buttonCell:t,children:n,className:r,controlCell:a,"data-testid":o,unsafelyReplaceClassName:l,wrap:c,pinned:p=!1,...u}=e,m=H(l||"sps-table__cell",t&&"sps-table__cell--button-cell",a&&"sps-table__cell--control",c&&`sps-table__cell--text-wrap-${c}`,p&&"sps-table__cell--pinned",r),f=s.useRef(null);return Im(p,f),_m(f),s.createElement("td",{className:m,ref:f,role:"cell","data-testid":`${o}__cell`,...u},n)}Object.assign(ie,{props:Vm,displayName:"SpsTableCell"});function Km(e){return s.createElement(ie,{...e})}Object.assign(Km,{props:Vm,displayName:"SpsTd"});const BN={},AN="sps-icon-button-panel";function Hm({children:e,className:t,...n}){const r=H(AN,t),[a]=Et(e,[{type:$e,props:{kind:V.ButtonKind.ICON}}]);return s.createElement("div",{className:r,...n},a)}Object.assign(Hm,{props:BN,displayName:"SpsIconButtonPanel"});const Wm={generalUsage:{label:"General Usage",customSection:()=>s.createElement("section",{id:"table-general-usage"},s.createElement("div",{className:"flex-color-header"},s.createElement("h4",null,"General Usage"),s.createElement($e,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},kind:V.ButtonKind.LINK},"Back to Top")),s.createElement("h5",null,"Use Tables:"),s.createElement("ul",{className:"sps-body-14"},s.createElement("li",null,"Each record has more than 6 points of data"),s.createElement("li",null,"When more records need to be shown in the vertical space"),s.createElement("li",null,"When sorting options need to be precise (needs better explanation)."),s.createElement("li",null,"When tabular views are the expected/conventional view of thet data being displayed (one example: if the data is to be exported into a spreadsheet view).")),s.createElement("h5",null,"Avoid Tables:"),s.createElement("ul",{className:"sps-body-14"},s.createElement("li",null,"When large images need to be included amongst the data.")),s.createElement("div",null,"For additional help deciding which option best suits the data being displayed, refer to the List Usage Matrix."))},basic:{label:"Standard Tables",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("div",{className:"sps-body-14"},"Tables display tabular data in columns and rows with a header row used to identify the type of content in each column. The most common style of content displayed in tables is text (Small Body Copy), but additional elements such as tags and icons can be used when necessary."),s.createElement("br",null),s.createElement("div",{className:"sps-body-14"},"Tables can be used in conjunction with the"," ",s.createElement(e,{to:"List Toolbar"},"List Toolbar")," and"," ",s.createElement(e,{to:"Pagination"},"Pagination")," components for extended capabilities.")),examples:{basic:{react:y.code`
+          calc(100% - ${r}px) ${-a}px`};return e.current&&(t(),e.current.addEventListener("scroll",t),window.addEventListener("scroll",t)),()=>{e.current&&e.current.removeEventListener("scroll",t),window.removeEventListener("scroll",t)}})},ON=(e,t,n)=>{s.useLayoutEffect(()=>{const r=e.current;if(!r)return;const a=r==null?void 0:r.querySelector("thead"),o=r==null?void 0:r.querySelector("table"),l=o==null?void 0:o.querySelector("tbody>tr"),c=l==null?void 0:l.querySelectorAll("td"),p=(a==null?void 0:a.querySelectorAll("th"))||[],u=document.body.querySelector(".sps-navbar-container");let m=r==null?void 0:r.querySelector(".placeholder-head"),f;const h=()=>{a&&(a.style.position=t?"sticky":"",a.style.top=t?"0":"",a.style.overflow="",a.style.maxWidth="",a.style.width="",a.style.minWidth=""),m&&(m.style.width="",m.style.height=""),c&&Array.from(c).forEach((T,D)=>{const x=p[D];if(x){const k=x.getAttribute("data-resizekey"),b=k&&n?n[k]:void 0;if(b){const I=`${b}px`;x.style.minWidth=I,x.style.maxWidth=I,x.style.width=I,T.style.minWidth=I,T.style.maxWidth=I,T.style.width=I}else x.style.minWidth="",x.style.width="",x.style.maxWidth="",T.style.minWidth="",T.style.width="",T.style.maxWidth=""}else T.style.minWidth="",T.style.width="",T.style.maxWidth=""})},g=()=>{a&&r&&(a.scrollLeft=r.scrollLeft)},E=()=>{let T=null;f===window?T=u?u.getBoundingClientRect().height:0:f instanceof HTMLElement&&(T=f.getBoundingClientRect().top);const D=r.scrollLeft,x=a==null?void 0:a.getBoundingClientRect(),k=r.getBoundingClientRect();if(T&&x&&x.top<=T&&T<=k.bottom-x.height&&k.top<=T){if(c&&Array.from(c).forEach((b,I)=>{const O=b.getBoundingClientRect().width,M=p[I].getBoundingClientRect().width,L=`${Math.max(O,M)}px`;p[I].style.minWidth=L,p[I].style.width=L,p[I].style.maxWidth=L,b.style.minWidth=L,b.style.width=L,b.style.maxWidth=L}),a&&e.current){a.style.position="fixed",a.style.top=`${T}px`,a.style.overflow="hidden";const b=e.current.offsetWidth-e.current.clientWidth,I=`${k.width-b}px`;a.style.maxWidth=I,a.style.width=I,a.style.minWidth=I}m||(m=document.createElement("div"),m.style.width=`${x.width}px`,m.style.height=`${x.height}px`,m.className="placeholder-head",r.insertBefore(m,o))}else m&&(r.removeChild(m),m=null,h());r.scrollLeft=D,g()},w=()=>{h(),E(),g()};return a&&a.classList.contains("sps-table__head--pinned")&&(f=_N(r)||window,f.addEventListener("scroll",E),window.addEventListener("resize",w),r.addEventListener("scroll",g),w()),()=>{f&&(f.removeEventListener("scroll",E),window.removeEventListener("resize",w)),r.removeEventListener("scroll",g)}})},RN=(e,t)=>{const n=()=>{if(!e.current||!t)return;const r=e.current,a=r==null?void 0:r.querySelector("table > thead"),o=r==null?void 0:r.querySelector("table"),l=r==null?void 0:r.querySelector(".shadow--top"),c=r==null?void 0:r.querySelector(".shadow--bottom");if(a&&o&&l&&c){c.style.left="0",c.style.bottom="0",l.style.left="0";const p=r.offsetHeight-(r==null?void 0:r.clientHeight),u=o.getBoundingClientRect().height,m=a.getBoundingClientRect().height,f=r.scrollTop,h=u+p-r.getBoundingClientRect().height-r.scrollTop,g=r.scrollLeft;c.style.bottom=`${-f}px`,c.style.left=`${g}px`,c.style.opacity=h>0?"1":"0",l.style.top=`${f+m}px`,l.style.left=`${g}px`,l.style.opacity=f>0?"1":"0"}};s.useLayoutEffect(()=>{if(e.current&&t){const r=e.current.querySelector("table > thead");return r&&(r.style.position="sticky",r.style.top="0",r.style.zIndex="2",r.style.backgroundColor="#fff"),e.current.addEventListener("scroll",n),()=>{var a;(a=e.current)==null||a.removeEventListener("scroll",n)}}},[]),s.useLayoutEffect(()=>{e.current&&t&&n()})},PN={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean",maxHeightPx:"number",maxHeightRem:"number",resizeable:"boolean",resizeState:"ResizeState",onResizeStateChange:"ResizeStateChangeHandler"};function Bn({children:e,className:t,onSortChange:n,sort:r,"data-testid":a,unsafelyReplaceClassName:o,maxHeightPx:l,maxHeightRem:c,resizeable:p,resizeState:u,onResizeStateChange:m,...f}){const h=H(o||"sps-table-container",t),g=l?l/16:c,E=g?{maxHeight:`${g}rem`}:{},w=s.useRef(null);return RN(w,g),LN(w),ON(w,g,u),s.createElement(MN,{resizeable:p,resizeState:u,onResizeStateChange:m,sort:r,onSortChange:n},s.createElement("div",{ref:w,className:h,style:E},s.createElement("div",{className:"sps-table__shadow shadow--top"}),s.createElement("div",{className:"sps-table__shadow shadow--bottom"}),s.createElement("table",{className:"sps-table",role:"table","data-testid":`${a}`,...f},e)))}Object.assign(Bn,{props:PN,displayName:"SpsTable"});function km(e){if(!e||!e.parentElement)return null;let t=e.parentElement;for(;t;){if(t.tagName.toLowerCase()==="table")return t;t=t.parentElement}return null}const Mm=({tableHeaderRef:e,resizerRef:t,resizeKey:n})=>{const{resizeable:r,resizeState:a,setSingleResizeState:o}=s.useContext(ma),l=!!r&&!!n,c=l?a==null?void 0:a[n]:0;return s.useLayoutEffect(()=>{var O,M;let p,u=c,m=0;const f=km(e.current),h=(O=e.current)==null?void 0:O.querySelector(".sps-table__column-resizer"),g=(M=e.current)==null?void 0:M.querySelector(".sps-table__column-resizer-guide");function E(){if(e.current&&p&&(h&&(h.style.backgroundColor=wo.colors.blue200),g&&f&&(g.style.height=`${f.getBoundingClientRect().height}px`,g.style.display="block"),f)){const L=f.querySelectorAll("thead > tr > th");for(let R=0;R<L.length;R+=1){const W=L[R].querySelector(".sps-table__column-resizer");L[R].style.cursor="col-resize",L[R]!==e.current&&W&&(L[R].classList.remove("sps-table__header--resizeable"),W.style.display="none")}}}function w(){e.current&&p&&h&&g&&(h.style.right=`${m}px`,g.style.right=`${m}px`)}function T(){if(e.current){const L=u?`${u}px`:"";e.current.style.width=L,e.current.style.maxWidth=L,e.current.style.minWidth=L;const R=e.current.querySelector(".sps-table__header-cell-body");if(R&&(R.style.overflow=L?"hidden":"",R.style.textOverflow=L?"ellipsis":""),h&&g&&(h.style.right="0",h.style.backgroundColor="",g.style.right="0",g.style.display="none"),e.current.classList.contains("sps-table__cell--pinned")||(e.current.style.position="relative"),f){const W=f.querySelectorAll("thead > tr > th");for(let _=0;_<W.length;_+=1){const $=W[_].querySelector(".sps-table__header-cell-body"),N=W[_].querySelector(".sps-table__column-resizer");W[_].style.cursor="default",W[_]!==e.current&&N&&(W[_].classList.add("sps-table__header--resizeable"),N.style.display="block"),($==null?void 0:$.textContent)&&!$.title&&($.title=$.textContent)}}}}const D=L=>{!e.current||(L.preventDefault(),p=L.clientX,u=e.current.clientWidth,E())},x=L=>{if(!p||!e.current)return;const R=Math.max(Math.min(p-L.clientX,40),-40);R!==0&&(p=L.clientX,m+=R,u=Math.max(u-R,40),w())},k=()=>{!e.current||!p||(p=0,m=0,T(),o(n,u))},b=()=>{u=0,T(),o(n,u)};let I=!1;return l&&t.current&&(t.current.addEventListener("dragstart",D),t.current.addEventListener("mousedown",D),t.current.addEventListener("dblclick",b),window.addEventListener("mousemove",x),window.addEventListener("dragend",k),window.addEventListener("mouseup",k),I=!0,T()),()=>{t.current&&I&&(t.current.removeEventListener("dragstart",D),t.current.removeEventListener("mousedown",D),t.current.removeEventListener("dblclick",b)),I&&(window.removeEventListener("mousemove",x),window.removeEventListener("dragend",k),window.removeEventListener("mouseup",k))}},[l,c,n,o]),{isResizeable:l}},_m=e=>{const{resizeable:t,resizeState:n}=s.useContext(ma);s.useLayoutEffect(()=>{if(!t||!n||!e.current)return;const r=km(e.current);if(!r)return;const a=r.querySelector(`thead > tr > th:nth-of-type(${e.current.cellIndex+1})`);if(!a)return;const o=a.getAttribute("data-resizekey");if(!o)return;const l=n[o],c=l?`${l}px`:"";e.current.style.width=c,e.current.style.maxWidth=c,e.current.style.minWidth=c,e.current.style.overflowWrap=c?"break-word":"",e.current.style.whiteSpace=c?"normal":"",e.current.title||(e.current.title=e.current.textContent||"")})},Lm={controlCell:"boolean",sortKey:"string",resizeKey:"string",pinned:"boolean"};function Ge({children:e,className:t,controlCell:n,sortKey:r,resizeKey:a="","data-testid":o,unsafelyReplaceClassName:l,pinned:c=!1,...p}){const{sort:u,setSort:m}=s.useContext(ma),f=u==null?void 0:u.find(x=>x.key===r),h=()=>{if(r&&!n){const x=(f==null?void 0:f.direction)===V.SortDirection.ASCENDING?V.SortDirection.DESCENDING:V.SortDirection.ASCENDING;m([{key:r,direction:x}])}},g=x=>{(x.key==="Enter"||x.key===" "||x.key==="Spacebar")&&(x.preventDefault(),h())},E=s.useRef(null);Im(c,E);const w=s.useRef(null),{isResizeable:T}=Mm({tableHeaderRef:E,resizerRef:w,resizeKey:a}),D=H(l||"sps-table__header",n&&"sps-table__header--control",!r&&"sps-table__header--sort-disabled",(f==null?void 0:f.direction)===V.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",(f==null?void 0:f.direction)===V.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",c&&"sps-table__cell--pinned",T&&"sps-table__header--resizeable",t);return s.createElement("th",{className:D,ref:E,role:"columnheader","aria-sort":(f==null?void 0:f.direction)||"none","data-testid":`${o}__header`,"data-resizekey":a||void 0,...p},s.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${o}__header-cell-body`,onClick:h,tabIndex:r?0:void 0,onKeyDown:g},e),T&&s.createElement(s.Fragment,null,s.createElement("span",{ref:w,className:H("sps-table__column-resizer")}),s.createElement("span",{className:H("sps-table__column-resizer-guide")})))}Object.assign(Ge,{props:Lm,displayName:"SpsTableHeader"});function Om(e){return s.createElement(Ge,{...e})}Object.assign(Om,{props:Lm,displayName:"SpsTh"});const Rm={pinned:"boolean"};function pn({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:r,pinned:a,...o}){const l=H(r||"sps-table__head",a&&"sps-table__head--pinned",t);return s.createElement("thead",{className:l,"data-testid":`${n}__head`,...o},e)}Object.assign(pn,{props:Rm,displayName:"SpsTableHead"});function Pm(e){return s.createElement(pn,{...e})}Object.assign(Pm,{props:Rm,displayName:"SpsThead"});const Bm={};function Be({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:r,...a}){const o=H(r||"sps-table__row",t);return s.createElement("tr",{className:o,role:"row","data-testid":`${n}__row`,...a},e)}Object.assign(Be,{props:Bm,displayName:"SpsTableRow"});function Am(e){return s.createElement(Be,{...e})}Object.assign(Am,{props:Bm,displayName:"SpsTr"});const Fm={};function un(e){const{children:t,className:n,"data-testid":r,unsafelyReplaceClassName:a,...o}=e,l=H(a||"sps-table__body",n);return s.createElement("tbody",{className:l,"data-testid":`${r}__body`,...o},t)}Object.assign(un,{props:Fm,displayName:"SpsTableBody"});function $m(e){return s.createElement(un,{...e})}Object.assign($m,{props:Fm,displayName:"SpsTbody"});const Vm={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth",pinned:"boolean"};function ie(e){const{buttonCell:t,children:n,className:r,controlCell:a,"data-testid":o,unsafelyReplaceClassName:l,wrap:c,pinned:p=!1,...u}=e,m=H(l||"sps-table__cell",t&&"sps-table__cell--button-cell",a&&"sps-table__cell--control",c&&`sps-table__cell--text-wrap-${c}`,p&&"sps-table__cell--pinned",r),f=s.useRef(null);return Im(p,f),_m(f),s.createElement("td",{className:m,ref:f,role:"cell","data-testid":`${o}__cell`,...u},n)}Object.assign(ie,{props:Vm,displayName:"SpsTableCell"});function Km(e){return s.createElement(ie,{...e})}Object.assign(Km,{props:Vm,displayName:"SpsTd"});const BN={},AN="sps-icon-button-panel";function Hm({children:e,className:t,...n}){const r=H(AN,t),[a]=Et(e,[{type:$e,props:{kind:V.ButtonKind.ICON}}]);return s.createElement("div",{className:r,...n},a)}Object.assign(Hm,{props:BN,displayName:"SpsIconButtonPanel"});const Wm={generalUsage:{label:"General Usage",customSection:()=>s.createElement("section",{id:"table-general-usage"},s.createElement("div",{className:"flex-color-header"},s.createElement("h4",null,"General Usage"),s.createElement($e,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},kind:V.ButtonKind.LINK},"Back to Top")),s.createElement("h5",null,"Use Tables:"),s.createElement("ul",{className:"sps-body-14"},s.createElement("li",null,"Each record has more than 6 points of data"),s.createElement("li",null,"When more records need to be shown in the vertical space"),s.createElement("li",null,"When sorting options need to be precise (needs better explanation)."),s.createElement("li",null,"When tabular views are the expected/conventional view of thet data being displayed (one example: if the data is to be exported into a spreadsheet view).")),s.createElement("h5",null,"Avoid Tables:"),s.createElement("ul",{className:"sps-body-14"},s.createElement("li",null,"When large images need to be included amongst the data.")),s.createElement("div",null,"For additional help deciding which option best suits the data being displayed, refer to the List Usage Matrix."))},basic:{label:"Standard Tables",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("div",{className:"sps-body-14"},"Tables display tabular data in columns and rows with a header row used to identify the type of content in each column. The most common style of content displayed in tables is text (Small Body Copy), but additional elements such as tags and icons can be used when necessary."),s.createElement("br",null),s.createElement("div",{className:"sps-body-14"},"Tables can be used in conjunction with the"," ",s.createElement(e,{to:"List Toolbar"},"List Toolbar")," and"," ",s.createElement(e,{to:"Pagination"},"Pagination")," components for extended capabilities.")),examples:{basic:{react:y.code`
                     import { 
                       SpsTable,
                       SpsTableHead,

package/lib/index.es.js

@@ -18773,7 +18773,7 @@ const fN = ({
       const R = Math.max(Math.min(p - L.clientX, 40), -40);
       R !== 0 && (p = L.clientX, m += R, u = Math.max(u - R, 40), w());
     }, k = () => {
-      !e.current || (p = 0, m = 0, T(), o(n, u));
+      !e.current || !p || (p = 0, m = 0, T(), o(n, u));
     }, b = () => {
       u = 0, T(), o(n, u);
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "7.11.1",
+  "version": "7.11.3",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
@@ -41,11 +41,11 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.6.0",
-    "@sps-woodland/illustrations": "7.11.1",
-    "@sps-woodland/tabs": "7.11.1",
-    "@spscommerce/ds-colors": "7.11.1",
-    "@spscommerce/ds-shared": "7.11.1",
-    "@spscommerce/positioning": "7.11.1",
+    "@sps-woodland/illustrations": "7.11.3",
+    "@sps-woodland/tabs": "7.11.3",
+    "@spscommerce/ds-colors": "7.11.3",
+    "@spscommerce/ds-shared": "7.11.3",
+    "@spscommerce/positioning": "7.11.3",
     "@spscommerce/utils": "^6.11.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
@@ -59,11 +59,11 @@
     "@react-types/select": "^3.6.1",
     "@react-types/shared": "^3.8.0",
     "@react-types/tabs": "^3.0.1",
-    "@sps-woodland/illustrations": "7.11.1",
-    "@sps-woodland/tabs": "7.11.1",
-    "@spscommerce/ds-colors": "7.11.1",
-    "@spscommerce/ds-shared": "7.11.1",
-    "@spscommerce/positioning": "7.11.1",
+    "@sps-woodland/illustrations": "7.11.3",
+    "@sps-woodland/tabs": "7.11.3",
+    "@spscommerce/ds-colors": "7.11.3",
+    "@spscommerce/ds-shared": "7.11.3",
+    "@spscommerce/positioning": "7.11.3",
     "@spscommerce/utils": "^6.12.1",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^10.0.0",
@@ -77,7 +77,7 @@
     "raf-stub": "^2.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "test": "7.11.1"
+    "test": "7.11.3"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",