@sps-woodland/sorting-header 7.17.12 → 7.19.0

package/lib/{index.es.js → index.js}

@@ -1,7 +1,7 @@
-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) {
+import * as s from "react";
+import { Metadata as I, cl as w, SortDirection as S, selectChildren as H, modChildren as O } from "@sps-woodland/core";
+import { lockToAnimationFrames as A, code as P } from "@spscommerce/utils";
+function V(e, n, r) {
   return n in e ? Object.defineProperty(e, n, {
     value: r,
     enumerable: !0,
@@ -9,7 +9,7 @@ function _(e, n, r) {
     writable: !0
   }) : e[n] = r, e;
 }
-function b(e, n) {
+function N(e, n) {
   var r = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
     var t = Object.getOwnPropertySymbols(e);
@@ -19,87 +19,87 @@ function b(e, n) {
   }
   return r;
 }
-function R(e) {
+function b(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) {
+    n % 2 ? N(Object(r), !0).forEach(function(t) {
+      V(e, t, r[t]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : N(Object(r)).forEach(function(t) {
       Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
     });
   }
   return e;
 }
-var K = (e, n, r) => {
+var T = (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;
-}, v = (e) => (n) => {
-  var r = e.defaultClassName, t = R(R({}, e.defaultVariants), n);
+}, C = (e) => (n) => {
+  var r = e.defaultClassName, t = b(b({}, 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;
+    var l, m = (l = t[i]) !== null && l !== void 0 ? l : e.defaultVariants[i];
+    if (m != null) {
+      var u = m;
       typeof u == "boolean" && (u = u === !0 ? "true" : "false");
       var d = e.variantClassNames[i][u];
       d && (r += " " + d);
     }
   }
-  for (var [m, s] of e.compoundVariants)
-    K(m, t, e.defaultVariants) && (r += " " + s);
+  for (var [p, a] of e.compoundVariants)
+    T(p, t, e.defaultVariants) && (r += " " + a);
   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({
+}, K = C({ defaultClassName: "pkg_sps-woodland_sorting-header__version_7_19_0__hash_7ljhcs0", variantClassNames: { up: { true: "pkg_sps-woodland_sorting-header__version_7_19_0__hash_7ljhcs1" }, down: { true: "pkg_sps-woodland_sorting-header__version_7_19_0__hash_7ljhcs2" } }, defaultVariants: {}, compoundVariants: [] });
+var j = C({ defaultClassName: "pkg_sps-woodland_sorting-header__version_7_19_0__hash_1crs4gl0", variantClassNames: { disabled: { true: "pkg_sps-woodland_sorting-header__version_7_19_0__hash_1crs4gl1" }, active: { true: "pkg_sps-woodland_sorting-header__version_7_19_0__hash_1crs4gl2" } }, defaultVariants: { disabled: !1, active: !1 }, compoundVariants: [] });
+function v({
   className: e,
   sortKey: n,
   sort: r,
   sortDisabled: t,
   onSortChange: i,
   onClick: l,
-  children: p,
+  children: m,
   style: u,
   widthPx: d,
-  widthRem: m,
-  ...s
+  widthRem: p,
+  ...a
 }) {
-  const c = a.useMemo(() => {
-    const S = !!n && !t && Array.isArray(r) && r.find((o) => o.key === n);
-    return S ? S.direction : void 0;
+  const c = s.useMemo(() => {
+    const f = !!n && !t && Array.isArray(r) && r.find((o) => o.key === n);
+    return f ? f.direction : void 0;
   }, [
     r,
     n,
     t
-  ]), C = d ? d / 16 : m, g = C ? { ...u, width: `${C}rem` } : u;
-  return /* @__PURE__ */ a.createElement(
+  ]), g = d ? d / 16 : p, y = g ? { ...u, width: `${g}rem` } : u;
+  return /* @__PURE__ */ s.createElement(
     "div",
     {
-      className: h(
+      className: w(
         e,
         j({ disabled: t, active: !!c }),
-        c && k({
-          up: c === w.ASCENDING,
-          down: c === w.DESCENDING
+        c && K({
+          up: c === S.ASCENDING,
+          down: c === S.DESCENDING
         })
       ),
-      onClick: (S) => {
+      onClick: (f) => {
         n && !t && i && i([
           {
             key: n,
-            direction: c === w.ASCENDING ? w.DESCENDING : w.ASCENDING
+            direction: c === S.ASCENDING ? S.DESCENDING : S.ASCENDING
           }
-        ]), l && l(S);
+        ]), l && l(f);
       },
-      style: g,
-      ...s
+      style: y,
+      ...a
     },
-    p
+    m
   );
 }
-D.set(E, {
+I.set(v, {
   name: "Sorting Header Cell",
   props: {
     sortKey: { type: "string" },
@@ -110,8 +110,8 @@ D.set(E, {
     widthRem: { type: "number" }
   }
 });
-var I = v({ defaultClassName: "sk81640", variantClassNames: { pinned: { true: "sk81641", false: "sk81642" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] });
-function H({
+var R = C({ defaultClassName: "pkg_sps-woodland_sorting-header__version_7_19_0__hash_sk81640", variantClassNames: { pinned: { true: "pkg_sps-woodland_sorting-header__version_7_19_0__hash_sk81641", false: "pkg_sps-woodland_sorting-header__version_7_19_0__hash_sk81642" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] });
+function k({
   sort: e,
   onSortChange: n,
   children: r,
@@ -119,73 +119,73 @@ function H({
   pinSortingHeader: i = !1,
   ...l
 }) {
-  const [p, u] = a.useState(!1), d = a.useRef(null), m = a.useRef(null), s = a.useRef({
+  const [m, u] = s.useState(!1), d = s.useRef(null), p = s.useRef(null), a = s.useRef({
     height: "",
     width: "",
     unpinAtTop: 0,
     unpinAtBottom: 0,
     cellWidths: []
-  }), c = a.useCallback(() => {
+  }), c = s.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`);
+      const h = (o = d.current.parentElement) == null ? void 0 : o.getBoundingClientRect();
+      if (h) {
+        const _ = d.current.getBoundingClientRect();
+        a.current.height = `${_.height}px`, a.current.width = `${_.width}px`, a.current.unpinAtBottom = h.bottom + window.scrollY - _.height * 2, a.current.unpinAtTop = _.top + window.scrollY - _.height, a.current.cellWidths = [], d.current.childNodes.forEach((E, D) => {
+          E instanceof HTMLElement && (a.current.cellWidths[D] = `${E.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] || "");
+  }, [i]), g = s.useCallback(() => {
+    p.current && (p.current.style.width = a.current.width, p.current.style.height = a.current.height, p.current.childNodes.forEach((o, h) => {
+      o instanceof HTMLElement && (o.style.width = a.current.cellWidths[h] || "");
     }));
   }, []);
-  a.useLayoutEffect(() => {
+  s.useLayoutEffect(() => {
     c();
-  }), a.useLayoutEffect(() => {
+  }), s.useLayoutEffect(() => {
     let o;
-    return i && (o = V(() => {
+    return i && (o = A(() => {
       c();
-      const { unpinAtTop: y, unpinAtBottom: f } = s.current;
-      y && f && (window.scrollY >= y && window.scrollY <= f ? u(!0) : u(!1));
+      const { unpinAtTop: h, unpinAtBottom: _ } = a.current;
+      h && _ && (window.scrollY >= h && window.scrollY <= _ ? u(!0) : u(!1));
     }), window.addEventListener("scroll", o), o()), () => {
       o && window.removeEventListener("scroll", o);
     };
-  }, [i, c]), a.useLayoutEffect(() => {
+  }, [i, c]), s.useLayoutEffect(() => {
     let o;
-    return p && (o = () => {
-      c(), C();
+    return m && (o = () => {
+      c(), g();
     }, window.addEventListener("resize", o), o()), () => {
       o && window.removeEventListener("resize", o);
     };
   }, [
-    p,
+    m,
     c,
-    C
+    g
   ]);
-  const [g] = A(r, [{ type: E }]), S = P(g, () => [{ sort: e, onSortChange: n }]);
-  return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
+  const [y] = H(r, [{ type: v }]), f = O(y, () => [{ sort: e, onSortChange: n }]);
+  return /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
     "div",
     {
       ref: d,
-      className: h(t, I({ pinned: !1 })),
+      className: w(t, R({ pinned: !1 })),
       ...l
     },
-    S
-  ), p && /* @__PURE__ */ a.createElement(
+    f
+  ), m && /* @__PURE__ */ s.createElement(
     "div",
     {
-      ref: m,
-      className: h(t, I({ pinned: !0 })),
+      ref: p,
+      className: w(t, R({ pinned: !0 })),
       ...l,
       id: l.id ? `pinned-${l.id}` : void 0,
       "data-testid": l["data-testid"] ? `pinned-${l["data-testid"]}` : void 0
     },
-    S
+    f
   ));
 }
-D.set(H, {
+I.set(k, {
   name: "Sorting Header",
   props: {
     sort: { type: "SortedColumn[]" },
@@ -193,13 +193,13 @@ D.set(H, {
   }
 });
 const L = {
-  components: [H, E],
+  components: [k, v],
   examples: {
     basic: {
       label: "Sorting Header",
       examples: {
         basic: {
-          react: T`
+          react: P`
           import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
           import { Icon } from "@sps-woodland/core";
           import { ContentRow } from "@sps-woodland/content-row";
@@ -303,6 +303,6 @@ const L = {
 };
 export {
   G as MANIFEST,
-  H as SortingHeader,
-  E as SortingHeaderCell
+  k as SortingHeader,
+  v as SortingHeaderCell
 };

package/lib/index.umd.cjs

@@ -0,0 +1,95 @@
+(function(c,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],y):(c=typeof globalThis<"u"?globalThis:c||self,y(c.SortingHeader={},c.React,c.core,c.utils))})(this,function(c,y,d,N){"use strict";function I(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 n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const s=I(y),M="";function k(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function O(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),t.push.apply(t,n)}return t}function D(e){for(var r=1;r<arguments.length;r++){var t=arguments[r]!=null?arguments[r]:{};r%2?O(Object(t),!0).forEach(function(n){k(e,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):O(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})}return e}var P=(e,r,t)=>{for(var n of Object.keys(e)){var i;if(e[n]!==((i=r[n])!==null&&i!==void 0?i:t[n]))return!1}return!0},v=e=>r=>{var t=e.defaultClassName,n=D(D({},e.defaultVariants),r);for(var i in n){var l,_=(l=n[i])!==null&&l!==void 0?l:e.defaultVariants[i];if(_!=null){var m=_;typeof m=="boolean"&&(m=m===!0?"true":"false");var u=e.variantClassNames[i][m];u&&(t+=" "+u)}}for(var[f,a]of e.compoundVariants)P(f,n,e.defaultVariants)&&(t+=" "+a);return t},T=v({defaultClassName:"pkg_sps-woodland_sorting-header__version_7_19_0__hash_7ljhcs0",variantClassNames:{up:{true:"pkg_sps-woodland_sorting-header__version_7_19_0__hash_7ljhcs1"},down:{true:"pkg_sps-woodland_sorting-header__version_7_19_0__hash_7ljhcs2"}},defaultVariants:{},compoundVariants:[]});const K="";var A=v({defaultClassName:"pkg_sps-woodland_sorting-header__version_7_19_0__hash_1crs4gl0",variantClassNames:{disabled:{true:"pkg_sps-woodland_sorting-header__version_7_19_0__hash_1crs4gl1"},active:{true:"pkg_sps-woodland_sorting-header__version_7_19_0__hash_1crs4gl2"}},defaultVariants:{disabled:!1,active:!1},compoundVariants:[]});function C({className:e,sortKey:r,sort:t,sortDisabled:n,onSortChange:i,onClick:l,children:_,style:m,widthPx:u,widthRem:f,...a}){const p=s.useMemo(()=>{const h=!!r&&!n&&Array.isArray(t)&&t.find(o=>o.key===r);return h?h.direction:void 0},[t,r,n]),w=u?u/16:f,b=w?{...m,width:`${w}rem`}:m;return s.createElement("div",{className:d.cl(e,A({disabled:n,active:!!p}),p&&T({up:p===d.SortDirection.ASCENDING,down:p===d.SortDirection.DESCENDING})),onClick:h=>{r&&!n&&i&&i([{key:r,direction:p===d.SortDirection.ASCENDING?d.SortDirection.DESCENDING:d.SortDirection.ASCENDING}]),l&&l(h)},style:b,...a},_)}d.Metadata.set(C,{name:"Sorting Header Cell",props:{sortKey:{type:"string"},sort:{type:"SortedColumn[]"},sortDisabled:{type:"boolean"},onSortChange:{type:"SortChangeHandler"},widthPx:{type:"number"},widthRem:{type:"number"}}});const L="";var R=v({defaultClassName:"pkg_sps-woodland_sorting-header__version_7_19_0__hash_sk81640",variantClassNames:{pinned:{true:"pkg_sps-woodland_sorting-header__version_7_19_0__hash_sk81641",false:"pkg_sps-woodland_sorting-header__version_7_19_0__hash_sk81642"}},defaultVariants:{pinned:!1},compoundVariants:[]});function E({sort:e,onSortChange:r,children:t,className:n,pinSortingHeader:i=!1,...l}){const[_,m]=s.useState(!1),u=s.useRef(null),f=s.useRef(null),a=s.useRef({height:"",width:"",unpinAtTop:0,unpinAtBottom:0,cellWidths:[]}),p=s.useCallback(()=>{var o;if(i&&u.current){const g=(o=u.current.parentElement)==null?void 0:o.getBoundingClientRect();if(g){const S=u.current.getBoundingClientRect();a.current.height=`${S.height}px`,a.current.width=`${S.width}px`,a.current.unpinAtBottom=g.bottom+window.scrollY-S.height*2,a.current.unpinAtTop=S.top+window.scrollY-S.height,a.current.cellWidths=[],u.current.childNodes.forEach((H,j)=>{H instanceof HTMLElement&&(a.current.cellWidths[j]=`${H.getBoundingClientRect().width}px`)})}}},[i]),w=s.useCallback(()=>{f.current&&(f.current.style.width=a.current.width,f.current.style.height=a.current.height,f.current.childNodes.forEach((o,g)=>{o instanceof HTMLElement&&(o.style.width=a.current.cellWidths[g]||"")}))},[]);s.useLayoutEffect(()=>{p()}),s.useLayoutEffect(()=>{let o;return i&&(o=N.lockToAnimationFrames(()=>{p();const{unpinAtTop:g,unpinAtBottom:S}=a.current;g&&S&&(window.scrollY>=g&&window.scrollY<=S?m(!0):m(!1))}),window.addEventListener("scroll",o),o()),()=>{o&&window.removeEventListener("scroll",o)}},[i,p]),s.useLayoutEffect(()=>{let o;return _&&(o=()=>{p(),w()},window.addEventListener("resize",o),o()),()=>{o&&window.removeEventListener("resize",o)}},[_,p,w]);const[b]=d.selectChildren(t,[{type:C}]),h=d.modChildren(b,()=>[{sort:e,onSortChange:r}]);return s.createElement(s.Fragment,null,s.createElement("div",{ref:u,className:d.cl(n,R({pinned:!1})),...l},h),_&&s.createElement("div",{ref:f,className:d.cl(n,R({pinned:!0})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},h))}d.Metadata.set(E,{name:"Sorting Header",props:{sort:{type:"SortedColumn[]"},onSortChange:{type:"SortChangeHandler"}}});const V={"Sorting Header":{components:[E,C],examples:{basic:{label:"Sorting Header",examples:{basic:{react:N.code`
+          import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
+          import { Icon } from "@sps-woodland/core";
+          import { ContentRow } from "@sps-woodland/content-row";
+          import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
+          import { sprinkles, grid } from "@sps-woodland/tokens";
+          function MyComponent() {
+            const [sort, setSort] = React.useState([
+              { key: "id", direction: SortDirection.DESCENDING },
+            ]);
+          
+            const items = React.useMemo(
+              () =>
+                [
+                  {
+                    id: "9712323",
+                    icon: SpsIcon.STATUS_IN_PROCESS,
+                    color: "purple-medium",
+                    type: "850",
+                    timestamp: "July 21, 2021 @ 4:40 PM",
+                  },
+                  {
+                    id: "8712378",
+                    icon: SpsIcon.STATUS_OK,
+                    color: "green-medium",
+                    type: "810",
+                    timestamp: "May 24, 2021 @ 4:39 PM",
+                  },
+                  {
+                    id: "8912389",
+                    icon: SpsIcon.STATUS_REJECTED,
+                    color: "red-medium",
+                    type: "850",
+                    timestamp: "May 23, 2021 @ 4:38 PM",
+                  },
+                ].sort((a, b) => {
+                  if (!sort.length) {
+                    return 0;
+                  }
+          
+                  const [{ key, direction }] = sort;
+                  if (a[key] < b[key]) {
+                    return direction === SortDirection.ASCENDING ? -1 : 1;
+                  } else if (a[key] > b[key]) {
+                    return direction === SortDirection.ASCENDING ? 1 : -1;
+                  } else {
+                    return 0;
+                  }
+                }),
+              [sort]
+            );
+          
+            return (
+              <div className={grid.root}>
+                <SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
+                  <SortingHeaderCell sortKey="id">ID</SortingHeaderCell>
+                  <SortingHeaderCell sortKey="type">Type</SortingHeaderCell>
+                  <SortingHeaderCell sortKey="timestamp" widthPx={150}>
+                    Timestamp
+                  </SortingHeaderCell>
+                </SortingHeader>
+          
+                {items.map((item) => {
+                  return (
+                    <ContentRow key={item.id} className={grid[12]}>
+                      <ContentRowCol>
+                        <Icon
+                          icon={item.icon}
+                          color={item.color}
+                          size={SpsIconSize.LARGE}
+                          className={sprinkles({ mr: "sm" })}
+                        />
+                        <a href="#">
+                          {item.id}
+                        </a>
+                      </ContentRowCol>
+                      <ContentRowCol>
+                        <KeyValueSet>
+                          <KeyValueSetItem itemKey="Type">{item.type}</KeyValueSetItem>
+                        </KeyValueSet>
+                      </ContentRowCol>
+                      <ContentRowCol widthPx={250}>
+                        <KeyValueSet>
+                          <KeyValueSetItem itemKey="Timestamp">
+                            {item.timestamp}
+                          </KeyValueSetItem>
+                        </KeyValueSet>
+                      </ContentRowCol>
+                    </ContentRow>
+                  );
+                })}
+              </>
+            );
+          }
+          `}}}}}};c.MANIFEST=V,c.SortingHeader=E,c.SortingHeaderCell=C,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

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%}
+.pkg_sps-woodland_sorting-header__version_7_19_0__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_7_19_0__hash_7ljhcs1:after{border-bottom-color:#1f282c;border-top-color:transparent;top:calc(50% - 9px)}.pkg_sps-woodland_sorting-header__version_7_19_0__hash_7ljhcs2:after{border-top-color:#1f282c;border-bottom-color:transparent;top:calc(50% - 3px)}.pkg_sps-woodland_sorting-header__version_7_19_0__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_7_19_0__hash_1crs4gl0:hover{background-color:#f3f4f4}.pkg_sps-woodland_sorting-header__version_7_19_0__hash_1crs4gl1{cursor:default}.pkg_sps-woodland_sorting-header__version_7_19_0__hash_1crs4gl2{color:#1f282c;background-color:#d2d4d4}.pkg_sps-woodland_sorting-header__version_7_19_0__hash_sk81640{display:table;table-layout:fixed;width:100%;padding:0;border-radius:.25rem;vertical-align:bottom;cursor:pointer;background-color:#e9e9ea}.pkg_sps-woodland_sorting-header__version_7_19_0__hash_sk81641{border-radius:0;position:fixed;top:3.75rem;z-index:999}.pkg_sps-woodland_sorting-header__version_7_19_0__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%}

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@sps-woodland/sorting-header",
   "description": "SPS Woodland Design System sorting-header and sorting-header cell components",
-  "version": "7.17.12",
+  "version": "7.19.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/sorting-header",
   "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/sorting-header#readme",
-  "module": "./lib/index.es.js",
   "type": "module",
-  "main": "./lib/index.cjs.js",
+  "module": "./lib/index.js",
+  "main": "./lib/index.umd.cjs",
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/index.es.js",
-      "require": "./lib/index.cjs.js",
-      "default": "./lib/index.cjs.js",
+      "require": "./lib/index.umd.cjs",
+      "import": "./lib/index.js",
+      "default": "./lib/index.js",
       "types": "./lib/index.d.ts"
     },
     "./lib/style.css": {
@@ -26,21 +26,21 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@sps-woodland/core": "7.17.12",
-    "@sps-woodland/tokens": "7.17.12",
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react-dom": "^16.14.0",
+    "@sps-woodland/tokens": "7.19.0",
+    "@sps-woodland/core": "7.19.0"
   },
   "devDependencies": {
-    "@sps-woodland/core": "7.17.12",
-    "@sps-woodland/tokens": "7.17.12",
     "@spscommerce/utils": "^6.12.1",
     "@vanilla-extract/css": "^1.9.3",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react-dom": "^16.14.0",
+    "@sps-woodland/core": "7.19.0",
+    "@sps-woodland/tokens": "7.19.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",

package/vite.config.js

@@ -1,16 +1,25 @@
 import path from "path";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
-
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.js";
 import pkg from "./package.json";
 
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
 export default defineConfig({
-  plugins: [vanillaExtractPlugin()],
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
-      formats: ["es", "cjs"],
-      fileName: (format) => `index.${format}.js`,
+      name: "SortingHeader",
+      fileName: "index",
     },
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,

package/lib/index.cjs.js

@@ -1,95 +0,0 @@
-"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";
-          import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
-          import { sprinkles, grid } from "@sps-woodland/tokens";
-          function MyComponent() {
-            const [sort, setSort] = React.useState([
-              { key: "id", direction: SortDirection.DESCENDING },
-            ]);
-          
-            const items = React.useMemo(
-              () =>
-                [
-                  {
-                    id: "9712323",
-                    icon: SpsIcon.STATUS_IN_PROCESS,
-                    color: "purple-medium",
-                    type: "850",
-                    timestamp: "July 21, 2021 @ 4:40 PM",
-                  },
-                  {
-                    id: "8712378",
-                    icon: SpsIcon.STATUS_OK,
-                    color: "green-medium",
-                    type: "810",
-                    timestamp: "May 24, 2021 @ 4:39 PM",
-                  },
-                  {
-                    id: "8912389",
-                    icon: SpsIcon.STATUS_REJECTED,
-                    color: "red-medium",
-                    type: "850",
-                    timestamp: "May 23, 2021 @ 4:38 PM",
-                  },
-                ].sort((a, b) => {
-                  if (!sort.length) {
-                    return 0;
-                  }
-          
-                  const [{ key, direction }] = sort;
-                  if (a[key] < b[key]) {
-                    return direction === SortDirection.ASCENDING ? -1 : 1;
-                  } else if (a[key] > b[key]) {
-                    return direction === SortDirection.ASCENDING ? 1 : -1;
-                  } else {
-                    return 0;
-                  }
-                }),
-              [sort]
-            );
-          
-            return (
-              <div className={grid.root}>
-                <SortingHeader sort={sort} onSortChange={setSort} className={grid[12]}>
-                  <SortingHeaderCell sortKey="id">ID</SortingHeaderCell>
-                  <SortingHeaderCell sortKey="type">Type</SortingHeaderCell>
-                  <SortingHeaderCell sortKey="timestamp" widthPx={150}>
-                    Timestamp
-                  </SortingHeaderCell>
-                </SortingHeader>
-          
-                {items.map((item) => {
-                  return (
-                    <ContentRow key={item.id} className={grid[12]}>
-                      <ContentRowCol>
-                        <Icon
-                          icon={item.icon}
-                          color={item.color}
-                          size={SpsIconSize.LARGE}
-                          className={sprinkles({ mr: "sm" })}
-                        />
-                        <a href="#">
-                          {item.id}
-                        </a>
-                      </ContentRowCol>
-                      <ContentRowCol>
-                        <KeyValueSet>
-                          <KeyValueSetItem itemKey="Type">{item.type}</KeyValueSetItem>
-                        </KeyValueSet>
-                      </ContentRowCol>
-                      <ContentRowCol widthPx={250}>
-                        <KeyValueSet>
-                          <KeyValueSetItem itemKey="Timestamp">
-                            {item.timestamp}
-                          </KeyValueSetItem>
-                        </KeyValueSet>
-                      </ContentRowCol>
-                    </ContentRow>
-                  );
-                })}
-              </>
-            );
-          }
-          `}}}}},j={"Sorting Header":M};exports.MANIFEST=j;exports.SortingHeader=E;exports.SortingHeaderCell=w;