@sps-woodland/sorting-header 7.9.1 → 7.10.0

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const O=require("react"),a=require("@sps-woodland/core"),D=require("@spscommerce/utils");function H(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const f=H(O);function _(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function g(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,o)}return t}function b(e){for(var r=1;r<arguments.length;r++){var t=arguments[r]!=null?arguments[r]:{};r%2?g(Object(t),!0).forEach(function(o){_(e,o,t[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):g(Object(t)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))})}return e}var h=(e,r,t)=>{for(var o of Object.keys(e)){var n;if(e[o]!==((n=r[o])!==null&&n!==void 0?n:t[o]))return!1}return!0},v=e=>r=>{var t=e.defaultClassName,o=b(b({},e.defaultVariants),r);for(var n in o){var i,l=(i=o[n])!==null&&i!==void 0?i:e.defaultVariants[n];if(l!=null){var s=l;typeof s=="boolean"&&(s=s===!0?"true":"false");var c=e.variantClassNames[n][s];c&&(t+=" "+c)}}for(var[p,S]of e.compoundVariants)h(p,o,e.defaultVariants)&&(t+=" "+S);return t},E=v({defaultClassName:"_7ljhcs0",variantClassNames:{up:{true:"_7ljhcs1"},down:{true:"_7ljhcs2"}},defaultVariants:{},compoundVariants:[]});var I=v({defaultClassName:"_1crs4gl0",variantClassNames:{disabled:{true:"_1crs4gl1"},active:{true:"_1crs4gl2"}},defaultVariants:{disabled:!1,active:!1},compoundVariants:[]});function m({className:e,sortKey:r,sort:t,sortDisabled:o,onSortChange:n,onClick:i,children:l,style:s,widthPx:c,widthRem:p,...S}){const d=f.useMemo(()=>{const u=!!r&&!o&&Array.isArray(t)&&t.find(N=>N.key===r);return u?u.direction:void 0},[t,r,o]),C=c?c/16:p,w=C?{...s,width:`${C}rem`}:s;return f.createElement("div",{className:a.cl(e,I({disabled:o,active:!!d}),d&&E({up:d===a.SortDirection.ASCENDING,down:d===a.SortDirection.DESCENDING})),onClick:u=>{r&&!o&&n&&n([{key:r,direction:d===a.SortDirection.ASCENDING?a.SortDirection.DESCENDING:a.SortDirection.ASCENDING}]),i&&i(u)},style:w,...S},l)}a.Metadata.set(m,{name:"Sorting Header Cell",props:{sortKey:{type:"string"},sort:{type:"SortedColumn[]"},sortDisabled:{type:"boolean"},onSortChange:{type:"SortChangeHandler"},widthPx:{type:"number"},widthRem:{type:"number"}}});var P="sk81640";function y({sort:e,onSortChange:r,children:t,className:o,...n}){const[i]=a.selectChildren(t,[{type:m}]),l=a.modChildren(i,()=>[{sort:e,onSortChange:r}]);return f.createElement("div",{className:a.cl(o,P),...n},l)}a.Metadata.set(y,{name:"Sorting Header",props:{sort:{type:"SortedColumn[]"},onSortChange:{type:"SortChangeHandler"}}});const R={components:[y,m],examples:{basic:{label:"Sorting Header",examples:{basic:{react:D.code`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),c=require("@sps-woodland/core"),R=require("@spscommerce/utils");function H(e){if(e&&e.__esModule)return 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=H(_);function P(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 O(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){P(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 A=(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=O(O({},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)A(p,r,e.defaultVariants)&&(t+=" "+s);return t},T=v({defaultClassName:"_7ljhcs0",variantClassNames:{up:{true:"_7ljhcs1"},down:{true:"_7ljhcs2"}},defaultVariants:{},compoundVariants:[]});var V=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,V({disabled:r,active:!!u}),u&&T({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 D=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,D({pinned:!1})),...l},y),f&&a.createElement("div",{ref:p,className:c.cl(r,D({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`
           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 @@
               </>
             );
           }
-          `}}}}},V={"Sorting Header":R};exports.MANIFEST=V;exports.SortingHeader=y;exports.SortingHeaderCell=m;
+          `}}}}},j={"Sorting Header":M};exports.MANIFEST=j;exports.SortingHeader=E;exports.SortingHeaderCell=w;

package/lib/index.es.js

