@sps-woodland/sorting-header 8.53.3 → 8.53.5

package/README.md

@@ -1,3 +1,27 @@
 ## [@sps-woodland/sorting-header](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/sorting-header#readme)
 
-SPS Woodland Design System shorting-header and sorting-header cell components
+SPS Woodland Design System sorting-header and sorting-header cell components.
+
+> **Heads up — this is a wrapper package.** The component source now lives in
+> [`@sps-woodland/core`](../core). This package re-exports from core so existing
+> imports keep working, but new code should prefer the core paths.
+
+### Preferred imports (core)
+
+```ts
+import { SortingHeader, SortingHeaderCell } from "@sps-woodland/core/sorting-header";
+// or, if you only need the cell:
+import { SortingHeaderCell } from "@sps-woodland/core/sorting-header-cell";
+
+import "@sps-woodland/core/sorting-header/style.css";
+```
+
+`SortingHeader` is barrel-only (the family name and the parent component share a
+name). `SortingHeaderCell` also has its own flat subpath.
+
+### Legacy imports (still supported)
+
+```ts
+import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
+import "@sps-woodland/sorting-header/style.css";
+```

package/lib/index.d.ts

@@ -1,3 +1,2 @@
-export * from "./sorting-header-cell/SortingHeaderCell";
-export * from "./sorting-header/SortingHeader";
+export * from "@sps-woodland/core/sorting-header";
 export * from "./manifest";

package/lib/index.js

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

package/lib/index.umd.cjs

