@spscommerce/ds-react 8.29.0 → 8.29.2

package/lib/index.js

@@ -19232,7 +19232,7 @@ const IN = ({
     let u, m = c, f = 0;
     const p = $p(e.current), h = (B = e.current) == null ? void 0 : B.querySelector(".sps-table__column-resizer"), S = (L = e.current) == null ? void 0 : L.querySelector(".sps-table__column-resizer-guide");
     function v() {
-      if (e.current && u && (h && (h.style.backgroundColor = Mo.blue200), S && p && (S.style.height = `${p.getBoundingClientRect().height}px`, S.style.display = "block"), p)) {
+      if (e.current && u && (h && (h.style.backgroundColor = Mo.blue200, h.style.zIndex = "999"), S && p && (S.style.height = `${p.getBoundingClientRect().height}px`, S.style.display = "block"), p)) {
         const w = p.querySelectorAll("thead > tr > th");
         for (let R = 0; R < w.length; R += 1) {
           const _ = w[R].querySelector(".sps-table__column-resizer");
@@ -19241,14 +19241,14 @@ const IN = ({
       }
     }
     function E() {
-      e.current && u && h && S && (h.style.right = `${f}px`, S.style.right = `${f}px`);
+      e.current && u && h && S && (h.style.right = `${f}px`, h.style.zIndex = "999", S.style.right = `${f}px`);
     }
     function C() {
       if (e.current) {
         const w = m ? `${m}px` : "";
         e.current.style.width = w, e.current.style.maxWidth = w, e.current.style.minWidth = w;
         const R = e.current.querySelector(".sps-table__header-cell-body");
-        if (R && (R.style.overflow = w ? "hidden" : "", R.style.textOverflow = w ? "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"), p) {
+        if (R && (R.style.overflow = w ? "hidden" : "", R.style.textOverflow = w ? "ellipsis" : ""), h && S && (h.style.right = "0", h.style.backgroundColor = "", h.style.zIndex = "0", S.style.right = "0", S.style.display = "none"), e.current.classList.contains("sps-table__cell--pinned") || (e.current.style.position = "relative"), p) {
           const _ = p.querySelectorAll("thead > tr > th");
           for (let $ = 0; $ < _.length; $ += 1) {
             const j = _[$].querySelector(".sps-table__header-cell-body"), M = _[$].querySelector(".sps-table__column-resizer");

package/lib/index.umd.cjs

@@ -3176,7 +3176,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
           calc(100% - ${p}px) 0, 
           ${c}px ${-a}px,
           calc(100% - ${p+r}px) ${-a}px`}else e.current.style.backgroundPosition=`0 0, 100% 0, 0 ${-a}px, 
-          calc(100% - ${r}px) ${-a}px`};return e.current&&(t(),e.current.addEventListener("scroll",t),window.addEventListener("scroll",t)),()=>{e.current&&e.current.removeEventListener("scroll",t),window.removeEventListener("scroll",t)}})},iw=(e,t,n)=>{o.useLayoutEffect(()=>{const r=e.current;if(!r)return;const a=r==null?void 0:r.querySelector("thead"),s=r==null?void 0:r.querySelector("table"),l=s==null?void 0:s.querySelector("tbody>tr"),c=l==null?void 0:l.querySelectorAll("td"),p=(a==null?void 0:a.querySelectorAll("th"))||[],m=document.body.querySelector(".sps-navbar-container");let f=r==null?void 0:r.querySelector(".placeholder-head"),u;const h=()=>{a&&(a.style.position=t?"sticky":"",a.style.top=t?"0":"",a.style.overflow="",a.style.maxWidth="",a.style.width="",a.style.minWidth=""),f&&(f.style.width="",f.style.height=""),c&&Array.from(c).forEach((C,T)=>{const N=p[T];if(N){const M=N.getAttribute("data-resizekey"),I=M&&n?n[M]:void 0;if(I){const k=`${I}px`;N.style.minWidth=k,N.style.maxWidth=k,N.style.width=k,C.style.minWidth=k,C.style.maxWidth=k,C.style.width=k}else N.style.minWidth="",N.style.width="",N.style.maxWidth="",C.style.minWidth="",C.style.width="",C.style.maxWidth=""}else C.style.minWidth="",C.style.width="",C.style.maxWidth=""})},g=()=>{a&&r&&(a.scrollLeft=r.scrollLeft)},y=()=>{let C=null;u===window?C=m?m.getBoundingClientRect().height:0:u instanceof HTMLElement&&(C=u.getBoundingClientRect().top);const T=r.scrollLeft,N=a==null?void 0:a.getBoundingClientRect(),M=r.getBoundingClientRect();if(C&&N&&N.top<=C&&C<=M.bottom-N.height&&M.top<=C){if(c&&Array.from(c).forEach((I,k)=>{const V=I.getBoundingClientRect().width,R=p[k].getBoundingClientRect().width,w=`${Math.max(V,R)}px`;p[k].style.minWidth=w,p[k].style.width=w,p[k].style.maxWidth=w,I.style.minWidth=w,I.style.width=w,I.style.maxWidth=w}),a&&e.current){a.style.position="fixed",a.style.top=`${C}px`,a.style.overflow="hidden";const I=e.current.offsetWidth-e.current.clientWidth,k=`${M.width-I}px`;a.style.maxWidth=k,a.style.width=k,a.style.minWidth=k}f||(f=document.createElement("div"),f.style.width=`${N.width}px`,f.style.height=`${N.height}px`,f.className="placeholder-head",r.insertBefore(f,s))}else f&&(r.removeChild(f),f=null,h());r.scrollLeft=T,g()},E=()=>{h(),y(),g()};return a&&a.classList.contains("sps-table__head--pinned")&&(u=uc(r)||window,u.addEventListener("scroll",y),window.addEventListener("resize",E),r.addEventListener("scroll",g),E()),()=>{u&&(u.removeEventListener("scroll",y),window.removeEventListener("resize",E)),r.removeEventListener("scroll",g)}})},lw=(e,t)=>{const n=()=>{if(!e.current||!t)return;const r=e.current,a=r==null?void 0:r.querySelector("table > thead"),s=r==null?void 0:r.querySelector("table"),l=r==null?void 0:r.querySelector(".shadow--top"),c=r==null?void 0:r.querySelector(".shadow--bottom");if(a&&s&&l&&c){c.style.left="0",c.style.bottom="0",l.style.left="0";const p=r.offsetHeight-(r==null?void 0:r.clientHeight),m=s.getBoundingClientRect().height,f=a.getBoundingClientRect().height,u=r.scrollTop,h=m+p-r.getBoundingClientRect().height-r.scrollTop,g=r.scrollLeft;c.style.bottom=`${-u}px`,c.style.left=`${g}px`,c.style.opacity=h>0?"1":"0",l.style.top=`${u+f}px`,l.style.left=`${g}px`,l.style.opacity=u>0?"1":"0"}};o.useLayoutEffect(()=>{if(e.current&&t){const r=e.current.querySelector("table > thead");return r&&(r.style.position="sticky",r.style.top="0",r.style.zIndex="2",r.style.backgroundColor="#fff"),e.current.addEventListener("scroll",n),()=>{var a;(a=e.current)==null||a.removeEventListener("scroll",n)}}},[]),o.useLayoutEffect(()=>{e.current&&t&&n()})},cw={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean",maxHeightPx:"number",maxHeightRem:"number",resizeable:"boolean",resizeState:"ResizeState",onResizeStateChange:"ResizeStateChangeHandler"};function jn({children:e,className:t,onSortChange:n,sort:r,"data-testid":a,unsafelyReplaceClassName:s,maxHeightPx:l,maxHeightRem:c,resizeable:p,resizeState:m,onResizeStateChange:f,...u}){const h=Y(s||"sps-table-container",t),g=l?l/16:c,y=g?{maxHeight:`${g}rem`}:{},E=o.useRef(null);return lw(E,g),sw(E),iw(E,g,m),o.createElement(aw,{resizeable:p,resizeState:m,onResizeStateChange:f,sort:r,onSortChange:n},o.createElement("div",{ref:E,className:h,style:y},o.createElement("div",{className:"sps-table__shadow shadow--top"}),o.createElement("div",{className:"sps-table__shadow shadow--bottom"}),o.createElement("table",{className:"sps-table",role:"table","data-testid":`${a}`,...u},e)))}Object.assign(jn,{props:cw,displayName:"SpsTable"});function Eu(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 wu=({tableHeaderRef:e,resizerRef:t,resizeKey:n})=>{const{resizeable:r,resizeState:a,setSingleResizeState:s}=o.useContext(ta),l=!!r&&!!n,c=l?a==null?void 0:a[n]:0;return o.useLayoutEffect(()=>{var V,R;let p,m=c,f=0;const u=Eu(e.current),h=(V=e.current)==null?void 0:V.querySelector(".sps-table__column-resizer"),g=(R=e.current)==null?void 0:R.querySelector(".sps-table__column-resizer-guide");function y(){if(e.current&&p&&(h&&(h.style.backgroundColor=Oa.colors.blue200),g&&u&&(g.style.height=`${u.getBoundingClientRect().height}px`,g.style.display="block"),u)){const w=u.querySelectorAll("thead > tr > th");for(let P=0;P<w.length;P+=1){const O=w[P].querySelector(".sps-table__column-resizer");w[P].style.cursor="col-resize",w[P]!==e.current&&O&&(w[P].classList.remove("sps-table__header--resizeable"),O.style.display="none")}}}function E(){e.current&&p&&h&&g&&(h.style.right=`${f}px`,g.style.right=`${f}px`)}function C(){if(e.current){const w=m?`${m}px`:"";e.current.style.width=w,e.current.style.maxWidth=w,e.current.style.minWidth=w;const P=e.current.querySelector(".sps-table__header-cell-body");if(P&&(P.style.overflow=w?"hidden":"",P.style.textOverflow=w?"ellipsis":""),h&&g&&(h.style.right="0",h.style.backgroundColor="",g.style.right="0",g.style.display="none"),e.current.classList.contains("sps-table__cell--pinned")||(e.current.style.position="relative"),u){const O=u.querySelectorAll("thead > tr > th");for(let H=0;H<O.length;H+=1){const Z=O[H].querySelector(".sps-table__header-cell-body"),L=O[H].querySelector(".sps-table__column-resizer");O[H].style.cursor="default",O[H]!==e.current&&L&&(O[H].classList.add("sps-table__header--resizeable"),L.style.display="block"),Z!=null&&Z.textContent&&!Z.title&&(Z.title=Z.textContent)}}}}const T=w=>{e.current&&(w.preventDefault(),p=w.clientX,m=e.current.clientWidth,y())},N=w=>{if(!p||!e.current)return;const P=Math.max(Math.min(p-w.clientX,40),-40);P!==0&&(p=w.clientX,f+=P,m=Math.max(m-P,40),E())},M=()=>{!e.current||!p||(p=0,f=0,C(),s(n,m))},I=()=>{m=0,C(),s(n,m)};let k=!1;return l&&t.current&&(t.current.addEventListener("dragstart",T),t.current.addEventListener("mousedown",T),t.current.addEventListener("dblclick",I),window.addEventListener("mousemove",N),window.addEventListener("dragend",M),window.addEventListener("mouseup",M),k=!0,C()),()=>{t.current&&k&&(t.current.removeEventListener("dragstart",T),t.current.removeEventListener("mousedown",T),t.current.removeEventListener("dblclick",I)),k&&(window.removeEventListener("mousemove",N),window.removeEventListener("dragend",M),window.removeEventListener("mouseup",M))}},[l,c,n,s]),{isResizeable:l}},Cu=e=>{const{resizeable:t,resizeState:n}=o.useContext(ta);o.useLayoutEffect(()=>{if(!t||!n||!e.current)return;const r=Eu(e.current);if(!r)return;const a=r.querySelector(`thead > tr > th:nth-of-type(${e.current.cellIndex+1})`);if(!a)return;const s=a.getAttribute("data-resizekey");if(!s)return;const l=n[s],c=l?`${l}px`:"";e.current.style.width=c,e.current.style.maxWidth=c,e.current.style.minWidth=c,e.current.style.overflowWrap=c?"break-word":"",e.current.style.whiteSpace=c?"normal":"",e.current.title||(e.current.title=e.current.textContent||"")})},Du={controlCell:"boolean",sortKey:"string",resizeKey:"string",pinned:"boolean"};function at({children:e,className:t,controlCell:n,sortKey:r,resizeKey:a="","data-testid":s,unsafelyReplaceClassName:l,pinned:c=!1,...p}){const{sort:m,setSort:f}=o.useContext(ta),u=m==null?void 0:m.find(N=>N.key===r),h=()=>{if(r&&!n){const N=(u==null?void 0:u.direction)===G.SortDirection.ASCENDING?G.SortDirection.DESCENDING:G.SortDirection.ASCENDING;f([{key:r,direction:N}])}},g=N=>{(N.key==="Enter"||N.key===" "||N.key==="Spacebar")&&(N.preventDefault(),h())},y=o.useRef(null);Tu(c,y);const E=o.useRef(null),{isResizeable:C}=wu({tableHeaderRef:y,resizerRef:E,resizeKey:a}),T=Y(l||"sps-table__header",n&&"sps-table__header--control",!r&&"sps-table__header--sort-disabled",(u==null?void 0:u.direction)===G.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",(u==null?void 0:u.direction)===G.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",c&&"sps-table__cell--pinned",C&&"sps-table__header--resizeable",t);return o.createElement("th",{className:T,ref:y,role:"columnheader","aria-sort":(u==null?void 0:u.direction)||"none","data-testid":`${s}__header`,"data-resizekey":a||void 0,...p},o.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${s}__header-cell-body`,onClick:h,tabIndex:r?0:void 0,onKeyDown:g},e),C&&o.createElement(o.Fragment,null,o.createElement("span",{ref:E,className:Y("sps-table__column-resizer")}),o.createElement("span",{className:Y("sps-table__column-resizer-guide")})))}Object.assign(at,{props:Du,displayName:"SpsTableHeader"});function Nu(e){return o.createElement(at,{...e})}Object.assign(Nu,{props:Du,displayName:"SpsTh"});const ku={pinned:"boolean"};function wn({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:r,pinned:a,...s}){const l=Y(r||"sps-table__head",a&&"sps-table__head--pinned",t);return o.createElement("thead",{className:l,"data-testid":`${n}__head`,...s},e)}Object.assign(wn,{props:ku,displayName:"SpsTableHead"});function Iu(e){return o.createElement(wn,{...e})}Object.assign(Iu,{props:ku,displayName:"SpsThead"});const xu={};function Ge({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:r,...a}){const s=Y(r||"sps-table__row",t);return o.createElement("tr",{className:s,role:"row","data-testid":`${n}__row`,...a},e)}Object.assign(Ge,{props:xu,displayName:"SpsTableRow"});function Mu(e){return o.createElement(Ge,{...e})}Object.assign(Mu,{props:xu,displayName:"SpsTr"});const _u={};function Cn(e){const{children:t,className:n,"data-testid":r,unsafelyReplaceClassName:a,...s}=e,l=Y(a||"sps-table__body",n);return o.createElement("tbody",{className:l,"data-testid":`${r}__body`,...s},t)}Object.assign(Cn,{props:_u,displayName:"SpsTableBody"});function Lu(e){return o.createElement(Cn,{...e})}Object.assign(Lu,{props:_u,displayName:"SpsTbody"});const Ou={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth",pinned:"boolean"};function pe(e){const{buttonCell:t,children:n,className:r,controlCell:a,"data-testid":s,unsafelyReplaceClassName:l,wrap:c,pinned:p=!1,...m}=e,f=Y(l||"sps-table__cell",t&&"sps-table__cell--button-cell",a&&"sps-table__cell--control",c&&`sps-table__cell--text-wrap-${c}`,p&&"sps-table__cell--pinned",r),u=o.useRef(null);return Tu(p,u),Cu(u),o.createElement("td",{className:f,ref:u,role:"cell","data-testid":`${s}__cell`,...m},n)}Object.assign(pe,{props:Ou,displayName:"SpsTableCell"});function Pu(e){return o.createElement(pe,{...e})}Object.assign(Pu,{props:Ou,displayName:"SpsTd"});const dw={};function Ru(e){const{children:t,className:n,unsafelyReplaceClassName:r,...a}=e,[s,l,c]=It(t,[{type:Ue,props:{kind:G.ButtonKind.LINK}},[{type:Ue,props:{kind:G.ButtonKind.ICON}},{type:zn}]]),p=s.length>0&&(l.length>0||c.length>0),m=l.length>0&&c.length>0,f=Y(r||"sps-button-group",n);return o.createElement("div",{className:f,...a},s.length>0&&s,p&&o.createElement("div",{className:"sps-vertical-rule"}),l.length>0&&l,m&&o.createElement("div",{className:"sps-vertical-rule"}),c.length>0&&c)}Object.assign(Ru,{props:dw,displayName:"SpsButtonGroup"});const pw={basic:{label:"Basic Buttons",description:({NavigateTo:e})=>o.createElement("span",{className:"sps-body-14 mt-4"},"The most common type of button that can be used in most cases. Example: Basic Buttons in a"," ",o.createElement(e,{to:"Modal"},"Modal"),"."),examples:{basic:{description:"Without Icons",imports:v.code`
+          calc(100% - ${r}px) ${-a}px`};return e.current&&(t(),e.current.addEventListener("scroll",t),window.addEventListener("scroll",t)),()=>{e.current&&e.current.removeEventListener("scroll",t),window.removeEventListener("scroll",t)}})},iw=(e,t,n)=>{o.useLayoutEffect(()=>{const r=e.current;if(!r)return;const a=r==null?void 0:r.querySelector("thead"),s=r==null?void 0:r.querySelector("table"),l=s==null?void 0:s.querySelector("tbody>tr"),c=l==null?void 0:l.querySelectorAll("td"),p=(a==null?void 0:a.querySelectorAll("th"))||[],m=document.body.querySelector(".sps-navbar-container");let f=r==null?void 0:r.querySelector(".placeholder-head"),u;const h=()=>{a&&(a.style.position=t?"sticky":"",a.style.top=t?"0":"",a.style.overflow="",a.style.maxWidth="",a.style.width="",a.style.minWidth=""),f&&(f.style.width="",f.style.height=""),c&&Array.from(c).forEach((C,T)=>{const N=p[T];if(N){const M=N.getAttribute("data-resizekey"),I=M&&n?n[M]:void 0;if(I){const k=`${I}px`;N.style.minWidth=k,N.style.maxWidth=k,N.style.width=k,C.style.minWidth=k,C.style.maxWidth=k,C.style.width=k}else N.style.minWidth="",N.style.width="",N.style.maxWidth="",C.style.minWidth="",C.style.width="",C.style.maxWidth=""}else C.style.minWidth="",C.style.width="",C.style.maxWidth=""})},g=()=>{a&&r&&(a.scrollLeft=r.scrollLeft)},y=()=>{let C=null;u===window?C=m?m.getBoundingClientRect().height:0:u instanceof HTMLElement&&(C=u.getBoundingClientRect().top);const T=r.scrollLeft,N=a==null?void 0:a.getBoundingClientRect(),M=r.getBoundingClientRect();if(C&&N&&N.top<=C&&C<=M.bottom-N.height&&M.top<=C){if(c&&Array.from(c).forEach((I,k)=>{const V=I.getBoundingClientRect().width,R=p[k].getBoundingClientRect().width,w=`${Math.max(V,R)}px`;p[k].style.minWidth=w,p[k].style.width=w,p[k].style.maxWidth=w,I.style.minWidth=w,I.style.width=w,I.style.maxWidth=w}),a&&e.current){a.style.position="fixed",a.style.top=`${C}px`,a.style.overflow="hidden";const I=e.current.offsetWidth-e.current.clientWidth,k=`${M.width-I}px`;a.style.maxWidth=k,a.style.width=k,a.style.minWidth=k}f||(f=document.createElement("div"),f.style.width=`${N.width}px`,f.style.height=`${N.height}px`,f.className="placeholder-head",r.insertBefore(f,s))}else f&&(r.removeChild(f),f=null,h());r.scrollLeft=T,g()},E=()=>{h(),y(),g()};return a&&a.classList.contains("sps-table__head--pinned")&&(u=uc(r)||window,u.addEventListener("scroll",y),window.addEventListener("resize",E),r.addEventListener("scroll",g),E()),()=>{u&&(u.removeEventListener("scroll",y),window.removeEventListener("resize",E)),r.removeEventListener("scroll",g)}})},lw=(e,t)=>{const n=()=>{if(!e.current||!t)return;const r=e.current,a=r==null?void 0:r.querySelector("table > thead"),s=r==null?void 0:r.querySelector("table"),l=r==null?void 0:r.querySelector(".shadow--top"),c=r==null?void 0:r.querySelector(".shadow--bottom");if(a&&s&&l&&c){c.style.left="0",c.style.bottom="0",l.style.left="0";const p=r.offsetHeight-(r==null?void 0:r.clientHeight),m=s.getBoundingClientRect().height,f=a.getBoundingClientRect().height,u=r.scrollTop,h=m+p-r.getBoundingClientRect().height-r.scrollTop,g=r.scrollLeft;c.style.bottom=`${-u}px`,c.style.left=`${g}px`,c.style.opacity=h>0?"1":"0",l.style.top=`${u+f}px`,l.style.left=`${g}px`,l.style.opacity=u>0?"1":"0"}};o.useLayoutEffect(()=>{if(e.current&&t){const r=e.current.querySelector("table > thead");return r&&(r.style.position="sticky",r.style.top="0",r.style.zIndex="2",r.style.backgroundColor="#fff"),e.current.addEventListener("scroll",n),()=>{var a;(a=e.current)==null||a.removeEventListener("scroll",n)}}},[]),o.useLayoutEffect(()=>{e.current&&t&&n()})},cw={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean",maxHeightPx:"number",maxHeightRem:"number",resizeable:"boolean",resizeState:"ResizeState",onResizeStateChange:"ResizeStateChangeHandler"};function jn({children:e,className:t,onSortChange:n,sort:r,"data-testid":a,unsafelyReplaceClassName:s,maxHeightPx:l,maxHeightRem:c,resizeable:p,resizeState:m,onResizeStateChange:f,...u}){const h=Y(s||"sps-table-container",t),g=l?l/16:c,y=g?{maxHeight:`${g}rem`}:{},E=o.useRef(null);return lw(E,g),sw(E),iw(E,g,m),o.createElement(aw,{resizeable:p,resizeState:m,onResizeStateChange:f,sort:r,onSortChange:n},o.createElement("div",{ref:E,className:h,style:y},o.createElement("div",{className:"sps-table__shadow shadow--top"}),o.createElement("div",{className:"sps-table__shadow shadow--bottom"}),o.createElement("table",{className:"sps-table",role:"table","data-testid":`${a}`,...u},e)))}Object.assign(jn,{props:cw,displayName:"SpsTable"});function Eu(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 wu=({tableHeaderRef:e,resizerRef:t,resizeKey:n})=>{const{resizeable:r,resizeState:a,setSingleResizeState:s}=o.useContext(ta),l=!!r&&!!n,c=l?a==null?void 0:a[n]:0;return o.useLayoutEffect(()=>{var V,R;let p,m=c,f=0;const u=Eu(e.current),h=(V=e.current)==null?void 0:V.querySelector(".sps-table__column-resizer"),g=(R=e.current)==null?void 0:R.querySelector(".sps-table__column-resizer-guide");function y(){if(e.current&&p&&(h&&(h.style.backgroundColor=Oa.colors.blue200,h.style.zIndex="999"),g&&u&&(g.style.height=`${u.getBoundingClientRect().height}px`,g.style.display="block"),u)){const w=u.querySelectorAll("thead > tr > th");for(let P=0;P<w.length;P+=1){const O=w[P].querySelector(".sps-table__column-resizer");w[P].style.cursor="col-resize",w[P]!==e.current&&O&&(w[P].classList.remove("sps-table__header--resizeable"),O.style.display="none")}}}function E(){e.current&&p&&h&&g&&(h.style.right=`${f}px`,h.style.zIndex="999",g.style.right=`${f}px`)}function C(){if(e.current){const w=m?`${m}px`:"";e.current.style.width=w,e.current.style.maxWidth=w,e.current.style.minWidth=w;const P=e.current.querySelector(".sps-table__header-cell-body");if(P&&(P.style.overflow=w?"hidden":"",P.style.textOverflow=w?"ellipsis":""),h&&g&&(h.style.right="0",h.style.backgroundColor="",h.style.zIndex="0",g.style.right="0",g.style.display="none"),e.current.classList.contains("sps-table__cell--pinned")||(e.current.style.position="relative"),u){const O=u.querySelectorAll("thead > tr > th");for(let H=0;H<O.length;H+=1){const Z=O[H].querySelector(".sps-table__header-cell-body"),L=O[H].querySelector(".sps-table__column-resizer");O[H].style.cursor="default",O[H]!==e.current&&L&&(O[H].classList.add("sps-table__header--resizeable"),L.style.display="block"),Z!=null&&Z.textContent&&!Z.title&&(Z.title=Z.textContent)}}}}const T=w=>{e.current&&(w.preventDefault(),p=w.clientX,m=e.current.clientWidth,y())},N=w=>{if(!p||!e.current)return;const P=Math.max(Math.min(p-w.clientX,40),-40);P!==0&&(p=w.clientX,f+=P,m=Math.max(m-P,40),E())},M=()=>{!e.current||!p||(p=0,f=0,C(),s(n,m))},I=()=>{m=0,C(),s(n,m)};let k=!1;return l&&t.current&&(t.current.addEventListener("dragstart",T),t.current.addEventListener("mousedown",T),t.current.addEventListener("dblclick",I),window.addEventListener("mousemove",N),window.addEventListener("dragend",M),window.addEventListener("mouseup",M),k=!0,C()),()=>{t.current&&k&&(t.current.removeEventListener("dragstart",T),t.current.removeEventListener("mousedown",T),t.current.removeEventListener("dblclick",I)),k&&(window.removeEventListener("mousemove",N),window.removeEventListener("dragend",M),window.removeEventListener("mouseup",M))}},[l,c,n,s]),{isResizeable:l}},Cu=e=>{const{resizeable:t,resizeState:n}=o.useContext(ta);o.useLayoutEffect(()=>{if(!t||!n||!e.current)return;const r=Eu(e.current);if(!r)return;const a=r.querySelector(`thead > tr > th:nth-of-type(${e.current.cellIndex+1})`);if(!a)return;const s=a.getAttribute("data-resizekey");if(!s)return;const l=n[s],c=l?`${l}px`:"";e.current.style.width=c,e.current.style.maxWidth=c,e.current.style.minWidth=c,e.current.style.overflowWrap=c?"break-word":"",e.current.style.whiteSpace=c?"normal":"",e.current.title||(e.current.title=e.current.textContent||"")})},Du={controlCell:"boolean",sortKey:"string",resizeKey:"string",pinned:"boolean"};function at({children:e,className:t,controlCell:n,sortKey:r,resizeKey:a="","data-testid":s,unsafelyReplaceClassName:l,pinned:c=!1,...p}){const{sort:m,setSort:f}=o.useContext(ta),u=m==null?void 0:m.find(N=>N.key===r),h=()=>{if(r&&!n){const N=(u==null?void 0:u.direction)===G.SortDirection.ASCENDING?G.SortDirection.DESCENDING:G.SortDirection.ASCENDING;f([{key:r,direction:N}])}},g=N=>{(N.key==="Enter"||N.key===" "||N.key==="Spacebar")&&(N.preventDefault(),h())},y=o.useRef(null);Tu(c,y);const E=o.useRef(null),{isResizeable:C}=wu({tableHeaderRef:y,resizerRef:E,resizeKey:a}),T=Y(l||"sps-table__header",n&&"sps-table__header--control",!r&&"sps-table__header--sort-disabled",(u==null?void 0:u.direction)===G.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",(u==null?void 0:u.direction)===G.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",c&&"sps-table__cell--pinned",C&&"sps-table__header--resizeable",t);return o.createElement("th",{className:T,ref:y,role:"columnheader","aria-sort":(u==null?void 0:u.direction)||"none","data-testid":`${s}__header`,"data-resizekey":a||void 0,...p},o.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${s}__header-cell-body`,onClick:h,tabIndex:r?0:void 0,onKeyDown:g},e),C&&o.createElement(o.Fragment,null,o.createElement("span",{ref:E,className:Y("sps-table__column-resizer")}),o.createElement("span",{className:Y("sps-table__column-resizer-guide")})))}Object.assign(at,{props:Du,displayName:"SpsTableHeader"});function Nu(e){return o.createElement(at,{...e})}Object.assign(Nu,{props:Du,displayName:"SpsTh"});const ku={pinned:"boolean"};function wn({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:r,pinned:a,...s}){const l=Y(r||"sps-table__head",a&&"sps-table__head--pinned",t);return o.createElement("thead",{className:l,"data-testid":`${n}__head`,...s},e)}Object.assign(wn,{props:ku,displayName:"SpsTableHead"});function Iu(e){return o.createElement(wn,{...e})}Object.assign(Iu,{props:ku,displayName:"SpsThead"});const xu={};function Ge({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:r,...a}){const s=Y(r||"sps-table__row",t);return o.createElement("tr",{className:s,role:"row","data-testid":`${n}__row`,...a},e)}Object.assign(Ge,{props:xu,displayName:"SpsTableRow"});function Mu(e){return o.createElement(Ge,{...e})}Object.assign(Mu,{props:xu,displayName:"SpsTr"});const _u={};function Cn(e){const{children:t,className:n,"data-testid":r,unsafelyReplaceClassName:a,...s}=e,l=Y(a||"sps-table__body",n);return o.createElement("tbody",{className:l,"data-testid":`${r}__body`,...s},t)}Object.assign(Cn,{props:_u,displayName:"SpsTableBody"});function Lu(e){return o.createElement(Cn,{...e})}Object.assign(Lu,{props:_u,displayName:"SpsTbody"});const Ou={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth",pinned:"boolean"};function pe(e){const{buttonCell:t,children:n,className:r,controlCell:a,"data-testid":s,unsafelyReplaceClassName:l,wrap:c,pinned:p=!1,...m}=e,f=Y(l||"sps-table__cell",t&&"sps-table__cell--button-cell",a&&"sps-table__cell--control",c&&`sps-table__cell--text-wrap-${c}`,p&&"sps-table__cell--pinned",r),u=o.useRef(null);return Tu(p,u),Cu(u),o.createElement("td",{className:f,ref:u,role:"cell","data-testid":`${s}__cell`,...m},n)}Object.assign(pe,{props:Ou,displayName:"SpsTableCell"});function Pu(e){return o.createElement(pe,{...e})}Object.assign(Pu,{props:Ou,displayName:"SpsTd"});const dw={};function Ru(e){const{children:t,className:n,unsafelyReplaceClassName:r,...a}=e,[s,l,c]=It(t,[{type:Ue,props:{kind:G.ButtonKind.LINK}},[{type:Ue,props:{kind:G.ButtonKind.ICON}},{type:zn}]]),p=s.length>0&&(l.length>0||c.length>0),m=l.length>0&&c.length>0,f=Y(r||"sps-button-group",n);return o.createElement("div",{className:f,...a},s.length>0&&s,p&&o.createElement("div",{className:"sps-vertical-rule"}),l.length>0&&l,m&&o.createElement("div",{className:"sps-vertical-rule"}),c.length>0&&c)}Object.assign(Ru,{props:dw,displayName:"SpsButtonGroup"});const pw={basic:{label:"Basic Buttons",description:({NavigateTo:e})=>o.createElement("span",{className:"sps-body-14 mt-4"},"The most common type of button that can be used in most cases. Example: Basic Buttons in a"," ",o.createElement(e,{to:"Modal"},"Modal"),"."),examples:{basic:{description:"Without Icons",imports:v.code`
                     import { SpsButton } from "@spscommerce/ds-react";
                     import { ButtonKind } from "@spscommerce/ds-shared";
         `,jsx:v.code`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "8.29.0",
+  "version": "8.29.2",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
@@ -46,11 +46,11 @@
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/illustrations": "8.29.0",
-    "@sps-woodland/tabs": "8.29.0",
-    "@spscommerce/ds-colors": "8.29.0",
-    "@spscommerce/ds-shared": "8.29.0",
-    "@spscommerce/positioning": "8.29.0"
+    "@sps-woodland/illustrations": "8.29.2",
+    "@sps-woodland/tabs": "8.29.2",
+    "@spscommerce/ds-colors": "8.29.2",
+    "@spscommerce/ds-shared": "8.29.2",
+    "@spscommerce/positioning": "8.29.2"
   },
   "devDependencies": {
     "@react-spectrum/provider": "^3.4.1",
@@ -72,12 +72,12 @@
     "raf-stub": "^2.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/illustrations": "8.29.0",
-    "@sps-woodland/tabs": "8.29.0",
-    "@spscommerce/ds-colors": "8.29.0",
-    "@spscommerce/ds-shared": "8.29.0",
-    "@spscommerce/positioning": "8.29.0",
-    "test": "8.29.0"
+    "@sps-woodland/illustrations": "8.29.2",
+    "@sps-woodland/tabs": "8.29.2",
+    "@spscommerce/ds-colors": "8.29.2",
+    "@spscommerce/ds-shared": "8.29.2",
+    "@spscommerce/positioning": "8.29.2",
+    "test": "8.29.2"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",