@spscommerce/ds-react 7.1.0 → 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 = [
                             {
@@ -4452,7 +4452,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                         </>
                       )
                   }
-                `}}}},hN={formMeta:"SpsFormSetMeta<any>",stacked:"boolean"};function Mi({children:e,className:t,formArray:n,formGroup:a,formMeta:s,stacked:i,"data-testid":l,unsafelyReplaceClassName:c,...u}){const p=a||n,f=p||s,[m,h]=r.useState(!1);r.useEffect(()=>{if(f){const y=f.isFocused();!m&&y&&f.onFocus?f.onFocus():m&&!y&&f.onBlur&&f.onBlur(),h(y)}});const S=$(c||"sps-form-group",(p&&p.invalid||s&&(!s.isValid()||!s.contentsAreValid()))&&"sps-form-group--error",t);return r.createElement("div",{className:S,"data-testid":l,...u},r.createElement("div",{className:$("sps-input-group",i&&"sps-input-group--stacked")},e))}Object.assign(Mi,{props:hN,displayName:"SpsInputGroup"});const gN={onSubmit:"FormEventHandler"};function ns(e){const{children:t,onSubmit:n}=e;function a(s){s.preventDefault(),n&&n(s)}return r.createElement("form",{onSubmit:a,className:"sps-list-toolbar__search-form",noValidate:!0},r.createElement(Mi,{className:"sps-list-toolbar__search-field"},t))}Object.assign(ns,{props:gN,displayName:"SpsListToolbarSearch"});const SN={};function as(e){const{children:t}=e;return r.createElement("div",null,t)}Object.assign(as,{props:SN,displayName:"SpsListToolbarSearchInfo"});const bN={activeTab:"SpsTab",advancedSearch:"{ isOpen: boolean, enteredFields: number }",onToggleAdvancedSearch:"(boolean) => void",onTabChange:"(SpsTab) => void",title:"string",tabs:"Array<SpsTab>",onToolbarPinned:"(boolean) => void",selectable:"boolean",isSelected:"boolean",isIndeterminate:"boolean",onSelectionChange:"(boolean) => void",pinResultsBar:"boolean",pinToolbar:"boolean"};function _i(e){const{activeTab:t,advancedSearch:n,children:a,className:s,onToggleAdvancedSearch:i,onTabChange:l,tabs:c,title:u,unsafelyReplaceClassName:p,onToolbarPinned:f,selectable:m,isSelected:h,isIndeterminate:S,onSelectionChange:y,pinResultsBar:w,pinToolbar:C=!0,"data-testid":D,...N}=e,{t:I}=r.useContext(Le);let b=null;const[k,O]=r.useState(!1),x=r.useRef(null),L=r.useRef(null),A=E.lockToAnimationFrames(()=>{if(x.current){const F=x.current.getBoundingClientRect();F&&F.height>0&&F.top<=60&&(typeof b=="number"?window.scrollY<b&&(b=null,O(!1)):(b=window.scrollY,O(!0),i&&i(!1)))}});r.useEffect(()=>(window.addEventListener("scroll",A),()=>{window.removeEventListener("scroll",A)}),[]);const G=r.useRef();r.useLayoutEffect(()=>{if(L.current&&x.current&&C){if(k&&G.current)L.current.style.height=G.current.height,L.current.style.width=G.current.width,L.current.style.marginBottom=G.current.marginBottom;else if(!k){L.current.style.height="",L.current.style.width="",L.current.style.marginBottom="";const F=window.getComputedStyle(x.current);G.current={height:F.height,width:F.width,marginBottom:F.marginBottom}}}},[k]);function _(F){l&&l(F)}function H(){i&&i(!(n!=null&&n.isOpen))}function M(F){f&&f(F)}r.useEffect(()=>{M(k)},[k]);const B=$(p||"sps-list-toolbar",k&&C&&"sps-list-toolbar--pinned",k&&C&&"z-stratum-toolbar",n&&n.isOpen&&"sps-list-toolbar--advanced-search-open",s),[J,ee,j,re]=yt(a,[{type:ns},{type:as},{type:ts}]);return r.createElement("div",{className:"sps-list-toolbar__wrapper",ref:L},r.createElement("div",{className:B,"data-testid":D,ref:x,...N},r.createElement("div",{className:"sps-list-toolbar__content"},!!m&&r.createElement("div",{className:"sps-list-toolbar__selection-controls"},r.createElement(kn,{checked:h,indeterminate:S,onChange:()=>{y==null||y(!h)}})),c&&r.createElement(bm,{tabs:c,onTabChange:_,activeTab:t,"data-testid":`${D}__tabs`}),r.createElement("div",{className:"sps-list-toolbar__search-controls"},!u&&J,!u&&ee,J.length>0&&n&&r.createElement("div",{className:"sps-list-toolbar__advanced-search-toggle","data-testid":`${D}__advanced-search`},r.createElement("div",{className:"sps-list-toolbar__advanced-search-toggle-button-wrapper"},r.createElement(Ve,{kind:V.ButtonKind.LINK,onClick:H},I("design-system:listToolbar.advancedSearchToggle"))),(n.enteredFields||0)>0&&r.createElement(Nt,{kind:V.TagKind.INFO},r.createElement("span",null,n.enteredFields))),u&&r.createElement("div",{"data-testid":`${D}-title`,className:"sps-list-toolbar__advanced-search-title"},u)),k?r.createElement("div",{className:"sps-list-toolbar__header-content"},r.createElement(vt.Provider,{value:{fixed:!0}},re)):r.createElement("div",{className:"sps-list-toolbar__header-content"},re)),r.createElement("div",null,(!k||k&&w)&&j)))}Object.assign(_i,{props:bN,displayName:"SpsListToolbar"});const vN={options:"SortOption[]",activeOption:"SortOption",onSortChange:"(option: SortOption) => void",defaultOption:"SortOption"};function Oi(e){const{options:t,onSortChange:n,defaultOption:a,activeOption:s,className:i,unsafelyReplaceClassName:l}=e,c=(t||[]).map(p=>[{label:p.label,icon:p.icon},()=>{n&&n(p)}]),u=$(l||"sps-list-toolbar-sort-by",i);return r.createElement(xn,{className:u,icon:(s==null?void 0:s.icon)||(a==null?void 0:a.icon),label:(s==null?void 0:s.label)||(a==null?void 0:a.label),options:c})}Object.assign(Oi,{props:vN,displayName:"SpsListToolbarSortBy"});function Em(){const[e,t]=r.useState(!1);function n(){t(!1)}function a(){t(!0)}return r.createElement(r.Fragment,null,r.createElement("p",null,"The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."),r.createElement(Ve,{kind:V.ButtonKind.LINK,onClick:a},"View Content Order Example"),r.createElement(Qr,{isOpen:e,onClose:n},r.createElement("h1",null,"Content Order"),r.createElement("img",{src:"assets/images/list-toolbar-example.svg",alt:"A List Toolbar with labels on each section",className:"w-100 mb-3"}),r.createElement(Mn,null,r.createElement(ln,null,r.createElement(Ue,{style:{width:"80px"}},"Order"),r.createElement(Ue,null,"Section"),r.createElement(Ue,null,"Notes")),r.createElement(cn,null,r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"1")),r.createElement(oe,null,"Checkbox"),r.createElement(oe,null,"For Content Rows and Content Tiles only.")),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"2")),r.createElement(oe,null,"Search/Filter Box"),r.createElement(oe,null)),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"3")),r.createElement(oe,null,"Saved Search"),r.createElement(oe,null)),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"4")),r.createElement(oe,null,"Advanced Search"),r.createElement(oe,null,"For more information, visit the Advanced Search page.")),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"5")),r.createElement(oe,null,"Column Editor"),r.createElement(oe,{wrap:500},"Use for Tables only. For more information, visit the Column Editor page.")),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"6")),r.createElement(oe,null,"List View Selector"),r.createElement(oe,null)),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"7")),r.createElement(oe,null,"Sorting"),r.createElement(oe,null)),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"8")),r.createElement(oe,null,"Buttons"),r.createElement(oe,{wrap:500},"Buttons always appear in the rightmost section of the List Toolbar. For the ordering of Buttons, refer to the Button Groups section on the Buttons page."))))))}const Tm={general:{label:"General Usage",description:()=>r.createElement(r.Fragment,null,r.createElement("h5",null,"Use a List Toolbar:"),r.createElement("ul",null,r.createElement("li",null,"When list content needs to be searched, filtered, sorted, or otherwise interacted with.")),r.createElement("h5",null,"Avoid a List Toolbar:"),r.createElement("ul",null,r.createElement("li",null,"When no list is present."),r.createElement("li",null,"When there will always be a small number of elements in the list, or the list does not require searching, filtering, or other actions.")))},contentOrder:{label:"Content Order",description:r.createElement(Em,null)},checkbox:{label:"Checkbox",description:({NavigateTo:e})=>r.createElement("p",null,"Use a Checkbox in the List Toolbar when items in a"," ",r.createElement(e,{to:"Content rows"},"Content Row")," or"," ",r.createElement(e,{to:"Content tiles"},"Content Tile")," are selectable. The Checkbox selects all items in the list, and will cause the Action Bar to appear. Do not use this with a Table, as Tables have a built-in checkbox in the header row."),examples:{checkbox:{react:E.code`
+                `}}}},hN={formMeta:"SpsFormSetMeta<any>",stacked:"boolean"};function Mi({children:e,className:t,formArray:n,formGroup:a,formMeta:s,stacked:i,"data-testid":l,unsafelyReplaceClassName:c,...u}){const p=a||n,f=p||s,[m,h]=r.useState(!1);r.useEffect(()=>{if(f){const y=f.isFocused();!m&&y&&f.onFocus?f.onFocus():m&&!y&&f.onBlur&&f.onBlur(),h(y)}});const S=$(c||"sps-form-group",(p&&p.invalid||s&&(!s.isValid()||!s.contentsAreValid()))&&"sps-form-group--error",t);return r.createElement("div",{className:S,"data-testid":l,...u},r.createElement("div",{className:$("sps-input-group",i&&"sps-input-group--stacked")},e))}Object.assign(Mi,{props:hN,displayName:"SpsInputGroup"});const gN={onSubmit:"FormEventHandler"};function ns(e){const{children:t,onSubmit:n}=e;function a(s){s.preventDefault(),n&&n(s)}return r.createElement("form",{onSubmit:a,className:"sps-list-toolbar__search-form",noValidate:!0},r.createElement(Mi,{className:"sps-list-toolbar__search-field"},t))}Object.assign(ns,{props:gN,displayName:"SpsListToolbarSearch"});const SN={};function as(e){const{children:t}=e;return r.createElement("div",null,t)}Object.assign(as,{props:SN,displayName:"SpsListToolbarSearchInfo"});const bN={activeTab:"SpsTab",advancedSearch:"{ isOpen: boolean, enteredFields: number }",onToggleAdvancedSearch:"(boolean) => void",onTabChange:"(SpsTab) => void",title:"string",tabs:"Array<SpsTab>",onToolbarPinned:"(boolean) => void",selectable:"boolean",isSelected:"boolean",isIndeterminate:"boolean",onSelectionChange:"(boolean) => void",pinResultsBar:"boolean",pinToolbar:"boolean"};function _i(e){const{activeTab:t,advancedSearch:n,children:a,className:s,onToggleAdvancedSearch:i,onTabChange:l,tabs:c,title:u,unsafelyReplaceClassName:p,onToolbarPinned:f,selectable:m,isSelected:h,isIndeterminate:S,onSelectionChange:y,pinResultsBar:w,pinToolbar:C=!0,"data-testid":D,...N}=e,{t:I}=r.useContext(Le);let b=null;const[k,O]=r.useState(!1),x=r.useRef(null),L=r.useRef(null),A=E.lockToAnimationFrames(()=>{if(x.current&&C){const F=x.current.getBoundingClientRect();F&&F.height>0&&F.top<=60&&(typeof b=="number"?window.scrollY<b&&(b=null,O(!1)):(b=window.scrollY,O(!0),i&&i(!1)))}});r.useEffect(()=>(window.addEventListener("scroll",A),()=>{window.removeEventListener("scroll",A)}),[]);const G=r.useRef();r.useLayoutEffect(()=>{if(L.current&&x.current&&C){if(k&&G.current)L.current.style.height=G.current.height,L.current.style.width=G.current.width,L.current.style.marginBottom=G.current.marginBottom;else if(!k){L.current.style.height="",L.current.style.width="",L.current.style.marginBottom="";const F=window.getComputedStyle(x.current);G.current={height:F.height,width:F.width,marginBottom:F.marginBottom}}}},[k]);function _(F){l&&l(F)}function H(){i&&i(!(n!=null&&n.isOpen))}function M(F){f&&f(F)}r.useEffect(()=>{M(k)},[k]);const B=$(p||"sps-list-toolbar",k&&C&&"sps-list-toolbar--pinned",k&&C&&"z-stratum-toolbar",n&&n.isOpen&&"sps-list-toolbar--advanced-search-open",s),[J,ee,j,re]=yt(a,[{type:ns},{type:as},{type:ts}]);return r.createElement("div",{className:"sps-list-toolbar__wrapper",ref:L},r.createElement("div",{className:B,"data-testid":D,ref:x,...N},r.createElement("div",{className:"sps-list-toolbar__content"},!!m&&r.createElement("div",{className:"sps-list-toolbar__selection-controls"},r.createElement(kn,{checked:h,indeterminate:S,onChange:()=>{y==null||y(!h)}})),c&&r.createElement(bm,{tabs:c,onTabChange:_,activeTab:t,"data-testid":`${D}__tabs`}),r.createElement("div",{className:"sps-list-toolbar__search-controls"},!u&&J,!u&&ee,J.length>0&&n&&r.createElement("div",{className:"sps-list-toolbar__advanced-search-toggle","data-testid":`${D}__advanced-search`},r.createElement("div",{className:"sps-list-toolbar__advanced-search-toggle-button-wrapper"},r.createElement(Ve,{kind:V.ButtonKind.LINK,onClick:H},I("design-system:listToolbar.advancedSearchToggle"))),(n.enteredFields||0)>0&&r.createElement(Nt,{kind:V.TagKind.INFO},r.createElement("span",null,n.enteredFields))),u&&r.createElement("div",{"data-testid":`${D}-title`,className:"sps-list-toolbar__advanced-search-title"},u)),k?r.createElement("div",{className:"sps-list-toolbar__header-content"},r.createElement(vt.Provider,{value:{fixed:!0}},re)):r.createElement("div",{className:"sps-list-toolbar__header-content"},re)),r.createElement("div",null,(!k||k&&w)&&j)))}Object.assign(_i,{props:bN,displayName:"SpsListToolbar"});const vN={options:"SortOption[]",activeOption:"SortOption",onSortChange:"(option: SortOption) => void",defaultOption:"SortOption"};function Oi(e){const{options:t,onSortChange:n,defaultOption:a,activeOption:s,className:i,unsafelyReplaceClassName:l}=e,c=(t||[]).map(p=>[{label:p.label,icon:p.icon},()=>{n&&n(p)}]),u=$(l||"sps-list-toolbar-sort-by",i);return r.createElement(xn,{className:u,icon:(s==null?void 0:s.icon)||(a==null?void 0:a.icon),label:(s==null?void 0:s.label)||(a==null?void 0:a.label),options:c})}Object.assign(Oi,{props:vN,displayName:"SpsListToolbarSortBy"});function Em(){const[e,t]=r.useState(!1);function n(){t(!1)}function a(){t(!0)}return r.createElement(r.Fragment,null,r.createElement("p",null,"The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."),r.createElement(Ve,{kind:V.ButtonKind.LINK,onClick:a},"View Content Order Example"),r.createElement(Qr,{isOpen:e,onClose:n},r.createElement("h1",null,"Content Order"),r.createElement("img",{src:"assets/images/list-toolbar-example.svg",alt:"A List Toolbar with labels on each section",className:"w-100 mb-3"}),r.createElement(Mn,null,r.createElement(ln,null,r.createElement(Ue,{style:{width:"80px"}},"Order"),r.createElement(Ue,null,"Section"),r.createElement(Ue,null,"Notes")),r.createElement(cn,null,r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"1")),r.createElement(oe,null,"Checkbox"),r.createElement(oe,null,"For Content Rows and Content Tiles only.")),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"2")),r.createElement(oe,null,"Search/Filter Box"),r.createElement(oe,null)),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"3")),r.createElement(oe,null,"Saved Search"),r.createElement(oe,null)),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"4")),r.createElement(oe,null,"Advanced Search"),r.createElement(oe,null,"For more information, visit the Advanced Search page.")),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"5")),r.createElement(oe,null,"Column Editor"),r.createElement(oe,{wrap:500},"Use for Tables only. For more information, visit the Column Editor page.")),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"6")),r.createElement(oe,null,"List View Selector"),r.createElement(oe,null)),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"7")),r.createElement(oe,null,"Sorting"),r.createElement(oe,null)),r.createElement(Be,null,r.createElement(oe,null,r.createElement("span",{className:"sps-tag sps-tag--info"},"8")),r.createElement(oe,null,"Buttons"),r.createElement(oe,{wrap:500},"Buttons always appear in the rightmost section of the List Toolbar. For the ordering of Buttons, refer to the Button Groups section on the Buttons page."))))))}const Tm={general:{label:"General Usage",description:()=>r.createElement(r.Fragment,null,r.createElement("h5",null,"Use a List Toolbar:"),r.createElement("ul",null,r.createElement("li",null,"When list content needs to be searched, filtered, sorted, or otherwise interacted with.")),r.createElement("h5",null,"Avoid a List Toolbar:"),r.createElement("ul",null,r.createElement("li",null,"When no list is present."),r.createElement("li",null,"When there will always be a small number of elements in the list, or the list does not require searching, filtering, or other actions.")))},contentOrder:{label:"Content Order",description:r.createElement(Em,null)},checkbox:{label:"Checkbox",description:({NavigateTo:e})=>r.createElement("p",null,"Use a Checkbox in the List Toolbar when items in a"," ",r.createElement(e,{to:"Content rows"},"Content Row")," or"," ",r.createElement(e,{to:"Content tiles"},"Content Tile")," are selectable. The Checkbox selects all items in the list, and will cause the Action Bar to appear. Do not use this with a Table, as Tables have a built-in checkbox in the header row."),examples:{checkbox:{react:E.code`
                     function Component() {
                         const { formValue, formMeta, updateForm } = useSpsForm({
                             searchText: "",

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();
     };
@@ -20144,7 +20146,7 @@ function Ep(e) {
   } = e, { t: I } = r.useContext(Be);
   let S = null;
   const [k, O] = r.useState(!1), x = r.useRef(null), L = r.useRef(null), A = Rb(() => {
-    if (x.current) {
+    if (x.current && T) {
       const F = x.current.getBoundingClientRect();
       F && F.height > 0 && F.top <= 60 && (typeof S == "number" ? window.scrollY < S && (S = null, O(!1)) : (S = window.scrollY, O(!0), i && i(!1)));
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "7.1.0",
+  "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.0",
-    "@sps-woodland/tabs": "7.1.0",
-    "@spscommerce/ds-colors": "7.1.0",
-    "@spscommerce/ds-shared": "7.1.0",
-    "@spscommerce/positioning": "7.1.0",
+    "@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.0",
-    "@sps-woodland/tabs": "7.1.0",
-    "@spscommerce/ds-colors": "7.1.0",
-    "@spscommerce/ds-shared": "7.1.0",
-    "@spscommerce/positioning": "7.1.0",
+    "@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.0"
+    "test": "7.1.2"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",