@spscommerce/ds-react 5.12.0 → 5.12.1

package/lib/index.cjs.js

@@ -3556,7 +3556,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             ></SpsTextInput>
                         </>;
                     }
-                `}}}},rI={clearSelected:{type:"() => void",required:!0},itemsSelected:{type:"string | number",required:!0}},oI=W(I({},J),{clearSelected:ae().isRequired,itemsSelected:C.exports.oneOfType([C.exports.string,C.exports.number])});function Xi(e){const m=e,{itemsSelected:t,clearSelected:n,children:a,className:o,"data-testid":i,unsafelyReplaceClassName:l}=m,c=Z(m,["itemsSelected","clearSelected","children","className","data-testid","unsafelyReplaceClassName"]),{t:p}=s.useContext(We),u=()=>{typeof n=="function"&&n()},f=A(l||"sps-list-action-bar-container","z-stratum-bar",o);return!!t&&s.createElement("div",W(I({className:f},c),{"data-testid":i}),s.createElement("div",{className:"sps-list-action-bar"},s.createElement("div",{className:"sps-list-action-bar__details"},s.createElement("span",{className:"sps-tag sps-tag--info","data-testid":`${i}__badge`},t),p("design-system:listActionBar.itemsSelected")),s.createElement("div",{className:"sps-list-action-bar__actions"},s.createElement(It.Provider,{value:{fixed:!0}},a)),s.createElement("div",{className:"sps-list-action-bar__clear"},s.createElement(Ye,{kind:M.ButtonKind.LINK,icon:M.SpsIcon.X,onClick:u,"data-testid":`${i}__clear-button`},p("design-system:listActionBar.clearSelected")))))}Object.assign(Xi,{props:rI,propTypes:oI,displayName:"SpsListActionBar"});const iI=e=>{const t=/(auto|scroll)/,n=(c,p)=>c.parentNode===null?p:n(c.parentNode,p.concat([c])),a=(c,p)=>getComputedStyle(c,null).getPropertyValue(p),o=c=>a(c,"overflow")+a(c,"overflow-y"),i=c=>t.test(o(c));return(c=>{if(!(c instanceof HTMLElement||c instanceof SVGElement))return;const p=n(c.parentNode,[]);for(let u=0;u<p.length;u+=1)if(i(p[u]))return p[u];return null})(e)},Qm=(e,t)=>{s.useLayoutEffect(()=>{if(e&&t.current){let n=0,a=!0,o=t.current.previousElementSibling;for(;o!==null;){if(!o.classList.contains("sps-table__cell--pinned")){a=!1;break}o=o.previousElementSibling}if(a){for(o=t.current.previousElementSibling;o!==null;)n+=o.clientWidth,o=o.previousElementSibling;t.current.style.left=`${n}px`}else{let i=t.current.nextElementSibling;for(;i!==null;)n+=i.clientWidth,i=i.nextElementSibling;t.current.style.right=`${n}px`}}})},lI=e=>{s.useLayoutEffect(()=>{if(e.current){const t=e.current.querySelectorAll("table > thead > tr:first-child > .sps-table__cell--pinned");if(t.length>0){const n=[],a=[];t.forEach(l=>{let c=!0,p=l.previousElementSibling;for(;p!==null;){if(!p.classList.contains("sps-table__cell--pinned")){c=!1;break}p=p.previousElementSibling}c?n.push(l):a.push(l)});const o=n.reduce((l,c)=>l+c.clientWidth,0),i=a.reduce((l,c)=>l+c.clientWidth,0);e.current.style.backgroundPosition=`${o}px 0, calc(100% - ${i}px) 0, ${o}px 0, calc(100% - ${i}px) 0`}}})},cI=e=>{s.useLayoutEffect(()=>{const t=e.current,n=t==null?void 0:t.querySelector("thead"),a=t==null?void 0:t.querySelector("table"),o=a==null?void 0:a.querySelector("tbody>tr"),i=o==null?void 0:o.querySelectorAll("td"),l=n==null?void 0:n.querySelectorAll("th"),c=document.body.querySelector(".sps-navbar-container");let p=t==null?void 0:t.querySelector(".placeholder-head"),u=null;const f=()=>{n&&(n.style.position=null,n.style.top=null,n.style.overflow=null,n.style.maxWidth=null,n.style.width=null,n.style.minWidth=null),p&&(p.style.width=null,p.style.height=null),i&&Array.from(i).forEach((w,k)=>{l[k].style.minWidth=null,l[k].style.width=null,l[k].style.maxWidth=null,w.style.minWidth=null,w.style.width=null,w.style.maxWidth=null})},m=()=>{n.scrollLeft=t.scrollLeft},g=()=>{let w=null;u===window?w=c?c.getBoundingClientRect().height:0:u instanceof HTMLElement&&(w=u.getBoundingClientRect().top);const k=t.scrollLeft,S=n.getBoundingClientRect(),T=t.getBoundingClientRect();if(S.top<=w&&w<=T.bottom-S.height&&T.top<=w){n.style.position="fixed",n.style.top=`${w}px`,n.style.overflow="hidden";const E=`${T.width}px`;n.style.maxWidth=E,n.style.width=E,n.style.minWidth=E,i&&Array.from(i).forEach((y,N)=>{const _=y.getBoundingClientRect().width,R=l[N].getBoundingClientRect().width,O=`${Math.max(_,R)}px`;l[N].style.minWidth=O,l[N].style.width=O,l[N].style.maxWidth=O,y.style.minWidth=O,y.style.width=O,y.style.maxWidth=O}),p||(p=document.createElement("div"),p.style.width=`${S.width}px`,p.style.height=`${S.height}px`,p.className="placeholder-head",t.insertBefore(p,a))}else p&&(t.removeChild(p),p=null,f());t.scrollLeft=k,m()},v=()=>{f(),g(),m()};return n&&n.classList.contains("sps-table__head--pinned")&&(u=iI(t)||window,u.addEventListener("scroll",g),window.addEventListener("resize",v),t.addEventListener("scroll",m),v()),()=>{u&&(u.removeEventListener("scroll",g),window.removeEventListener("resize",v)),t&&t.removeEventListener("scroll",m)}})},ef={controlCell:"boolean",currentSort:"Array<SortedColumn>",onSortChange:"SortChangeHandler",sortKey:"string"},tf=W(I({},J),{controlCell:C.exports.bool,currentSort:C.exports.arrayOf(ce()),onSortChange:ae(),sortKey:C.exports.string,pinned:C.exports.bool});function it(e){const T=e,{children:t,className:n,controlCell:a,currentSort:o,onSortChange:i,sortKey:l,"data-testid":c,unsafelyReplaceClassName:p,pinned:u}=T,f=Z(T,["children","className","controlCell","currentSort","onSortChange","sortKey","data-testid","unsafelyReplaceClassName","pinned"]),[m,g]=s.useState();s.useEffect(()=>{g(o&&o[0].key===l?o[0].direction:void 0)},[o]);const v=()=>{if(l&&!a){const E=m===M.SortDirection.ASCENDING?M.SortDirection.DESCENDING:M.SortDirection.ASCENDING;g(E),i([{key:l,direction:E}])}},w=E=>{(E.key==="Enter"||E.key===" "||E.key==="Spacebar")&&(E.preventDefault(),v())},k=A(p||"sps-table__header",a&&"sps-table__header--control",!l&&"sps-table__header--sort-disabled",m===M.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",m===M.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",u&&"sps-table__cell--pinned",n),S=s.useRef(null);return Qm(u,S),s.createElement("th",I({className:k,ref:S,role:"columnheader","aria-sort":m||"none","data-testid":`${c}__header`},f),s.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${c}__header-cell-body`,onClick:v,tabIndex:l?0:null,onKeyDown:w},t))}Object.assign(it,{props:ef,propTypes:tf,displayName:"SpsTableHeader"});function Qi(e){return s.createElement(it,I({},e))}Object.assign(Qi,{props:ef,propTypes:tf,displayName:"SpsTh"});const nf={currentSort:"Array<SortedColumn>",onSortChange:"SortChangeHandler"},af=W(I({},J),{currentSort:C.exports.arrayOf(ce()),onSortChange:ae()});function Ve(e){const f=e,{children:t,className:n,currentSort:a,onSortChange:o,"data-testid":i,unsafelyReplaceClassName:l}=f,c=Z(f,["children","className","currentSort","onSortChange","data-testid","unsafelyReplaceClassName"]),p={onSortChange:o,currentSort:a},u=A(l||"sps-table__row",n);return s.createElement("tr",I({className:u,role:"row","data-testid":`${i}__row`},c),s.Children.map(t,m=>m&&(m.type===it||m.type===Qi)?s.cloneElement(m,p):m))}Object.assign(Ve,{props:nf,propTypes:af,displayName:"SpsTableRow"});function el(e){return s.createElement(Ve,I({},e))}Object.assign(el,{props:nf,propTypes:af,displayName:"SpsTr"});const sf={currentSort:"Array<SortedColumn>",onSortChange:"SortChangeHandler"},rf=W(I({},J),{onSortChange:ae(),currentSort:C.exports.arrayOf(ce()),pinned:C.exports.bool});function Sn(e){const m=e,{children:t,className:n,currentSort:a,onSortChange:o,"data-testid":i,unsafelyReplaceClassName:l,pinned:c}=m,p=Z(m,["children","className","currentSort","onSortChange","data-testid","unsafelyReplaceClassName","pinned"]),u={onSortChange:o,currentSort:a},f=A(l||"sps-table__head",c&&"sps-table__head--pinned",n);return s.createElement("thead",I({className:f,"data-testid":`${i}__head`},p),s.Children.map(t,g=>g&&(g.type===Ve||g.type===el)?s.cloneElement(g,u):g))}Object.assign(Sn,{props:sf,propTypes:rf,displayName:"SpsTableHead"});function tl(e){return s.createElement(Sn,I({},e))}Object.assign(tl,{props:sf,propTypes:rf,displayName:"SpsThead"});const dI={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean"},pI=W(I({},J),{onSortChange:ae(),sort:C.exports.arrayOf(ce()),selectable:C.exports.bool});function Qn(e){const k=e,{children:t,className:n,onSortChange:a,sort:o,"data-testid":i,unsafelyReplaceClassName:l}=k,c=Z(k,["children","className","onSortChange","sort","data-testid","unsafelyReplaceClassName"]),[p,u]=s.useState(o),f=S=>{const T=S&&S[0];s.Children.map(t,E=>s.Children.map(E.props.children,y=>s.Children.map(y.props.children,N=>{T&&N.props.sortKey&&N.props.sortKey===T.key&&u([T])})))},g={onSortChange:S=>{u(S),a(S),f(S)},currentSort:p},v=A(l||"sps-table-container",n),w=s.useRef(null);return lI(w),cI(w),s.createElement("div",{ref:w,className:v},s.createElement("table",I({className:"sps-table",role:"table","data-testid":`${i}`},c),s.Children.map(t,S=>S.type===Sn||S.type===tl?s.cloneElement(S,g):S)))}Object.assign(Qn,{props:dI,propTypes:pI,displayName:"SpsTable"});const of={},lf=I({},J);function _n(e){const c=e,{children:t,className:n,"data-testid":a,unsafelyReplaceClassName:o}=c,i=Z(c,["children","className","data-testid","unsafelyReplaceClassName"]),l=A(o||"sps-table__body",n);return s.createElement("tbody",I({className:l,"data-testid":`${a}__body`},i),t)}Object.assign(_n,{props:of,propTypes:lf,displayName:"SpsTableBody"});function cf(e){return s.createElement(_n,I({},e))}Object.assign(cf,{props:of,propTypes:lf,displayName:"SpsTbody"});const df={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth"},pf=W(I({},J),{buttonCell:C.exports.bool,controlCell:C.exports.bool,wrap:C.exports.oneOf([200,300,400,500,600]),pinned:C.exports.bool});function re(e){const g=e,{buttonCell:t,children:n,className:a,controlCell:o,"data-testid":i,unsafelyReplaceClassName:l,wrap:c,pinned:p}=g,u=Z(g,["buttonCell","children","className","controlCell","data-testid","unsafelyReplaceClassName","wrap","pinned"]),f=A(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 Qm(p,m),s.createElement("td",I({className:f,ref:m,role:"cell","data-testid":`${i}__cell`},u),n)}Object.assign(re,{props:df,propTypes:pf,displayName:"SpsTableCell"});function uf(e){return s.createElement(re,I({},e))}Object.assign(uf,{props:df,propTypes:pf,displayName:"SpsTd"});const uI={},mI=I({},J),fI="sps-icon-button-panel";function mf(a){var o=a,{children:e,className:t}=o,n=Z(o,["children","className"]);const i=A(fI,t),[l]=Kt(e,[{type:Ye,props:{kind:M.ButtonKind.ICON}}]);return s.createElement("div",I({className:i},n),l)}Object.assign(mf,{props:uI,propTypes:mI,displayName:"SpsIconButtonPanel"});const ff={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(Ye,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},kind:M.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:D.code`
+                `}}}},rI={clearSelected:{type:"() => void",required:!0},itemsSelected:{type:"string | number",required:!0}},oI=W(I({},J),{clearSelected:ae().isRequired,itemsSelected:C.exports.oneOfType([C.exports.string,C.exports.number])});function Xi(e){const m=e,{itemsSelected:t,clearSelected:n,children:a,className:o,"data-testid":i,unsafelyReplaceClassName:l}=m,c=Z(m,["itemsSelected","clearSelected","children","className","data-testid","unsafelyReplaceClassName"]),{t:p}=s.useContext(We),u=()=>{typeof n=="function"&&n()},f=A(l||"sps-list-action-bar-container","z-stratum-bar",o);return!!t&&s.createElement("div",W(I({className:f},c),{"data-testid":i}),s.createElement("div",{className:"sps-list-action-bar"},s.createElement("div",{className:"sps-list-action-bar__details"},s.createElement("span",{className:"sps-tag sps-tag--info","data-testid":`${i}__badge`},t),p("design-system:listActionBar.itemsSelected")),s.createElement("div",{className:"sps-list-action-bar__actions"},s.createElement(It.Provider,{value:{fixed:!0}},a)),s.createElement("div",{className:"sps-list-action-bar__clear"},s.createElement(Ye,{kind:M.ButtonKind.LINK,icon:M.SpsIcon.X,onClick:u,"data-testid":`${i}__clear-button`},p("design-system:listActionBar.clearSelected")))))}Object.assign(Xi,{props:rI,propTypes:oI,displayName:"SpsListActionBar"});const iI=e=>{const t=/(auto|scroll)/,n=(c,p)=>c.parentNode===null?p:n(c.parentNode,p.concat([c])),a=(c,p)=>getComputedStyle(c,null).getPropertyValue(p),o=c=>a(c,"overflow")+a(c,"overflow-y"),i=c=>t.test(o(c));return(c=>{if(!(c instanceof HTMLElement||c instanceof SVGElement))return;const p=n(c.parentNode,[]);for(let u=0;u<p.length;u+=1)if(i(p[u]))return p[u];return null})(e)},Qm=(e,t)=>{s.useLayoutEffect(()=>{if(e&&t.current){let n=0,a=!0,o=t.current.previousElementSibling;for(;o!==null;){if(!o.classList.contains("sps-table__cell--pinned")){a=!1;break}o=o.previousElementSibling}if(a){for(o=t.current.previousElementSibling;o!==null;)n+=o.clientWidth,o=o.previousElementSibling;t.current.style.left=`${n}px`}else{let i=t.current.nextElementSibling;for(;i!==null;)n+=i.clientWidth,i=i.nextElementSibling;t.current.style.right=`${n}px`}}})},lI=e=>{s.useLayoutEffect(()=>{if(e.current){const t=e.current.querySelectorAll("table > thead > tr:first-child > .sps-table__cell--pinned");if(t.length>0){const n=[],a=[];t.forEach(l=>{let c=!0,p=l.previousElementSibling;for(;p!==null;){if(!p.classList.contains("sps-table__cell--pinned")){c=!1;break}p=p.previousElementSibling}c?n.push(l):a.push(l)});const o=n.reduce((l,c)=>l+c.clientWidth,0),i=a.reduce((l,c)=>l+c.clientWidth,0);e.current.style.backgroundPosition=`${o}px 0, calc(100% - ${i}px) 0, ${o}px 0, calc(100% - ${i}px) 0`}}})},cI=e=>{s.useLayoutEffect(()=>{const t=e.current,n=t==null?void 0:t.querySelector("thead"),a=t==null?void 0:t.querySelector("table"),o=a==null?void 0:a.querySelector("tbody>tr"),i=o==null?void 0:o.querySelectorAll("td"),l=n==null?void 0:n.querySelectorAll("th"),c=document.body.querySelector(".sps-navbar-container");let p=t==null?void 0:t.querySelector(".placeholder-head"),u=null;const f=()=>{n&&(n.style.position=null,n.style.top=null,n.style.overflow=null,n.style.maxWidth=null,n.style.width=null,n.style.minWidth=null),p&&(p.style.width=null,p.style.height=null),i&&Array.from(i).forEach((w,k)=>{l[k].style.minWidth=null,l[k].style.width=null,l[k].style.maxWidth=null,w.style.minWidth=null,w.style.width=null,w.style.maxWidth=null})},m=()=>{n.scrollLeft=t.scrollLeft},g=()=>{let w=null;u===window?w=c?c.getBoundingClientRect().height:0:u instanceof HTMLElement&&(w=u.getBoundingClientRect().top);const k=t.scrollLeft,S=n.getBoundingClientRect(),T=t.getBoundingClientRect();if(S.top<=w&&w<=T.bottom-S.height&&T.top<=w){n.style.position="fixed",n.style.top=`${w}px`,n.style.overflow="hidden";const E=`${T.width}px`;n.style.maxWidth=E,n.style.width=E,n.style.minWidth=E,i&&Array.from(i).forEach((y,N)=>{const _=y.getBoundingClientRect().width,R=l[N].getBoundingClientRect().width,O=`${Math.max(_,R)}px`;l[N].style.minWidth=O,l[N].style.width=O,l[N].style.maxWidth=O,y.style.minWidth=O,y.style.width=O,y.style.maxWidth=O}),p||(p=document.createElement("div"),p.style.width=`${S.width}px`,p.style.height=`${S.height}px`,p.className="placeholder-head",t.insertBefore(p,a))}else p&&(t.removeChild(p),p=null,f());t.scrollLeft=k,m()},v=()=>{f(),g(),m()};return n&&n.classList.contains("sps-table__head--pinned")&&(u=iI(t)||window,u.addEventListener("scroll",g),window.addEventListener("resize",v),t.addEventListener("scroll",m),v()),()=>{u&&(u.removeEventListener("scroll",g),window.removeEventListener("resize",v)),t&&t.removeEventListener("scroll",m)}})},ef={controlCell:"boolean",currentSort:"Array<SortedColumn>",onSortChange:"SortChangeHandler",sortKey:"string"},tf=W(I({},J),{controlCell:C.exports.bool,currentSort:C.exports.arrayOf(ce()),onSortChange:ae(),sortKey:C.exports.string,pinned:C.exports.bool});function it(e){const T=e,{children:t,className:n,controlCell:a,currentSort:o,onSortChange:i,sortKey:l,"data-testid":c,unsafelyReplaceClassName:p,pinned:u}=T,f=Z(T,["children","className","controlCell","currentSort","onSortChange","sortKey","data-testid","unsafelyReplaceClassName","pinned"]),[m,g]=s.useState();s.useEffect(()=>{g(o&&o[0].key===l?o[0].direction:void 0)},[o]);const v=()=>{if(l&&!a){const E=m===M.SortDirection.ASCENDING?M.SortDirection.DESCENDING:M.SortDirection.ASCENDING;g(E),i([{key:l,direction:E}])}},w=E=>{(E.key==="Enter"||E.key===" "||E.key==="Spacebar")&&(E.preventDefault(),v())},k=A(p||"sps-table__header",a&&"sps-table__header--control",!l&&"sps-table__header--sort-disabled",m===M.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",m===M.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",u&&"sps-table__cell--pinned",n),S=s.useRef(null);return Qm(u,S),s.createElement("th",I({className:k,ref:S,role:"columnheader","aria-sort":m||"none","data-testid":`${c}__header`},f),s.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${c}__header-cell-body`,onClick:v,tabIndex:l?0:null,onKeyDown:w},t))}Object.assign(it,{props:ef,propTypes:tf,displayName:"SpsTableHeader"});function Qi(e){return s.createElement(it,I({},e))}Object.assign(Qi,{props:ef,propTypes:tf,displayName:"SpsTh"});const nf={currentSort:"Array<SortedColumn>",onSortChange:"SortChangeHandler"},af=W(I({},J),{currentSort:C.exports.arrayOf(ce()),onSortChange:ae()});function Ve(e){const f=e,{children:t,className:n,currentSort:a,onSortChange:o,"data-testid":i,unsafelyReplaceClassName:l}=f,c=Z(f,["children","className","currentSort","onSortChange","data-testid","unsafelyReplaceClassName"]),p={onSortChange:o,currentSort:a},u=A(l||"sps-table__row",n);return s.createElement("tr",I({className:u,role:"row","data-testid":`${i}__row`},c),s.Children.map(t,m=>m&&(m.type===it||m.type===Qi)?s.cloneElement(m,p):m))}Object.assign(Ve,{props:nf,propTypes:af,displayName:"SpsTableRow"});function el(e){return s.createElement(Ve,I({},e))}Object.assign(el,{props:nf,propTypes:af,displayName:"SpsTr"});const sf={currentSort:"Array<SortedColumn>",onSortChange:"SortChangeHandler"},rf=W(I({},J),{onSortChange:ae(),currentSort:C.exports.arrayOf(ce()),pinned:C.exports.bool});function Sn(e){const m=e,{children:t,className:n,currentSort:a,onSortChange:o,"data-testid":i,unsafelyReplaceClassName:l,pinned:c}=m,p=Z(m,["children","className","currentSort","onSortChange","data-testid","unsafelyReplaceClassName","pinned"]),u={onSortChange:o,currentSort:a},f=A(l||"sps-table__head",c&&"sps-table__head--pinned",n);return s.createElement("thead",I({className:f,"data-testid":`${i}__head`},p),s.Children.map(t,g=>g&&(g.type===Ve||g.type===el)?s.cloneElement(g,u):g))}Object.assign(Sn,{props:sf,propTypes:rf,displayName:"SpsTableHead"});function tl(e){return s.createElement(Sn,I({},e))}Object.assign(tl,{props:sf,propTypes:rf,displayName:"SpsThead"});const dI={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean"},pI=W(I({},J),{onSortChange:ae(),sort:C.exports.arrayOf(ce()),selectable:C.exports.bool});function Qn(e){const k=e,{children:t,className:n,onSortChange:a,sort:o,"data-testid":i,unsafelyReplaceClassName:l}=k,c=Z(k,["children","className","onSortChange","sort","data-testid","unsafelyReplaceClassName"]),[p,u]=s.useState(o),f=S=>{const T=S&&S[0];s.Children.map(t,E=>s.Children.map(E.props.children,y=>s.Children.map(y.props.children,N=>{var _,R;T&&((_=N==null?void 0:N.props)==null?void 0:_.sortKey)&&((R=N==null?void 0:N.props)==null?void 0:R.sortKey)===T.key&&u([T])})))},g={onSortChange:S=>{u(S),a(S),f(S)},currentSort:p},v=A(l||"sps-table-container",n),w=s.useRef(null);return lI(w),cI(w),s.createElement("div",{ref:w,className:v},s.createElement("table",I({className:"sps-table",role:"table","data-testid":`${i}`},c),s.Children.map(t,S=>S.type===Sn||S.type===tl?s.cloneElement(S,g):S)))}Object.assign(Qn,{props:dI,propTypes:pI,displayName:"SpsTable"});const of={},lf=I({},J);function _n(e){const c=e,{children:t,className:n,"data-testid":a,unsafelyReplaceClassName:o}=c,i=Z(c,["children","className","data-testid","unsafelyReplaceClassName"]),l=A(o||"sps-table__body",n);return s.createElement("tbody",I({className:l,"data-testid":`${a}__body`},i),t)}Object.assign(_n,{props:of,propTypes:lf,displayName:"SpsTableBody"});function cf(e){return s.createElement(_n,I({},e))}Object.assign(cf,{props:of,propTypes:lf,displayName:"SpsTbody"});const df={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth"},pf=W(I({},J),{buttonCell:C.exports.bool,controlCell:C.exports.bool,wrap:C.exports.oneOf([200,300,400,500,600]),pinned:C.exports.bool});function re(e){const g=e,{buttonCell:t,children:n,className:a,controlCell:o,"data-testid":i,unsafelyReplaceClassName:l,wrap:c,pinned:p}=g,u=Z(g,["buttonCell","children","className","controlCell","data-testid","unsafelyReplaceClassName","wrap","pinned"]),f=A(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 Qm(p,m),s.createElement("td",I({className:f,ref:m,role:"cell","data-testid":`${i}__cell`},u),n)}Object.assign(re,{props:df,propTypes:pf,displayName:"SpsTableCell"});function uf(e){return s.createElement(re,I({},e))}Object.assign(uf,{props:df,propTypes:pf,displayName:"SpsTd"});const uI={},mI=I({},J),fI="sps-icon-button-panel";function mf(a){var o=a,{children:e,className:t}=o,n=Z(o,["children","className"]);const i=A(fI,t),[l]=Kt(e,[{type:Ye,props:{kind:M.ButtonKind.ICON}}]);return s.createElement("div",I({className:i},n),l)}Object.assign(mf,{props:uI,propTypes:mI,displayName:"SpsIconButtonPanel"});const ff={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(Ye,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},kind:M.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:D.code`
                     function DemoComponent() {
                         const items = [
                             {

package/lib/index.es.js

@@ -26317,7 +26317,8 @@ function SpsTable(props2) {
   const updateSortingDisplay = (newSort) => {
     const sortedColumn = newSort && newSort[0];
     React.Children.map(children, (child) => React.Children.map(child.props.children, (c2) => React.Children.map(c2.props.children, (c22) => {
-      if (sortedColumn && (c22.props.sortKey && c22.props.sortKey === sortedColumn.key)) {
+      var _a2, _b;
+      if (sortedColumn && (((_a2 = c22 == null ? void 0 : c22.props) == null ? void 0 : _a2.sortKey) && ((_b = c22 == null ? void 0 : c22.props) == null ? void 0 : _b.sortKey) === sortedColumn.key)) {
         setSort([sortedColumn]);
       }
     })));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.12.0",
+  "version": "5.12.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": "5.12.0",
-    "@spscommerce/ds-shared": "5.12.0",
-    "@spscommerce/positioning": "5.12.0",
-    "@spscommerce/utils": "5.12.0",
+    "@spscommerce/ds-colors": "5.12.1",
+    "@spscommerce/ds-shared": "5.12.1",
+    "@spscommerce/positioning": "5.12.1",
+    "@spscommerce/utils": "5.12.1",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -39,10 +39,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.12.0",
-    "@spscommerce/ds-shared": "5.12.0",
-    "@spscommerce/positioning": "5.12.0",
-    "@spscommerce/utils": "5.12.0",
+    "@spscommerce/ds-colors": "5.12.1",
+    "@spscommerce/ds-shared": "5.12.1",
+    "@spscommerce/positioning": "5.12.1",
+    "@spscommerce/utils": "5.12.1",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",