@spscommerce/ds-react 6.13.0 → 6.14.1

package/lib/index.cjs.js

@@ -3377,7 +3377,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
           calc(100% - ${p}px) 0, 
           ${c}px ${-o}px,
           calc(100% - ${p+a}px) ${-o}px`}else e.current.style.backgroundPosition=`0 0, 100% 0, 0 ${-o}px, 
-          calc(100% - ${a}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)}})},lI=(e,t)=>{s.useLayoutEffect(()=>{const n=e.current,a=n==null?void 0:n.querySelector("thead"),o=n==null?void 0:n.querySelector("table"),i=o==null?void 0:o.querySelector("tbody>tr"),l=i==null?void 0:i.querySelectorAll("td"),c=a==null?void 0:a.querySelectorAll("th"),p=document.body.querySelector(".sps-navbar-container");let u=n==null?void 0:n.querySelector(".placeholder-head"),f=null;const m=()=>{a&&(a.style.position=t?"sticky":null,a.style.top=t?"0":null,a.style.overflow=null,a.style.maxWidth=null,a.style.width=null,a.style.minWidth=null),u&&(u.style.width=null,u.style.height=null),l&&Array.from(l).forEach((N,w)=>{c[w].style.minWidth=null,c[w].style.width=null,c[w].style.maxWidth=null,N.style.minWidth=null,N.style.width=null,N.style.maxWidth=null})},g=()=>{a.scrollLeft=n.scrollLeft},S=()=>{let N=null;f===window?N=p?p.getBoundingClientRect().height:0:f instanceof HTMLElement&&(N=f.getBoundingClientRect().top);const w=n.scrollLeft,y=a.getBoundingClientRect(),D=n.getBoundingClientRect();if(y.top<=N&&N<=D.bottom-y.height&&D.top<=N){a.style.position="fixed",a.style.top=`${N}px`,a.style.overflow="hidden";const v=e.current.offsetWidth-e.current.clientWidth,k=`${D.width-v}px`;a.style.maxWidth=k,a.style.width=k,a.style.minWidth=k,l&&Array.from(l).forEach((M,L)=>{const _=M.getBoundingClientRect().width,B=c[L].getBoundingClientRect().width,A=`${Math.max(_,B)}px`;c[L].style.minWidth=A,c[L].style.width=A,c[L].style.maxWidth=A,M.style.minWidth=A,M.style.width=A,M.style.maxWidth=A}),u||(u=document.createElement("div"),u.style.width=`${y.width}px`,u.style.height=`${y.height}px`,u.className="placeholder-head",n.insertBefore(u,o))}else u&&(n.removeChild(u),u=null,m());n.scrollLeft=w,g()},E=()=>{m(),S(),g()};return a&&a.classList.contains("sps-table__head--pinned")&&(f=oI(n)||window,f.addEventListener("scroll",S),window.addEventListener("resize",E),n.addEventListener("scroll",g),E()),()=>{f&&(f.removeEventListener("scroll",S),window.removeEventListener("resize",E)),n&&n.removeEventListener("scroll",g)}})},cI=(e,t)=>{const n=()=>{const a=e.current,o=a==null?void 0:a.querySelector("table > thead"),i=a==null?void 0:a.querySelector("table"),l=a==null?void 0:a.querySelector(".shadow--top"),c=a==null?void 0:a.querySelector(".shadow--bottom");if(o&&i&&l&&c){c.style.left="0",c.style.bottom="0",l.style.left="0";const p=a.offsetHeight-(a==null?void 0:a.clientHeight),u=i.getBoundingClientRect().height,f=o.getBoundingClientRect().height,m=a.scrollTop,g=u+p-a.getBoundingClientRect().height-a.scrollTop,S=a.scrollLeft;c.style.bottom=`${-m}px`,c.style.left=`${S}px`,c.style.opacity=g>0?"1":"0",l.style.top=`${m+f}px`,l.style.left=`${S}px`,l.style.opacity=m>0?"1":"0"}};s.useLayoutEffect(()=>{if(e.current&&t){const a=e.current.querySelector("table > thead");return a&&(a.style.position="sticky",a.style.top="0",a.style.zIndex="2",a.style.backgroundColor="#fff"),e.current.addEventListener("scroll",n),()=>{e.current.removeEventListener("scroll",n)}}},[]),s.useLayoutEffect(()=>{e.current&&t&&n()})},dI={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean",maxHeightPx:"number",maxHeightRem:"number",resizeable:"boolean",resizeState:"ResizeState",onResizeStateChange:"ResizeStateChangeHandler"},pI=$(I({},Y),{onSortChange:te(),sort:T.exports.arrayOf(ce()),selectable:T.exports.bool,maxHeightPx:T.exports.number,maxHeightRem:T.exports.number,resizeable:T.exports.bool,resizeState:ce(),onResizeStateChange:te()});function Bn(g){var S=g,{children:e,className:t,onSortChange:n,sort:a,"data-testid":o,unsafelyReplaceClassName:i,maxHeightPx:l,maxHeightRem:c,resizeable:p,resizeState:u,onResizeStateChange:f}=S,m=U(S,["children","className","onSortChange","sort","data-testid","unsafelyReplaceClassName","maxHeightPx","maxHeightRem","resizeable","resizeState","onResizeStateChange"]);const E=F(i||"sps-table-container",t),N=l?l/16:c,w=N?{maxHeight:`${N}rem`}:{},y=s.useRef(null);return cI(y,N),iI(y),lI(y,N),s.createElement(rI,{resizeable:p,resizeState:u,onResizeStateChange:f,sort:a,onSortChange:n},s.createElement("div",{ref:y,className:E,style:w},s.createElement("div",{className:"sps-table__shadow shadow--top"}),s.createElement("div",{className:"sps-table__shadow shadow--bottom"}),s.createElement("table",I({className:"sps-table",role:"table","data-testid":`${o}`},m),e)))}Object.assign(Bn,{props:dI,propTypes:pI,displayName:"SpsTable"});function uI(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 Ym=({tableHeaderRef:e,resizerRef:t,resizeKey:n})=>{const{resizeable:a,resizeState:o,setSingleResizeState:i}=s.useContext(Yi),l=!!a&&!!n,c=l?o==null?void 0:o[n]:void 0;return s.useLayoutEffect(()=>{let p=null,u=c;const f=uI(e.current);function m(){if(e.current){const w=u?`${u}px`:null;if(e.current.style.width=w,e.current.style.maxWidth=w,e.current.style.minWidth=w,e.current.style.overflow=w?"hidden":null,e.current.style.textOverflow=w?"ellipsis":null,p){const y=e.current.querySelector(".sps-table__column-resizer");y&&(y.style.backgroundColor=Qr.colors.blue200)}if(e.current.classList.contains("sps-table__cell--pinned")||(e.current.style.position="relative"),f){const y=f.querySelectorAll(`tbody > tr > td:nth-of-type(${e.current.cellIndex+1})`);for(let D=0;D<y.length;D+=1)y[D].style.width=w,y[D].style.maxWidth=w,y[D].style.minWidth=w,y[D].style.overflow=w?"hidden":null,y[D].style.textOverflow=w?"ellipsis":null,y[D].title||(y[D].title=y[D].textContent)}}}const g=w=>{!e.current||(p=w.clientX,u=e.current.clientWidth,m())},S=w=>{if(!p||!e.current)return;const y=Math.max(Math.min(p-w.clientX,5),-5);y!==0&&(p=w.clientX,u=Math.max(e.current.clientWidth-y,40),m())},E=()=>{if(!e.current)return;p=null,m(),i(n,u);const w=e.current.querySelector(".sps-table__column-resizer");w&&(w.style.backgroundColor=null)},N=()=>{u=null,m(),i(n,u)};return l&&t.current&&(t.current.addEventListener("dragstart",g),t.current.addEventListener("mousedown",g),t.current.addEventListener("dblclick",N),window.addEventListener("mousemove",S),window.addEventListener("dragend",E),window.addEventListener("mouseup",E),m()),()=>{t.current&&(t.current.removeEventListener("dragstart",g),t.current.removeEventListener("mousedown",g),t.current.removeEventListener("dblclick",N)),window.removeEventListener("mousemove",S),window.removeEventListener("dragend",E),window.removeEventListener("mouseup",E)}},[l,c,n,i]),{isResizeable:l}},Um={controlCell:"boolean",sortKey:"string",resizeKey:"string",pinned:"boolean"},zm=$(I({},Y),{controlCell:T.exports.bool,sortKey:T.exports.string,resizeKey:T.exports.string,pinned:T.exports.bool});function tt(u){var f=u,{children:e,className:t,controlCell:n,sortKey:a,resizeKey:o,"data-testid":i,unsafelyReplaceClassName:l,pinned:c}=f,p=U(f,["children","className","controlCell","sortKey","resizeKey","data-testid","unsafelyReplaceClassName","pinned"]);const{sort:m,setSort:g}=s.useContext(Yi),S=m==null?void 0:m.find(k=>k.key===a),E=()=>{if(a&&!n){const k=(S==null?void 0:S.direction)===O.SortDirection.ASCENDING?O.SortDirection.DESCENDING:O.SortDirection.ASCENDING;g([{key:a,direction:k}])}},N=k=>{(k.key==="Enter"||k.key===" "||k.key==="Spacebar")&&(k.preventDefault(),E())},w=s.useRef(null);jm(c,w);const y=s.useRef(null),{isResizeable:D}=Ym({tableHeaderRef:w,resizerRef:y,resizeKey:o}),v=F(l||"sps-table__header",n&&"sps-table__header--control",!a&&"sps-table__header--sort-disabled",(S==null?void 0:S.direction)===O.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",(S==null?void 0:S.direction)===O.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",c&&"sps-table__cell--pinned",D&&"sps-table__header--resizeable",t);return s.createElement("th",I({className:v,ref:w,role:"columnheader","aria-sort":(S==null?void 0:S.direction)||"none","data-testid":`${i}__header`},p),s.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${i}__header-cell-body`,onClick:E,tabIndex:a?0:null,onKeyDown:N},e),D&&s.createElement("span",{ref:y,className:F("sps-table__column-resizer")}))}Object.assign(tt,{props:Um,propTypes:zm,displayName:"SpsTableHeader"});function qm(e){return s.createElement(tt,I({},e))}Object.assign(qm,{props:Um,propTypes:zm,displayName:"SpsTh"});const Jm={pinned:"boolean"},Zm=$(I({},Y),{pinned:T.exports.bool});function hn(l){var c=l,{children:e,className:t,"data-testid":n,unsafelyReplaceClassName:a,pinned:o}=c,i=U(c,["children","className","data-testid","unsafelyReplaceClassName","pinned"]);const p=F(a||"sps-table__head",o&&"sps-table__head--pinned",t);return s.createElement("thead",I({className:p,"data-testid":`${n}__head`},i),e)}Object.assign(hn,{props:Jm,propTypes:Zm,displayName:"SpsTableHead"});function Xm(e){return s.createElement(hn,I({},e))}Object.assign(Xm,{props:Jm,propTypes:Zm,displayName:"SpsThead"});const Qm={},ef=I({},Y);function Ke(i){var l=i,{children:e,className:t,"data-testid":n,unsafelyReplaceClassName:a}=l,o=U(l,["children","className","data-testid","unsafelyReplaceClassName"]);const c=F(a||"sps-table__row",t);return s.createElement("tr",I({className:c,role:"row","data-testid":`${n}__row`},o),e)}Object.assign(Ke,{props:Qm,propTypes:ef,displayName:"SpsTableRow"});function tf(e){return s.createElement(Ke,I({},e))}Object.assign(tf,{props:Qm,propTypes:ef,displayName:"SpsTr"});const nf={},af=I({},Y);function gn(e){const c=e,{children:t,className:n,"data-testid":a,unsafelyReplaceClassName:o}=c,i=U(c,["children","className","data-testid","unsafelyReplaceClassName"]),l=F(o||"sps-table__body",n);return s.createElement("tbody",I({className:l,"data-testid":`${a}__body`},i),t)}Object.assign(gn,{props:nf,propTypes:af,displayName:"SpsTableBody"});function sf(e){return s.createElement(gn,I({},e))}Object.assign(sf,{props:nf,propTypes:af,displayName:"SpsTbody"});const rf={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth",pinned:"boolean"},of=$(I({},Y),{buttonCell:T.exports.bool,controlCell:T.exports.bool,wrap:T.exports.oneOf([200,300,400,500,600]),pinned:T.exports.bool});function ee(e){const g=e,{buttonCell:t,children:n,className:a,controlCell:o,"data-testid":i,unsafelyReplaceClassName:l,wrap:c,pinned:p}=g,u=U(g,["buttonCell","children","className","controlCell","data-testid","unsafelyReplaceClassName","wrap","pinned"]),f=F(l||"sps-table__cell",t&&"sps-table__cell--button-cell",o&&"sps-table__cell--control",c&&`sps-table__cell--text-wrap-${c}`,p&&"sps-table__cell--pinned",a),m=s.useRef(null);return jm(p,m),s.createElement("td",I({className:f,ref:m,role:"cell","data-testid":`${i}__cell`},u),n)}Object.assign(ee,{props:rf,propTypes:of,displayName:"SpsTableCell"});function lf(e){return s.createElement(ee,I({},e))}Object.assign(lf,{props:rf,propTypes:of,displayName:"SpsTd"});const mI={},fI=I({},Y),hI="sps-icon-button-panel";function cf(a){var o=a,{children:e,className:t}=o,n=U(o,["children","className"]);const i=F(hI,t),[l]=At(e,[{type:$e,props:{kind:O.ButtonKind.ICON}}]);return s.createElement("div",I({className:i},n),l)}Object.assign(cf,{props:mI,propTypes:fI,displayName:"SpsIconButtonPanel"});const df={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:O.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:C.code`
+          calc(100% - ${a}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)}})},lI=(e,t)=>{s.useLayoutEffect(()=>{const n=e.current,a=n==null?void 0:n.querySelector("thead"),o=n==null?void 0:n.querySelector("table"),i=o==null?void 0:o.querySelector("tbody>tr"),l=i==null?void 0:i.querySelectorAll("td"),c=a==null?void 0:a.querySelectorAll("th"),p=document.body.querySelector(".sps-navbar-container");let u=n==null?void 0:n.querySelector(".placeholder-head"),f=null;const m=()=>{a&&(a.style.position=t?"sticky":null,a.style.top=t?"0":null,a.style.overflow=null,a.style.maxWidth=null,a.style.width=null,a.style.minWidth=null),u&&(u.style.width=null,u.style.height=null),l&&Array.from(l).forEach((N,w)=>{c[w].style.minWidth=null,c[w].style.width=null,c[w].style.maxWidth=null,N.style.minWidth=null,N.style.width=null,N.style.maxWidth=null})},g=()=>{a.scrollLeft=n.scrollLeft},S=()=>{let N=null;f===window?N=p?p.getBoundingClientRect().height:0:f instanceof HTMLElement&&(N=f.getBoundingClientRect().top);const w=n.scrollLeft,y=a.getBoundingClientRect(),D=n.getBoundingClientRect();if(y.top<=N&&N<=D.bottom-y.height&&D.top<=N){a.style.position="fixed",a.style.top=`${N}px`,a.style.overflow="hidden";const v=e.current.offsetWidth-e.current.clientWidth,k=`${D.width-v}px`;a.style.maxWidth=k,a.style.width=k,a.style.minWidth=k,l&&Array.from(l).forEach((M,L)=>{const _=M.getBoundingClientRect().width,B=c[L].getBoundingClientRect().width,A=`${Math.max(_,B)}px`;c[L].style.minWidth=A,c[L].style.width=A,c[L].style.maxWidth=A,M.style.minWidth=A,M.style.width=A,M.style.maxWidth=A}),u||(u=document.createElement("div"),u.style.width=`${y.width}px`,u.style.height=`${y.height}px`,u.className="placeholder-head",n.insertBefore(u,o))}else u&&(n.removeChild(u),u=null,m());n.scrollLeft=w,g()},E=()=>{m(),S(),g()};return a&&a.classList.contains("sps-table__head--pinned")&&(f=oI(n)||window,f.addEventListener("scroll",S),window.addEventListener("resize",E),n.addEventListener("scroll",g),E()),()=>{f&&(f.removeEventListener("scroll",S),window.removeEventListener("resize",E)),n&&n.removeEventListener("scroll",g)}})},cI=(e,t)=>{const n=()=>{const a=e.current,o=a==null?void 0:a.querySelector("table > thead"),i=a==null?void 0:a.querySelector("table"),l=a==null?void 0:a.querySelector(".shadow--top"),c=a==null?void 0:a.querySelector(".shadow--bottom");if(o&&i&&l&&c){c.style.left="0",c.style.bottom="0",l.style.left="0";const p=a.offsetHeight-(a==null?void 0:a.clientHeight),u=i.getBoundingClientRect().height,f=o.getBoundingClientRect().height,m=a.scrollTop,g=u+p-a.getBoundingClientRect().height-a.scrollTop,S=a.scrollLeft;c.style.bottom=`${-m}px`,c.style.left=`${S}px`,c.style.opacity=g>0?"1":"0",l.style.top=`${m+f}px`,l.style.left=`${S}px`,l.style.opacity=m>0?"1":"0"}};s.useLayoutEffect(()=>{if(e.current&&t){const a=e.current.querySelector("table > thead");return a&&(a.style.position="sticky",a.style.top="0",a.style.zIndex="2",a.style.backgroundColor="#fff"),e.current.addEventListener("scroll",n),()=>{e.current.removeEventListener("scroll",n)}}},[]),s.useLayoutEffect(()=>{e.current&&t&&n()})},dI={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean",maxHeightPx:"number",maxHeightRem:"number",resizeable:"boolean",resizeState:"ResizeState",onResizeStateChange:"ResizeStateChangeHandler"},pI=$(I({},Y),{onSortChange:te(),sort:T.exports.arrayOf(ce()),selectable:T.exports.bool,maxHeightPx:T.exports.number,maxHeightRem:T.exports.number,resizeable:T.exports.bool,resizeState:ce(),onResizeStateChange:te()});function Bn(g){var S=g,{children:e,className:t,onSortChange:n,sort:a,"data-testid":o,unsafelyReplaceClassName:i,maxHeightPx:l,maxHeightRem:c,resizeable:p,resizeState:u,onResizeStateChange:f}=S,m=U(S,["children","className","onSortChange","sort","data-testid","unsafelyReplaceClassName","maxHeightPx","maxHeightRem","resizeable","resizeState","onResizeStateChange"]);const E=F(i||"sps-table-container",t),N=l?l/16:c,w=N?{maxHeight:`${N}rem`}:{},y=s.useRef(null);return cI(y,N),iI(y),lI(y,N),s.createElement(rI,{resizeable:p,resizeState:u,onResizeStateChange:f,sort:a,onSortChange:n},s.createElement("div",{ref:y,className:E,style:w},s.createElement("div",{className:"sps-table__shadow shadow--top"}),s.createElement("div",{className:"sps-table__shadow shadow--bottom"}),s.createElement("table",I({className:"sps-table",role:"table","data-testid":`${o}`},m),e)))}Object.assign(Bn,{props:dI,propTypes:pI,displayName:"SpsTable"});function uI(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 Ym=({tableHeaderRef:e,resizerRef:t,resizeKey:n})=>{const{resizeable:a,resizeState:o,setSingleResizeState:i}=s.useContext(Yi),l=!!a&&!!n,c=l?o==null?void 0:o[n]:void 0;return s.useLayoutEffect(()=>{let p=null,u=c;const f=uI(e.current);function m(){if(e.current){const w=u?`${u}px`:null;e.current.style.width=w,e.current.style.maxWidth=w,e.current.style.minWidth=w;const y=e.current.querySelector(".sps-table__header-cell-body");if(y&&(y.style.overflow=w?"hidden":null,y.style.textOverflow=w?"ellipsis":null),p){const D=e.current.querySelector(".sps-table__column-resizer");D&&(D.style.backgroundColor=Qr.colors.blue200)}if(e.current.classList.contains("sps-table__cell--pinned")||(e.current.style.position="relative"),f){const D=f.querySelectorAll("thead > tr > th");for(let k=0;k<D.length;k+=1){const M=D[k].querySelector(".sps-table__header-cell-body");M&&!M.title&&(M.title=M.textContent)}const v=f.querySelectorAll(`tbody > tr > td:nth-of-type(${e.current.cellIndex+1})`);for(let k=0;k<v.length;k+=1)v[k].style.width=w,v[k].style.maxWidth=w,v[k].style.minWidth=w,v[k].style.overflowWrap=w?"break-word":null,v[k].style.whiteSpace=w?"normal":null,v[k].title||(v[k].title=v[k].textContent)}}}const g=w=>{!e.current||(p=w.clientX,u=e.current.clientWidth,m())},S=w=>{if(!p||!e.current)return;const y=Math.max(Math.min(p-w.clientX,5),-5);y!==0&&(p=w.clientX,u=Math.max(e.current.clientWidth-y,40),m())},E=()=>{if(!e.current)return;p=null,m(),i(n,u);const w=e.current.querySelector(".sps-table__column-resizer");w&&(w.style.backgroundColor=null)},N=()=>{u=null,m(),i(n,u)};return l&&t.current&&(t.current.addEventListener("dragstart",g),t.current.addEventListener("mousedown",g),t.current.addEventListener("dblclick",N),window.addEventListener("mousemove",S),window.addEventListener("dragend",E),window.addEventListener("mouseup",E),m()),()=>{t.current&&(t.current.removeEventListener("dragstart",g),t.current.removeEventListener("mousedown",g),t.current.removeEventListener("dblclick",N)),window.removeEventListener("mousemove",S),window.removeEventListener("dragend",E),window.removeEventListener("mouseup",E)}},[l,c,n,i]),{isResizeable:l}},Um={controlCell:"boolean",sortKey:"string",resizeKey:"string",pinned:"boolean"},zm=$(I({},Y),{controlCell:T.exports.bool,sortKey:T.exports.string,resizeKey:T.exports.string,pinned:T.exports.bool});function tt(u){var f=u,{children:e,className:t,controlCell:n,sortKey:a,resizeKey:o,"data-testid":i,unsafelyReplaceClassName:l,pinned:c}=f,p=U(f,["children","className","controlCell","sortKey","resizeKey","data-testid","unsafelyReplaceClassName","pinned"]);const{sort:m,setSort:g}=s.useContext(Yi),S=m==null?void 0:m.find(k=>k.key===a),E=()=>{if(a&&!n){const k=(S==null?void 0:S.direction)===O.SortDirection.ASCENDING?O.SortDirection.DESCENDING:O.SortDirection.ASCENDING;g([{key:a,direction:k}])}},N=k=>{(k.key==="Enter"||k.key===" "||k.key==="Spacebar")&&(k.preventDefault(),E())},w=s.useRef(null);jm(c,w);const y=s.useRef(null),{isResizeable:D}=Ym({tableHeaderRef:w,resizerRef:y,resizeKey:o}),v=F(l||"sps-table__header",n&&"sps-table__header--control",!a&&"sps-table__header--sort-disabled",(S==null?void 0:S.direction)===O.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",(S==null?void 0:S.direction)===O.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",c&&"sps-table__cell--pinned",D&&"sps-table__header--resizeable",t);return s.createElement("th",I({className:v,ref:w,role:"columnheader","aria-sort":(S==null?void 0:S.direction)||"none","data-testid":`${i}__header`},p),s.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${i}__header-cell-body`,onClick:E,tabIndex:a?0:null,onKeyDown:N},e),D&&s.createElement("span",{ref:y,className:F("sps-table__column-resizer")}))}Object.assign(tt,{props:Um,propTypes:zm,displayName:"SpsTableHeader"});function qm(e){return s.createElement(tt,I({},e))}Object.assign(qm,{props:Um,propTypes:zm,displayName:"SpsTh"});const Jm={pinned:"boolean"},Zm=$(I({},Y),{pinned:T.exports.bool});function hn(l){var c=l,{children:e,className:t,"data-testid":n,unsafelyReplaceClassName:a,pinned:o}=c,i=U(c,["children","className","data-testid","unsafelyReplaceClassName","pinned"]);const p=F(a||"sps-table__head",o&&"sps-table__head--pinned",t);return s.createElement("thead",I({className:p,"data-testid":`${n}__head`},i),e)}Object.assign(hn,{props:Jm,propTypes:Zm,displayName:"SpsTableHead"});function Xm(e){return s.createElement(hn,I({},e))}Object.assign(Xm,{props:Jm,propTypes:Zm,displayName:"SpsThead"});const Qm={},ef=I({},Y);function Ke(i){var l=i,{children:e,className:t,"data-testid":n,unsafelyReplaceClassName:a}=l,o=U(l,["children","className","data-testid","unsafelyReplaceClassName"]);const c=F(a||"sps-table__row",t);return s.createElement("tr",I({className:c,role:"row","data-testid":`${n}__row`},o),e)}Object.assign(Ke,{props:Qm,propTypes:ef,displayName:"SpsTableRow"});function tf(e){return s.createElement(Ke,I({},e))}Object.assign(tf,{props:Qm,propTypes:ef,displayName:"SpsTr"});const nf={},af=I({},Y);function gn(e){const c=e,{children:t,className:n,"data-testid":a,unsafelyReplaceClassName:o}=c,i=U(c,["children","className","data-testid","unsafelyReplaceClassName"]),l=F(o||"sps-table__body",n);return s.createElement("tbody",I({className:l,"data-testid":`${a}__body`},i),t)}Object.assign(gn,{props:nf,propTypes:af,displayName:"SpsTableBody"});function sf(e){return s.createElement(gn,I({},e))}Object.assign(sf,{props:nf,propTypes:af,displayName:"SpsTbody"});const rf={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth",pinned:"boolean"},of=$(I({},Y),{buttonCell:T.exports.bool,controlCell:T.exports.bool,wrap:T.exports.oneOf([200,300,400,500,600]),pinned:T.exports.bool});function ee(e){const g=e,{buttonCell:t,children:n,className:a,controlCell:o,"data-testid":i,unsafelyReplaceClassName:l,wrap:c,pinned:p}=g,u=U(g,["buttonCell","children","className","controlCell","data-testid","unsafelyReplaceClassName","wrap","pinned"]),f=F(l||"sps-table__cell",t&&"sps-table__cell--button-cell",o&&"sps-table__cell--control",c&&`sps-table__cell--text-wrap-${c}`,p&&"sps-table__cell--pinned",a),m=s.useRef(null);return jm(p,m),s.createElement("td",I({className:f,ref:m,role:"cell","data-testid":`${i}__cell`},u),n)}Object.assign(ee,{props:rf,propTypes:of,displayName:"SpsTableCell"});function lf(e){return s.createElement(ee,I({},e))}Object.assign(lf,{props:rf,propTypes:of,displayName:"SpsTd"});const mI={},fI=I({},Y),hI="sps-icon-button-panel";function cf(a){var o=a,{children:e,className:t}=o,n=U(o,["children","className"]);const i=F(hI,t),[l]=At(e,[{type:$e,props:{kind:O.ButtonKind.ICON}}]);return s.createElement("div",I({className:i},n),l)}Object.assign(cf,{props:mI,propTypes:fI,displayName:"SpsIconButtonPanel"});const df={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:O.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:C.code`
                     function DemoComponent() {
                         const items = [
                             {

package/lib/index.es.js

@@ -25761,8 +25761,11 @@ const useColumnResizer = ({
         tableHeaderRef.current.style.width = width;
         tableHeaderRef.current.style.maxWidth = width;
         tableHeaderRef.current.style.minWidth = width;
-        tableHeaderRef.current.style.overflow = width ? "hidden" : null;
-        tableHeaderRef.current.style.textOverflow = width ? "ellipsis" : null;
+        const tableHeaderBody = tableHeaderRef.current.querySelector(".sps-table__header-cell-body");
+        if (tableHeaderBody) {
+          tableHeaderBody.style.overflow = width ? "hidden" : null;
+          tableHeaderBody.style.textOverflow = width ? "ellipsis" : null;
+        }
         if (start) {
           const resizer = tableHeaderRef.current.querySelector(".sps-table__column-resizer");
           if (resizer) {
@@ -25773,13 +25776,20 @@ const useColumnResizer = ({
           tableHeaderRef.current.style.position = "relative";
         }
         if (table) {
+          const tableHeaders = table.querySelectorAll("thead > tr > th");
+          for (let i2 = 0; i2 < tableHeaders.length; i2 += 1) {
+            const tableHeaderBody2 = tableHeaders[i2].querySelector(".sps-table__header-cell-body");
+            if (tableHeaderBody2 && !tableHeaderBody2.title) {
+              tableHeaderBody2.title = tableHeaderBody2.textContent;
+            }
+          }
           const cells = table.querySelectorAll(`tbody > tr > td:nth-of-type(${tableHeaderRef.current.cellIndex + 1})`);
           for (let i2 = 0; i2 < cells.length; i2 += 1) {
             cells[i2].style.width = width;
             cells[i2].style.maxWidth = width;
             cells[i2].style.minWidth = width;
-            cells[i2].style.overflow = width ? "hidden" : null;
-            cells[i2].style.textOverflow = width ? "ellipsis" : null;
+            cells[i2].style.overflowWrap = width ? "break-word" : null;
+            cells[i2].style.whiteSpace = width ? "normal" : null;
             if (!cells[i2].title) {
               cells[i2].title = cells[i2].textContent;
             }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.13.0",
+  "version": "6.14.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.13.0",
-    "@spscommerce/ds-illustrations": "6.13.0",
-    "@spscommerce/ds-shared": "6.13.0",
-    "@spscommerce/positioning": "6.13.0",
+    "@spscommerce/ds-colors": "6.14.1",
+    "@spscommerce/ds-illustrations": "6.14.1",
+    "@spscommerce/ds-shared": "6.14.1",
+    "@spscommerce/positioning": "6.14.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.13.0",
-    "@spscommerce/ds-illustrations": "6.13.0",
-    "@spscommerce/ds-shared": "6.13.0",
-    "@spscommerce/positioning": "6.13.0",
+    "@spscommerce/ds-colors": "6.14.1",
+    "@spscommerce/ds-illustrations": "6.14.1",
+    "@spscommerce/ds-shared": "6.14.1",
+    "@spscommerce/positioning": "6.14.1",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",