@sps-woodland/sorting-header 8.7.7 → 8.8.0

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),c=require("@sps-woodland/core"),R=require("@spscommerce/utils");function A(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const a=A(P);function H(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function N(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),t.push.apply(t,r)}return t}function D(e){for(var n=1;n<arguments.length;n++){var t=arguments[n]!=null?arguments[n]:{};n%2?N(Object(t),!0).forEach(function(r){H(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):N(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var T=(e,n,t)=>{for(var r of Object.keys(e)){var i;if(e[r]!==((i=n[r])!==null&&i!==void 0?i:t[r]))return!1}return!0},v=e=>n=>{var t=e.defaultClassName,r=D(D({},e.defaultVariants),n);for(var i in r){var l,f=(l=r[i])!==null&&l!==void 0?l:e.defaultVariants[i];if(f!=null){var m=f;typeof m=="boolean"&&(m=m===!0?"true":"false");var d=e.variantClassNames[i][m];d&&(t+=" "+d)}}for(var[p,s]of e.compoundVariants)T(p,r,e.defaultVariants)&&(t+=" "+s);return t},V=v({defaultClassName:"_7ljhcs0",variantClassNames:{up:{true:"_7ljhcs1"},down:{true:"_7ljhcs2"}},defaultVariants:{},compoundVariants:[]}),j=v({defaultClassName:"_1crs4gl0",variantClassNames:{disabled:{true:"_1crs4gl1"},active:{true:"_1crs4gl2"}},defaultVariants:{disabled:!1,active:!1},compoundVariants:[]});function w({className:e,sortKey:n,sort:t,sortDisabled:r,onSortChange:i,onClick:l,children:f,style:m,widthPx:d,widthRem:p,...s}){const u=a.useMemo(()=>{const y=!!n&&!r&&Array.isArray(t)&&t.find(o=>o.key===n);return y?y.direction:void 0},[t,n,r]),g=d?d/16:p,h=g?{...m,width:`${g}rem`}:m;return a.createElement("div",{className:c.cl(e,j({disabled:r,active:!!u}),u&&V({up:u===c.SortDirection.ASCENDING,down:u===c.SortDirection.DESCENDING})),onClick:y=>{n&&!r&&i&&i([{key:n,direction:u===c.SortDirection.ASCENDING?c.SortDirection.DESCENDING:c.SortDirection.ASCENDING}]),l&&l(y)},style:h,...s},f)}c.Metadata.set(w,{name:"Sorting Header Cell",props:{sortKey:{type:"string"},sort:{type:"SortedColumn[]"},sortDisabled:{type:"boolean"},onSortChange:{type:"SortChangeHandler"},widthPx:{type:"number"},widthRem:{type:"number"}}});var O=v({defaultClassName:"sk81640",variantClassNames:{pinned:{true:"sk81641",false:"sk81642"}},defaultVariants:{pinned:!1},compoundVariants:[]});function E({sort:e,onSortChange:n,children:t,className:r,pinSortingHeader:i=!1,...l}){const[f,m]=a.useState(!1),d=a.useRef(null),p=a.useRef(null),s=a.useRef({height:"",width:"",unpinAtTop:0,unpinAtBottom:0,cellWidths:[]}),u=a.useCallback(()=>{var o;if(i&&d.current){const C=(o=d.current.parentElement)==null?void 0:o.getBoundingClientRect();if(C){const S=d.current.getBoundingClientRect();s.current.height=`${S.height}px`,s.current.width=`${S.width}px`,s.current.unpinAtBottom=C.bottom+window.scrollY-S.height*2,s.current.unpinAtTop=S.top+window.scrollY-S.height,s.current.cellWidths=[],d.current.childNodes.forEach((b,I)=>{b instanceof HTMLElement&&(s.current.cellWidths[I]=`${b.getBoundingClientRect().width}px`)})}}},[i]),g=a.useCallback(()=>{p.current&&(p.current.style.width=s.current.width,p.current.style.height=s.current.height,p.current.childNodes.forEach((o,C)=>{o instanceof HTMLElement&&(o.style.width=s.current.cellWidths[C]||"")}))},[]);a.useLayoutEffect(()=>{u()}),a.useLayoutEffect(()=>{let o;return i&&(o=R.lockToAnimationFrames(()=>{u();const{unpinAtTop:C,unpinAtBottom:S}=s.current;C&&S&&(window.scrollY>=C&&window.scrollY<=S?m(!0):m(!1))}),window.addEventListener("scroll",o),o()),()=>{o&&window.removeEventListener("scroll",o)}},[i,u]),a.useLayoutEffect(()=>{let o;return f&&(o=()=>{u(),g()},window.addEventListener("resize",o),o()),()=>{o&&window.removeEventListener("resize",o)}},[f,u,g]);const[h]=c.selectChildren(t,[{type:w}]),y=c.modChildren(h,()=>[{sort:e,onSortChange:n}]);return a.createElement(a.Fragment,null,a.createElement("div",{ref:d,className:c.cl(r,O({pinned:!1})),...l},y),f&&a.createElement("div",{ref:p,className:c.cl(r,O({pinned:!0})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},y))}c.Metadata.set(E,{name:"Sorting Header",props:{sort:{type:"SortedColumn[]"},onSortChange:{type:"SortChangeHandler"}}});const M={components:[E,w],examples:{basic:{label:"Sorting Header",examples:{basic:{react:R.code`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react"),a=require("@sps-woodland/core"),G=require("@spscommerce/utils");function x(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const i=x(L);function W(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function V(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter(function(c){return Object.getOwnPropertyDescriptor(e,c).enumerable})),r.push.apply(r,t)}return r}function j(e){for(var n=1;n<arguments.length;n++){var r=arguments[n]!=null?arguments[n]:{};n%2?V(Object(r),!0).forEach(function(t){W(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):V(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var _=(e,n,r)=>{for(var t of Object.keys(e)){var c;if(e[t]!==((c=n[t])!==null&&c!==void 0?c:r[t]))return!1}return!0},A=e=>n=>{var r=e.defaultClassName,t=j(j({},e.defaultVariants),n);for(var c in t){var p,s=(p=t[c])!==null&&p!==void 0?p:e.defaultVariants[c];if(s!=null){var m=s;typeof m=="boolean"&&(m=m===!0?"true":"false");var y=e.variantClassNames[c][m];y&&(r+=" "+y)}}for(var[l,f]of e.compoundVariants)_(l,t,e.defaultVariants)&&(r+=" "+f);return r},M=A({defaultClassName:"_7ljhcs0",variantClassNames:{up:{true:"_7ljhcs1"},down:{true:"_7ljhcs2"}},defaultVariants:{},compoundVariants:[]}),K=A({defaultClassName:"_1crs4gl0",variantClassNames:{disabled:{true:"_1crs4gl1"},active:{true:"_1crs4gl2"},__autoLayout:{true:"_1crs4gl3",false:"_1crs4gl4"}},defaultVariants:{disabled:!1,active:!1,__autoLayout:!1},compoundVariants:[]});function k({className:e,sortKey:n,sort:r,sortDisabled:t,onSortChange:c,onClick:p,children:s,style:m,widthPx:y,widthRem:l,__autoLayout:f=!1,...d}){const u=i.useMemo(()=>{const g=!!n&&!t&&Array.isArray(r)&&r.find(w=>w.key===n);return g?g.direction:void 0},[r,n,t]),E=y?y/16:l,C=E?{...m,width:`${E}rem`}:m,v=g=>{n&&!t&&c&&c([{key:n,direction:u===a.SortDirection.ASCENDING?a.SortDirection.DESCENDING:a.SortDirection.ASCENDING}]),p&&p(g)};return f?i.createElement("td",{className:a.cl(e,K({disabled:t,active:!!u,__autoLayout:f}),u&&M({up:u===a.SortDirection.ASCENDING,down:u===a.SortDirection.DESCENDING})),onClick:v,style:C,...d},s):i.createElement("div",{className:a.cl(e,K({disabled:t,active:!!u,__autoLayout:f}),u&&M({up:u===a.SortDirection.ASCENDING,down:u===a.SortDirection.DESCENDING})),onClick:v,style:C,...d},s)}a.Metadata.set(k,{name:"Sorting Header Cell",props:{sortKey:{type:"string"},sort:{type:"SortedColumn[]"},sortDisabled:{type:"boolean"},onSortChange:{type:"SortChangeHandler"},widthPx:{type:"number"},widthRem:{type:"number"}}});var R=A({defaultClassName:"sk81640",variantClassNames:{pinned:{true:"sk81641",false:"sk81642"},scrollParentIsWindow:{true:"sk81643",false:"sk81644"},__autoLayout:{true:"sk81645",false:"sk81646"}},defaultVariants:{pinned:!1,scrollParentIsWindow:!1,__autoLayout:!1},compoundVariants:[[{pinned:!0,scrollParentIsWindow:!0},"sk81647"]]}),z="sk81648";function T({sort:e,onSortChange:n,children:r,className:t,pinSortingHeader:c=!1,__autoLayout:p=!1,...s}){const[m,y]=i.useState(!1),l=i.useRef(null),f=i.useRef(null),d=i.useRef({height:"",width:"",unpinAtTop:0,unpinAtBottom:0,cellWidths:[]}),u=i.useCallback(()=>l.current&&a.getScrollParent(l.current)||window,[]),E=i.useCallback(o=>{const S=o||u();return S.scrollY||S.scrollTop||0},[]),C=i.useCallback(o=>{var S,b,N;if(c&&l.current){const P=o||u(),I=E(P),O=p?(b=(S=l.current.parentElement)==null?void 0:S.parentElement)==null?void 0:b.getBoundingClientRect():(N=l.current.parentElement)==null?void 0:N.getBoundingClientRect();if(O){const h=l.current.getBoundingClientRect();d.current.height=`${h.height}px`,d.current.width=`${h.width}px`,P===window?(d.current.unpinAtBottom=O.bottom+I-h.height*2,d.current.unpinAtTop=h.top+I-h.height):(d.current.unpinAtBottom=O.bottom+I-h.height*2,d.current.unpinAtTop=O.top+I),d.current.cellWidths=[],l.current.childNodes.forEach((H,B)=>{H instanceof HTMLElement&&(d.current.cellWidths[B]=`${H.getBoundingClientRect().width}px`)})}}},[c]),v=i.useCallback(()=>{f.current&&(f.current.style.width=d.current.width,f.current.style.height=d.current.height,f.current.childNodes.forEach((o,S)=>{o instanceof HTMLElement&&(o.style.width=d.current.cellWidths[S]||"")}))},[]);i.useLayoutEffect(()=>{C()}),i.useLayoutEffect(()=>{let o;const S=u();return c?(o=G.lockToAnimationFrames(()=>{C(S);const{unpinAtTop:b,unpinAtBottom:N}=d.current,P=E(S);b&&N&&(P>=b&&P<=N?(y(!0),l.current&&(l.current.style.visibility="hidden")):(y(!1),l.current&&(l.current.style.visibility="visible")))}),S.addEventListener("scroll",o),o()):l.current&&(l.current.style.visibility="visible"),()=>{o&&S.removeEventListener("scroll",o)}},[c,C]),i.useLayoutEffect(()=>{let o;return m&&(o=()=>{C(),v()},window.addEventListener("resize",o),o()),()=>{o&&window.removeEventListener("resize",o)}},[m,C,v]);const[g]=a.selectChildren(r,[{type:k}]),w=a.modChildren(g,()=>[{sort:e,onSortChange:n}]),D=u()===window;if(p){const o=i.createElement("tr",null,i.createElement("td",{className:a.cl(z),colSpan:100}));return i.createElement(i.Fragment,null,i.createElement("tr",{ref:l,className:a.cl(R({pinned:!1,scrollParentIsWindow:D,__autoLayout:p}),t),...s},w),o,m&&i.createElement("tr",{ref:f,className:a.cl(t,R({pinned:!0,scrollParentIsWindow:D,__autoLayout:p})),...s,id:s.id?`pinned-${s.id}`:void 0,"data-testid":s["data-testid"]?`pinned-${s["data-testid"]}`:void 0},w))}return i.createElement(i.Fragment,null,i.createElement("div",{ref:l,className:a.cl(t,R({pinned:!1,scrollParentIsWindow:D,__autoLayout:p})),...s},w),m&&i.createElement("div",{ref:f,className:a.cl(t,R({pinned:!0,scrollParentIsWindow:D,__autoLayout:p})),...s,id:s.id?`pinned-${s.id}`:void 0,"data-testid":s["data-testid"]?`pinned-${s["data-testid"]}`:void 0},w))}a.Metadata.set(T,{name:"Sorting Header",props:{sort:{type:"SortedColumn[]"},onSortChange:{type:"SortChangeHandler"}}});const F={components:[T,k],examples:{basic:{label:"Sorting Header",examples:{basic:{react:G.code`
           import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
           import { Icon } from "@sps-woodland/core";
           import { ContentRow } from "@sps-woodland/content-row";
@@ -92,4 +92,4 @@
               </>
             );
           }
-          `}}}}},k={"Sorting Header":M};exports.MANIFEST=k;exports.SortingHeader=E;exports.SortingHeaderCell=w;
+          `}}}}},Y={"Sorting Header":F};exports.MANIFEST=Y;exports.SortingHeader=T;exports.SortingHeaderCell=k;

package/lib/index.es.js

@@ -1,107 +1,120 @@
-import * as a from "react";
-import { Metadata as D, cl as g, SortDirection as w, selectChildren as P, modChildren as V } from "@sps-woodland/core";
-import { lockToAnimationFrames as H, code as T } from "@spscommerce/utils";
-function K(e, n, r) {
-  return n in e ? Object.defineProperty(e, n, {
+import * as n from "react";
+import { Metadata as G, cl as g, SortDirection as y, getScrollParent as L, selectChildren as W, modChildren as z } from "@sps-woodland/core";
+import { lockToAnimationFrames as F, code as Y } from "@spscommerce/utils";
+function _(e, i, r) {
+  return i in e ? Object.defineProperty(e, i, {
     value: r,
     enumerable: !0,
     configurable: !0,
     writable: !0
-  }) : e[n] = r, e;
+  }) : e[i] = r, e;
 }
-function b(e, n) {
+function V(e, i) {
   var r = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
     var t = Object.getOwnPropertySymbols(e);
-    n && (t = t.filter(function(i) {
-      return Object.getOwnPropertyDescriptor(e, i).enumerable;
+    i && (t = t.filter(function(s) {
+      return Object.getOwnPropertyDescriptor(e, s).enumerable;
     })), r.push.apply(r, t);
   }
   return r;
 }
-function R(e) {
-  for (var n = 1; n < arguments.length; n++) {
-    var r = arguments[n] != null ? arguments[n] : {};
-    n % 2 ? b(Object(r), !0).forEach(function(t) {
-      K(e, t, r[t]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : b(Object(r)).forEach(function(t) {
+function K(e) {
+  for (var i = 1; i < arguments.length; i++) {
+    var r = arguments[i] != null ? arguments[i] : {};
+    i % 2 ? V(Object(r), !0).forEach(function(t) {
+      _(e, t, r[t]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : V(Object(r)).forEach(function(t) {
       Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
     });
   }
   return e;
 }
-var k = (e, n, r) => {
+var $ = (e, i, r) => {
   for (var t of Object.keys(e)) {
-    var i;
-    if (e[t] !== ((i = n[t]) !== null && i !== void 0 ? i : r[t]))
+    var s;
+    if (e[t] !== ((s = i[t]) !== null && s !== void 0 ? s : r[t]))
       return !1;
   }
   return !0;
-}, E = (e) => (n) => {
-  var r = e.defaultClassName, t = R(R({}, e.defaultVariants), n);
-  for (var i in t) {
-    var l, p = (l = t[i]) !== null && l !== void 0 ? l : e.defaultVariants[i];
-    if (p != null) {
-      var u = p;
-      typeof u == "boolean" && (u = u === !0 ? "true" : "false");
-      var d = (
+}, O = (e) => (i) => {
+  var r = e.defaultClassName, t = K(K({}, e.defaultVariants), i);
+  for (var s in t) {
+    var u, a = (u = t[s]) !== null && u !== void 0 ? u : e.defaultVariants[s];
+    if (a != null) {
+      var m = a;
+      typeof m == "boolean" && (m = m === !0 ? "true" : "false");
+      var S = (
         // @ts-expect-error
-        e.variantClassNames[i][u]
+        e.variantClassNames[s][m]
       );
-      d && (r += " " + d);
+      S && (r += " " + S);
     }
   }
-  for (var [m, s] of e.compoundVariants)
-    k(m, t, e.defaultVariants) && (r += " " + s);
+  for (var [l, p] of e.compoundVariants)
+    $(l, t, e.defaultVariants) && (r += " " + p);
   return r;
-}, j = E({ defaultClassName: "_7ljhcs0", variantClassNames: { up: { true: "_7ljhcs1" }, down: { true: "_7ljhcs2" } }, defaultVariants: {}, compoundVariants: [] }), L = E({ defaultClassName: "_1crs4gl0", variantClassNames: { disabled: { true: "_1crs4gl1" }, active: { true: "_1crs4gl2" } }, defaultVariants: { disabled: !1, active: !1 }, compoundVariants: [] });
-function v({
+}, j = O({ defaultClassName: "_7ljhcs0", variantClassNames: { up: { true: "_7ljhcs1" }, down: { true: "_7ljhcs2" } }, defaultVariants: {}, compoundVariants: [] }), M = O({ defaultClassName: "_1crs4gl0", variantClassNames: { disabled: { true: "_1crs4gl1" }, active: { true: "_1crs4gl2" }, __autoLayout: { true: "_1crs4gl3", false: "_1crs4gl4" } }, defaultVariants: { disabled: !1, active: !1, __autoLayout: !1 }, compoundVariants: [] });
+function H({
   className: e,
-  sortKey: n,
+  sortKey: i,
   sort: r,
   sortDisabled: t,
-  onSortChange: i,
-  onClick: l,
-  children: p,
-  style: u,
-  widthPx: d,
-  widthRem: m,
-  ...s
+  onSortChange: s,
+  onClick: u,
+  children: a,
+  style: m,
+  widthPx: S,
+  widthRem: l,
+  __autoLayout: p = !1,
+  ...c
 }) {
-  const c = a.useMemo(() => {
-    const S = !!n && !t && Array.isArray(r) && r.find((o) => o.key === n);
-    return S ? S.direction : void 0;
-  }, [
-    r,
-    n,
-    t
-  ]), C = d ? d / 16 : m, h = C ? { ...u, width: `${C}rem` } : u;
-  return /* @__PURE__ */ a.createElement(
+  const d = n.useMemo(() => {
+    const w = !!i && !t && Array.isArray(r) && r.find((h) => h.key === i);
+    return w ? w.direction : void 0;
+  }, [r, i, t]), v = S ? S / 16 : l, C = v ? { ...m, width: `${v}rem` } : m, b = (w) => {
+    i && !t && s && s([
+      {
+        key: i,
+        direction: d === y.ASCENDING ? y.DESCENDING : y.ASCENDING
+      }
+    ]), u && u(w);
+  };
+  return p ? /* @__PURE__ */ n.createElement(
+    "td",
+    {
+      className: g(
+        e,
+        M({ disabled: t, active: !!d, __autoLayout: p }),
+        d && j({
+          up: d === y.ASCENDING,
+          down: d === y.DESCENDING
+        })
+      ),
+      onClick: b,
+      style: C,
+      ...c
+    },
+    a
+  ) : /* @__PURE__ */ n.createElement(
     "div",
     {
       className: g(
         e,
-        L({ disabled: t, active: !!c }),
-        c && j({
-          up: c === w.ASCENDING,
-          down: c === w.DESCENDING
+        M({ disabled: t, active: !!d, __autoLayout: p }),
+        d && j({
+          up: d === y.ASCENDING,
+          down: d === y.DESCENDING
         })
       ),
-      onClick: (S) => {
-        n && !t && i && i([
-          {
-            key: n,
-            direction: c === w.ASCENDING ? w.DESCENDING : w.ASCENDING
-          }
-        ]), l && l(S);
-      },
-      style: h,
-      ...s
+      onClick: b,
+      style: C,
+      ...c
     },
-    p
+    a
   );
 }
-D.set(v, {
+G.set(H, {
   name: "Sorting Header Cell",
   props: {
     sortKey: { type: "string" },
@@ -112,96 +125,134 @@ D.set(v, {
     widthRem: { type: "number" }
   }
 });
-var I = E({ defaultClassName: "sk81640", variantClassNames: { pinned: { true: "sk81641", false: "sk81642" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] });
-function O({
+var D = O({ defaultClassName: "sk81640", variantClassNames: { pinned: { true: "sk81641", false: "sk81642" }, scrollParentIsWindow: { true: "sk81643", false: "sk81644" }, __autoLayout: { true: "sk81645", false: "sk81646" } }, defaultVariants: { pinned: !1, scrollParentIsWindow: !1, __autoLayout: !1 }, compoundVariants: [[{ pinned: !0, scrollParentIsWindow: !0 }, "sk81647"]] }), U = "sk81648";
+function B({
   sort: e,
-  onSortChange: n,
+  onSortChange: i,
   children: r,
   className: t,
-  pinSortingHeader: i = !1,
-  ...l
+  pinSortingHeader: s = !1,
+  __autoLayout: u = !1,
+  ...a
 }) {
-  const [p, u] = a.useState(!1), d = a.useRef(null), m = a.useRef(null), s = a.useRef({
+  const [m, S] = n.useState(!1), l = n.useRef(null), p = n.useRef(null), c = n.useRef({
     height: "",
     width: "",
     unpinAtTop: 0,
     unpinAtBottom: 0,
     cellWidths: []
-  }), c = a.useCallback(() => {
-    var o;
-    if (i && d.current) {
-      const y = (o = d.current.parentElement) == null ? void 0 : o.getBoundingClientRect();
-      if (y) {
-        const f = d.current.getBoundingClientRect();
-        s.current.height = `${f.height}px`, s.current.width = `${f.width}px`, s.current.unpinAtBottom = y.bottom + window.scrollY - f.height * 2, s.current.unpinAtTop = f.top + window.scrollY - f.height, s.current.cellWidths = [], d.current.childNodes.forEach((N, A) => {
-          N instanceof HTMLElement && (s.current.cellWidths[A] = `${N.getBoundingClientRect().width}px`);
-        });
+  }), d = n.useCallback(() => l.current && L(l.current) || window, []), v = n.useCallback((o) => {
+    const f = o || d();
+    return f.scrollY || f.scrollTop || 0;
+  }, []), C = n.useCallback(
+    (o) => {
+      var f, N, I;
+      if (s && l.current) {
+        const P = o || d(), k = v(P), A = u ? (N = (f = l.current.parentElement) == null ? void 0 : f.parentElement) == null ? void 0 : N.getBoundingClientRect() : (I = l.current.parentElement) == null ? void 0 : I.getBoundingClientRect();
+        if (A) {
+          const E = l.current.getBoundingClientRect();
+          c.current.height = `${E.height}px`, c.current.width = `${E.width}px`, P === window ? (c.current.unpinAtBottom = A.bottom + k - E.height * 2, c.current.unpinAtTop = E.top + k - E.height) : (c.current.unpinAtBottom = A.bottom + k - E.height * 2, c.current.unpinAtTop = A.top + k), c.current.cellWidths = [], l.current.childNodes.forEach((T, x) => {
+            T instanceof HTMLElement && (c.current.cellWidths[x] = `${T.getBoundingClientRect().width}px`);
+          });
+        }
       }
-    }
-  }, [i]), C = a.useCallback(() => {
-    m.current && (m.current.style.width = s.current.width, m.current.style.height = s.current.height, m.current.childNodes.forEach((o, y) => {
-      o instanceof HTMLElement && (o.style.width = s.current.cellWidths[y] || "");
+    },
+    [s]
+  ), b = n.useCallback(() => {
+    p.current && (p.current.style.width = c.current.width, p.current.style.height = c.current.height, p.current.childNodes.forEach((o, f) => {
+      o instanceof HTMLElement && (o.style.width = c.current.cellWidths[f] || "");
     }));
   }, []);
-  a.useLayoutEffect(() => {
-    c();
-  }), a.useLayoutEffect(() => {
+  n.useLayoutEffect(() => {
+    C();
+  }), n.useLayoutEffect(() => {
     let o;
-    return i && (o = H(() => {
-      c();
-      const { unpinAtTop: y, unpinAtBottom: f } = s.current;
-      y && f && (window.scrollY >= y && window.scrollY <= f ? u(!0) : u(!1));
-    }), window.addEventListener("scroll", o), o()), () => {
-      o && window.removeEventListener("scroll", o);
+    const f = d();
+    return s ? (o = F(() => {
+      C(f);
+      const { unpinAtTop: N, unpinAtBottom: I } = c.current, P = v(f);
+      N && I && (P >= N && P <= I ? (S(!0), l.current && (l.current.style.visibility = "hidden")) : (S(!1), l.current && (l.current.style.visibility = "visible")));
+    }), f.addEventListener("scroll", o), o()) : l.current && (l.current.style.visibility = "visible"), () => {
+      o && f.removeEventListener("scroll", o);
     };
-  }, [i, c]), a.useLayoutEffect(() => {
+  }, [s, C]), n.useLayoutEffect(() => {
     let o;
-    return p && (o = () => {
-      c(), C();
+    return m && (o = () => {
+      C(), b();
     }, window.addEventListener("resize", o), o()), () => {
       o && window.removeEventListener("resize", o);
     };
-  }, [
-    p,
-    c,
-    C
-  ]);
-  const [h] = P(r, [{ type: v }]), S = V(h, () => [{ sort: e, onSortChange: n }]);
-  return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
+  }, [m, C, b]);
+  const [w] = W(r, [{ type: H }]), h = z(w, () => [{ sort: e, onSortChange: i }]), R = d() === window;
+  if (u) {
+    const o = /* @__PURE__ */ n.createElement("tr", null, /* @__PURE__ */ n.createElement("td", { className: g(U), colSpan: 100 }));
+    return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      "tr",
+      {
+        ref: l,
+        className: g(
+          D({ pinned: !1, scrollParentIsWindow: R, __autoLayout: u }),
+          t
+        ),
+        ...a
+      },
+      h
+    ), o, m && /* @__PURE__ */ n.createElement(
+      "tr",
+      {
+        ref: p,
+        className: g(
+          t,
+          D({ pinned: !0, scrollParentIsWindow: R, __autoLayout: u })
+        ),
+        ...a,
+        id: a.id ? `pinned-${a.id}` : void 0,
+        "data-testid": a["data-testid"] ? `pinned-${a["data-testid"]}` : void 0
+      },
+      h
+    ));
+  }
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
     "div",
     {
-      ref: d,
-      className: g(t, I({ pinned: !1 })),
-      ...l
+      ref: l,
+      className: g(
+        t,
+        D({ pinned: !1, scrollParentIsWindow: R, __autoLayout: u })
+      ),
+      ...a
     },
-    S
-  ), p && /* @__PURE__ */ a.createElement(
+    h
+  ), m && /* @__PURE__ */ n.createElement(
     "div",
     {
-      ref: m,
-      className: g(t, I({ pinned: !0 })),
-      ...l,
-      id: l.id ? `pinned-${l.id}` : void 0,
-      "data-testid": l["data-testid"] ? `pinned-${l["data-testid"]}` : void 0
+      ref: p,
+      className: g(
+        t,
+        D({ pinned: !0, scrollParentIsWindow: R, __autoLayout: u })
+      ),
+      ...a,
+      id: a.id ? `pinned-${a.id}` : void 0,
+      "data-testid": a["data-testid"] ? `pinned-${a["data-testid"]}` : void 0
     },
-    S
+    h
   ));
 }
-D.set(O, {
+G.set(B, {
   name: "Sorting Header",
   props: {
     sort: { type: "SortedColumn[]" },
     onSortChange: { type: "SortChangeHandler" }
   }
 });
-const M = {
-  components: [O, v],
+const J = {
+  components: [B, H],
   examples: {
     basic: {
       label: "Sorting Header",
       examples: {
         basic: {
-          react: T`
+          react: Y`
           import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
           import { Icon } from "@sps-woodland/core";
           import { ContentRow } from "@sps-woodland/content-row";
@@ -300,11 +351,11 @@ const M = {
       }
     }
   }
-}, B = {
-  "Sorting Header": M
+}, X = {
+  "Sorting Header": J
 };
 export {
-  B as MANIFEST,
-  O as SortingHeader,
-  v as SortingHeaderCell
+  X as MANIFEST,
+  B as SortingHeader,
+  H as SortingHeaderCell
 };

package/lib/sorting-header/SortingHeader.css.d.ts

@@ -3,7 +3,7 @@ export declare const sortingHeader: import("@vanilla-extract/recipes/dist/declar
         true: {
             borderRadius: number;
             position: "fixed";
-            top: string;
+            top: "0";
             zIndex: number;
             selectors: {
                 "&:after": {
@@ -20,4 +20,19 @@ export declare const sortingHeader: import("@vanilla-extract/recipes/dist/declar
         };
         false: {};
     };
+    scrollParentIsWindow: {
+        true: {};
+        false: {};
+    };
+    __autoLayout: {
+        true: {
+            display: "table-row";
+        };
+        false: {
+            display: "table";
+            tableLayout: "fixed";
+            width: string;
+        };
+    };
 }>;
+export declare const sortingHeaderSpacer: string;

package/lib/sorting-header/SortingHeader.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
 import type { ComponentProps, SortChangeHandler, SortedColumn } from "@sps-woodland/core";
-export declare function SortingHeader({ sort, onSortChange, children, className, pinSortingHeader, ...rest }: ComponentProps<{
+export declare function SortingHeader({ sort, onSortChange, children, className, pinSortingHeader, __autoLayout, ...rest }: ComponentProps<{
     sort: SortedColumn[];
     onSortChange: SortChangeHandler;
     pinSortingHeader?: boolean;
+    __autoLayout?: boolean;
 }, HTMLDivElement>): React.ReactElement;

package/lib/sorting-header-cell/SortingHeaderCell.css.d.ts

@@ -10,4 +10,20 @@ export declare const headerCell: import("@vanilla-extract/recipes/dist/declarati
             backgroundColor: string;
         };
     };
+    __autoLayout: {
+        true: {
+            textAlign: "left";
+            selectors: {
+                "&:first-child": {
+                    borderTopLeftRadius: string;
+                    borderBottomLeftRadius: string;
+                };
+                "&:last-child": {
+                    borderTopRightRadius: string;
+                    borderBottomRightRadius: string;
+                };
+            };
+        };
+        false: {};
+    };
 }>;

package/lib/sorting-header-cell/SortingHeaderCell.d.ts

@@ -1,10 +1,11 @@
 import * as React from "react";
 import type { SortedColumn, SortChangeHandler, ComponentProps } from "@sps-woodland/core";
-export declare function SortingHeaderCell({ className, sortKey, sort, sortDisabled, onSortChange, onClick, children, style, widthPx, widthRem, ...rest }: ComponentProps<{
+export declare function SortingHeaderCell({ className, sortKey, sort, sortDisabled, onSortChange, onClick, children, style, widthPx, widthRem, __autoLayout, ...rest }: ComponentProps<{
     sortKey?: string;
     sortDisabled?: boolean;
     sort?: SortedColumn[];
     onSortChange?: SortChangeHandler;
     widthPx?: number;
     widthRem?: number;
+    __autoLayout?: boolean;
 }, HTMLDivElement>): React.ReactElement;

package/lib/style.css

@@ -1 +1 @@
-._7ljhcs0:after{content:"";border-left-color:transparent;border-right-color:transparent;border-style:solid;border-width:.375rem .25rem;height:0;position:absolute;right:.5rem}._7ljhcs1:after{border-bottom-color:#1f282c;border-top-color:transparent;top:calc(50% - 9px)}._7ljhcs2:after{border-top-color:#1f282c;border-bottom-color:transparent;top:calc(50% - 3px)}._1crs4gl0{display:table-cell;vertical-align:middle;color:#4b5356;font-size:.75rem;font-weight:600;line-height:1.25rem;padding:.5rem;position:relative}._1crs4gl0:hover{background-color:#f3f4f4}._1crs4gl1{cursor:default}._1crs4gl2{color:#1f282c;background-color:#d2d4d4}.sk81640{display:table;table-layout:fixed;width:100%;padding:0;border-radius:.25rem;vertical-align:bottom;cursor:pointer;background-color:#e9e9ea}.sk81641{border-radius:0;position:fixed;top:3.75rem;z-index:999}.sk81641:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;position:absolute;top:100%;left:-.0625rem;width:100%}
+._7ljhcs0:after{content:"";border-left-color:transparent;border-right-color:transparent;border-style:solid;border-width:.375rem .25rem;height:0;position:absolute;right:.5rem}._7ljhcs1:after{border-bottom-color:#1f282c;border-top-color:transparent;top:calc(50% - 9px)}._7ljhcs2:after{border-top-color:#1f282c;border-bottom-color:transparent;top:calc(50% - 3px)}._1crs4gl0{display:table-cell;vertical-align:middle;color:#4b5356;font-size:.75rem;font-weight:600;line-height:1.25rem;padding:.5rem;position:relative}._1crs4gl0:hover{background-color:#f3f4f4}._1crs4gl1{cursor:default}._1crs4gl2{color:#1f282c;background-color:#d2d4d4}._1crs4gl3{text-align:left}._1crs4gl3:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}._1crs4gl3:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.sk81640{padding:0;border-radius:.25rem;vertical-align:bottom;cursor:pointer;background-color:#e9e9ea}.sk81641{border-radius:0;position:fixed;top:0;z-index:999}.sk81641:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;position:absolute;top:100%;left:-.0625rem;width:100%}.sk81645{display:table-row}.sk81646{display:table;table-layout:fixed;width:100%}.sk81647{top:3.75rem}.sk81648{height:1rem;background:transparent;border:0}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/sorting-header",
   "description": "SPS Woodland Design System sorting-header and sorting-header cell components",
-  "version": "8.7.7",
+  "version": "8.8.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/sorting-header",
@@ -29,8 +29,8 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "8.7.7",
-    "@sps-woodland/tokens": "8.7.7"
+    "@sps-woodland/core": "8.8.0",
+    "@sps-woodland/tokens": "8.8.0"
   },
   "devDependencies": {
     "@spscommerce/utils": "^6.12.1",
@@ -39,8 +39,8 @@
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@sps-woodland/core": "8.7.7",
-    "@sps-woodland/tokens": "8.7.7"
+    "@sps-woodland/core": "8.8.0",
+    "@sps-woodland/tokens": "8.8.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",