@sps-woodland/sorting-header 8.7.4 → 8.7.5
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 +35 -33
- package/lib/style.css +1 -1
- package/package.json +5 -5
- /package/{vite.config.js → vite.config.mjs} +0 -0
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),c=require("@sps-woodland/core"),R=require("@spscommerce/utils");function A(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const a=A(P);function H(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function N(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),t.push.apply(t,r)}return t}function D(e){for(var n=1;n<arguments.length;n++){var t=arguments[n]!=null?arguments[n]:{};n%2?N(Object(t),!0).forEach(function(r){H(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):N(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var T=(e,n,t)=>{for(var r of Object.keys(e)){var i;if(e[r]!==((i=n[r])!==null&&i!==void 0?i:t[r]))return!1}return!0},v=e=>n=>{var t=e.defaultClassName,r=D(D({},e.defaultVariants),n);for(var i in r){var l,f=(l=r[i])!==null&&l!==void 0?l:e.defaultVariants[i];if(f!=null){var m=f;typeof m=="boolean"&&(m=m===!0?"true":"false");var d=e.variantClassNames[i][m];d&&(t+=" "+d)}}for(var[p,s]of e.compoundVariants)T(p,r,e.defaultVariants)&&(t+=" "+s);return t},V=v({defaultClassName:"_7ljhcs0",variantClassNames:{up:{true:"_7ljhcs1"},down:{true:"_7ljhcs2"}},defaultVariants:{},compoundVariants:[]}),j=v({defaultClassName:"_1crs4gl0",variantClassNames:{disabled:{true:"_1crs4gl1"},active:{true:"_1crs4gl2"}},defaultVariants:{disabled:!1,active:!1},compoundVariants:[]});function w({className:e,sortKey:n,sort:t,sortDisabled:r,onSortChange:i,onClick:l,children:f,style:m,widthPx:d,widthRem:p,...s}){const u=a.useMemo(()=>{const y=!!n&&!r&&Array.isArray(t)&&t.find(o=>o.key===n);return y?y.direction:void 0},[t,n,r]),g=d?d/16:p,h=g?{...m,width:`${g}rem`}:m;return a.createElement("div",{className:c.cl(e,j({disabled:r,active:!!u}),u&&V({up:u===c.SortDirection.ASCENDING,down:u===c.SortDirection.DESCENDING})),onClick:y=>{n&&!r&&i&&i([{key:n,direction:u===c.SortDirection.ASCENDING?c.SortDirection.DESCENDING:c.SortDirection.ASCENDING}]),l&&l(y)},style:h,...s},f)}c.Metadata.set(w,{name:"Sorting Header Cell",props:{sortKey:{type:"string"},sort:{type:"SortedColumn[]"},sortDisabled:{type:"boolean"},onSortChange:{type:"SortChangeHandler"},widthPx:{type:"number"},widthRem:{type:"number"}}});var O=v({defaultClassName:"sk81640",variantClassNames:{pinned:{true:"sk81641",false:"sk81642"}},defaultVariants:{pinned:!1},compoundVariants:[]});function E({sort:e,onSortChange:n,children:t,className:r,pinSortingHeader:i=!1,...l}){const[f,m]=a.useState(!1),d=a.useRef(null),p=a.useRef(null),s=a.useRef({height:"",width:"",unpinAtTop:0,unpinAtBottom:0,cellWidths:[]}),u=a.useCallback(()=>{var o;if(i&&d.current){const C=(o=d.current.parentElement)==null?void 0:o.getBoundingClientRect();if(C){const S=d.current.getBoundingClientRect();s.current.height=`${S.height}px`,s.current.width=`${S.width}px`,s.current.unpinAtBottom=C.bottom+window.scrollY-S.height*2,s.current.unpinAtTop=S.top+window.scrollY-S.height,s.current.cellWidths=[],d.current.childNodes.forEach((b,I)=>{b instanceof HTMLElement&&(s.current.cellWidths[I]=`${b.getBoundingClientRect().width}px`)})}}},[i]),g=a.useCallback(()=>{p.current&&(p.current.style.width=s.current.width,p.current.style.height=s.current.height,p.current.childNodes.forEach((o,C)=>{o instanceof HTMLElement&&(o.style.width=s.current.cellWidths[C]||"")}))},[]);a.useLayoutEffect(()=>{u()}),a.useLayoutEffect(()=>{let o;return i&&(o=R.lockToAnimationFrames(()=>{u();const{unpinAtTop:C,unpinAtBottom:S}=s.current;C&&S&&(window.scrollY>=C&&window.scrollY<=S?m(!0):m(!1))}),window.addEventListener("scroll",o),o()),()=>{o&&window.removeEventListener("scroll",o)}},[i,u]),a.useLayoutEffect(()=>{let o;return f&&(o=()=>{u(),g()},window.addEventListener("resize",o),o()),()=>{o&&window.removeEventListener("resize",o)}},[f,u,g]);const[h]=c.selectChildren(t,[{type:w}]),y=c.modChildren(h,()=>[{sort:e,onSortChange:n}]);return a.createElement(a.Fragment,null,a.createElement("div",{ref:d,className:c.cl(r,O({pinned:!1})),...l},y),f&&a.createElement("div",{ref:p,className:c.cl(r,O({pinned:!0})),...l,id:l.id?`pinned-${l.id}`:void 0,"data-testid":l["data-testid"]?`pinned-${l["data-testid"]}`:void 0},y))}c.Metadata.set(E,{name:"Sorting Header",props:{sort:{type:"SortedColumn[]"},onSortChange:{type:"SortChangeHandler"}}});const M={components:[E,w],examples:{basic:{label:"Sorting Header",examples:{basic:{react:R.code`
|
|
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
|
-
`}}}}},
|
|
95
|
+
`}}}}},k={"Sorting Header":M};exports.MANIFEST=k;exports.SortingHeader=E;exports.SortingHeaderCell=w;
|
package/lib/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as a from "react";
|
|
2
|
-
import { Metadata as D, cl as
|
|
3
|
-
import { lockToAnimationFrames as
|
|
4
|
-
function
|
|
2
|
+
import { Metadata as D, cl as g, SortDirection as w, selectChildren as P, modChildren as V } from "@sps-woodland/core";
|
|
3
|
+
import { lockToAnimationFrames as H, code as T } from "@spscommerce/utils";
|
|
4
|
+
function K(e, n, r) {
|
|
5
5
|
return n in e ? Object.defineProperty(e, n, {
|
|
6
6
|
value: r,
|
|
7
7
|
enumerable: !0,
|
|
@@ -23,37 +23,39 @@ function R(e) {
|
|
|
23
23
|
for (var n = 1; n < arguments.length; n++) {
|
|
24
24
|
var r = arguments[n] != null ? arguments[n] : {};
|
|
25
25
|
n % 2 ? b(Object(r), !0).forEach(function(t) {
|
|
26
|
-
|
|
26
|
+
K(e, t, r[t]);
|
|
27
27
|
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : b(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
|
|
33
|
+
var k = (e, n, r) => {
|
|
34
34
|
for (var t of Object.keys(e)) {
|
|
35
35
|
var i;
|
|
36
36
|
if (e[t] !== ((i = n[t]) !== null && i !== void 0 ? i : r[t]))
|
|
37
37
|
return !1;
|
|
38
38
|
}
|
|
39
39
|
return !0;
|
|
40
|
-
},
|
|
40
|
+
}, E = (e) => (n) => {
|
|
41
41
|
var r = e.defaultClassName, t = R(R({}, e.defaultVariants), n);
|
|
42
42
|
for (var i in t) {
|
|
43
43
|
var l, p = (l = t[i]) !== null && l !== void 0 ? l : e.defaultVariants[i];
|
|
44
44
|
if (p != null) {
|
|
45
45
|
var u = p;
|
|
46
46
|
typeof u == "boolean" && (u = u === !0 ? "true" : "false");
|
|
47
|
-
var d =
|
|
47
|
+
var d = (
|
|
48
|
+
// @ts-expect-error
|
|
49
|
+
e.variantClassNames[i][u]
|
|
50
|
+
);
|
|
48
51
|
d && (r += " " + d);
|
|
49
52
|
}
|
|
50
53
|
}
|
|
51
54
|
for (var [m, s] of e.compoundVariants)
|
|
52
|
-
|
|
55
|
+
k(m, t, e.defaultVariants) && (r += " " + s);
|
|
53
56
|
return r;
|
|
54
|
-
},
|
|
55
|
-
|
|
56
|
-
function E({
|
|
57
|
+
}, j = E({ defaultClassName: "_7ljhcs0", variantClassNames: { up: { true: "_7ljhcs1" }, down: { true: "_7ljhcs2" } }, defaultVariants: {}, compoundVariants: [] }), L = E({ defaultClassName: "_1crs4gl0", variantClassNames: { disabled: { true: "_1crs4gl1" }, active: { true: "_1crs4gl2" } }, defaultVariants: { disabled: !1, active: !1 }, compoundVariants: [] });
|
|
58
|
+
function v({
|
|
57
59
|
className: e,
|
|
58
60
|
sortKey: n,
|
|
59
61
|
sort: r,
|
|
@@ -73,14 +75,14 @@ function E({
|
|
|
73
75
|
r,
|
|
74
76
|
n,
|
|
75
77
|
t
|
|
76
|
-
]), C = d ? d / 16 : m,
|
|
78
|
+
]), C = d ? d / 16 : m, h = C ? { ...u, width: `${C}rem` } : u;
|
|
77
79
|
return /* @__PURE__ */ a.createElement(
|
|
78
80
|
"div",
|
|
79
81
|
{
|
|
80
|
-
className:
|
|
82
|
+
className: g(
|
|
81
83
|
e,
|
|
82
|
-
|
|
83
|
-
c &&
|
|
84
|
+
L({ disabled: t, active: !!c }),
|
|
85
|
+
c && j({
|
|
84
86
|
up: c === w.ASCENDING,
|
|
85
87
|
down: c === w.DESCENDING
|
|
86
88
|
})
|
|
@@ -93,13 +95,13 @@ function E({
|
|
|
93
95
|
}
|
|
94
96
|
]), l && l(S);
|
|
95
97
|
},
|
|
96
|
-
style:
|
|
98
|
+
style: h,
|
|
97
99
|
...s
|
|
98
100
|
},
|
|
99
101
|
p
|
|
100
102
|
);
|
|
101
103
|
}
|
|
102
|
-
D.set(
|
|
104
|
+
D.set(v, {
|
|
103
105
|
name: "Sorting Header Cell",
|
|
104
106
|
props: {
|
|
105
107
|
sortKey: { type: "string" },
|
|
@@ -110,8 +112,8 @@ D.set(E, {
|
|
|
110
112
|
widthRem: { type: "number" }
|
|
111
113
|
}
|
|
112
114
|
});
|
|
113
|
-
var I =
|
|
114
|
-
function
|
|
115
|
+
var I = E({ defaultClassName: "sk81640", variantClassNames: { pinned: { true: "sk81641", false: "sk81642" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] });
|
|
116
|
+
function O({
|
|
115
117
|
sort: e,
|
|
116
118
|
onSortChange: n,
|
|
117
119
|
children: r,
|
|
@@ -131,8 +133,8 @@ function H({
|
|
|
131
133
|
const y = (o = d.current.parentElement) == null ? void 0 : o.getBoundingClientRect();
|
|
132
134
|
if (y) {
|
|
133
135
|
const f = d.current.getBoundingClientRect();
|
|
134
|
-
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,
|
|
135
|
-
N instanceof HTMLElement && (s.current.cellWidths[
|
|
136
|
+
s.current.height = `${f.height}px`, s.current.width = `${f.width}px`, s.current.unpinAtBottom = y.bottom + window.scrollY - f.height * 2, s.current.unpinAtTop = f.top + window.scrollY - f.height, s.current.cellWidths = [], d.current.childNodes.forEach((N, A) => {
|
|
137
|
+
N instanceof HTMLElement && (s.current.cellWidths[A] = `${N.getBoundingClientRect().width}px`);
|
|
136
138
|
});
|
|
137
139
|
}
|
|
138
140
|
}
|
|
@@ -145,7 +147,7 @@ function H({
|
|
|
145
147
|
c();
|
|
146
148
|
}), a.useLayoutEffect(() => {
|
|
147
149
|
let o;
|
|
148
|
-
return i && (o =
|
|
150
|
+
return i && (o = H(() => {
|
|
149
151
|
c();
|
|
150
152
|
const { unpinAtTop: y, unpinAtBottom: f } = s.current;
|
|
151
153
|
y && f && (window.scrollY >= y && window.scrollY <= f ? u(!0) : u(!1));
|
|
@@ -164,12 +166,12 @@ function H({
|
|
|
164
166
|
c,
|
|
165
167
|
C
|
|
166
168
|
]);
|
|
167
|
-
const [
|
|
169
|
+
const [h] = P(r, [{ type: v }]), S = V(h, () => [{ sort: e, onSortChange: n }]);
|
|
168
170
|
return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
|
|
169
171
|
"div",
|
|
170
172
|
{
|
|
171
173
|
ref: d,
|
|
172
|
-
className:
|
|
174
|
+
className: g(t, I({ pinned: !1 })),
|
|
173
175
|
...l
|
|
174
176
|
},
|
|
175
177
|
S
|
|
@@ -177,7 +179,7 @@ function H({
|
|
|
177
179
|
"div",
|
|
178
180
|
{
|
|
179
181
|
ref: m,
|
|
180
|
-
className:
|
|
182
|
+
className: g(t, I({ pinned: !0 })),
|
|
181
183
|
...l,
|
|
182
184
|
id: l.id ? `pinned-${l.id}` : void 0,
|
|
183
185
|
"data-testid": l["data-testid"] ? `pinned-${l["data-testid"]}` : void 0
|
|
@@ -185,15 +187,15 @@ function H({
|
|
|
185
187
|
S
|
|
186
188
|
));
|
|
187
189
|
}
|
|
188
|
-
D.set(
|
|
190
|
+
D.set(O, {
|
|
189
191
|
name: "Sorting Header",
|
|
190
192
|
props: {
|
|
191
193
|
sort: { type: "SortedColumn[]" },
|
|
192
194
|
onSortChange: { type: "SortChangeHandler" }
|
|
193
195
|
}
|
|
194
196
|
});
|
|
195
|
-
const
|
|
196
|
-
components: [
|
|
197
|
+
const M = {
|
|
198
|
+
components: [O, v],
|
|
197
199
|
examples: {
|
|
198
200
|
basic: {
|
|
199
201
|
label: "Sorting Header",
|
|
@@ -298,11 +300,11 @@ const L = {
|
|
|
298
300
|
}
|
|
299
301
|
}
|
|
300
302
|
}
|
|
301
|
-
},
|
|
302
|
-
"Sorting Header":
|
|
303
|
+
}, B = {
|
|
304
|
+
"Sorting Header": M
|
|
303
305
|
};
|
|
304
306
|
export {
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
307
|
+
B as MANIFEST,
|
|
308
|
+
O as SortingHeader,
|
|
309
|
+
v as SortingHeaderCell
|
|
308
310
|
};
|
package/lib/style.css
CHANGED
|
@@ -1 +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
|
|
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%}
|
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.7.
|
|
4
|
+
"version": "8.7.5",
|
|
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": "^6.12.1",
|
|
30
30
|
"react": "^16.14.0",
|
|
31
31
|
"react-dom": "^16.14.0",
|
|
32
|
-
"@sps-woodland/core": "8.7.
|
|
33
|
-
"@sps-woodland/tokens": "8.7.
|
|
32
|
+
"@sps-woodland/core": "8.7.5",
|
|
33
|
+
"@sps-woodland/tokens": "8.7.5"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@spscommerce/utils": "^6.12.1",
|
|
@@ -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.7.
|
|
43
|
-
"@sps-woodland/tokens": "8.7.
|
|
42
|
+
"@sps-woodland/core": "8.7.5",
|
|
43
|
+
"@sps-woodland/tokens": "8.7.5"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"build": "pnpm run build:js && pnpm run build:types",
|
|
File without changes
|