@spscommerce/ds-react 7.1.1 → 7.1.3

package/lib/fieldset/SpsFieldset.d.ts

@@ -13,5 +13,6 @@ export declare type SpsFieldsetProps = React.PropsWithChildren<SpsGlobalPropType
     enabled?: boolean;
     onToggled?: (isEnabled: boolean) => void;
     tooltip?: string;
+    applyNestedStyles?: boolean;
 }> & React.HTMLAttributes<HTMLDivElement>;
-export declare function SpsFieldset({ children, className, errors, formArray, formGroup, formMeta, legend, unsafelyReplaceClassName, optional, enabled, onToggled, tooltip, "data-testid": testId, }: SpsFieldsetProps): JSX.Element;
+export declare function SpsFieldset({ children, className, errors, formArray, formGroup, formMeta, legend, unsafelyReplaceClassName, optional, enabled, onToggled, tooltip, applyNestedStyles, "data-testid": testId, }: SpsFieldsetProps): JSX.Element;

package/lib/index.cjs.js

@@ -2317,7 +2317,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                     </SpsTable>
                   )
                 }
-              `}}}},qD={checked:"boolean",onChange:"ChangeEventHandler",indeterminate:"boolean",disabled:"boolean",options:"Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"};function Ci(e){const{options:t,className:n,checked:a,onChange:s,indeterminate:i,disabled:l,"data-testid":c,...u}=e,p=$("sps-checkbox-dropdown",n);return r.createElement("span",{className:p,"data-testid":c,...u},r.createElement(kn,{indeterminate:i,checked:a,disabled:l,onChange:s,inline:!0,"data-testid":`${c}__checkbox`}),r.createElement(xn,{disabled:l,options:t,icon:V.SpsIcon.CHEVRON_DOWN,"data-testid":`${c}__dropdown`}))}Object.assign(Ci,{props:qD,displayName:"SpsCheckboxDropdown"});const JD={errors:"ReactNodeOrRenderFn",formMeta:"SpsFormSetMeta<any>",legend:"string",optional:"boolean",enabled:"boolean",onToggled:"(isEnabled: boolean) => void",tooltip:"string"};function Di({children:e,className:t,errors:n,formArray:a,formGroup:s,formMeta:i,legend:l,unsafelyReplaceClassName:c,optional:u=!1,enabled:p=!1,onToggled:f,tooltip:m,"data-testid":h}){const S=s||a,y=r.useRef(null),w=r.useRef(null),[C,D]=r.useState(Ee.HIDDEN),[N,I]=r.useState(!1),[b,k]=r.useState(p);Po(()=>{f==null||f(b)},[b]),r.useEffect(()=>{if(S||i){const L=S&&S.isFocused()||i&&i.isFocused();!N&&L?D(Ee.VISIBLE):N&&!L&&D(Ee.HIDDEN),I(L||!1)}});const O=$(c||"sps-fieldset",(S&&!S.isPristine()&&S.invalid||i&&(!i.isValid()||!i.contentsAreValid()))&&"sps-fieldset--error",t,u&&!b&&"sps-fieldset--collapsed");function x(){D(C===Ee.VISIBLE?Ee.HIDDEN:Ee.VISIBLE)}return r.createElement("div",{className:"sps-fieldset-container"},r.createElement("fieldset",{className:O,"data-testid":h},r.createElement("legend",{className:"sps-fieldset__legend",ref:y,onMouseEnter:()=>D(Ee.VISIBLE),onMouseLeave:()=>D(Ee.DELAYED_HIDDEN),onClick:x},u&&r.createElement(kn,{checked:b,className:"d-inline-flex pr-1",onChange:()=>{k(!b)},"data-testid":`${h}__checkbox`}),l,m&&r.createElement("span",{className:"sps-fieldset__legend-icon",ref:w},r.createElement(kt,{icon:V.SpsIcon.INFO_CIRCLE,"data-testid":`${h}__info-icon`}))),m&&r.createElement(ht,{for:w},m),r.createElement(ht,{for:y,kind:V.TooltipKind.ERROR,showOn:V.TooltipShowTrigger.MANUAL,isShown:C},lt(n)),e))}Object.assign(Di,{props:JD,displayName:"SpsFieldset"});const Xp={basic:{label:"Basic Fieldsets",description:"info about basic fieldsets",examples:{basic:{react:E.code`
+              `}}}},qD={checked:"boolean",onChange:"ChangeEventHandler",indeterminate:"boolean",disabled:"boolean",options:"Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"};function Ci(e){const{options:t,className:n,checked:a,onChange:s,indeterminate:i,disabled:l,"data-testid":c,...u}=e,p=$("sps-checkbox-dropdown",n);return r.createElement("span",{className:p,"data-testid":c,...u},r.createElement(kn,{indeterminate:i,checked:a,disabled:l,onChange:s,inline:!0,"data-testid":`${c}__checkbox`}),r.createElement(xn,{disabled:l,options:t,icon:V.SpsIcon.CHEVRON_DOWN,"data-testid":`${c}__dropdown`}))}Object.assign(Ci,{props:qD,displayName:"SpsCheckboxDropdown"});const JD={errors:"ReactNodeOrRenderFn",formMeta:"SpsFormSetMeta<any>",legend:"string",optional:"boolean",enabled:"boolean",onToggled:"(isEnabled: boolean) => void",tooltip:"string",applyNestedStyles:"boolean"};function Di({children:e,className:t,errors:n,formArray:a,formGroup:s,formMeta:i,legend:l,unsafelyReplaceClassName:c,optional:u=!1,enabled:p=!1,onToggled:f,tooltip:m,applyNestedStyles:h,"data-testid":S}){const y=s||a,w=r.useRef(null),C=r.useRef(null),[D,N]=r.useState(Ee.HIDDEN),[I,b]=r.useState(!1),[k,O]=r.useState(p);Po(()=>{f==null||f(k)},[k]),r.useEffect(()=>{if(y||i){const A=y&&y.isFocused()||i&&i.isFocused();!I&&A?N(Ee.VISIBLE):I&&!A&&N(Ee.HIDDEN),b(A||!1)}});const x=$(c||h?"nested-styles-fieldset":"sps-fieldset",(y&&!y.isPristine()&&y.invalid||i&&(!i.isValid()||!i.contentsAreValid()))&&"sps-fieldset--error",t,u&&!k&&"sps-fieldset--collapsed");function L(){N(D===Ee.VISIBLE?Ee.HIDDEN:Ee.VISIBLE)}return r.createElement("div",{className:"sps-fieldset-container"},r.createElement("fieldset",{className:x,"data-testid":S},r.createElement("legend",{className:"sps-fieldset__legend",ref:w,onMouseEnter:()=>N(Ee.VISIBLE),onMouseLeave:()=>N(Ee.DELAYED_HIDDEN),onClick:L},u&&r.createElement(kn,{checked:k,className:"d-inline-flex pr-1",onChange:()=>{O(!k)},"data-testid":`${S}__checkbox`}),l,m&&r.createElement("span",{className:"sps-fieldset__legend-icon",ref:C},r.createElement(kt,{icon:V.SpsIcon.INFO_CIRCLE,"data-testid":`${S}__info-icon`}))),m&&r.createElement(ht,{for:C},m),r.createElement(ht,{for:w,kind:V.TooltipKind.ERROR,showOn:V.TooltipShowTrigger.MANUAL,isShown:D},lt(n)),e))}Object.assign(Di,{props:JD,displayName:"SpsFieldset"});const Xp={basic:{label:"Basic Fieldsets",description:"info about basic fieldsets",examples:{basic:{react:E.code`
                     function DemoComponent() {
                         const RADIO_OPTIONS = [
                             { value: "a", label: "Option A" },
@@ -3063,7 +3063,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
           calc(100% - ${u}px) 0, 
           ${c}px ${-s}px,
           calc(100% - ${u+a}px) ${-s}px`}else e.current.style.backgroundPosition=`0 0, 100% 0, 0 ${-s}px, 
-          calc(100% - ${a}px) ${-s}px`};return e.current&&(t(),e.current.addEventListener("scroll",t),window.addEventListener("scroll",t)),()=>{e.current&&e.current.removeEventListener("scroll",t),window.removeEventListener("scroll",t)}})},oN=(e,t)=>{r.useLayoutEffect(()=>{const n=e.current;if(!n)return;const a=n==null?void 0:n.querySelector("thead"),s=n==null?void 0:n.querySelector("table"),i=s==null?void 0:s.querySelector("tbody>tr"),l=i==null?void 0:i.querySelectorAll("td"),c=(a==null?void 0:a.querySelectorAll("th"))||[],u=document.body.querySelector(".sps-navbar-container");let p=n==null?void 0:n.querySelector(".placeholder-head"),f;const m=()=>{a&&(a.style.position=t?"sticky":"",a.style.top=t?"0":"",a.style.overflow="",a.style.maxWidth="",a.style.width="",a.style.minWidth=""),p&&(p.style.width="",p.style.height=""),l&&Array.from(l).forEach((w,C)=>{c[C].style.minWidth="",c[C].style.width="",c[C].style.maxWidth="",w.style.minWidth="",w.style.width="",w.style.maxWidth=""})},h=()=>{a&&n&&(a.scrollLeft=n.scrollLeft)},S=()=>{let w=null;f===window?w=u?u.getBoundingClientRect().height:0:f instanceof HTMLElement&&(w=f.getBoundingClientRect().top);const C=n.scrollLeft,D=a==null?void 0:a.getBoundingClientRect(),N=n.getBoundingClientRect();if(w&&D&&D.top<=w&&w<=N.bottom-D.height&&N.top<=w){if(l&&Array.from(l).forEach((I,b)=>{const k=I.getBoundingClientRect().width,O=c[b].getBoundingClientRect().width,x=`${Math.max(k,O)}px`;c[b].style.minWidth=x,c[b].style.width=x,c[b].style.maxWidth=x,I.style.minWidth=x,I.style.width=x,I.style.maxWidth=x}),a&&e.current){a.style.position="fixed",a.style.top=`${w}px`,a.style.overflow="hidden";const I=e.current.offsetWidth-e.current.clientWidth,b=`${N.width-I}px`;a.style.maxWidth=b,a.style.width=b,a.style.minWidth=b}p?p&&(n.removeChild(p),p=null,m()):(p=document.createElement("div"),p.style.width=`${D.width}px`,p.style.height=`${D.height}px`,p.className="placeholder-head",n.insertBefore(p,s)),n.scrollLeft=C,h()}},y=()=>{m(),S(),h()};return a&&a.classList.contains("sps-table__head--pinned")&&(f=rN(n)||window,f.addEventListener("scroll",S),window.addEventListener("resize",y),n.addEventListener("scroll",h),y()),()=>{f&&(f.removeEventListener("scroll",S),window.removeEventListener("resize",y)),n.removeEventListener("scroll",h)}})},iN=(e,t)=>{const n=()=>{if(!e.current||!t)return;const a=e.current,s=a==null?void 0:a.querySelector("table > thead"),i=a==null?void 0:a.querySelector("table"),l=a==null?void 0:a.querySelector(".shadow--top"),c=a==null?void 0:a.querySelector(".shadow--bottom");if(s&&i&&l&&c){c.style.left="0",c.style.bottom="0",l.style.left="0";const u=a.offsetHeight-(a==null?void 0:a.clientHeight),p=i.getBoundingClientRect().height,f=s.getBoundingClientRect().height,m=a.scrollTop,h=p+u-a.getBoundingClientRect().height-a.scrollTop,S=a.scrollLeft;c.style.bottom=`${-m}px`,c.style.left=`${S}px`,c.style.opacity=h>0?"1":"0",l.style.top=`${m+f}px`,l.style.left=`${S}px`,l.style.opacity=m>0?"1":"0"}};r.useLayoutEffect(()=>{if(e.current&&t){const a=e.current.querySelector("table > thead");return a&&(a.style.position="sticky",a.style.top="0",a.style.zIndex="2",a.style.backgroundColor="#fff"),e.current.addEventListener("scroll",n),()=>{var s;(s=e.current)==null||s.removeEventListener("scroll",n)}}},[]),r.useLayoutEffect(()=>{e.current&&t&&n()})},lN={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean",maxHeightPx:"number",maxHeightRem:"number",resizeable:"boolean",resizeState:"ResizeState",onResizeStateChange:"ResizeStateChangeHandler"};function Mn({children:e,className:t,onSortChange:n,sort:a,"data-testid":s,unsafelyReplaceClassName:i,maxHeightPx:l,maxHeightRem:c,resizeable:u,resizeState:p,onResizeStateChange:f,...m}){const h=$(i||"sps-table-container",t),S=l?l/16:c,y=S?{maxHeight:`${S}rem`}:{},w=r.useRef(null);return iN(w,S),sN(w),oN(w,S),r.createElement(aN,{resizeable:u,resizeState:p,onResizeStateChange:f,sort:a,onSortChange:n},r.createElement("div",{ref:w,className:h,style:y},r.createElement("div",{className:"sps-table__shadow shadow--top"}),r.createElement("div",{className:"sps-table__shadow shadow--bottom"}),r.createElement("table",{className:"sps-table",role:"table","data-testid":`${s}`,...m},e)))}Object.assign(Mn,{props:lN,displayName:"SpsTable"});function cN(e){if(!e||!e.parentElement)return null;let t=e.parentElement;for(;t;){if(t.tagName.toLowerCase()==="table")return t;t=t.parentElement}return null}const rm=({tableHeaderRef:e,resizerRef:t,resizeKey:n})=>{const{resizeable:a,resizeState:s,setSingleResizeState:i}=r.useContext(Ii),l=!!a&&!!n,c=l?s==null?void 0:s[n]:0;return r.useLayoutEffect(()=>{var k,O;let u,p=c,f=0;const m=cN(e.current),h=(k=e.current)==null?void 0:k.querySelector(".sps-table__column-resizer"),S=(O=e.current)==null?void 0:O.querySelector(".sps-table__column-resizer-guide");function y(){if(e.current&&u&&(h&&(h.style.backgroundColor=io.colors.blue200),S&&m&&(S.style.height=`${m.getBoundingClientRect().height}px`,S.style.display="block"),m)){const x=m.querySelectorAll("thead > tr > th");for(let L=0;L<x.length;L+=1){const A=x[L].querySelector(".sps-table__column-resizer");x[L].style.cursor="col-resize",x[L]!==e.current&&A&&(x[L].classList.remove("sps-table__header--resizeable"),A.style.display="none")}}}function w(){e.current&&u&&h&&S&&(h.style.right=`${f}px`,S.style.right=`${f}px`)}function C(){if(e.current){const x=p?`${p}px`:"";e.current.style.width=x,e.current.style.maxWidth=x,e.current.style.minWidth=x;const L=e.current.querySelector(".sps-table__header-cell-body");if(L&&(L.style.overflow=x?"hidden":"",L.style.textOverflow=x?"ellipsis":""),h&&S&&(h.style.right="0",h.style.backgroundColor="",S.style.right="0",S.style.display="none"),e.current.classList.contains("sps-table__cell--pinned")||(e.current.style.position="relative"),m){const A=m.querySelectorAll("thead > tr > th");for(let _=0;_<A.length;_+=1){const H=A[_].querySelector(".sps-table__header-cell-body"),M=A[_].querySelector(".sps-table__column-resizer");A[_].style.cursor="default",A[_]!==e.current&&M&&(A[_].classList.add("sps-table__header--resizeable"),M.style.display="block"),(H==null?void 0:H.textContent)&&!H.title&&(H.title=H.textContent)}const G=m.querySelectorAll(`tbody > tr > td:nth-of-type(${e.current.cellIndex+1})`);for(let _=0;_<G.length;_+=1)G[_].style.width=x,G[_].style.maxWidth=x,G[_].style.minWidth=x,G[_].style.overflowWrap=x?"break-word":"",G[_].style.whiteSpace=x?"normal":"",G[_].title||(G[_].title=G[_].textContent||"")}}}const D=x=>{!e.current||(x.preventDefault(),u=x.clientX,p=e.current.clientWidth,y())},N=x=>{if(!u||!e.current)return;const L=Math.max(Math.min(u-x.clientX,40),-40);L!==0&&(u=x.clientX,f+=L,p=Math.max(p-L,40),w())},I=()=>{!e.current||(u=0,f=0,C(),i(n,p))},b=()=>{p=0,C(),i(n,p)};return l&&t.current&&(t.current.addEventListener("dragstart",D),t.current.addEventListener("mousedown",D),t.current.addEventListener("dblclick",b),window.addEventListener("mousemove",N),window.addEventListener("dragend",I),window.addEventListener("mouseup",I),C()),()=>{t.current&&(t.current.removeEventListener("dragstart",D),t.current.removeEventListener("mousedown",D),t.current.removeEventListener("dblclick",b)),window.removeEventListener("mousemove",N),window.removeEventListener("dragend",I),window.removeEventListener("mouseup",I)}},[l,c,n,i]),{isResizeable:l}},sm={controlCell:"boolean",sortKey:"string",resizeKey:"string",pinned:"boolean"};function Ue({children:e,className:t,controlCell:n,sortKey:a,resizeKey:s="","data-testid":i,unsafelyReplaceClassName:l,pinned:c=!1,...u}){const{sort:p,setSort:f}=r.useContext(Ii),m=p==null?void 0:p.find(N=>N.key===a),h=()=>{if(a&&!n){const N=(m==null?void 0:m.direction)===V.SortDirection.ASCENDING?V.SortDirection.DESCENDING:V.SortDirection.ASCENDING;f([{key:a,direction:N}])}},S=N=>{(N.key==="Enter"||N.key===" "||N.key==="Spacebar")&&(N.preventDefault(),h())},y=r.useRef(null);am(c,y);const w=r.useRef(null),{isResizeable:C}=rm({tableHeaderRef:y,resizerRef:w,resizeKey:s}),D=$(l||"sps-table__header",n&&"sps-table__header--control",!a&&"sps-table__header--sort-disabled",(m==null?void 0:m.direction)===V.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",(m==null?void 0:m.direction)===V.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",c&&"sps-table__cell--pinned",C&&"sps-table__header--resizeable",t);return r.createElement("th",{className:D,ref:y,role:"columnheader","aria-sort":(m==null?void 0:m.direction)||"none","data-testid":`${i}__header`,...u},r.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${i}__header-cell-body`,onClick:h,tabIndex:a?0:void 0,onKeyDown:S},e),C&&r.createElement(r.Fragment,null,r.createElement("span",{ref:w,className:$("sps-table__column-resizer")}),r.createElement("span",{className:$("sps-table__column-resizer-guide")})))}Object.assign(Ue,{props:sm,displayName:"SpsTableHeader"});function om(e){return r.createElement(Ue,{...e})}Object.assign(om,{props:sm,displayName:"SpsTh"});const im={pinned:"boolean"};function ln({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:a,pinned:s,...i}){const l=$(a||"sps-table__head",s&&"sps-table__head--pinned",t);return r.createElement("thead",{className:l,"data-testid":`${n}__head`,...i},e)}Object.assign(ln,{props:im,displayName:"SpsTableHead"});function lm(e){return r.createElement(ln,{...e})}Object.assign(lm,{props:im,displayName:"SpsThead"});const cm={};function Be({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:a,...s}){const i=$(a||"sps-table__row",t);return r.createElement("tr",{className:i,role:"row","data-testid":`${n}__row`,...s},e)}Object.assign(Be,{props:cm,displayName:"SpsTableRow"});function dm(e){return r.createElement(Be,{...e})}Object.assign(dm,{props:cm,displayName:"SpsTr"});const um={};function cn(e){const{children:t,className:n,"data-testid":a,unsafelyReplaceClassName:s,...i}=e,l=$(s||"sps-table__body",n);return r.createElement("tbody",{className:l,"data-testid":`${a}__body`,...i},t)}Object.assign(cn,{props:um,displayName:"SpsTableBody"});function pm(e){return r.createElement(cn,{...e})}Object.assign(pm,{props:um,displayName:"SpsTbody"});const mm={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth",pinned:"boolean"};function oe(e){const{buttonCell:t,children:n,className:a,controlCell:s,"data-testid":i,unsafelyReplaceClassName:l,wrap:c,pinned:u=!1,...p}=e,f=$(l||"sps-table__cell",t&&"sps-table__cell--button-cell",s&&"sps-table__cell--control",c&&`sps-table__cell--text-wrap-${c}`,u&&"sps-table__cell--pinned",a),m=r.useRef(null);return am(u,m),r.createElement("td",{className:f,ref:m,role:"cell","data-testid":`${i}__cell`,...p},n)}Object.assign(oe,{props:mm,displayName:"SpsTableCell"});function fm(e){return r.createElement(oe,{...e})}Object.assign(fm,{props:mm,displayName:"SpsTd"});const dN={},uN="sps-icon-button-panel";function hm({children:e,className:t,...n}){const a=$(uN,t),[s]=yt(e,[{type:Ve,props:{kind:V.ButtonKind.ICON}}]);return r.createElement("div",{className:a,...n},s)}Object.assign(hm,{props:dN,displayName:"SpsIconButtonPanel"});const gm={generalUsage:{label:"General Usage",customSection:()=>r.createElement("section",{id:"table-general-usage"},r.createElement("div",{className:"flex-color-header"},r.createElement("h4",null,"General Usage"),r.createElement(Ve,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},kind:V.ButtonKind.LINK},"Back to Top")),r.createElement("h5",null,"Use Tables:"),r.createElement("ul",{className:"sps-body-14"},r.createElement("li",null,"Each record has more than 6 points of data"),r.createElement("li",null,"When more records need to be shown in the vertical space"),r.createElement("li",null,"When sorting options need to be precise (needs better explanation)."),r.createElement("li",null,"When tabular views are the expected/conventional view of thet data being displayed (one example: if the data is to be exported into a spreadsheet view).")),r.createElement("h5",null,"Avoid Tables:"),r.createElement("ul",{className:"sps-body-14"},r.createElement("li",null,"When large images need to be included amongst the data.")),r.createElement("div",null,"For additional help deciding which option best suits the data being displayed, refer to the List Usage Matrix."))},basic:{label:"Standard Tables",description:({NavigateTo:e})=>r.createElement(r.Fragment,null,r.createElement("div",{className:"sps-body-14"},"Tables display tabular data in columns and rows with a header row used to identify the type of content in each column. The most common style of content displayed in tables is text (Small Body Copy), but additional elements such as tags and icons can be used when necessary."),r.createElement("br",null),r.createElement("div",{className:"sps-body-14"},"Tables can be used in conjunction with the"," ",r.createElement(e,{to:"List Toolbar"},"List Toolbar")," and"," ",r.createElement(e,{to:"Pagination"},"Pagination")," components for extended capabilities.")),examples:{basic:{react:E.code`
+          calc(100% - ${a}px) ${-s}px`};return e.current&&(t(),e.current.addEventListener("scroll",t),window.addEventListener("scroll",t)),()=>{e.current&&e.current.removeEventListener("scroll",t),window.removeEventListener("scroll",t)}})},oN=(e,t)=>{r.useLayoutEffect(()=>{const n=e.current;if(!n)return;const a=n==null?void 0:n.querySelector("thead"),s=n==null?void 0:n.querySelector("table"),i=s==null?void 0:s.querySelector("tbody>tr"),l=i==null?void 0:i.querySelectorAll("td"),c=(a==null?void 0:a.querySelectorAll("th"))||[],u=document.body.querySelector(".sps-navbar-container");let p=n==null?void 0:n.querySelector(".placeholder-head"),f;const m=()=>{a&&(a.style.position=t?"sticky":"",a.style.top=t?"0":"",a.style.overflow="",a.style.maxWidth="",a.style.width="",a.style.minWidth=""),p&&(p.style.width="",p.style.height=""),l&&Array.from(l).forEach((w,C)=>{c[C].style.minWidth="",c[C].style.width="",c[C].style.maxWidth="",w.style.minWidth="",w.style.width="",w.style.maxWidth=""})},h=()=>{a&&n&&(a.scrollLeft=n.scrollLeft)},S=()=>{let w=null;f===window?w=u?u.getBoundingClientRect().height:0:f instanceof HTMLElement&&(w=f.getBoundingClientRect().top);const C=n.scrollLeft,D=a==null?void 0:a.getBoundingClientRect(),N=n.getBoundingClientRect();if(w&&D&&D.top<=w&&w<=N.bottom-D.height&&N.top<=w){if(l&&Array.from(l).forEach((I,b)=>{const k=I.getBoundingClientRect().width,O=c[b].getBoundingClientRect().width,x=`${Math.max(k,O)}px`;c[b].style.minWidth=x,c[b].style.width=x,c[b].style.maxWidth=x,I.style.minWidth=x,I.style.width=x,I.style.maxWidth=x}),a&&e.current){a.style.position="fixed",a.style.top=`${w}px`,a.style.overflow="hidden";const I=e.current.offsetWidth-e.current.clientWidth,b=`${N.width-I}px`;a.style.maxWidth=b,a.style.width=b,a.style.minWidth=b}p||(p=document.createElement("div"),p.style.width=`${D.width}px`,p.style.height=`${D.height}px`,p.className="placeholder-head",n.insertBefore(p,s))}else p&&(n.removeChild(p),p=null,m());n.scrollLeft=C,h()},y=()=>{m(),S(),h()};return a&&a.classList.contains("sps-table__head--pinned")&&(f=rN(n)||window,f.addEventListener("scroll",S),window.addEventListener("resize",y),n.addEventListener("scroll",h),y()),()=>{f&&(f.removeEventListener("scroll",S),window.removeEventListener("resize",y)),n.removeEventListener("scroll",h)}})},iN=(e,t)=>{const n=()=>{if(!e.current||!t)return;const a=e.current,s=a==null?void 0:a.querySelector("table > thead"),i=a==null?void 0:a.querySelector("table"),l=a==null?void 0:a.querySelector(".shadow--top"),c=a==null?void 0:a.querySelector(".shadow--bottom");if(s&&i&&l&&c){c.style.left="0",c.style.bottom="0",l.style.left="0";const u=a.offsetHeight-(a==null?void 0:a.clientHeight),p=i.getBoundingClientRect().height,f=s.getBoundingClientRect().height,m=a.scrollTop,h=p+u-a.getBoundingClientRect().height-a.scrollTop,S=a.scrollLeft;c.style.bottom=`${-m}px`,c.style.left=`${S}px`,c.style.opacity=h>0?"1":"0",l.style.top=`${m+f}px`,l.style.left=`${S}px`,l.style.opacity=m>0?"1":"0"}};r.useLayoutEffect(()=>{if(e.current&&t){const a=e.current.querySelector("table > thead");return a&&(a.style.position="sticky",a.style.top="0",a.style.zIndex="2",a.style.backgroundColor="#fff"),e.current.addEventListener("scroll",n),()=>{var s;(s=e.current)==null||s.removeEventListener("scroll",n)}}},[]),r.useLayoutEffect(()=>{e.current&&t&&n()})},lN={sort:"SortedColumn",onSortChange:"SortChangeHandler",selectable:"boolean",maxHeightPx:"number",maxHeightRem:"number",resizeable:"boolean",resizeState:"ResizeState",onResizeStateChange:"ResizeStateChangeHandler"};function Mn({children:e,className:t,onSortChange:n,sort:a,"data-testid":s,unsafelyReplaceClassName:i,maxHeightPx:l,maxHeightRem:c,resizeable:u,resizeState:p,onResizeStateChange:f,...m}){const h=$(i||"sps-table-container",t),S=l?l/16:c,y=S?{maxHeight:`${S}rem`}:{},w=r.useRef(null);return iN(w,S),sN(w),oN(w,S),r.createElement(aN,{resizeable:u,resizeState:p,onResizeStateChange:f,sort:a,onSortChange:n},r.createElement("div",{ref:w,className:h,style:y},r.createElement("div",{className:"sps-table__shadow shadow--top"}),r.createElement("div",{className:"sps-table__shadow shadow--bottom"}),r.createElement("table",{className:"sps-table",role:"table","data-testid":`${s}`,...m},e)))}Object.assign(Mn,{props:lN,displayName:"SpsTable"});function cN(e){if(!e||!e.parentElement)return null;let t=e.parentElement;for(;t;){if(t.tagName.toLowerCase()==="table")return t;t=t.parentElement}return null}const rm=({tableHeaderRef:e,resizerRef:t,resizeKey:n})=>{const{resizeable:a,resizeState:s,setSingleResizeState:i}=r.useContext(Ii),l=!!a&&!!n,c=l?s==null?void 0:s[n]:0;return r.useLayoutEffect(()=>{var k,O;let u,p=c,f=0;const m=cN(e.current),h=(k=e.current)==null?void 0:k.querySelector(".sps-table__column-resizer"),S=(O=e.current)==null?void 0:O.querySelector(".sps-table__column-resizer-guide");function y(){if(e.current&&u&&(h&&(h.style.backgroundColor=io.colors.blue200),S&&m&&(S.style.height=`${m.getBoundingClientRect().height}px`,S.style.display="block"),m)){const x=m.querySelectorAll("thead > tr > th");for(let L=0;L<x.length;L+=1){const A=x[L].querySelector(".sps-table__column-resizer");x[L].style.cursor="col-resize",x[L]!==e.current&&A&&(x[L].classList.remove("sps-table__header--resizeable"),A.style.display="none")}}}function w(){e.current&&u&&h&&S&&(h.style.right=`${f}px`,S.style.right=`${f}px`)}function C(){if(e.current){const x=p?`${p}px`:"";e.current.style.width=x,e.current.style.maxWidth=x,e.current.style.minWidth=x;const L=e.current.querySelector(".sps-table__header-cell-body");if(L&&(L.style.overflow=x?"hidden":"",L.style.textOverflow=x?"ellipsis":""),h&&S&&(h.style.right="0",h.style.backgroundColor="",S.style.right="0",S.style.display="none"),e.current.classList.contains("sps-table__cell--pinned")||(e.current.style.position="relative"),m){const A=m.querySelectorAll("thead > tr > th");for(let _=0;_<A.length;_+=1){const H=A[_].querySelector(".sps-table__header-cell-body"),M=A[_].querySelector(".sps-table__column-resizer");A[_].style.cursor="default",A[_]!==e.current&&M&&(A[_].classList.add("sps-table__header--resizeable"),M.style.display="block"),(H==null?void 0:H.textContent)&&!H.title&&(H.title=H.textContent)}const G=m.querySelectorAll(`tbody > tr > td:nth-of-type(${e.current.cellIndex+1})`);for(let _=0;_<G.length;_+=1)G[_].style.width=x,G[_].style.maxWidth=x,G[_].style.minWidth=x,G[_].style.overflowWrap=x?"break-word":"",G[_].style.whiteSpace=x?"normal":"",G[_].title||(G[_].title=G[_].textContent||"")}}}const D=x=>{!e.current||(x.preventDefault(),u=x.clientX,p=e.current.clientWidth,y())},N=x=>{if(!u||!e.current)return;const L=Math.max(Math.min(u-x.clientX,40),-40);L!==0&&(u=x.clientX,f+=L,p=Math.max(p-L,40),w())},I=()=>{!e.current||(u=0,f=0,C(),i(n,p))},b=()=>{p=0,C(),i(n,p)};return l&&t.current&&(t.current.addEventListener("dragstart",D),t.current.addEventListener("mousedown",D),t.current.addEventListener("dblclick",b),window.addEventListener("mousemove",N),window.addEventListener("dragend",I),window.addEventListener("mouseup",I),C()),()=>{t.current&&(t.current.removeEventListener("dragstart",D),t.current.removeEventListener("mousedown",D),t.current.removeEventListener("dblclick",b)),window.removeEventListener("mousemove",N),window.removeEventListener("dragend",I),window.removeEventListener("mouseup",I)}},[l,c,n,i]),{isResizeable:l}},sm={controlCell:"boolean",sortKey:"string",resizeKey:"string",pinned:"boolean"};function Ue({children:e,className:t,controlCell:n,sortKey:a,resizeKey:s="","data-testid":i,unsafelyReplaceClassName:l,pinned:c=!1,...u}){const{sort:p,setSort:f}=r.useContext(Ii),m=p==null?void 0:p.find(N=>N.key===a),h=()=>{if(a&&!n){const N=(m==null?void 0:m.direction)===V.SortDirection.ASCENDING?V.SortDirection.DESCENDING:V.SortDirection.ASCENDING;f([{key:a,direction:N}])}},S=N=>{(N.key==="Enter"||N.key===" "||N.key==="Spacebar")&&(N.preventDefault(),h())},y=r.useRef(null);am(c,y);const w=r.useRef(null),{isResizeable:C}=rm({tableHeaderRef:y,resizerRef:w,resizeKey:s}),D=$(l||"sps-table__header",n&&"sps-table__header--control",!a&&"sps-table__header--sort-disabled",(m==null?void 0:m.direction)===V.SortDirection.ASCENDING&&"sps-table__header--sorted-asc",(m==null?void 0:m.direction)===V.SortDirection.DESCENDING&&"sps-table__header--sorted-desc",c&&"sps-table__cell--pinned",C&&"sps-table__header--resizeable",t);return r.createElement("th",{className:D,ref:y,role:"columnheader","aria-sort":(m==null?void 0:m.direction)||"none","data-testid":`${i}__header`,...u},r.createElement("span",{className:"sps-table__header-cell-body","data-testid":`${i}__header-cell-body`,onClick:h,tabIndex:a?0:void 0,onKeyDown:S},e),C&&r.createElement(r.Fragment,null,r.createElement("span",{ref:w,className:$("sps-table__column-resizer")}),r.createElement("span",{className:$("sps-table__column-resizer-guide")})))}Object.assign(Ue,{props:sm,displayName:"SpsTableHeader"});function om(e){return r.createElement(Ue,{...e})}Object.assign(om,{props:sm,displayName:"SpsTh"});const im={pinned:"boolean"};function ln({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:a,pinned:s,...i}){const l=$(a||"sps-table__head",s&&"sps-table__head--pinned",t);return r.createElement("thead",{className:l,"data-testid":`${n}__head`,...i},e)}Object.assign(ln,{props:im,displayName:"SpsTableHead"});function lm(e){return r.createElement(ln,{...e})}Object.assign(lm,{props:im,displayName:"SpsThead"});const cm={};function Be({children:e,className:t,"data-testid":n,unsafelyReplaceClassName:a,...s}){const i=$(a||"sps-table__row",t);return r.createElement("tr",{className:i,role:"row","data-testid":`${n}__row`,...s},e)}Object.assign(Be,{props:cm,displayName:"SpsTableRow"});function dm(e){return r.createElement(Be,{...e})}Object.assign(dm,{props:cm,displayName:"SpsTr"});const um={};function cn(e){const{children:t,className:n,"data-testid":a,unsafelyReplaceClassName:s,...i}=e,l=$(s||"sps-table__body",n);return r.createElement("tbody",{className:l,"data-testid":`${a}__body`,...i},t)}Object.assign(cn,{props:um,displayName:"SpsTableBody"});function pm(e){return r.createElement(cn,{...e})}Object.assign(pm,{props:um,displayName:"SpsTbody"});const mm={buttonCell:"boolean",controlCell:"boolean",wrap:"SpsTableCellWrapWidth",pinned:"boolean"};function oe(e){const{buttonCell:t,children:n,className:a,controlCell:s,"data-testid":i,unsafelyReplaceClassName:l,wrap:c,pinned:u=!1,...p}=e,f=$(l||"sps-table__cell",t&&"sps-table__cell--button-cell",s&&"sps-table__cell--control",c&&`sps-table__cell--text-wrap-${c}`,u&&"sps-table__cell--pinned",a),m=r.useRef(null);return am(u,m),r.createElement("td",{className:f,ref:m,role:"cell","data-testid":`${i}__cell`,...p},n)}Object.assign(oe,{props:mm,displayName:"SpsTableCell"});function fm(e){return r.createElement(oe,{...e})}Object.assign(fm,{props:mm,displayName:"SpsTd"});const dN={},uN="sps-icon-button-panel";function hm({children:e,className:t,...n}){const a=$(uN,t),[s]=yt(e,[{type:Ve,props:{kind:V.ButtonKind.ICON}}]);return r.createElement("div",{className:a,...n},s)}Object.assign(hm,{props:dN,displayName:"SpsIconButtonPanel"});const gm={generalUsage:{label:"General Usage",customSection:()=>r.createElement("section",{id:"table-general-usage"},r.createElement("div",{className:"flex-color-header"},r.createElement("h4",null,"General Usage"),r.createElement(Ve,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},kind:V.ButtonKind.LINK},"Back to Top")),r.createElement("h5",null,"Use Tables:"),r.createElement("ul",{className:"sps-body-14"},r.createElement("li",null,"Each record has more than 6 points of data"),r.createElement("li",null,"When more records need to be shown in the vertical space"),r.createElement("li",null,"When sorting options need to be precise (needs better explanation)."),r.createElement("li",null,"When tabular views are the expected/conventional view of thet data being displayed (one example: if the data is to be exported into a spreadsheet view).")),r.createElement("h5",null,"Avoid Tables:"),r.createElement("ul",{className:"sps-body-14"},r.createElement("li",null,"When large images need to be included amongst the data.")),r.createElement("div",null,"For additional help deciding which option best suits the data being displayed, refer to the List Usage Matrix."))},basic:{label:"Standard Tables",description:({NavigateTo:e})=>r.createElement(r.Fragment,null,r.createElement("div",{className:"sps-body-14"},"Tables display tabular data in columns and rows with a header row used to identify the type of content in each column. The most common style of content displayed in tables is text (Small Body Copy), but additional elements such as tags and icons can be used when necessary."),r.createElement("br",null),r.createElement("div",{className:"sps-body-14"},"Tables can be used in conjunction with the"," ",r.createElement(e,{to:"List Toolbar"},"List Toolbar")," and"," ",r.createElement(e,{to:"Pagination"},"Pagination")," components for extended capabilities.")),examples:{basic:{react:E.code`
                     function DemoComponent() {
                         const items = [
                             {

package/lib/index.es.js

@@ -16261,7 +16261,8 @@ const CD = {
   optional: "boolean",
   enabled: "boolean",
   onToggled: "(isEnabled: boolean) => void",
-  tooltip: "string"
+  tooltip: "string",
+  applyNestedStyles: "boolean"
 };
 function cp({
   children: e,
@@ -16276,57 +16277,58 @@ function cp({
   enabled: p = !1,
   onToggled: f,
   tooltip: m,
-  "data-testid": h
+  applyNestedStyles: h,
+  "data-testid": b
 }) {
-  const b = s || a, y = r.useRef(null), w = r.useRef(null), [T, C] = r.useState(we.HIDDEN), [N, I] = r.useState(!1), [S, k] = r.useState(p);
+  const y = s || a, w = r.useRef(null), T = r.useRef(null), [C, N] = r.useState(we.HIDDEN), [I, S] = r.useState(!1), [k, O] = r.useState(p);
   Od(() => {
-    f == null || f(S);
-  }, [S]), r.useEffect(() => {
-    if (b || i) {
-      const L = b && b.isFocused() || i && i.isFocused();
-      !N && L ? C(we.VISIBLE) : N && !L && C(we.HIDDEN), I(L || !1);
+    f == null || f(k);
+  }, [k]), r.useEffect(() => {
+    if (y || i) {
+      const A = y && y.isFocused() || i && i.isFocused();
+      !I && A ? N(we.VISIBLE) : I && !A && N(we.HIDDEN), S(A || !1);
     }
   });
-  const O = $(
-    c || "sps-fieldset",
-    (b && !b.isPristine() && b.invalid || i && (!i.isValid() || !i.contentsAreValid())) && "sps-fieldset--error",
+  const x = $(
+    c || h ? "nested-styles-fieldset" : "sps-fieldset",
+    (y && !y.isPristine() && y.invalid || i && (!i.isValid() || !i.contentsAreValid())) && "sps-fieldset--error",
     t,
-    u && !S && "sps-fieldset--collapsed"
+    u && !k && "sps-fieldset--collapsed"
   );
-  function x() {
-    C(T === we.VISIBLE ? we.HIDDEN : we.VISIBLE);
+  function L() {
+    N(C === we.VISIBLE ? we.HIDDEN : we.VISIBLE);
   }
   return /* @__PURE__ */ r.createElement("div", {
     className: "sps-fieldset-container"
   }, /* @__PURE__ */ r.createElement("fieldset", {
-    className: O,
-    "data-testid": h
+    className: x,
+    "data-testid": b
   }, /* @__PURE__ */ r.createElement("legend", {
     className: "sps-fieldset__legend",
-    ref: y,
-    onMouseEnter: () => C(we.VISIBLE),
-    onMouseLeave: () => C(we.DELAYED_HIDDEN),
-    onClick: x
+    ref: w,
+    onMouseEnter: () => N(we.VISIBLE),
+    onMouseLeave: () => N(we.DELAYED_HIDDEN),
+    onClick: L
   }, u && /* @__PURE__ */ r.createElement(da, {
-    checked: S,
+    checked: k,
     className: "d-inline-flex pr-1",
     onChange: () => {
-      k(!S);
+      O(!k);
     },
-    "data-testid": `${h}__checkbox`
+    "data-testid": `${b}__checkbox`
   }), l, m && /* @__PURE__ */ r.createElement("span", {
     className: "sps-fieldset__legend-icon",
-    ref: w
+    ref: T
   }, /* @__PURE__ */ r.createElement(Kt, {
     icon: je.INFO_CIRCLE,
-    "data-testid": `${h}__info-icon`
+    "data-testid": `${b}__info-icon`
   }))), m && /* @__PURE__ */ r.createElement(It, {
-    for: w
+    for: T
   }, m), /* @__PURE__ */ r.createElement(It, {
-    for: y,
+    for: w,
     kind: Bt.ERROR,
     showOn: st.MANUAL,
-    isShown: T
+    isShown: C
   }, Et(n)), e));
 }
 Object.assign(cp, {
@@ -17896,8 +17898,10 @@ const gi = r.createContext({
           const I = e.current.offsetWidth - e.current.clientWidth, S = `${N.width - I}px`;
           a.style.maxWidth = S, a.style.width = S, a.style.minWidth = S;
         }
-        p ? p && (n.removeChild(p), p = null, m()) : (p = document.createElement("div"), p.style.width = `${C.width}px`, p.style.height = `${C.height}px`, p.className = "placeholder-head", n.insertBefore(p, s)), n.scrollLeft = T, h();
-      }
+        p || (p = document.createElement("div"), p.style.width = `${C.width}px`, p.style.height = `${C.height}px`, p.className = "placeholder-head", n.insertBefore(p, s));
+      } else
+        p && (n.removeChild(p), p = null, m());
+      n.scrollLeft = T, h();
     }, y = () => {
       m(), b(), h();
     };

package/package.json

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