@sps-woodland/matrix 8.50.1 → 8.51.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/README.md +22 -1
- package/lib/index.d.ts +1 -6
- package/lib/index.js +14 -105
- package/lib/index.umd.cjs +5 -5
- package/lib/style.css +1 -1
- package/package.json +11 -15
- package/vite.config.mjs +5 -5
- package/lib/Matrix.css.d.ts +0 -4
- package/lib/Matrix.d.ts +0 -5
- package/lib/MatrixBody.d.ts +0 -3
- package/lib/MatrixCell.d.ts +0 -3
- package/lib/MatrixHead.d.ts +0 -3
- package/lib/MatrixHeader.d.ts +0 -15
- package/lib/MatrixRow.d.ts +0 -3
package/README.md
CHANGED
|
@@ -1,3 +1,24 @@
|
|
|
1
1
|
## [@sps-woodland/matrix](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/matrix#readme)
|
|
2
2
|
|
|
3
|
-
SPS Woodland Design System Matrix component
|
|
3
|
+
SPS Woodland Design System Matrix component.
|
|
4
|
+
|
|
5
|
+
### Preferred imports (core, tree-shakes per component)
|
|
6
|
+
|
|
7
|
+
```ts
|
|
8
|
+
import { Matrix } from "@sps-woodland/core/matrix";
|
|
9
|
+
import { MatrixHead } from "@sps-woodland/core/matrix-head";
|
|
10
|
+
import { MatrixHeader } from "@sps-woodland/core/matrix-header";
|
|
11
|
+
import { MatrixBody } from "@sps-woodland/core/matrix-body";
|
|
12
|
+
import { MatrixRow } from "@sps-woodland/core/matrix-row";
|
|
13
|
+
import { MatrixCell } from "@sps-woodland/core/matrix-cell";
|
|
14
|
+
import "@sps-woodland/core/matrix/style.css";
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
`Matrix` is only reachable via the family barrel (`@sps-woodland/core/matrix`) because the family name and the component name collide. `MatrixHead`, `MatrixHeader`, `MatrixBody`, `MatrixRow`, and `MatrixCell` are also available from the same barrel if you prefer one import.
|
|
18
|
+
|
|
19
|
+
### Legacy wrapper (still supported, re-exports from `@sps-woodland/core`)
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import { Matrix, MatrixHead, MatrixHeader, MatrixBody, MatrixRow, MatrixCell } from "@sps-woodland/matrix";
|
|
23
|
+
import "@sps-woodland/matrix/style.css";
|
|
24
|
+
```
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -1,102 +1,17 @@
|
|
|
1
|
+
import { Matrix as r, MatrixHeader as i } from "@sps-woodland/core/matrix";
|
|
2
|
+
export * from "@sps-woodland/core/matrix";
|
|
1
3
|
import * as e from "react";
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var m = "_67ajyb0", b = "_67ajyb1", c = "_67ajyb2", g = "_67ajyb3";
|
|
7
|
-
function u({
|
|
8
|
-
title: a,
|
|
9
|
-
children: r,
|
|
10
|
-
"data-testid": i,
|
|
11
|
-
...n
|
|
12
|
-
}) {
|
|
13
|
-
return /* @__PURE__ */ t.createElement(
|
|
14
|
-
"div",
|
|
15
|
-
{
|
|
16
|
-
className: l(m),
|
|
17
|
-
"data-testid": "matrix"
|
|
18
|
-
},
|
|
19
|
-
/* @__PURE__ */ t.createElement(f, { size: "lg" }, a),
|
|
20
|
-
/* @__PURE__ */ t.createElement("table", { className: l(m), "data-testid": `${i}`, ...n }, r)
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
o.set(u, {
|
|
24
|
-
name: "Matrix",
|
|
25
|
-
props: {
|
|
26
|
-
title: "string"
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
function w({
|
|
30
|
-
children: a,
|
|
31
|
-
"data-testid": r,
|
|
32
|
-
...i
|
|
33
|
-
}) {
|
|
34
|
-
return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("thead", { "data-testid": `${r}`, ...i }, a));
|
|
35
|
-
}
|
|
36
|
-
o.set(w, {
|
|
37
|
-
name: "Matrix Head"
|
|
38
|
-
});
|
|
39
|
-
function x({
|
|
40
|
-
icon: a,
|
|
41
|
-
tooltip: r,
|
|
42
|
-
width: i,
|
|
43
|
-
className: n,
|
|
44
|
-
children: d,
|
|
45
|
-
"data-testid": h,
|
|
46
|
-
...M
|
|
47
|
-
}) {
|
|
48
|
-
return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("th", { className: l(b), style: { width: `${i}` }, "data-testid": `${h}`, ...M }, d, /* @__PURE__ */ t.createElement("div", { className: l(g) }, a, r)));
|
|
49
|
-
}
|
|
50
|
-
o.set(x, {
|
|
51
|
-
name: "Matrix Header",
|
|
52
|
-
props: {
|
|
53
|
-
icon: "Icon",
|
|
54
|
-
tooltip: "SpsTooltip",
|
|
55
|
-
width: "string"
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
function H({
|
|
59
|
-
children: a,
|
|
60
|
-
"data-testid": r,
|
|
61
|
-
...i
|
|
62
|
-
}) {
|
|
63
|
-
return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("tbody", { "data-testid": `${r}`, ...i }, a));
|
|
64
|
-
}
|
|
65
|
-
o.set(H, {
|
|
66
|
-
name: "Matrix Body"
|
|
67
|
-
});
|
|
68
|
-
function y({
|
|
69
|
-
children: a,
|
|
70
|
-
"data-testid": r,
|
|
71
|
-
...i
|
|
72
|
-
}) {
|
|
73
|
-
return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("tr", { "data-testid": `${r}`, ...i }, a));
|
|
74
|
-
}
|
|
75
|
-
o.set(y, {
|
|
76
|
-
name: "Matrix Row"
|
|
77
|
-
});
|
|
78
|
-
function E({
|
|
79
|
-
className: a,
|
|
80
|
-
children: r,
|
|
81
|
-
"data-testid": i,
|
|
82
|
-
...n
|
|
83
|
-
}) {
|
|
84
|
-
const { t: d } = p();
|
|
85
|
-
return r !== void 0 ? r === null ? /* @__PURE__ */ t.createElement("td", { className: l(c), "data-testid": `${i}`, ...n }, d("matrix.cell.null", { defaultValue: "null" })) : /* @__PURE__ */ t.createElement("td", { className: l(c), "data-testid": `${i}`, ...n }, r) : /* @__PURE__ */ t.createElement("td", { className: l(c), "data-testid": `${i}`, ...n }, "—");
|
|
86
|
-
}
|
|
87
|
-
o.set(E, {
|
|
88
|
-
name: "Matrix Cell"
|
|
89
|
-
});
|
|
90
|
-
const C = {
|
|
91
|
-
components: [u, x],
|
|
92
|
-
description: ({ NavigateTo: a }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The Matrix component displays a grid of information utilizing a title on both the X- and Y-axes. It is an alternate to the ", /* @__PURE__ */ e.createElement(a, { to: "tables" }, "Table"), " or ", /* @__PURE__ */ e.createElement(a, { to: "description-lists" }, "Description List"), " for displaying a list of information where the value in each cell corresponds to both of its parent headers.")),
|
|
4
|
+
import { code as a } from "@spscommerce/utils";
|
|
5
|
+
const l = {
|
|
6
|
+
components: [r, i],
|
|
7
|
+
description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The Matrix component displays a grid of information utilizing a title on both the X- and Y-axes. It is an alternate to the ", /* @__PURE__ */ e.createElement(t, { to: "tables" }, "Table"), " or ", /* @__PURE__ */ e.createElement(t, { to: "description-lists" }, "Description List"), " for displaying a list of information where the value in each cell corresponds to both of its parent headers.")),
|
|
93
8
|
examples: {
|
|
94
9
|
general: {
|
|
95
10
|
label: "General Usage",
|
|
96
|
-
description: ({ NavigateTo:
|
|
11
|
+
description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The decision to use a Matrix to visualize a grid of information, as opposed to a traditional Table or Description List, is largely subjective. The following guidelines provide a reliable framework for making the correct choice."), /* @__PURE__ */ e.createElement("h5", null, " When to Use "), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, " If the data set requires an identifier on both the X-axis and a Y-axis. "), /* @__PURE__ */ e.createElement("li", null, " If the data set requires six (6) or fewer columns (including the header column). "), /* @__PURE__ */ e.createElement("li", null, " If the data set is small, or if using a matrix is more aesthetically pleasing (without sacrificing functionality) than a table or description list. ")), /* @__PURE__ */ e.createElement("h5", null, " When Not to Use "), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, " If form elements are required, consider a ", /* @__PURE__ */ e.createElement(t, { to: "tables" }, "Table"), " or ", /* @__PURE__ */ e.createElement(t, { to: "description-lists" }, "Description List"), ". "), /* @__PURE__ */ e.createElement("li", null, " If the data set requires more than six (6) columns (including the header column), use a ", /* @__PURE__ */ e.createElement(t, { to: "tables" }, "Table"), " instead. "), /* @__PURE__ */ e.createElement("li", null, " If the data needs to be searchable, filterable or sortable, use a ", /* @__PURE__ */ e.createElement(t, { to: "tables" }, "Table"), " instead. ")), /* @__PURE__ */ e.createElement("h5", null, " Avoid Over-Crowding "), /* @__PURE__ */ e.createElement("p", null, " Use the following guidelines to determine the ideal maximum number of columns based on container width. Following these guidelines will preserve content readability. ")),
|
|
97
12
|
examples: {
|
|
98
13
|
general: {
|
|
99
|
-
react:
|
|
14
|
+
react: a`
|
|
100
15
|
import {
|
|
101
16
|
Matrix,
|
|
102
17
|
MatrixHead,
|
|
@@ -140,7 +55,7 @@ const C = {
|
|
|
140
55
|
description: /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Matrix Characteristics"), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, " A header row across the top horizontal axis (X-axis). "), /* @__PURE__ */ e.createElement("li", null, " A header “column” along the left-most vertical axis (Y-axis). "), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, " A header row across the top horizontal axis (X-axis). "))), /* @__PURE__ */ e.createElement("h5", null, "Matrix Rules"), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, " Non-header cells can contain any type of content. "), /* @__PURE__ */ e.createElement("li", null, " Text and content should remain left-aligned. "), /* @__PURE__ */ e.createElement("li", null, " Column widths are evenly divided amongst the horizontal space. "), /* @__PURE__ */ e.createElement("li", null, " A title describing the contents of the matrix is suggested but not required. "), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, /* @__PURE__ */ e.createElement("i", null, "Note: for accessibility reasons, a Matrix without a visible title should still include an HTML description for identification."))))),
|
|
141
56
|
examples: {
|
|
142
57
|
basic: {
|
|
143
|
-
react:
|
|
58
|
+
react: a`
|
|
144
59
|
import {
|
|
145
60
|
Matrix,
|
|
146
61
|
MatrixHead,
|
|
@@ -262,7 +177,7 @@ const C = {
|
|
|
262
177
|
examples: {
|
|
263
178
|
customColumn: {
|
|
264
179
|
description: /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, " Customizable Column Widths "), /* @__PURE__ */ e.createElement("p", null, "Individual columns can be set to custom widths if desired. This can be done to one or all columns in the Matrix. Any columns without a specified custom width will divide the remaining horizontal space evenly.")),
|
|
265
|
-
react:
|
|
180
|
+
react: a`
|
|
266
181
|
import {
|
|
267
182
|
Matrix,
|
|
268
183
|
MatrixHead,
|
|
@@ -322,7 +237,7 @@ const C = {
|
|
|
322
237
|
},
|
|
323
238
|
omitHeaderColumn: {
|
|
324
239
|
description: /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, " Optional Left-hand Header Column "), /* @__PURE__ */ e.createElement("p", null, "The left-hand Header Column can be omitted if desired. This option can apply to default- or customizable-width Matrix components.")),
|
|
325
|
-
react:
|
|
240
|
+
react: a`
|
|
326
241
|
import {
|
|
327
242
|
Matrix,
|
|
328
243
|
MatrixHead,
|
|
@@ -383,15 +298,9 @@ const C = {
|
|
|
383
298
|
}
|
|
384
299
|
}
|
|
385
300
|
}
|
|
386
|
-
},
|
|
387
|
-
Matrix:
|
|
301
|
+
}, s = {
|
|
302
|
+
Matrix: l
|
|
388
303
|
};
|
|
389
304
|
export {
|
|
390
|
-
|
|
391
|
-
u as Matrix,
|
|
392
|
-
H as MatrixBody,
|
|
393
|
-
E as MatrixCell,
|
|
394
|
-
w as MatrixHead,
|
|
395
|
-
x as MatrixHeader,
|
|
396
|
-
y as MatrixRow
|
|
305
|
+
s as MANIFEST
|
|
397
306
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(a,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("@sps-woodland/core/matrix"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/matrix","react","@spscommerce/utils"],r):(a=typeof globalThis<"u"?globalThis:a||self,r(a.Matrix={},a.matrix,a.React,a.utils))})(this,(function(a,r,s,i){"use strict";function d(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const l in t)if(l!=="default"){const o=Object.getOwnPropertyDescriptor(t,l);Object.defineProperty(n,l,o.get?o:{enumerable:!0,get:()=>t[l]})}}return n.default=t,Object.freeze(n)}const e=d(s),c={Matrix:{components:[r.Matrix,r.MatrixHeader],description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The Matrix component displays a grid of information utilizing a title on both the X- and Y-axes. It is an alternate to the ",e.createElement(t,{to:"tables"},"Table")," or ",e.createElement(t,{to:"description-lists"},"Description List")," for displaying a list of information where the value in each cell corresponds to both of its parent headers.")),examples:{general:{label:"General Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The decision to use a Matrix to visualize a grid of information, as opposed to a traditional Table or Description List, is largely subjective. The following guidelines provide a reliable framework for making the correct choice."),e.createElement("h5",null," When to Use "),e.createElement("ul",null,e.createElement("li",null," If the data set requires an identifier on both the X-axis and a Y-axis. "),e.createElement("li",null," If the data set requires six (6) or fewer columns (including the header column). "),e.createElement("li",null," If the data set is small, or if using a matrix is more aesthetically pleasing (without sacrificing functionality) than a table or description list. ")),e.createElement("h5",null," When Not to Use "),e.createElement("ul",null,e.createElement("li",null," If form elements are required, consider a ",e.createElement(t,{to:"tables"},"Table")," or ",e.createElement(t,{to:"description-lists"},"Description List"),". "),e.createElement("li",null," If the data set requires more than six (6) columns (including the header column), use a ",e.createElement(t,{to:"tables"},"Table")," instead. "),e.createElement("li",null," If the data needs to be searchable, filterable or sortable, use a ",e.createElement(t,{to:"tables"},"Table")," instead. ")),e.createElement("h5",null," Avoid Over-Crowding "),e.createElement("p",null," Use the following guidelines to determine the ideal maximum number of columns based on container width. Following these guidelines will preserve content readability. ")),examples:{general:{react:i.code`
|
|
2
2
|
import {
|
|
3
3
|
Matrix,
|
|
4
4
|
MatrixHead,
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
</Matrix>
|
|
34
34
|
)
|
|
35
35
|
}
|
|
36
|
-
`}}},basic:{label:"Basic Matrix",description:e.createElement(e.Fragment,null,e.createElement("h5",null,"Matrix Characteristics"),e.createElement("ul",null,e.createElement("li",null," A header row across the top horizontal axis (X-axis). "),e.createElement("li",null," A header “column” along the left-most vertical axis (Y-axis). "),e.createElement("ul",null,e.createElement("li",null," A header row across the top horizontal axis (X-axis). "))),e.createElement("h5",null,"Matrix Rules"),e.createElement("ul",null,e.createElement("li",null," Non-header cells can contain any type of content. "),e.createElement("li",null," Text and content should remain left-aligned. "),e.createElement("li",null," Column widths are evenly divided amongst the horizontal space. "),e.createElement("li",null," A title describing the contents of the matrix is suggested but not required. "),e.createElement("ul",null,e.createElement("li",null,e.createElement("i",null,"Note: for accessibility reasons, a Matrix without a visible title should still include an HTML description for identification."))))),examples:{basic:{react:
|
|
36
|
+
`}}},basic:{label:"Basic Matrix",description:e.createElement(e.Fragment,null,e.createElement("h5",null,"Matrix Characteristics"),e.createElement("ul",null,e.createElement("li",null," A header row across the top horizontal axis (X-axis). "),e.createElement("li",null," A header “column” along the left-most vertical axis (Y-axis). "),e.createElement("ul",null,e.createElement("li",null," A header row across the top horizontal axis (X-axis). "))),e.createElement("h5",null,"Matrix Rules"),e.createElement("ul",null,e.createElement("li",null," Non-header cells can contain any type of content. "),e.createElement("li",null," Text and content should remain left-aligned. "),e.createElement("li",null," Column widths are evenly divided amongst the horizontal space. "),e.createElement("li",null," A title describing the contents of the matrix is suggested but not required. "),e.createElement("ul",null,e.createElement("li",null,e.createElement("i",null,"Note: for accessibility reasons, a Matrix without a visible title should still include an HTML description for identification."))))),examples:{basic:{react:i.code`
|
|
37
37
|
import {
|
|
38
38
|
Matrix,
|
|
39
39
|
MatrixHead,
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
</Matrix>
|
|
147
147
|
);
|
|
148
148
|
}
|
|
149
|
-
`}}},variations:{label:"Matrix Variations",examples:{customColumn:{description:e.createElement(e.Fragment,null,e.createElement("h5",null," Customizable Column Widths "),e.createElement("p",null,"Individual columns can be set to custom widths if desired. This can be done to one or all columns in the Matrix. Any columns without a specified custom width will divide the remaining horizontal space evenly.")),react:
|
|
149
|
+
`}}},variations:{label:"Matrix Variations",examples:{customColumn:{description:e.createElement(e.Fragment,null,e.createElement("h5",null," Customizable Column Widths "),e.createElement("p",null,"Individual columns can be set to custom widths if desired. This can be done to one or all columns in the Matrix. Any columns without a specified custom width will divide the remaining horizontal space evenly.")),react:i.code`
|
|
150
150
|
import {
|
|
151
151
|
Matrix,
|
|
152
152
|
MatrixHead,
|
|
@@ -202,7 +202,7 @@
|
|
|
202
202
|
</Matrix>
|
|
203
203
|
);
|
|
204
204
|
}
|
|
205
|
-
`},omitHeaderColumn:{description:e.createElement(e.Fragment,null,e.createElement("h5",null," Optional Left-hand Header Column "),e.createElement("p",null,"The left-hand Header Column can be omitted if desired. This option can apply to default- or customizable-width Matrix components.")),react:
|
|
205
|
+
`},omitHeaderColumn:{description:e.createElement(e.Fragment,null,e.createElement("h5",null," Optional Left-hand Header Column "),e.createElement("p",null,"The left-hand Header Column can be omitted if desired. This option can apply to default- or customizable-width Matrix components.")),react:i.code`
|
|
206
206
|
import {
|
|
207
207
|
Matrix,
|
|
208
208
|
MatrixHead,
|
|
@@ -258,4 +258,4 @@
|
|
|
258
258
|
</Matrix>
|
|
259
259
|
);
|
|
260
260
|
}
|
|
261
|
-
`}}}}}};
|
|
261
|
+
`}}}}}};a.MANIFEST=c,Object.keys(r).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(a,t)&&Object.defineProperty(a,t,{enumerable:!0,get:()=>r[t]})}),Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.pkg_sps-woodland_core__version_8_51_0__hash_6q9a8v0{width:100%;flex-direction:column;word-wrap:break-word;table-layout:fixed;overflow:hidden;border-radius:.125rem;font-size:.875rem}.pkg_sps-woodland_core__version_8_51_0__hash_6q9a8v1{background-color:#f3f4f4;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;padding:.5rem;vertical-align:top;line-height:1.25rem}.pkg_sps-woodland_core__version_8_51_0__hash_6q9a8v2{border-style:solid;border-color:#d2d4d4;border-width:.0625rem;padding:.5rem;vertical-align:top}.pkg_sps-woodland_core__version_8_51_0__hash_6q9a8v3{float:right}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/matrix",
|
|
3
3
|
"description": "SPS Woodland Design System Matrix component",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.51.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/matrix",
|
|
@@ -17,6 +17,10 @@
|
|
|
17
17
|
"import": "./lib/index.js",
|
|
18
18
|
"default": "./lib/index.js"
|
|
19
19
|
},
|
|
20
|
+
"./style.css": {
|
|
21
|
+
"import": "./lib/style.css",
|
|
22
|
+
"require": "./lib/style.css"
|
|
23
|
+
},
|
|
20
24
|
"./lib/style.css": {
|
|
21
25
|
"import": "./lib/style.css",
|
|
22
26
|
"require": "./lib/style.css"
|
|
@@ -26,32 +30,24 @@
|
|
|
26
30
|
"access": "public"
|
|
27
31
|
},
|
|
28
32
|
"peerDependencies": {
|
|
29
|
-
"@react-stately/collections": "^3.0.0",
|
|
30
33
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
31
34
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
35
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
33
|
-
"@sps-woodland/core": "8.
|
|
34
|
-
"@
|
|
35
|
-
"@spscommerce/i18n": "8.50.1"
|
|
36
|
+
"@sps-woodland/core": "8.51.0",
|
|
37
|
+
"@spscommerce/ds-react": "8.51.0"
|
|
36
38
|
},
|
|
37
39
|
"devDependencies": {
|
|
38
|
-
"@react-stately/collections": "3.12.10",
|
|
39
40
|
"@spscommerce/utils": "9.0.3",
|
|
40
|
-
"@vanilla-extract/css": "1.17.4",
|
|
41
41
|
"react": "16.14.0",
|
|
42
42
|
"react-dom": "16.14.0",
|
|
43
|
-
"@sps-woodland/core": "8.
|
|
44
|
-
"@
|
|
45
|
-
"@sps-woodland/tokens": "8.50.1"
|
|
46
|
-
},
|
|
47
|
-
"dependencies": {
|
|
48
|
-
"@spscommerce/ds-react": "8.50.1",
|
|
49
|
-
"@spscommerce/ds-shared": "8.50.1"
|
|
43
|
+
"@sps-woodland/core": "8.51.0",
|
|
44
|
+
"@spscommerce/ds-react": "8.51.0"
|
|
50
45
|
},
|
|
51
46
|
"scripts": {
|
|
52
|
-
"build": "pnpm run build:js && pnpm run build:types",
|
|
47
|
+
"build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
|
|
53
48
|
"build:js": "vite build",
|
|
54
49
|
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
|
|
50
|
+
"build:css": "cp ../core/lib/matrix/style.css lib/style.css 2>/dev/null || echo 'matrix style.css not found, skipping'",
|
|
55
51
|
"watch": "vite build --watch",
|
|
56
52
|
"clean": "git clean -fdX",
|
|
57
53
|
"pub": "node ../../../scripts/publish-package.mjs"
|
package/vite.config.mjs
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import path from "node:path";
|
|
2
|
-
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
3
2
|
import { defineConfig } from "vite";
|
|
4
|
-
|
|
5
3
|
import pkg from "./package.json";
|
|
6
4
|
|
|
7
5
|
export default defineConfig({
|
|
8
|
-
plugins: [vanillaExtractPlugin()],
|
|
9
6
|
build: {
|
|
10
7
|
lib: {
|
|
11
8
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
12
9
|
name: "Matrix",
|
|
13
10
|
fileName: "index",
|
|
14
|
-
cssFileName: "style",
|
|
15
11
|
},
|
|
16
12
|
outDir: path.resolve(__dirname, "./lib"),
|
|
17
13
|
emptyOutDir: false,
|
|
18
14
|
rollupOptions: {
|
|
19
|
-
|
|
15
|
+
// External must match subpath imports like @sps-woodland/core/matrix
|
|
16
|
+
external: (id) => {
|
|
17
|
+
const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
|
|
18
|
+
return peerDeps.some((dep) => id === dep || id.startsWith(dep + "/"));
|
|
19
|
+
},
|
|
20
20
|
},
|
|
21
21
|
},
|
|
22
22
|
});
|
package/lib/Matrix.css.d.ts
DELETED
package/lib/Matrix.d.ts
DELETED
package/lib/MatrixBody.d.ts
DELETED
package/lib/MatrixCell.d.ts
DELETED
package/lib/MatrixHead.d.ts
DELETED
package/lib/MatrixHeader.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { SpsTooltipProps } from "@spscommerce/ds-react";
|
|
3
|
-
import type { ComponentProps } from "@sps-woodland/core";
|
|
4
|
-
import type { Color, IconName, IconSize } from "@sps-woodland/tokens";
|
|
5
|
-
interface MatrixHeaderProps {
|
|
6
|
-
width?: string;
|
|
7
|
-
icon?: React.ReactElement<{
|
|
8
|
-
icon: IconName;
|
|
9
|
-
size?: IconSize;
|
|
10
|
-
color?: Color;
|
|
11
|
-
}>;
|
|
12
|
-
tooltip?: React.ReactElement<SpsTooltipProps>;
|
|
13
|
-
}
|
|
14
|
-
export declare function MatrixHeader({ icon, tooltip, width, className, children, "data-testid": testId, ...rest }: ComponentProps<MatrixHeaderProps, HTMLTableCellElement>): React.ReactElement;
|
|
15
|
-
export {};
|
package/lib/MatrixRow.d.ts
DELETED