@@ -1,101 +1,101 @@
-import * as S from "react";
-import { Metadata as v, cl as w, SortDirection as m, selectChildren as H, modChildren as I } from "@sps-woodland/core";
-import { code as D } from "@spscommerce/utils";
-function O(e, o, t) {
-  return o in e ? Object.defineProperty(e, o, {
-    value: t,
+import * as a from "react";
+import { Metadata as D, cl as h, SortDirection as w, selectChildren as A, modChildren as P } from "@sps-woodland/core";
+import { lockToAnimationFrames as V, code as T } from "@spscommerce/utils";
+function _(e, n, r) {
+  return n in e ? Object.defineProperty(e, n, {
+    value: r,
     enumerable: !0,
     configurable: !0,
     writable: !0
-  }) : e[o] = t, e;
+  }) : e[n] = r, e;
 }
-function C(e, o) {
-  var t = Object.keys(e);
+function b(e, n) {
+  var r = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var r = Object.getOwnPropertySymbols(e);
-    o && (r = r.filter(function(n) {
-      return Object.getOwnPropertyDescriptor(e, n).enumerable;
-    })), t.push.apply(t, r);
+    var t = Object.getOwnPropertySymbols(e);
+    n && (t = t.filter(function(i) {
+      return Object.getOwnPropertyDescriptor(e, i).enumerable;
+    })), r.push.apply(r, t);
   }
-  return t;
+  return r;
 }
-function g(e) {
-  for (var o = 1; o < arguments.length; o++) {
-    var t = arguments[o] != null ? arguments[o] : {};
-    o % 2 ? C(Object(t), !0).forEach(function(r) {
-      O(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : C(Object(t)).forEach(function(r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, 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) {
+      _(e, t, r[t]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : b(Object(r)).forEach(function(t) {
+      Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
     });
   }
   return e;
 }
-var V = (e, o, t) => {
-  for (var r of Object.keys(e)) {
-    var n;
-    if (e[r] !== ((n = o[r]) !== null && n !== void 0 ? n : t[r]))
+var K = (e, n, r) => {
+  for (var t of Object.keys(e)) {
+    var i;
+    if (e[t] !== ((i = n[t]) !== null && i !== void 0 ? i : r[t]))
       return !1;
   }
   return !0;
-}, N = (e) => (o) => {
-  var t = e.defaultClassName, r = g(g({}, e.defaultVariants), o);
-  for (var n in r) {
-    var a, s = (a = r[n]) !== null && a !== void 0 ? a : e.defaultVariants[n];
-    if (s != null) {
-      var i = s;
-      typeof i == "boolean" && (i = i === !0 ? "true" : "false");
-      var l = e.variantClassNames[n][i];
-      l && (t += " " + l);
+}, v = (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 = e.variantClassNames[i][u];
+      d && (r += " " + d);
     }
   }
-  for (var [p, u] of e.compoundVariants)
-    V(p, r, e.defaultVariants) && (t += " " + u);
-  return t;
-}, R = N({ defaultClassName: "_7ljhcs0", variantClassNames: { up: { true: "_7ljhcs1" }, down: { true: "_7ljhcs2" } }, defaultVariants: {}, compoundVariants: [] });
-var _ = N({ defaultClassName: "_1crs4gl0", variantClassNames: { disabled: { true: "_1crs4gl1" }, active: { true: "_1crs4gl2" } }, defaultVariants: { disabled: !1, active: !1 }, compoundVariants: [] });
-function f({
+  for (var [m, s] of e.compoundVariants)
+    K(m, t, e.defaultVariants) && (r += " " + s);
+  return r;
+}, k = v({ defaultClassName: "_7ljhcs0", variantClassNames: { up: { true: "_7ljhcs1" }, down: { true: "_7ljhcs2" } }, defaultVariants: {}, compoundVariants: [] });
+var j = v({ defaultClassName: "_1crs4gl0", variantClassNames: { disabled: { true: "_1crs4gl1" }, active: { true: "_1crs4gl2" } }, defaultVariants: { disabled: !1, active: !1 }, compoundVariants: [] });
+function E({
   className: e,
-  sortKey: o,
-  sort: t,
-  sortDisabled: r,
-  onSortChange: n,
-  onClick: a,
-  children: s,
-  style: i,
-  widthPx: l,
-  widthRem: p,
-  ...u
+  sortKey: n,
+  sort: r,
+  sortDisabled: t,
+  onSortChange: i,
+  onClick: l,
+  children: p,
+  style: u,
+  widthPx: d,
+  widthRem: m,
+  ...s
 }) {
-  const d = S.useMemo(() => {
-    const c = !!o && !r && Array.isArray(t) && t.find((E) => E.key === o);
-    return c ? c.direction : void 0;
+  const c = a.useMemo(() => {
+    const S = !!n && !t && Array.isArray(r) && r.find((o) => o.key === n);
+    return S ? S.direction : void 0;
   }, [
-    t,
-    o,
-    r
-  ]), y = l ? l / 16 : p, h = y ? { ...i, width: `${y}rem` } : i;
-  return /* @__PURE__ */ S.createElement("div", {
-    className: w(
+    r,
+    n,
+    t
+  ]), C = d ? d / 16 : m, g = C ? { ...u, width: `${C}rem` } : u;
+  return /* @__PURE__ */ a.createElement("div", {
+    className: h(
       e,
-      _({ disabled: r, active: !!d }),
-      d && R({
-        up: d === m.ASCENDING,
-        down: d === m.DESCENDING
+      j({ disabled: t, active: !!c }),
+      c && k({
+        up: c === w.ASCENDING,
+        down: c === w.DESCENDING
       })
     ),
-    onClick: (c) => {
-      o && !r && n && n([
+    onClick: (S) => {
+      n && !t && i && i([
         {
-          key: o,
-          direction: d === m.ASCENDING ? m.DESCENDING : m.ASCENDING
+          key: n,
+          direction: c === w.ASCENDING ? w.DESCENDING : w.ASCENDING
         }
-      ]), a && a(c);
+      ]), l && l(S);
     },
-    style: h,
-    ...u
-  }, s);
+    style: g,
+    ...s
+  }, p);
 }
-v.set(f, {
+D.set(E, {
   name: "Sorting Header Cell",
   props: {
     sortKey: { type: "string" },
@@ -106,35 +106,88 @@ v.set(f, {
     widthRem: { type: "number" }
   }
 });
-var P = "sk81640";
-function b({
+var I = v({ defaultClassName: "sk81640", variantClassNames: { pinned: { true: "sk81641", false: "sk81642" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] });
+function H({
   sort: e,
-  onSortChange: o,
-  children: t,
-  className: r,
-  ...n
+  onSortChange: n,
+  children: r,
+  className: t,
+  pinSortingHeader: i = !1,
+  ...l
 }) {
-  const [a] = H(t, [{ type: f }]), s = I(a, () => [{ sort: e, onSortChange: o }]);
-  return /* @__PURE__ */ S.createElement("div", {
-    className: w(r, P),
-    ...n
-  }, s);
+  const [p, u] = a.useState(!1), d = a.useRef(null), m = a.useRef(null), s = a.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, O) => {
+          N instanceof HTMLElement && (s.current.cellWidths[O] = `${N.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] || "");
+    }));
+  }, []);
+  a.useLayoutEffect(() => {
+    c();
+  }), a.useLayoutEffect(() => {
+    let o;
+    return i && (o = V(() => {
+      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);
+    };
+  }, [i, c]), a.useLayoutEffect(() => {
+    let o;
+    return p && (o = () => {
+      c(), C();
+    }, window.addEventListener("resize", o), o()), () => {
+      o && window.removeEventListener("resize", o);
+    };
+  }, [
+    p,
+    c,
+    C
+  ]);
+  const [g] = A(r, [{ type: E }]), S = P(g, () => [{ sort: e, onSortChange: n }]);
+  return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("div", {
+    ref: d,
+    className: h(t, I({ pinned: !1 })),
+    ...l
+  }, S), p && /* @__PURE__ */ a.createElement("div", {
+    ref: m,
+    className: h(t, I({ pinned: !0 })),
+    ...l,
+    id: l.id ? `pinned-${l.id}` : void 0,
+    "data-testid": l["data-testid"] ? `pinned-${l["data-testid"]}` : void 0
+  }, S));
 }
-v.set(b, {
+D.set(H, {
   name: "Sorting Header",
   props: {
     sort: { type: "SortedColumn[]" },
     onSortChange: { type: "SortChangeHandler" }
   }
 });
-const K = {
-  components: [b, f],
+const L = {
+  components: [H, E],
   examples: {
     basic: {
       label: "Sorting Header",
       examples: {
         basic: {
-          react: D`
+          react: T`
           import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
           import { Icon } from "@sps-woodland/core";
           import { ContentRow } from "@sps-woodland/content-row";
@@ -233,11 +286,11 @@ const K = {
       }
     }
   }
-}, T = {
-  "Sorting Header": K
+}, G = {
+  "Sorting Header": L
 };
 export {
-  T as MANIFEST,
-  b as SortingHeader,
-  f as SortingHeaderCell
+  G as MANIFEST,
+  H as SortingHeader,
+  E as SortingHeaderCell
 };

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

@@ -1 +1,23 @@
-export declare const sortingHeader: string;
+export declare const sortingHeader: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    pinned: {
+        true: {
+            borderRadius: number;
+            position: "fixed";
+            top: string;
+            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: {};
+    };
+}>;

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { ComponentProps, SortChangeHandler, SortedColumn } from "@sps-woodland/core";
-export declare function SortingHeader({ sort, onSortChange, children, className, ...rest }: ComponentProps<{
+export declare function SortingHeader({ sort, onSortChange, children, className, pinSortingHeader, ...rest }: ComponentProps<{
     sort: SortedColumn[];
     onSortChange: SortChangeHandler;
+    pinSortingHeader?: 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}
+._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%}

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": "7.9.1",
+  "version": "7.10.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/sorting-header",
@@ -26,15 +26,15 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@sps-woodland/core": "7.9.1",
-    "@sps-woodland/tokens": "7.9.1",
+    "@sps-woodland/core": "7.10.0",
+    "@sps-woodland/tokens": "7.10.0",
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0"
   },
   "devDependencies": {
-    "@sps-woodland/core": "7.9.1",
-    "@sps-woodland/tokens": "7.9.1",
+    "@sps-woodland/core": "7.10.0",
+    "@sps-woodland/tokens": "7.10.0",
     "@spscommerce/utils": "^6.12.1",
     "@vanilla-extract/css": "^1.9.3",
     "@vanilla-extract/css-utils": "^0.1.3",