@spscommerce/ds-react 6.33.0 → 6.33.1

package/lib/index.cjs.js

@@ -3521,7 +3521,7 @@ var s=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
           calc(100% - ${p}px) 0, 
           ${l}px ${-o}px,
           calc(100% - ${p+s}px) ${-o}px`}else e.current.style.backgroundPosition=`0 0, 100% 0, 0 ${-o}px, 
-          calc(100% - ${s}px) ${-o}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)}})},qD=(e,t)=>{a.useLayoutEffect(()=>{const n=e.current,s=n==null?void 0:n.querySelector("thead"),o=n==null?void 0:n.querySelector("table"),i=o==null?void 0:o.querySelector("tbody>tr"),c=i==null?void 0:i.querySelectorAll("td"),l=s==null?void 0:s.querySelectorAll("th"),p=document.body.querySelector(".sps-navbar-container");let u=n==null?void 0:n.querySelector(".placeholder-head"),f=null;const m=()=>{s&&(s.style.position=t?"sticky":null,s.style.top=t?"0":null,s.style.overflow=null,s.style.maxWidth=null,s.style.width=null,s.style.minWidth=null),u&&(u.style.width=null,u.style.height=null),c&&Array.from(c).forEach((x,E)=>{l[E].style.minWidth=null,l[E].style.width=null,l[E].style.maxWidth=null,x.style.minWidth=null,x.style.width=null,x.style.maxWidth=null})},g=()=>{s.scrollLeft=n.scrollLeft},S=()=>{let x=null;f===window?x=p?p.getBoundingClientRect().height:0:f instanceof HTMLElement&&(x=f.getBoundingClientRect().top);const E=n.scrollLeft,D=s.getBoundingClientRect(),I=n.getBoundingClientRect();if(D.top<=x&&x<=I.bottom-D.height&&I.top<=x){s.style.position="fixed",s.style.top=`${x}px`,s.style.overflow="hidden";const v=e.current.offsetWidth-e.current.clientWidth,k=`${I.width-v}px`;s.style.maxWidth=k,s.style.width=k,s.style.minWidth=k,c&&Array.from(c).forEach((_,B)=>{const M=_.getBoundingClientRect().width,P=l[B].getBoundingClientRect().width,F=`${Math.max(M,P)}px`;l[B].style.minWidth=F,l[B].style.width=F,l[B].style.maxWidth=F,_.style.minWidth=F,_.style.width=F,_.style.maxWidth=F}),u||(u=document.createElement("div"),u.style.width=`${D.width}px`,u.style.height=`${D.height}px`,u.className="placeholder-head",n.insertBefore(u,o))}else u&&(n.removeChild(u),u=null,m());n.scrollLeft=E,g()},T=()=>{m(),S(),g()};return s&&s.classList.contains("sps-table__head--pinned")&&(f=zD(n)||window,f.addEventListener("scroll",S),window.addEventListener("resize",T),n.addEventListener("scroll",g),T()),()=>{f&&(f.removeEventListener("scroll",S),window.removeEventListener("resize",T)),n&&n.removeEventListener("scroll",g)}})},JD=(e,t)=>{const n=()=>{const s=e.current,o=s==null?void 0:s.querySelector("table > thead"),i=s==null?void 0:s.querySelector("table"),c=s==null?void 0:s.querySelector(".shadow--top"),l=s==null?void 0:s.querySelector(".shadow--bottom");if(o&&i&&c&&l){l.style.left="0",l.style.bottom="0",c.style.left="0";const p=s.offsetHeight-(s==null?void 0:s.clientHeight),u=i.getBoundingClientRect().height,f=o.getBoundingClientRect().height,m=s.scrollTop,g=u+p-s.getBoundingClientRect().height-s.scrollTop,S=s.scrollLeft;l.style.bottom=`${-m}px`,l.style.left=`${S}px`,l.style.opacity=g>0?"1":"0",c.style.top=`${m+f}px`,c.style.left=`${S}px`,c.style.opacity=m>0?"1":"0"}};a.useLayoutEffect(()=>{if(e.current&&t){const s=e.current.querySelector("table > thead");return s&&(s.style.position="sticky",s.style.top="0",s.style.zIndex="2",s.style.backgroundColor="#fff"),e.current.addEventListener("scroll",n),()=>{e.current.removeEventListener("scroll",n)}}},[]),a.useLayoutEffect(()=>{e.current&&t&&n()})},ZD={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean",maxHeightPx:"number",maxHeightRem:"number",resizeable:"boolean",resizeState:"ResizeState",onResizeStateChange:"ResizeStateChangeHandler"},XD=G(N({},z),{onSortChange:te(),sort:w.exports.arrayOf(ce()),selectable:w.exports.bool,maxHeightPx:w.exports.number,maxHeightRem:w.exports.number,resizeable:w.exports.bool,resizeState:ce(),onResizeStateChange:te()});function On(g){var S=g,{children:e,className:t,onSortChange:n,sort:s,"data-testid":o,unsafelyReplaceClassName:i,maxHeightPx:c,maxHeightRem:l,resizeable:p,resizeState:u,onResizeStateChange:f}=S,m=q(S,["children","className","onSortChange","sort","data-testid","unsafelyReplaceClassName","maxHeightPx","maxHeightRem","resizeable","resizeState","onResizeStateChange"]);const T=K(i||"sps-table-container",t),x=c?c/16:l,E=x?{maxHeight:`${x}rem`}:{},D=a.useRef(null);return JD(D,x),jD(D),qD(D,x),a.createElement(YD,{resizeable:p,resizeState:u,onResizeStateChange:f,sort:s,onSortChange:n},a.createElement("div",{ref:D,className:T,style:E},a.createElement("div",{className:"sps-table__shadow shadow--top"}),a.createElement("div",{className:"sps-table__shadow shadow--bottom"}),a.createElement("table",N({className:"sps-table",role:"table","data-testid":`${o}`},m),e)))}Object.assign(On,{props:ZD,propTypes:XD,displayName:"SpsTable"});function QD(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 Xu=({tableHeaderRef:e,resizerRef:t,resizeKey:n})=>{const{resizeable:s,resizeState:o,setSingleResizeState:i}=a.useContext(Ni),c=!!s&&!!n,l=c?o==null?void 0:o[n]:void 0;return a.useLayoutEffect(()=>{var _,B;let p=null,u=l,f=0;const m=QD(e.current),g=(_=e.current)==null?void 0:_.querySelector(".sps-table__column-resizer"),S=(B=e.current)==null?void 0:B.querySelector(".sps-table__column-resizer-guide");function T(){if(e.current&&p&&(g&&(g.style.backgroundColor=Wr.colors.blue200),S&&m&&(S.style.height=`${m.getBoundingClientRect().height}px`,S.style.display="block"),m)){const M=m.querySelectorAll("thead > tr > th");for(let P=0;P<M.length;P+=1){const F=M[P].querySelector(".sps-table__column-resizer");M[P].style.cursor="col-resize",M[P]!==e.current&&F&&(M[P].classList.remove("sps-table__header--resizeable"),F.style.display="none")}}}function x(){e.current&&p&&g&&S&&(g.style.right=`${f}px`,S.style.right=`${f}px`)}function E(){if(e.current){const M=u?`${u}px`:null;e.current.style.width=M,e.current.style.maxWidth=M,e.current.style.minWidth=M;const P=e.current.querySelector(".sps-table__header-cell-body");if(P&&(P.style.overflow=M?"hidden":null,P.style.textOverflow=M?"ellipsis":null),g&&S&&(g.style.right="0",g.style.backgroundColor=null,S.style.right="0",S.style.display="none"),e.current.classList.contains("sps-table__cell--pinned")||(e.current.style.position="relative"),m){const F=m.querySelectorAll("thead > tr > th");for(let $=0;$<F.length;$+=1){const V=F[$].querySelector(".sps-table__header-cell-body"),W=F[$].querySelector(".sps-table__column-resizer");F[$].style.cursor="default",F[$]!==e.current&&W&&(F[$].classList.add("sps-table__header--resizeable"),W.style.display="block"),V&&!V.title&&(V.title=V.textContent)}const L=m.querySelectorAll(`tbody > tr > td:nth-of-type(${e.current.cellIndex+1})`);for(let $=0;$<L.length;$+=1)L[$].style.width=M,L[$].style.maxWidth=M,L[$].style.minWidth=M,L[$].style.overflowWrap=M?"break-word":null,L[$].style.whiteSpace=M?"normal":null,L[$].title||(L[$].title=L[$].textContent)}}}const D=M=>{!e.current||(M.preventDefault(),p=M.clientX,u=e.current.clientWidth,T())},I=M=>{if(!p||!e.current)return;const P=Math.max(Math.min(p-M.clientX,40),-40);P!==0&&(p=M.clientX,f+=P,u=Math.max(u-P,40),x())},v=()=>{!e.current||(p=null,f=0,E(),i(n,u))},k=()=>{u=null,E(),i(n,u)};return c&&t.current&&(t.current.addEventListener("dragstart",D),t.current.addEventListener("mousedown",D),t.current.addEventListener("dblclick",k),window.addEventListener("mousemove",I),window.addEventListener("dragend",v),window.addEventListener("mouseup",v),E()),()=>{t.current&&(t.current.removeEventListener("dragstart",D),t.current.removeEventListener("mousedown",D),t.current.removeEventListener("dblclick",k)),window.removeEventListener("mousemove",I),window.removeEventListener("dragend",v),window.removeEventListener("mouseup",v)}},[c,l,n,i]),{isResizeable:c}},Qu={controlCell:"boolean",sortKey:"string",resizeKey:"string",pinned:"boolean"},em=G(N({},z),{controlCell:w.exports.bool,sortKey:w.exports.string,resizeKey:w.exports.string,pinned:w.exports.bool});function Qe(u){var f=u,{children:e,className:t,controlCell:n,sortKey:s,resizeKey:o,"data-testid":i,unsafelyReplaceClassName:c,pinned:l}=f,p=q(f,["children","className","controlCell","sortKey","resizeKey","data-testid","unsafelyReplaceClassName","pinned"]);const{sort:m,setSort:g}=a.useContext(Ni),S=m==null?void 0:m.find(k=>k.key===s),T=()=>{if(s&&!n){const k=(S==null?void 0:S.direction)===R.SortDirection.ASCENDING?R.SortDirection.DESCENDING:R.SortDirection.ASCENDING;g([{key:s,direction:k}])}},x=k=>{(k.key==="Enter"||k.key===" "||k.key==="Spacebar")&&(k.preventDefault(),T())},E=a.useRef(null);Zu(l,E);const D=a.useRef(null),{isResizeable:I}=Xu({tableHeaderRef:E,resizerRef:D,resizeKey:o}),v=K(c||"sps-table__header",n&&"sps-table__header--control",!s&&"sps-table__header--sort-disabled",(S==null?void 0:S.direction)===R.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",(S==null?void 0:S.direction)===R.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",l&&"sps-table__cell--pinned",I&&"sps-table__header--resizeable",t);return a.createElement("th",N({className:v,ref:E,role:"columnheader","aria-sort":(S==null?void 0:S.direction)||"none","data-testid":`${i}__header`},p),a.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${i}__header-cell-body`,onClick:T,tabIndex:s?0:null,onKeyDown:x},e),I&&a.createElement(a.Fragment,null,a.createElement("span",{ref:D,className:K("sps-table__column-resizer")}),a.createElement("span",{className:K("sps-table__column-resizer-guide")})))}Object.assign(Qe,{props:Qu,propTypes:em,displayName:"SpsTableHeader"});function tm(e){return a.createElement(Qe,N({},e))}Object.assign(tm,{props:Qu,propTypes:em,displayName:"SpsTh"});const nm={pinned:"boolean"},am=G(N({},z),{pinned:w.exports.bool});function fn(c){var l=c,{children:e,className:t,"data-testid":n,unsafelyReplaceClassName:s,pinned:o}=l,i=q(l,["children","className","data-testid","unsafelyReplaceClassName","pinned"]);const p=K(s||"sps-table__head",o&&"sps-table__head--pinned",t);return a.createElement("thead",N({className:p,"data-testid":`${n}__head`},i),e)}Object.assign(fn,{props:nm,propTypes:am,displayName:"SpsTableHead"});function sm(e){return a.createElement(fn,N({},e))}Object.assign(sm,{props:nm,propTypes:am,displayName:"SpsThead"});const rm={},om=N({},z);function Pe(i){var c=i,{children:e,className:t,"data-testid":n,unsafelyReplaceClassName:s}=c,o=q(c,["children","className","data-testid","unsafelyReplaceClassName"]);const l=K(s||"sps-table__row",t);return a.createElement("tr",N({className:l,role:"row","data-testid":`${n}__row`},o),e)}Object.assign(Pe,{props:rm,propTypes:om,displayName:"SpsTableRow"});function im(e){return a.createElement(Pe,N({},e))}Object.assign(im,{props:rm,propTypes:om,displayName:"SpsTr"});const lm={},cm=N({},z);function hn(e){const l=e,{children:t,className:n,"data-testid":s,unsafelyReplaceClassName:o}=l,i=q(l,["children","className","data-testid","unsafelyReplaceClassName"]),c=K(o||"sps-table__body",n);return a.createElement("tbody",N({className:c,"data-testid":`${s}__body`},i),t)}Object.assign(hn,{props:lm,propTypes:cm,displayName:"SpsTableBody"});function dm(e){return a.createElement(hn,N({},e))}Object.assign(dm,{props:lm,propTypes:cm,displayName:"SpsTbody"});const pm={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth",pinned:"boolean"},um=G(N({},z),{buttonCell:w.exports.bool,controlCell:w.exports.bool,wrap:w.exports.oneOf([200,300,400,500,600]),pinned:w.exports.bool});function ne(e){const g=e,{buttonCell:t,children:n,className:s,controlCell:o,"data-testid":i,unsafelyReplaceClassName:c,wrap:l,pinned:p}=g,u=q(g,["buttonCell","children","className","controlCell","data-testid","unsafelyReplaceClassName","wrap","pinned"]),f=K(c||"sps-table__cell",t&&"sps-table__cell--button-cell",o&&"sps-table__cell--control",l&&`sps-table__cell--text-wrap-${l}`,p&&"sps-table__cell--pinned",s),m=a.useRef(null);return Zu(p,m),a.createElement("td",N({className:f,ref:m,role:"cell","data-testid":`${i}__cell`},u),n)}Object.assign(ne,{props:pm,propTypes:um,displayName:"SpsTableCell"});function mm(e){return a.createElement(ne,N({},e))}Object.assign(mm,{props:pm,propTypes:um,displayName:"SpsTd"});const eI={},tI=N({},z),nI="sps-icon-button-panel";function fm(s){var o=s,{children:e,className:t}=o,n=q(o,["children","className"]);const i=K(nI,t),[c]=Et(e,[{type:Fe,props:{kind:R.ButtonKind.ICON}}]);return a.createElement("div",N({className:i},n),c)}Object.assign(fm,{props:eI,propTypes:tI,displayName:"SpsIconButtonPanel"});const hm={generalUsage:{label:"General Usage",customSection:()=>a.createElement("section",{id:"table-general-usage"},a.createElement("div",{className:"flex-color-header"},a.createElement("h4",null,"General Usage"),a.createElement(Fe,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},kind:R.ButtonKind.LINK},"Back to Top")),a.createElement("h5",null,"Use Tables:"),a.createElement("ul",{className:"sps-body-14"},a.createElement("li",null,"Each record has more than 6 points of data"),a.createElement("li",null,"When more records need to be shown in the vertical space"),a.createElement("li",null,"When sorting options need to be precise (needs better explanation)."),a.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).")),a.createElement("h5",null,"Avoid Tables:"),a.createElement("ul",{className:"sps-body-14"},a.createElement("li",null,"When large images need to be included amongst the data.")),a.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})=>a.createElement(a.Fragment,null,a.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."),a.createElement("br",null),a.createElement("div",{className:"sps-body-14"},"Tables can be used in conjunction with the"," ",a.createElement(e,{to:"List Toolbar"},"List Toolbar")," and"," ",a.createElement(e,{to:"Pagination"},"Pagination")," components for extended capabilities.")),examples:{basic:{react:y.code`
+          calc(100% - ${s}px) ${-o}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)}})},qD=(e,t)=>{a.useLayoutEffect(()=>{const n=e.current,s=n==null?void 0:n.querySelector("thead"),o=n==null?void 0:n.querySelector("table"),i=o==null?void 0:o.querySelector("tbody>tr"),c=i==null?void 0:i.querySelectorAll("td"),l=s==null?void 0:s.querySelectorAll("th"),p=document.body.querySelector(".sps-navbar-container");let u=n==null?void 0:n.querySelector(".placeholder-head"),f=null;const m=()=>{s&&(s.style.position=t?"sticky":null,s.style.top=t?"0":null,s.style.overflow=null,s.style.maxWidth=null,s.style.width=null,s.style.minWidth=null),u&&(u.style.width=null,u.style.height=null),c&&Array.from(c).forEach((x,E)=>{l[E].style.minWidth=null,l[E].style.width=null,l[E].style.maxWidth=null,x.style.minWidth=null,x.style.width=null,x.style.maxWidth=null})},g=()=>{s.scrollLeft=n.scrollLeft},S=()=>{let x=null;f===window?x=p?p.getBoundingClientRect().height:0:f instanceof HTMLElement&&(x=f.getBoundingClientRect().top);const E=n.scrollLeft,D=s.getBoundingClientRect(),I=n.getBoundingClientRect();if(D.top<=x&&x<=I.bottom-D.height&&I.top<=x){c&&Array.from(c).forEach((_,B)=>{const M=_.getBoundingClientRect().width,P=l[B].getBoundingClientRect().width,F=`${Math.max(M,P)}px`;l[B].style.minWidth=F,l[B].style.width=F,l[B].style.maxWidth=F,_.style.minWidth=F,_.style.width=F,_.style.maxWidth=F}),s.style.position="fixed",s.style.top=`${x}px`,s.style.overflow="hidden";const v=e.current.offsetWidth-e.current.clientWidth,k=`${I.width-v}px`;s.style.maxWidth=k,s.style.width=k,s.style.minWidth=k,u||(u=document.createElement("div"),u.style.width=`${D.width}px`,u.style.height=`${D.height}px`,u.className="placeholder-head",n.insertBefore(u,o))}else u&&(n.removeChild(u),u=null,m());n.scrollLeft=E,g()},T=()=>{m(),S(),g()};return s&&s.classList.contains("sps-table__head--pinned")&&(f=zD(n)||window,f.addEventListener("scroll",S),window.addEventListener("resize",T),n.addEventListener("scroll",g),T()),()=>{f&&(f.removeEventListener("scroll",S),window.removeEventListener("resize",T)),n&&n.removeEventListener("scroll",g)}})},JD=(e,t)=>{const n=()=>{const s=e.current,o=s==null?void 0:s.querySelector("table > thead"),i=s==null?void 0:s.querySelector("table"),c=s==null?void 0:s.querySelector(".shadow--top"),l=s==null?void 0:s.querySelector(".shadow--bottom");if(o&&i&&c&&l){l.style.left="0",l.style.bottom="0",c.style.left="0";const p=s.offsetHeight-(s==null?void 0:s.clientHeight),u=i.getBoundingClientRect().height,f=o.getBoundingClientRect().height,m=s.scrollTop,g=u+p-s.getBoundingClientRect().height-s.scrollTop,S=s.scrollLeft;l.style.bottom=`${-m}px`,l.style.left=`${S}px`,l.style.opacity=g>0?"1":"0",c.style.top=`${m+f}px`,c.style.left=`${S}px`,c.style.opacity=m>0?"1":"0"}};a.useLayoutEffect(()=>{if(e.current&&t){const s=e.current.querySelector("table > thead");return s&&(s.style.position="sticky",s.style.top="0",s.style.zIndex="2",s.style.backgroundColor="#fff"),e.current.addEventListener("scroll",n),()=>{e.current.removeEventListener("scroll",n)}}},[]),a.useLayoutEffect(()=>{e.current&&t&&n()})},ZD={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean",maxHeightPx:"number",maxHeightRem:"number",resizeable:"boolean",resizeState:"ResizeState",onResizeStateChange:"ResizeStateChangeHandler"},XD=G(N({},z),{onSortChange:te(),sort:w.exports.arrayOf(ce()),selectable:w.exports.bool,maxHeightPx:w.exports.number,maxHeightRem:w.exports.number,resizeable:w.exports.bool,resizeState:ce(),onResizeStateChange:te()});function On(g){var S=g,{children:e,className:t,onSortChange:n,sort:s,"data-testid":o,unsafelyReplaceClassName:i,maxHeightPx:c,maxHeightRem:l,resizeable:p,resizeState:u,onResizeStateChange:f}=S,m=q(S,["children","className","onSortChange","sort","data-testid","unsafelyReplaceClassName","maxHeightPx","maxHeightRem","resizeable","resizeState","onResizeStateChange"]);const T=K(i||"sps-table-container",t),x=c?c/16:l,E=x?{maxHeight:`${x}rem`}:{},D=a.useRef(null);return JD(D,x),jD(D),qD(D,x),a.createElement(YD,{resizeable:p,resizeState:u,onResizeStateChange:f,sort:s,onSortChange:n},a.createElement("div",{ref:D,className:T,style:E},a.createElement("div",{className:"sps-table__shadow shadow--top"}),a.createElement("div",{className:"sps-table__shadow shadow--bottom"}),a.createElement("table",N({className:"sps-table",role:"table","data-testid":`${o}`},m),e)))}Object.assign(On,{props:ZD,propTypes:XD,displayName:"SpsTable"});function QD(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 Xu=({tableHeaderRef:e,resizerRef:t,resizeKey:n})=>{const{resizeable:s,resizeState:o,setSingleResizeState:i}=a.useContext(Ni),c=!!s&&!!n,l=c?o==null?void 0:o[n]:void 0;return a.useLayoutEffect(()=>{var _,B;let p=null,u=l,f=0;const m=QD(e.current),g=(_=e.current)==null?void 0:_.querySelector(".sps-table__column-resizer"),S=(B=e.current)==null?void 0:B.querySelector(".sps-table__column-resizer-guide");function T(){if(e.current&&p&&(g&&(g.style.backgroundColor=Wr.colors.blue200),S&&m&&(S.style.height=`${m.getBoundingClientRect().height}px`,S.style.display="block"),m)){const M=m.querySelectorAll("thead > tr > th");for(let P=0;P<M.length;P+=1){const F=M[P].querySelector(".sps-table__column-resizer");M[P].style.cursor="col-resize",M[P]!==e.current&&F&&(M[P].classList.remove("sps-table__header--resizeable"),F.style.display="none")}}}function x(){e.current&&p&&g&&S&&(g.style.right=`${f}px`,S.style.right=`${f}px`)}function E(){if(e.current){const M=u?`${u}px`:null;e.current.style.width=M,e.current.style.maxWidth=M,e.current.style.minWidth=M;const P=e.current.querySelector(".sps-table__header-cell-body");if(P&&(P.style.overflow=M?"hidden":null,P.style.textOverflow=M?"ellipsis":null),g&&S&&(g.style.right="0",g.style.backgroundColor=null,S.style.right="0",S.style.display="none"),e.current.classList.contains("sps-table__cell--pinned")||(e.current.style.position="relative"),m){const F=m.querySelectorAll("thead > tr > th");for(let $=0;$<F.length;$+=1){const V=F[$].querySelector(".sps-table__header-cell-body"),W=F[$].querySelector(".sps-table__column-resizer");F[$].style.cursor="default",F[$]!==e.current&&W&&(F[$].classList.add("sps-table__header--resizeable"),W.style.display="block"),V&&!V.title&&(V.title=V.textContent)}const L=m.querySelectorAll(`tbody > tr > td:nth-of-type(${e.current.cellIndex+1})`);for(let $=0;$<L.length;$+=1)L[$].style.width=M,L[$].style.maxWidth=M,L[$].style.minWidth=M,L[$].style.overflowWrap=M?"break-word":null,L[$].style.whiteSpace=M?"normal":null,L[$].title||(L[$].title=L[$].textContent)}}}const D=M=>{!e.current||(M.preventDefault(),p=M.clientX,u=e.current.clientWidth,T())},I=M=>{if(!p||!e.current)return;const P=Math.max(Math.min(p-M.clientX,40),-40);P!==0&&(p=M.clientX,f+=P,u=Math.max(u-P,40),x())},v=()=>{!e.current||(p=null,f=0,E(),i(n,u))},k=()=>{u=null,E(),i(n,u)};return c&&t.current&&(t.current.addEventListener("dragstart",D),t.current.addEventListener("mousedown",D),t.current.addEventListener("dblclick",k),window.addEventListener("mousemove",I),window.addEventListener("dragend",v),window.addEventListener("mouseup",v),E()),()=>{t.current&&(t.current.removeEventListener("dragstart",D),t.current.removeEventListener("mousedown",D),t.current.removeEventListener("dblclick",k)),window.removeEventListener("mousemove",I),window.removeEventListener("dragend",v),window.removeEventListener("mouseup",v)}},[c,l,n,i]),{isResizeable:c}},Qu={controlCell:"boolean",sortKey:"string",resizeKey:"string",pinned:"boolean"},em=G(N({},z),{controlCell:w.exports.bool,sortKey:w.exports.string,resizeKey:w.exports.string,pinned:w.exports.bool});function Qe(u){var f=u,{children:e,className:t,controlCell:n,sortKey:s,resizeKey:o,"data-testid":i,unsafelyReplaceClassName:c,pinned:l}=f,p=q(f,["children","className","controlCell","sortKey","resizeKey","data-testid","unsafelyReplaceClassName","pinned"]);const{sort:m,setSort:g}=a.useContext(Ni),S=m==null?void 0:m.find(k=>k.key===s),T=()=>{if(s&&!n){const k=(S==null?void 0:S.direction)===R.SortDirection.ASCENDING?R.SortDirection.DESCENDING:R.SortDirection.ASCENDING;g([{key:s,direction:k}])}},x=k=>{(k.key==="Enter"||k.key===" "||k.key==="Spacebar")&&(k.preventDefault(),T())},E=a.useRef(null);Zu(l,E);const D=a.useRef(null),{isResizeable:I}=Xu({tableHeaderRef:E,resizerRef:D,resizeKey:o}),v=K(c||"sps-table__header",n&&"sps-table__header--control",!s&&"sps-table__header--sort-disabled",(S==null?void 0:S.direction)===R.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",(S==null?void 0:S.direction)===R.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",l&&"sps-table__cell--pinned",I&&"sps-table__header--resizeable",t);return a.createElement("th",N({className:v,ref:E,role:"columnheader","aria-sort":(S==null?void 0:S.direction)||"none","data-testid":`${i}__header`},p),a.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${i}__header-cell-body`,onClick:T,tabIndex:s?0:null,onKeyDown:x},e),I&&a.createElement(a.Fragment,null,a.createElement("span",{ref:D,className:K("sps-table__column-resizer")}),a.createElement("span",{className:K("sps-table__column-resizer-guide")})))}Object.assign(Qe,{props:Qu,propTypes:em,displayName:"SpsTableHeader"});function tm(e){return a.createElement(Qe,N({},e))}Object.assign(tm,{props:Qu,propTypes:em,displayName:"SpsTh"});const nm={pinned:"boolean"},am=G(N({},z),{pinned:w.exports.bool});function fn(c){var l=c,{children:e,className:t,"data-testid":n,unsafelyReplaceClassName:s,pinned:o}=l,i=q(l,["children","className","data-testid","unsafelyReplaceClassName","pinned"]);const p=K(s||"sps-table__head",o&&"sps-table__head--pinned",t);return a.createElement("thead",N({className:p,"data-testid":`${n}__head`},i),e)}Object.assign(fn,{props:nm,propTypes:am,displayName:"SpsTableHead"});function sm(e){return a.createElement(fn,N({},e))}Object.assign(sm,{props:nm,propTypes:am,displayName:"SpsThead"});const rm={},om=N({},z);function Pe(i){var c=i,{children:e,className:t,"data-testid":n,unsafelyReplaceClassName:s}=c,o=q(c,["children","className","data-testid","unsafelyReplaceClassName"]);const l=K(s||"sps-table__row",t);return a.createElement("tr",N({className:l,role:"row","data-testid":`${n}__row`},o),e)}Object.assign(Pe,{props:rm,propTypes:om,displayName:"SpsTableRow"});function im(e){return a.createElement(Pe,N({},e))}Object.assign(im,{props:rm,propTypes:om,displayName:"SpsTr"});const lm={},cm=N({},z);function hn(e){const l=e,{children:t,className:n,"data-testid":s,unsafelyReplaceClassName:o}=l,i=q(l,["children","className","data-testid","unsafelyReplaceClassName"]),c=K(o||"sps-table__body",n);return a.createElement("tbody",N({className:c,"data-testid":`${s}__body`},i),t)}Object.assign(hn,{props:lm,propTypes:cm,displayName:"SpsTableBody"});function dm(e){return a.createElement(hn,N({},e))}Object.assign(dm,{props:lm,propTypes:cm,displayName:"SpsTbody"});const pm={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth",pinned:"boolean"},um=G(N({},z),{buttonCell:w.exports.bool,controlCell:w.exports.bool,wrap:w.exports.oneOf([200,300,400,500,600]),pinned:w.exports.bool});function ne(e){const g=e,{buttonCell:t,children:n,className:s,controlCell:o,"data-testid":i,unsafelyReplaceClassName:c,wrap:l,pinned:p}=g,u=q(g,["buttonCell","children","className","controlCell","data-testid","unsafelyReplaceClassName","wrap","pinned"]),f=K(c||"sps-table__cell",t&&"sps-table__cell--button-cell",o&&"sps-table__cell--control",l&&`sps-table__cell--text-wrap-${l}`,p&&"sps-table__cell--pinned",s),m=a.useRef(null);return Zu(p,m),a.createElement("td",N({className:f,ref:m,role:"cell","data-testid":`${i}__cell`},u),n)}Object.assign(ne,{props:pm,propTypes:um,displayName:"SpsTableCell"});function mm(e){return a.createElement(ne,N({},e))}Object.assign(mm,{props:pm,propTypes:um,displayName:"SpsTd"});const eI={},tI=N({},z),nI="sps-icon-button-panel";function fm(s){var o=s,{children:e,className:t}=o,n=q(o,["children","className"]);const i=K(nI,t),[c]=Et(e,[{type:Fe,props:{kind:R.ButtonKind.ICON}}]);return a.createElement("div",N({className:i},n),c)}Object.assign(fm,{props:eI,propTypes:tI,displayName:"SpsIconButtonPanel"});const hm={generalUsage:{label:"General Usage",customSection:()=>a.createElement("section",{id:"table-general-usage"},a.createElement("div",{className:"flex-color-header"},a.createElement("h4",null,"General Usage"),a.createElement(Fe,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},kind:R.ButtonKind.LINK},"Back to Top")),a.createElement("h5",null,"Use Tables:"),a.createElement("ul",{className:"sps-body-14"},a.createElement("li",null,"Each record has more than 6 points of data"),a.createElement("li",null,"When more records need to be shown in the vertical space"),a.createElement("li",null,"When sorting options need to be precise (needs better explanation)."),a.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).")),a.createElement("h5",null,"Avoid Tables:"),a.createElement("ul",{className:"sps-body-14"},a.createElement("li",null,"When large images need to be included amongst the data.")),a.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})=>a.createElement(a.Fragment,null,a.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."),a.createElement("br",null),a.createElement("div",{className:"sps-body-14"},"Tables can be used in conjunction with the"," ",a.createElement(e,{to:"List Toolbar"},"List Toolbar")," and"," ",a.createElement(e,{to:"Pagination"},"Pagination")," components for extended capabilities.")),examples:{basic:{react:y.code`
                     function DemoComponent() {
                         const items = [
                             {

package/lib/index.es.js

@@ -25694,14 +25694,6 @@ const usePinnedTableHeadStyle = (containerRef, maxHeight) => {
       const headRect = headElement.getBoundingClientRect();
       const containerRect = container.getBoundingClientRect();
       if (headRect.top <= topPosition && topPosition <= containerRect.bottom - headRect.height && containerRect.top <= topPosition) {
-        headElement.style.position = "fixed";
-        headElement.style.top = `${topPosition}px`;
-        headElement.style.overflow = "hidden";
-        const verticalScrollbarWidth = containerRef.current.offsetWidth - containerRef.current.clientWidth;
-        const headElementWidth = `${containerRect.width - verticalScrollbarWidth}px`;
-        headElement.style.maxWidth = headElementWidth;
-        headElement.style.width = headElementWidth;
-        headElement.style.minWidth = headElementWidth;
         if (tableBodyFirstRowCells) {
           Array.from(tableBodyFirstRowCells).forEach((cell, idx) => {
             const cellWidth = cell.getBoundingClientRect().width;
@@ -25715,6 +25707,14 @@ const usePinnedTableHeadStyle = (containerRef, maxHeight) => {
             cell.style.maxWidth = width;
           });
         }
+        headElement.style.position = "fixed";
+        headElement.style.top = `${topPosition}px`;
+        headElement.style.overflow = "hidden";
+        const verticalScrollbarWidth = containerRef.current.offsetWidth - containerRef.current.clientWidth;
+        const headElementWidth = `${containerRect.width - verticalScrollbarWidth}px`;
+        headElement.style.maxWidth = headElementWidth;
+        headElement.style.width = headElementWidth;
+        headElement.style.minWidth = headElementWidth;
         if (!placeholder) {
           placeholder = document.createElement("div");
           placeholder.style.width = `${headRect.width}px`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.33.0",
+  "version": "6.33.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": "6.33.0",
-    "@spscommerce/ds-illustrations": "6.33.0",
-    "@spscommerce/ds-shared": "6.33.0",
-    "@spscommerce/positioning": "6.33.0",
+    "@spscommerce/ds-colors": "6.33.1",
+    "@spscommerce/ds-illustrations": "6.33.1",
+    "@spscommerce/ds-shared": "6.33.1",
+    "@spscommerce/positioning": "6.33.1",
     "@spscommerce/utils": "^6.11.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
@@ -40,10 +40,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "6.33.0",
-    "@spscommerce/ds-illustrations": "6.33.0",
-    "@spscommerce/ds-shared": "6.33.0",
-    "@spscommerce/positioning": "6.33.0",
+    "@spscommerce/ds-colors": "6.33.1",
+    "@spscommerce/ds-illustrations": "6.33.1",
+    "@spscommerce/ds-shared": "6.33.1",
+    "@spscommerce/positioning": "6.33.1",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^10.4.0",
     "@types/prop-types": "^15.7.1",