@@ -1,4 +1,4 @@
-(function(h,b){typeof exports=="object"&&typeof module<"u"?b(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],b):(h=typeof globalThis<"u"?globalThis:h||self,b(h.SortingHeader={},h.React,h.core,h.utils))})(this,(function(h,b,s,T){"use strict";function K(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const o=K(b);function G(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function A(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter(function(d){return Object.getOwnPropertyDescriptor(e,d).enumerable})),n.push.apply(n,t)}return n}function H(e){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};r%2?A(Object(n),!0).forEach(function(t){G(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):A(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var B=(e,r,n)=>{for(var t of Object.keys(e)){var d;if(e[t]!==((d=r[t])!==null&&d!==void 0?d:n[t]))return!1}return!0},O=e=>r=>{var n=e.defaultClassName,t=H(H({},e.defaultVariants),r);for(var d in t){var p,l=(p=t[d])!==null&&p!==void 0?p:e.defaultVariants[d];if(l!=null){var _=l;typeof _=="boolean"&&(_=_===!0?"true":"false");var S=e.variantClassNames[d][_];S&&(n+=" "+S)}}for(var[a,m]of e.compoundVariants)B(a,t,e.defaultVariants)&&(n+=" "+m);return n},V=O({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_7ljhcs0",variantClassNames:{up:{true:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_7ljhcs1"},down:{true:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_7ljhcs2"}},defaultVariants:{},compoundVariants:[]}),j=O({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl0",variantClassNames:{disabled:{true:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl1"},active:{true:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl2"},__autoLayout:{true:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl3",false:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl4"}},defaultVariants:{disabled:!1,active:!1,__autoLayout:!1},compoundVariants:[]});function P({className:e,sortKey:r,sort:n,sortDisabled:t,onSortChange:d,onClick:p,children:l,style:_,widthPx:S,widthRem:a,__autoLayout:m=!1,...c}){const u=o.useMemo(()=>{const v=!!r&&!t&&Array.isArray(n)&&n.find(E=>E.key===r);return v?v.direction:void 0},[n,r,t]),k=S?S/16:a,w=k?{..._,width:`${k}rem`}:_,N=v=>{r&&!t&&d&&d([{key:r,direction:u===s.SortDirection.ASCENDING?s.SortDirection.DESCENDING:s.SortDirection.ASCENDING}]),p&&p(v)};return m?o.createElement("td",{className:s.cl(e,j({disabled:t,active:!!u,__autoLayout:m}),u&&V({up:u===s.SortDirection.ASCENDING,down:u===s.SortDirection.DESCENDING})),onClick:N,style:w,...c},l):o.createElement("div",{className:s.cl(e,j({disabled:t,active:!!u,__autoLayout:m}),u&&V({up:u===s.SortDirection.ASCENDING,down:u===s.SortDirection.DESCENDING})),onClick:N,style:w,...c},l)}s.Metadata.set(P,{name:"Sorting Header Cell",props:{sortKey:{type:"string"},sort:{type:"SortedColumn[]"},sortDisabled:{type:"boolean"},onSortChange:{type:"SortChangeHandler"},widthPx:{type:"number"},widthRem:{type:"number"}}});var D=O({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81640",variantClassNames:{pinned:{true:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81641",false:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81642"},scrollParentIsWindow:{true:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81643",false:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81644"},__autoLayout:{true:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81645",false:"pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81646"}},defaultVariants:{pinned:!1,scrollParentIsWindow:!1,__autoLayout:!1},compoundVariants:[[{pinned:!0,scrollParentIsWindow:!0},"pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81647"]]}),x="pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81648";function R({sort:e,onSortChange:r,children:n,className:t,pinSortingHeader:d=!1,__autoLayout:p=!1,...l}){const[_,S]=o.useState(!1),a=o.useRef(null),m=o.useRef(null),c=o.useRef({height:"",width:"",unpinAtTop:0,unpinAtBottom:0,cellWidths:[]}),u=o.useCallback(()=>a.current&&s.getScrollParent(a.current)||window,[]),k=o.useCallback(i=>{const f=i||u();return f.scrollY||f.scrollTop||0},[]),w=o.useCallback(i=>{if(d&&a.current){const f=i||u(),y=k(f),C=p?a.current.parentElement?.parentElement?.getBoundingClientRect():a.current.parentElement?.getBoundingClientRect();if(C){const g=a.current.getBoundingClientRect();c.current.height=`${g.height}px`,c.current.width=`${g.width}px`,f===window?(c.current.unpinAtBottom=C.bottom+y-g.height*2,c.current.unpinAtTop=g.top+y-g.height):(c.current.unpinAtBottom=C.bottom+y-g.height*2,c.current.unpinAtTop=C.top+y),c.current.cellWidths=[],a.current.childNodes.forEach((M,W)=>{M instanceof HTMLElement&&(c.current.cellWidths[W]=`${M.getBoundingClientRect().width}px`)})}}},[d]),N=o.useCallback(()=>{m.current&&(m.current.style.width=c.current.width,m.current.style.height=c.current.height,m.current.childNodes.forEach((i,f)=>{i instanceof HTMLElement&&(i.style.width=c.current.cellWidths[f]||"")}))},[]);o.useLayoutEffect(()=>{w()}),o.useLayoutEffect(()=>{let i;const f=u();return d?(i=T.lockToAnimationFrames(()=>{w(f);const{unpinAtTop:y,unpinAtBottom:C}=c.current,g=k(f);y&&C&&(g>=y&&g<=C?(S(!0),a.current&&(a.current.style.visibility="hidden")):(S(!1),a.current&&(a.current.style.visibility="visible")))}),f.addEventListener("scroll",i),i()):a.current&&(a.current.style.visibility="visible"),()=>{i&&f.removeEventListener("scroll",i)}},[d,w]),o.useLayoutEffect(()=>{let i;return _&&(i=()=>{w(),N()},window.addEventListener("resize",i),i()),()=>{i&&window.removeEventListener("resize",i)}},[_,w,N]);const[v]=s.selectChildren(n,[{type:P}]),E=s.modChildren(v,()=>[{sort:e,onSortChange:r}]),I=u()===window;if(p){const i=o.createElement("tr",null,o.createElement("td",{className:s.cl(x),colSpan:100}));return o.createElement(o.Fragment,null,o.createElement("tr",{ref:a,className:s.cl(D({pinned:!1,scrollParentIsWindow:I,__autoLayout:p}),t),...l},E),i,_&&o.createElement("tr",{ref:m,className:s.cl(t,D({pinned:!0,scrollParentIsWindow:I,__autoLayout:p})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},E))}return o.createElement(o.Fragment,null,o.createElement("div",{ref:a,className:s.cl(t,D({pinned:!1,scrollParentIsWindow:I,__autoLayout:p})),...l},E),_&&o.createElement("div",{ref:m,className:s.cl(t,D({pinned:!0,scrollParentIsWindow:I,__autoLayout:p})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},E))}s.Metadata.set(R,{name:"Sorting Header",props:{sort:{type:"SortedColumn[]"},onSortChange:{type:"SortChangeHandler"}}});const L={"Sorting Header":{components:[R,P],examples:{basic:{label:"Sorting Header",examples:{basic:{react:T.code`
+(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("@sps-woodland/core/sorting-header"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/sorting-header","@spscommerce/utils"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.SortingHeader={},e.sortingHeader,e.utils))})(this,(function(e,t,r){"use strict";const i={"Sorting Header":{components:[t.SortingHeader,t.SortingHeaderCell],examples:{basic:{label:"Sorting Header",examples:{basic:{react:r.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 @@
               </>
             );
           }
-          `}}}}}};h.MANIFEST=L,h.SortingHeader=R,h.SortingHeaderCell=P,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));
+          `}}}}}};e.MANIFEST=i,Object.keys(t).forEach(o=>{o!=="default"&&!Object.prototype.hasOwnProperty.call(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:()=>t[o]})}),Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package/lib/style.css

@@ -1 +1 @@
-.pkg_sps-woodland_sorting-header__version_8_53_3__hash_7ljhcs0:after{content:"";border-left-color:transparent;border-right-color:transparent;border-style:solid;border-width:.375rem .25rem;height:0;position:absolute;right:.5rem}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_7ljhcs1:after{border-bottom-color:#1f282c;border-top-color:transparent;top:calc(50% - 9px)}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_7ljhcs2:after{border-top-color:#1f282c;border-bottom-color:transparent;top:calc(50% - 3px)}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl0{display:table-cell;vertical-align:middle;color:#4b5356;font-size:.75rem;font-weight:600;line-height:1.25rem;padding:.5rem;position:relative}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl0:hover{background-color:#f3f4f4}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl1{cursor:default}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl1:hover{background-color:#e9e9ea}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl2{color:#1f282c;background-color:#d2d4d4}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl3{text-align:left}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl3:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_1crs4gl3:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81640{padding:0;border-radius:.25rem;vertical-align:bottom;cursor:pointer;background-color:#e9e9ea}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81641{border-radius:0;position:fixed;top:0;z-index:999}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_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%}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81645{display:table-row}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81646{display:table;table-layout:fixed;width:100%}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81647{top:3.75rem}.pkg_sps-woodland_sorting-header__version_8_53_3__hash_sk81648{height:1rem;background:transparent;border:0}
+.pkg_sps-woodland_core__version_8_53_5__hash_ax8xqf0:after{content:"";border-left-color:transparent;border-right-color:transparent;border-style:solid;border-width:.375rem .25rem;height:0;position:absolute;right:.5rem}.pkg_sps-woodland_core__version_8_53_5__hash_ax8xqf1:after{border-bottom-color:#1f282c;border-top-color:transparent;top:calc(50% - 9px)}.pkg_sps-woodland_core__version_8_53_5__hash_ax8xqf2:after{border-top-color:#1f282c;border-bottom-color:transparent;top:calc(50% - 3px)}.pkg_sps-woodland_core__version_8_53_5__hash_11ho8id0{display:table-cell;vertical-align:middle;color:#4b5356;font-size:.75rem;font-weight:600;line-height:1.25rem;padding:.5rem;position:relative}.pkg_sps-woodland_core__version_8_53_5__hash_11ho8id0:hover{background-color:#f3f4f4}.pkg_sps-woodland_core__version_8_53_5__hash_11ho8id1{cursor:default}.pkg_sps-woodland_core__version_8_53_5__hash_11ho8id1:hover{background-color:#e9e9ea}.pkg_sps-woodland_core__version_8_53_5__hash_11ho8id2{color:#1f282c;background-color:#d2d4d4}.pkg_sps-woodland_core__version_8_53_5__hash_11ho8id3{text-align:left}.pkg_sps-woodland_core__version_8_53_5__hash_11ho8id3:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.pkg_sps-woodland_core__version_8_53_5__hash_11ho8id3:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.pkg_sps-woodland_core__version_8_53_5__hash_1jpcvsu0{padding:0;border-radius:.25rem;vertical-align:bottom;cursor:pointer;background-color:#e9e9ea}.pkg_sps-woodland_core__version_8_53_5__hash_1jpcvsu1{border-radius:0;position:fixed;top:0;z-index:999}.pkg_sps-woodland_core__version_8_53_5__hash_1jpcvsu1:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;position:absolute;top:100%;left:-.0625rem;width:100%}.pkg_sps-woodland_core__version_8_53_5__hash_1jpcvsu5{display:table-row}.pkg_sps-woodland_core__version_8_53_5__hash_1jpcvsu6{display:table;table-layout:fixed;width:100%}.pkg_sps-woodland_core__version_8_53_5__hash_1jpcvsu7{top:3.75rem}.pkg_sps-woodland_core__version_8_53_5__hash_1jpcvsu8{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.53.3",
+  "version": "8.53.5",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/sorting-header",
@@ -17,6 +17,7 @@
       "import": "./lib/index.js",
       "default": "./lib/index.js"
     },
+    "./style.css": "./lib/style.css",
     "./lib/style.css": {
       "import": "./lib/style.css",
       "require": "./lib/style.css"
@@ -29,23 +30,19 @@
     "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@sps-woodland/core": "8.53.3",
-    "@sps-woodland/tokens": "8.53.3"
+    "@sps-woodland/core": "8.53.5"
   },
   "devDependencies": {
     "@spscommerce/utils": "9.0.3",
-    "@vanilla-extract/css": "1.17.4",
-    "@vanilla-extract/css-utils": "0.1.3",
-    "@vanilla-extract/recipes": "0.2.5",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@sps-woodland/core": "8.53.3",
-    "@sps-woodland/tokens": "8.53.3"
+    "@sps-woodland/core": "8.53.5"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:types",
+    "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
     "build:js": "vite build",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "build:css": "cp ../core/lib/sorting-header/style.css lib/style.css 2>/dev/null || echo 'sorting-header style.css not found, skipping'",
     "watch": "vite build --watch",
     "clean": "git clean -fdX",
     "pub": "node ../../../scripts/publish-package.mjs"

package/vite.config.mjs

@@ -1,31 +1,24 @@
 import path from "node:path";
-import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
-import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
 import pkg from "./package.json";
 
-const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+// Sorting-header is now a wrapper package that re-exports from @sps-woodland/core.
+// No vanilla-extract needed - CSS is provided by the mono-package.
+
+const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
 
 export default defineConfig({
-  plugins: [
-    vanillaExtractPlugin(
-      getVanillaExtractPluginProps({
-        packageName: pkg.name,
-        packageVersion,
-      })
-    ),
-  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
       name: "SortingHeader",
       fileName: "index",
-      cssFileName: "style",
     },
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,
     rollupOptions: {
-      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+      // External must match subpath imports like @sps-woodland/core/sorting-header
+      external: (id) => peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
     },
   },
 });

package/lib/caret/caret.css.d.ts

@@ -1,20 +0,0 @@
-export declare const headerCaret: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
-    up: {
-        true: {
-            ":after": {
-                borderBottomColor: string;
-                borderTopColor: "transparent";
-                top: string;
-            };
-        };
-    };
-    down: {
-        true: {
-            ":after": {
-                borderTopColor: string;
-                borderBottomColor: "transparent";
-                top: string;
-            };
-        };
-    };
-}>;

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

@@ -1,38 +0,0 @@
-export declare const sortingHeader: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
-    pinned: {
-        true: {
-            borderRadius: number;
-            position: "fixed";
-            top: "0";
-            zIndex: number;
-            selectors: {
-                "&:after": {
-                    background: "linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent)";
-                    content: "";
-                    display: "block";
-                    height: string;
-                    position: "absolute";
-                    top: "calc(100%)";
-                    left: string;
-                    width: string;
-                };
-            };
-        };
-        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,8 +0,0 @@
-import * as React from "react";
-import type { ComponentProps, SortChangeHandler, SortedColumn } from "@sps-woodland/core";
-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

@@ -1,34 +0,0 @@
-export declare const headerCell: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
-    disabled: {
-        true: {
-            cursor: "default";
-            selectors: {
-                "&:hover": {
-                    backgroundColor: string;
-                };
-            };
-        };
-    };
-    active: {
-        true: {
-            color: string;
-            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,11 +0,0 @@
-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, __autoLayout, ...rest }: ComponentProps<{
-    sortKey?: string;
-    sortDisabled?: boolean;
-    sort?: SortedColumn[];
-    onSortChange?: SortChangeHandler;
-    widthPx?: number;
-    widthRem?: number;
-    __autoLayout?: boolean;
-}, HTMLDivElement>): React.ReactElement;