@spscommerce/ds-react 7.1.1 → 7.1.2

package/lib/index.cjs.js

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

package/lib/index.es.js

@@ -17896,8 +17896,10 @@ const gi = r.createContext({
           const I = e.current.offsetWidth - e.current.clientWidth, S = `${N.width - I}px`;
           a.style.maxWidth = S, a.style.width = S, a.style.minWidth = S;
         }
-        p ? p && (n.removeChild(p), p = null, m()) : (p = document.createElement("div"), p.style.width = `${C.width}px`, p.style.height = `${C.height}px`, p.className = "placeholder-head", n.insertBefore(p, s)), n.scrollLeft = T, h();
-      }
+        p || (p = document.createElement("div"), p.style.width = `${C.width}px`, p.style.height = `${C.height}px`, p.className = "placeholder-head", n.insertBefore(p, s));
+      } else
+        p && (n.removeChild(p), p = null, m());
+      n.scrollLeft = T, h();
     }, y = () => {
       m(), b(), h();
     };

package/package.json

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