@sps-woodland/sorting-header 8.17.1 → 8.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +2 -2
- package/lib/index.es.js +123 -123
- package/lib/style.css +1 -1
- package/package.json +5 -5
- package/vite.config.mjs +11 -2
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),a=require("@sps-woodland/core"),K=require("@spscommerce/utils");function L(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 o=L(B);function x(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function H(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter(function(d){return Object.getOwnPropertyDescriptor(e,d).enumerable})),r.push.apply(r,t)}return r}function V(e){for(var n=1;n<arguments.length;n++){var r=arguments[n]!=null?arguments[n]:{};n%2?H(Object(r),!0).forEach(function(t){x(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):H(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var W=(e,n,r)=>{for(var t of Object.keys(e)){var d;if(e[t]!==((d=n[t])!==null&&d!==void 0?d:r[t]))return!1}return!0},R=e=>n=>{var r=e.defaultClassName,t=V(V({},e.defaultVariants),n);for(var d in t){var _,l=(_=t[d])!==null&&_!==void 0?_:e.defaultVariants[d];if(l!=null){var p=l;typeof p=="boolean"&&(p=p===!0?"true":"false");var h=e.variantClassNames[d][p];h&&(r+=" "+h)}}for(var[i,m]of e.compoundVariants)W(i,t,e.defaultVariants)&&(r+=" "+m);return r},j=R({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_7ljhcs0",variantClassNames:{up:{true:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_7ljhcs1"},down:{true:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_7ljhcs2"}},defaultVariants:{},compoundVariants:[]}),M=R({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl0",variantClassNames:{disabled:{true:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl1"},active:{true:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl2"},__autoLayout:{true:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl3",false:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl4"}},defaultVariants:{disabled:!1,active:!1,__autoLayout:!1},compoundVariants:[]});function O({className:e,sortKey:n,sort:r,sortDisabled:t,onSortChange:d,onClick:_,children:l,style:p,widthPx:h,widthRem:i,__autoLayout:m=!1,...c}){const u=o.useMemo(()=>{const S=!!n&&!t&&Array.isArray(r)&&r.find(w=>w.key===n);return S?S.direction:void 0},[r,n,t]),C=h?h/16:i,g=C?{...p,width:`${C}rem`}:p,v=S=>{n&&!t&&d&&d([{key:n,direction:u===a.SortDirection.ASCENDING?a.SortDirection.DESCENDING:a.SortDirection.ASCENDING}]),_&&_(S)};return m?o.createElement("td",{className:a.cl(e,M({disabled:t,active:!!u,__autoLayout:m}),u&&j({up:u===a.SortDirection.ASCENDING,down:u===a.SortDirection.DESCENDING})),onClick:v,style:g,...c},l):o.createElement("div",{className:a.cl(e,M({disabled:t,active:!!u,__autoLayout:m}),u&&j({up:u===a.SortDirection.ASCENDING,down:u===a.SortDirection.DESCENDING})),onClick:v,style:g,...c},l)}a.Metadata.set(O,{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=R({defaultClassName:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81640",variantClassNames:{pinned:{true:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81641",false:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81642"},scrollParentIsWindow:{true:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81643",false:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81644"},__autoLayout:{true:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81645",false:"pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81646"}},defaultVariants:{pinned:!1,scrollParentIsWindow:!1,__autoLayout:!1},compoundVariants:[[{pinned:!0,scrollParentIsWindow:!0},"pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81647"]]}),z="pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81648";function A({sort:e,onSortChange:n,children:r,className:t,pinSortingHeader:d=!1,__autoLayout:_=!1,...l}){const[p,h]=o.useState(!1),i=o.useRef(null),m=o.useRef(null),c=o.useRef({height:"",width:"",unpinAtTop:0,unpinAtBottom:0,cellWidths:[]}),u=o.useCallback(()=>i.current&&a.getScrollParent(i.current)||window,[]),C=o.useCallback(s=>{const f=s||u();return f.scrollY||f.scrollTop||0},[]),g=o.useCallback(s=>{var f,E,b;if(d&&i.current){const k=s||u(),P=C(k),D=_?(E=(f=i.current.parentElement)==null?void 0:f.parentElement)==null?void 0:E.getBoundingClientRect():(b=i.current.parentElement)==null?void 0:b.getBoundingClientRect();if(D){const y=i.current.getBoundingClientRect();c.current.height=`${y.height}px`,c.current.width=`${y.width}px`,k===window?(c.current.unpinAtBottom=D.bottom+P-y.height*2,c.current.unpinAtTop=y.top+P-y.height):(c.current.unpinAtBottom=D.bottom+P-y.height*2,c.current.unpinAtTop=D.top+P),c.current.cellWidths=[],i.current.childNodes.forEach((T,G)=>{T instanceof HTMLElement&&(c.current.cellWidths[G]=`${T.getBoundingClientRect().width}px`)})}}},[d]),v=o.useCallback(()=>{m.current&&(m.current.style.width=c.current.width,m.current.style.height=c.current.height,m.current.childNodes.forEach((s,f)=>{s instanceof HTMLElement&&(s.style.width=c.current.cellWidths[f]||"")}))},[]);o.useLayoutEffect(()=>{g()}),o.useLayoutEffect(()=>{let s;const f=u();return d?(s=K.lockToAnimationFrames(()=>{g(f);const{unpinAtTop:E,unpinAtBottom:b}=c.current,k=C(f);E&&b&&(k>=E&&k<=b?(h(!0),i.current&&(i.current.style.visibility="hidden")):(h(!1),i.current&&(i.current.style.visibility="visible")))}),f.addEventListener("scroll",s),s()):i.current&&(i.current.style.visibility="visible"),()=>{s&&f.removeEventListener("scroll",s)}},[d,g]),o.useLayoutEffect(()=>{let s;return p&&(s=()=>{g(),v()},window.addEventListener("resize",s),s()),()=>{s&&window.removeEventListener("resize",s)}},[p,g,v]);const[S]=a.selectChildren(r,[{type:O}]),w=a.modChildren(S,()=>[{sort:e,onSortChange:n}]),N=u()===window;if(_){const s=o.createElement("tr",null,o.createElement("td",{className:a.cl(z),colSpan:100}));return o.createElement(o.Fragment,null,o.createElement("tr",{ref:i,className:a.cl(I({pinned:!1,scrollParentIsWindow:N,__autoLayout:_}),t),...l},w),s,p&&o.createElement("tr",{ref:m,className:a.cl(t,I({pinned:!0,scrollParentIsWindow:N,__autoLayout:_})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},w))}return o.createElement(o.Fragment,null,o.createElement("div",{ref:i,className:a.cl(t,I({pinned:!1,scrollParentIsWindow:N,__autoLayout:_})),...l},w),p&&o.createElement("div",{ref:m,className:a.cl(t,I({pinned:!0,scrollParentIsWindow:N,__autoLayout:_})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},w))}a.Metadata.set(A,{name:"Sorting Header",props:{sort:{type:"SortedColumn[]"},onSortChange:{type:"SortChangeHandler"}}});const F={components:[A,O],examples:{basic:{label:"Sorting Header",examples:{basic:{react:K.code`
|
|
2
2
|
import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
|
|
3
3
|
import { Icon } from "@sps-woodland/core";
|
|
4
4
|
import { ContentRow } from "@sps-woodland/content-row";
|
|
@@ -92,4 +92,4 @@
|
|
|
92
92
|
</>
|
|
93
93
|
);
|
|
94
94
|
}
|
|
95
|
-
`}}}}},Y={"Sorting Header":F};exports.MANIFEST=Y;exports.SortingHeader=
|
|
95
|
+
`}}}}},Y={"Sorting Header":F};exports.MANIFEST=Y;exports.SortingHeader=A;exports.SortingHeaderCell=O;
|
package/lib/index.es.js
CHANGED
|
@@ -1,120 +1,120 @@
|
|
|
1
1
|
import * as n from "react";
|
|
2
|
-
import { Metadata as
|
|
3
|
-
import { lockToAnimationFrames as
|
|
4
|
-
function
|
|
5
|
-
return
|
|
2
|
+
import { Metadata as M, cl as S, SortDirection as g, getScrollParent as x, selectChildren as L, modChildren as W } from "@sps-woodland/core";
|
|
3
|
+
import { lockToAnimationFrames as z, code as F } from "@spscommerce/utils";
|
|
4
|
+
function Y(e, o, r) {
|
|
5
|
+
return o in e ? Object.defineProperty(e, o, {
|
|
6
6
|
value: r,
|
|
7
7
|
enumerable: !0,
|
|
8
8
|
configurable: !0,
|
|
9
9
|
writable: !0
|
|
10
|
-
}) : e[
|
|
10
|
+
}) : e[o] = r, e;
|
|
11
11
|
}
|
|
12
|
-
function
|
|
12
|
+
function T(e, o) {
|
|
13
13
|
var r = Object.keys(e);
|
|
14
14
|
if (Object.getOwnPropertySymbols) {
|
|
15
15
|
var t = Object.getOwnPropertySymbols(e);
|
|
16
|
-
|
|
17
|
-
return Object.getOwnPropertyDescriptor(e,
|
|
16
|
+
o && (t = t.filter(function(l) {
|
|
17
|
+
return Object.getOwnPropertyDescriptor(e, l).enumerable;
|
|
18
18
|
})), r.push.apply(r, t);
|
|
19
19
|
}
|
|
20
20
|
return r;
|
|
21
21
|
}
|
|
22
|
-
function
|
|
23
|
-
for (var
|
|
24
|
-
var r = arguments[
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) :
|
|
22
|
+
function V(e) {
|
|
23
|
+
for (var o = 1; o < arguments.length; o++) {
|
|
24
|
+
var r = arguments[o] != null ? arguments[o] : {};
|
|
25
|
+
o % 2 ? T(Object(r), !0).forEach(function(t) {
|
|
26
|
+
Y(e, t, r[t]);
|
|
27
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : T(Object(r)).forEach(function(t) {
|
|
28
28
|
Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
return e;
|
|
32
32
|
}
|
|
33
|
-
var $ = (e,
|
|
33
|
+
var $ = (e, o, r) => {
|
|
34
34
|
for (var t of Object.keys(e)) {
|
|
35
|
-
var
|
|
36
|
-
if (e[t] !== ((
|
|
35
|
+
var l;
|
|
36
|
+
if (e[t] !== ((l = o[t]) !== null && l !== void 0 ? l : r[t]))
|
|
37
37
|
return !1;
|
|
38
38
|
}
|
|
39
39
|
return !0;
|
|
40
|
-
},
|
|
41
|
-
var r = e.defaultClassName, t =
|
|
42
|
-
for (var
|
|
43
|
-
var
|
|
40
|
+
}, D = (e) => (o) => {
|
|
41
|
+
var r = e.defaultClassName, t = V(V({}, e.defaultVariants), o);
|
|
42
|
+
for (var l in t) {
|
|
43
|
+
var _, a = (_ = t[l]) !== null && _ !== void 0 ? _ : e.defaultVariants[l];
|
|
44
44
|
if (a != null) {
|
|
45
|
-
var
|
|
46
|
-
typeof
|
|
47
|
-
var
|
|
45
|
+
var u = a;
|
|
46
|
+
typeof u == "boolean" && (u = u === !0 ? "true" : "false");
|
|
47
|
+
var f = (
|
|
48
48
|
// @ts-expect-error
|
|
49
|
-
e.variantClassNames[
|
|
49
|
+
e.variantClassNames[l][u]
|
|
50
50
|
);
|
|
51
|
-
|
|
51
|
+
f && (r += " " + f);
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
-
for (var [
|
|
55
|
-
$(
|
|
54
|
+
for (var [i, p] of e.compoundVariants)
|
|
55
|
+
$(i, t, e.defaultVariants) && (r += " " + p);
|
|
56
56
|
return r;
|
|
57
|
-
},
|
|
58
|
-
function
|
|
57
|
+
}, K = D({ defaultClassName: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_7ljhcs0", variantClassNames: { up: { true: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_7ljhcs1" }, down: { true: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_7ljhcs2" } }, defaultVariants: {}, compoundVariants: [] }), j = D({ defaultClassName: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl0", variantClassNames: { disabled: { true: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl1" }, active: { true: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl2" }, __autoLayout: { true: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl3", false: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl4" } }, defaultVariants: { disabled: !1, active: !1, __autoLayout: !1 }, compoundVariants: [] });
|
|
58
|
+
function O({
|
|
59
59
|
className: e,
|
|
60
|
-
sortKey:
|
|
60
|
+
sortKey: o,
|
|
61
61
|
sort: r,
|
|
62
62
|
sortDisabled: t,
|
|
63
|
-
onSortChange:
|
|
64
|
-
onClick:
|
|
63
|
+
onSortChange: l,
|
|
64
|
+
onClick: _,
|
|
65
65
|
children: a,
|
|
66
|
-
style:
|
|
67
|
-
widthPx:
|
|
68
|
-
widthRem:
|
|
66
|
+
style: u,
|
|
67
|
+
widthPx: f,
|
|
68
|
+
widthRem: i,
|
|
69
69
|
__autoLayout: p = !1,
|
|
70
|
-
...
|
|
70
|
+
...d
|
|
71
71
|
}) {
|
|
72
|
-
const
|
|
73
|
-
const w = !!
|
|
72
|
+
const c = n.useMemo(() => {
|
|
73
|
+
const w = !!o && !t && Array.isArray(r) && r.find((C) => C.key === o);
|
|
74
74
|
return w ? w.direction : void 0;
|
|
75
|
-
}, [r,
|
|
76
|
-
|
|
75
|
+
}, [r, o, t]), v = f ? f / 16 : i, h = v ? { ...u, width: `${v}rem` } : u, E = (w) => {
|
|
76
|
+
o && !t && l && l([
|
|
77
77
|
{
|
|
78
|
-
key:
|
|
79
|
-
direction:
|
|
78
|
+
key: o,
|
|
79
|
+
direction: c === g.ASCENDING ? g.DESCENDING : g.ASCENDING
|
|
80
80
|
}
|
|
81
|
-
]),
|
|
81
|
+
]), _ && _(w);
|
|
82
82
|
};
|
|
83
83
|
return p ? /* @__PURE__ */ n.createElement(
|
|
84
84
|
"td",
|
|
85
85
|
{
|
|
86
|
-
className:
|
|
86
|
+
className: S(
|
|
87
87
|
e,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
up:
|
|
91
|
-
down:
|
|
88
|
+
j({ disabled: t, active: !!c, __autoLayout: p }),
|
|
89
|
+
c && K({
|
|
90
|
+
up: c === g.ASCENDING,
|
|
91
|
+
down: c === g.DESCENDING
|
|
92
92
|
})
|
|
93
93
|
),
|
|
94
|
-
onClick:
|
|
95
|
-
style:
|
|
96
|
-
...
|
|
94
|
+
onClick: E,
|
|
95
|
+
style: h,
|
|
96
|
+
...d
|
|
97
97
|
},
|
|
98
98
|
a
|
|
99
99
|
) : /* @__PURE__ */ n.createElement(
|
|
100
100
|
"div",
|
|
101
101
|
{
|
|
102
|
-
className:
|
|
102
|
+
className: S(
|
|
103
103
|
e,
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
up:
|
|
107
|
-
down:
|
|
104
|
+
j({ disabled: t, active: !!c, __autoLayout: p }),
|
|
105
|
+
c && K({
|
|
106
|
+
up: c === g.ASCENDING,
|
|
107
|
+
down: c === g.DESCENDING
|
|
108
108
|
})
|
|
109
109
|
),
|
|
110
|
-
onClick:
|
|
111
|
-
style:
|
|
112
|
-
...
|
|
110
|
+
onClick: E,
|
|
111
|
+
style: h,
|
|
112
|
+
...d
|
|
113
113
|
},
|
|
114
114
|
a
|
|
115
115
|
);
|
|
116
116
|
}
|
|
117
|
-
|
|
117
|
+
M.set(O, {
|
|
118
118
|
name: "Sorting Header Cell",
|
|
119
119
|
props: {
|
|
120
120
|
sortKey: { type: "string" },
|
|
@@ -125,120 +125,120 @@ G.set(H, {
|
|
|
125
125
|
widthRem: { type: "number" }
|
|
126
126
|
}
|
|
127
127
|
});
|
|
128
|
-
var
|
|
129
|
-
function
|
|
128
|
+
var A = D({ defaultClassName: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81640", variantClassNames: { pinned: { true: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81641", false: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81642" }, scrollParentIsWindow: { true: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81643", false: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81644" }, __autoLayout: { true: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81645", false: "pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81646" } }, defaultVariants: { pinned: !1, scrollParentIsWindow: !1, __autoLayout: !1 }, compoundVariants: [[{ pinned: !0, scrollParentIsWindow: !0 }, "pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81647"]] }), U = "pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81648";
|
|
129
|
+
function G({
|
|
130
130
|
sort: e,
|
|
131
|
-
onSortChange:
|
|
131
|
+
onSortChange: o,
|
|
132
132
|
children: r,
|
|
133
133
|
className: t,
|
|
134
|
-
pinSortingHeader:
|
|
135
|
-
__autoLayout:
|
|
134
|
+
pinSortingHeader: l = !1,
|
|
135
|
+
__autoLayout: _ = !1,
|
|
136
136
|
...a
|
|
137
137
|
}) {
|
|
138
|
-
const [
|
|
138
|
+
const [u, f] = n.useState(!1), i = n.useRef(null), p = n.useRef(null), d = n.useRef({
|
|
139
139
|
height: "",
|
|
140
140
|
width: "",
|
|
141
141
|
unpinAtTop: 0,
|
|
142
142
|
unpinAtBottom: 0,
|
|
143
143
|
cellWidths: []
|
|
144
|
-
}),
|
|
145
|
-
const
|
|
146
|
-
return
|
|
147
|
-
}, []),
|
|
148
|
-
(
|
|
149
|
-
var
|
|
150
|
-
if (
|
|
151
|
-
const
|
|
152
|
-
if (
|
|
153
|
-
const
|
|
154
|
-
|
|
155
|
-
|
|
144
|
+
}), c = n.useCallback(() => i.current && x(i.current) || window, []), v = n.useCallback((s) => {
|
|
145
|
+
const m = s || c();
|
|
146
|
+
return m.scrollY || m.scrollTop || 0;
|
|
147
|
+
}, []), h = n.useCallback(
|
|
148
|
+
(s) => {
|
|
149
|
+
var m, k, b;
|
|
150
|
+
if (l && i.current) {
|
|
151
|
+
const N = s || c(), P = v(N), R = _ ? (k = (m = i.current.parentElement) == null ? void 0 : m.parentElement) == null ? void 0 : k.getBoundingClientRect() : (b = i.current.parentElement) == null ? void 0 : b.getBoundingClientRect();
|
|
152
|
+
if (R) {
|
|
153
|
+
const y = i.current.getBoundingClientRect();
|
|
154
|
+
d.current.height = `${y.height}px`, d.current.width = `${y.width}px`, N === window ? (d.current.unpinAtBottom = R.bottom + P - y.height * 2, d.current.unpinAtTop = y.top + P - y.height) : (d.current.unpinAtBottom = R.bottom + P - y.height * 2, d.current.unpinAtTop = R.top + P), d.current.cellWidths = [], i.current.childNodes.forEach((H, B) => {
|
|
155
|
+
H instanceof HTMLElement && (d.current.cellWidths[B] = `${H.getBoundingClientRect().width}px`);
|
|
156
156
|
});
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
159
|
},
|
|
160
|
-
[
|
|
161
|
-
),
|
|
162
|
-
p.current && (p.current.style.width =
|
|
163
|
-
|
|
160
|
+
[l]
|
|
161
|
+
), E = n.useCallback(() => {
|
|
162
|
+
p.current && (p.current.style.width = d.current.width, p.current.style.height = d.current.height, p.current.childNodes.forEach((s, m) => {
|
|
163
|
+
s instanceof HTMLElement && (s.style.width = d.current.cellWidths[m] || "");
|
|
164
164
|
}));
|
|
165
165
|
}, []);
|
|
166
166
|
n.useLayoutEffect(() => {
|
|
167
|
-
|
|
167
|
+
h();
|
|
168
168
|
}), n.useLayoutEffect(() => {
|
|
169
|
-
let
|
|
170
|
-
const
|
|
171
|
-
return
|
|
172
|
-
|
|
173
|
-
const { unpinAtTop:
|
|
174
|
-
|
|
175
|
-
}),
|
|
176
|
-
|
|
169
|
+
let s;
|
|
170
|
+
const m = c();
|
|
171
|
+
return l ? (s = z(() => {
|
|
172
|
+
h(m);
|
|
173
|
+
const { unpinAtTop: k, unpinAtBottom: b } = d.current, N = v(m);
|
|
174
|
+
k && b && (N >= k && N <= b ? (f(!0), i.current && (i.current.style.visibility = "hidden")) : (f(!1), i.current && (i.current.style.visibility = "visible")));
|
|
175
|
+
}), m.addEventListener("scroll", s), s()) : i.current && (i.current.style.visibility = "visible"), () => {
|
|
176
|
+
s && m.removeEventListener("scroll", s);
|
|
177
177
|
};
|
|
178
|
-
}, [
|
|
179
|
-
let
|
|
180
|
-
return
|
|
181
|
-
|
|
182
|
-
}, window.addEventListener("resize",
|
|
183
|
-
|
|
178
|
+
}, [l, h]), n.useLayoutEffect(() => {
|
|
179
|
+
let s;
|
|
180
|
+
return u && (s = () => {
|
|
181
|
+
h(), E();
|
|
182
|
+
}, window.addEventListener("resize", s), s()), () => {
|
|
183
|
+
s && window.removeEventListener("resize", s);
|
|
184
184
|
};
|
|
185
|
-
}, [
|
|
186
|
-
const [w] =
|
|
187
|
-
if (
|
|
188
|
-
const
|
|
185
|
+
}, [u, h, E]);
|
|
186
|
+
const [w] = L(r, [{ type: O }]), C = W(w, () => [{ sort: e, onSortChange: o }]), I = c() === window;
|
|
187
|
+
if (_) {
|
|
188
|
+
const s = /* @__PURE__ */ n.createElement("tr", null, /* @__PURE__ */ n.createElement("td", { className: S(U), colSpan: 100 }));
|
|
189
189
|
return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
|
|
190
190
|
"tr",
|
|
191
191
|
{
|
|
192
|
-
ref:
|
|
193
|
-
className:
|
|
194
|
-
|
|
192
|
+
ref: i,
|
|
193
|
+
className: S(
|
|
194
|
+
A({ pinned: !1, scrollParentIsWindow: I, __autoLayout: _ }),
|
|
195
195
|
t
|
|
196
196
|
),
|
|
197
197
|
...a
|
|
198
198
|
},
|
|
199
|
-
|
|
200
|
-
),
|
|
199
|
+
C
|
|
200
|
+
), s, u && /* @__PURE__ */ n.createElement(
|
|
201
201
|
"tr",
|
|
202
202
|
{
|
|
203
203
|
ref: p,
|
|
204
|
-
className:
|
|
204
|
+
className: S(
|
|
205
205
|
t,
|
|
206
|
-
|
|
206
|
+
A({ pinned: !0, scrollParentIsWindow: I, __autoLayout: _ })
|
|
207
207
|
),
|
|
208
208
|
...a,
|
|
209
209
|
id: a.id ? `pinned-${a.id}` : void 0,
|
|
210
210
|
"data-testid": a["data-testid"] ? `pinned-${a["data-testid"]}` : void 0
|
|
211
211
|
},
|
|
212
|
-
|
|
212
|
+
C
|
|
213
213
|
));
|
|
214
214
|
}
|
|
215
215
|
return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
|
|
216
216
|
"div",
|
|
217
217
|
{
|
|
218
|
-
ref:
|
|
219
|
-
className:
|
|
218
|
+
ref: i,
|
|
219
|
+
className: S(
|
|
220
220
|
t,
|
|
221
|
-
|
|
221
|
+
A({ pinned: !1, scrollParentIsWindow: I, __autoLayout: _ })
|
|
222
222
|
),
|
|
223
223
|
...a
|
|
224
224
|
},
|
|
225
|
-
|
|
226
|
-
),
|
|
225
|
+
C
|
|
226
|
+
), u && /* @__PURE__ */ n.createElement(
|
|
227
227
|
"div",
|
|
228
228
|
{
|
|
229
229
|
ref: p,
|
|
230
|
-
className:
|
|
230
|
+
className: S(
|
|
231
231
|
t,
|
|
232
|
-
|
|
232
|
+
A({ pinned: !0, scrollParentIsWindow: I, __autoLayout: _ })
|
|
233
233
|
),
|
|
234
234
|
...a,
|
|
235
235
|
id: a.id ? `pinned-${a.id}` : void 0,
|
|
236
236
|
"data-testid": a["data-testid"] ? `pinned-${a["data-testid"]}` : void 0
|
|
237
237
|
},
|
|
238
|
-
|
|
238
|
+
C
|
|
239
239
|
));
|
|
240
240
|
}
|
|
241
|
-
|
|
241
|
+
M.set(G, {
|
|
242
242
|
name: "Sorting Header",
|
|
243
243
|
props: {
|
|
244
244
|
sort: { type: "SortedColumn[]" },
|
|
@@ -246,13 +246,13 @@ G.set(B, {
|
|
|
246
246
|
}
|
|
247
247
|
});
|
|
248
248
|
const J = {
|
|
249
|
-
components: [
|
|
249
|
+
components: [G, O],
|
|
250
250
|
examples: {
|
|
251
251
|
basic: {
|
|
252
252
|
label: "Sorting Header",
|
|
253
253
|
examples: {
|
|
254
254
|
basic: {
|
|
255
|
-
react:
|
|
255
|
+
react: F`
|
|
256
256
|
import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
|
|
257
257
|
import { Icon } from "@sps-woodland/core";
|
|
258
258
|
import { ContentRow } from "@sps-woodland/content-row";
|
|
@@ -356,6 +356,6 @@ const J = {
|
|
|
356
356
|
};
|
|
357
357
|
export {
|
|
358
358
|
X as MANIFEST,
|
|
359
|
-
|
|
360
|
-
|
|
359
|
+
G as SortingHeader,
|
|
360
|
+
O as SortingHeaderCell
|
|
361
361
|
};
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.pkg_sps-woodland_sorting-header__version_8_18_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_8_18_0__hash_7ljhcs1:after{border-bottom-color:#1f282c;border-top-color:transparent;top:calc(50% - 9px)}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_7ljhcs2:after{border-top-color:#1f282c;border-bottom-color:transparent;top:calc(50% - 3px)}.pkg_sps-woodland_sorting-header__version_8_18_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_8_18_0__hash_1crs4gl0:hover{background-color:#f3f4f4}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl1{cursor:default}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl2{color:#1f282c;background-color:#d2d4d4}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl3{text-align:left}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl3:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_1crs4gl3:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81640{padding:0;border-radius:.25rem;vertical-align:bottom;cursor:pointer;background-color:#e9e9ea}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81641{border-radius:0;position:fixed;top:0;z-index:999}.pkg_sps-woodland_sorting-header__version_8_18_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%}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81645{display:table-row}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81646{display:table;table-layout:fixed;width:100%}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81647{top:3.75rem}.pkg_sps-woodland_sorting-header__version_8_18_0__hash_sk81648{height:1rem;background:transparent;border:0}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/sorting-header",
|
|
3
3
|
"description": "SPS Woodland Design System sorting-header and sorting-header cell components",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.18.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/sorting-header",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.14.0",
|
|
31
31
|
"react-dom": "^16.14.0",
|
|
32
|
-
"@sps-woodland/core": "8.
|
|
33
|
-
"@sps-woodland/tokens": "8.
|
|
32
|
+
"@sps-woodland/core": "8.18.0",
|
|
33
|
+
"@sps-woodland/tokens": "8.18.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@spscommerce/utils": "^7.0.0",
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
40
40
|
"react": "^16.14.0",
|
|
41
41
|
"react-dom": "^16.14.0",
|
|
42
|
-
"@sps-woodland/core": "8.
|
|
43
|
-
"@sps-woodland/tokens": "8.
|
|
42
|
+
"@sps-woodland/core": "8.18.0",
|
|
43
|
+
"@sps-woodland/tokens": "8.18.0"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"build": "pnpm run build:js && pnpm run build:types",
|
package/vite.config.mjs
CHANGED
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import path from "path";
|
|
2
2
|
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
3
3
|
import { defineConfig } from "vite";
|
|
4
|
-
|
|
4
|
+
import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
|
|
5
5
|
import pkg from "./package.json";
|
|
6
6
|
|
|
7
|
+
const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
|
|
8
|
+
|
|
7
9
|
export default defineConfig({
|
|
8
|
-
plugins: [
|
|
10
|
+
plugins: [
|
|
11
|
+
vanillaExtractPlugin(
|
|
12
|
+
getVanillaExtractPluginProps({
|
|
13
|
+
packageName: pkg.name,
|
|
14
|
+
packageVersion,
|
|
15
|
+
})
|
|
16
|
+
),
|
|
17
|
+
],
|
|
9
18
|
build: {
|
|
10
19
|
lib: {
|
|
11
20
|
entry: path.resolve(__dirname, "src/index.ts"),
|