@sps-woodland/matrix 8.51.2 → 8.52.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 +1 -22
- package/lib/Matrix.css.d.ts +4 -0
- package/lib/Matrix.d.ts +5 -0
- package/lib/MatrixBody.d.ts +3 -0
- package/lib/MatrixCell.d.ts +3 -0
- package/lib/MatrixHead.d.ts +3 -0
- package/lib/MatrixHeader.d.ts +15 -0
- package/lib/MatrixRow.d.ts +3 -0
- package/lib/index.d.ts +6 -1
- package/lib/index.js +105 -14
- package/lib/index.umd.cjs +5 -5
- package/lib/style.css +1 -1
- package/package.json +15 -11
- package/vite.config.mjs +5 -5
package/README.md
CHANGED
|
@@ -1,24 +1,3 @@
|
|
|
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
|
|
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
|
-
```
|
|
3
|
+
SPS Woodland Design System Matrix component
|
package/lib/Matrix.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
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/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -1,17 +1,102 @@
|
|
|
1
|
-
import { Matrix as r, MatrixHeader as i } from "@sps-woodland/core/matrix";
|
|
2
|
-
export * from "@sps-woodland/core/matrix";
|
|
3
1
|
import * as e from "react";
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
import t from "react";
|
|
3
|
+
import { Metadata as o, cl as l, Title as f } from "@sps-woodland/core";
|
|
4
|
+
import { useWoodlandLanguage as p } from "@spscommerce/i18n";
|
|
5
|
+
import { code as s } from "@spscommerce/utils";
|
|
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.")),
|
|
8
93
|
examples: {
|
|
9
94
|
general: {
|
|
10
95
|
label: "General Usage",
|
|
11
|
-
description: ({ NavigateTo:
|
|
96
|
+
description: ({ NavigateTo: a }) => /* @__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(a, { to: "tables" }, "Table"), " or ", /* @__PURE__ */ e.createElement(a, { 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(a, { to: "tables" }, "Table"), " instead. "), /* @__PURE__ */ e.createElement("li", null, " If the data needs to be searchable, filterable or sortable, use a ", /* @__PURE__ */ e.createElement(a, { 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. ")),
|
|
12
97
|
examples: {
|
|
13
98
|
general: {
|
|
14
|
-
react:
|
|
99
|
+
react: s`
|
|
15
100
|
import {
|
|
16
101
|
Matrix,
|
|
17
102
|
MatrixHead,
|
|
@@ -55,7 +140,7 @@ const l = {
|
|
|
55
140
|
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."))))),
|
|
56
141
|
examples: {
|
|
57
142
|
basic: {
|
|
58
|
-
react:
|
|
143
|
+
react: s`
|
|
59
144
|
import {
|
|
60
145
|
Matrix,
|
|
61
146
|
MatrixHead,
|
|
@@ -177,7 +262,7 @@ const l = {
|
|
|
177
262
|
examples: {
|
|
178
263
|
customColumn: {
|
|
179
264
|
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.")),
|
|
180
|
-
react:
|
|
265
|
+
react: s`
|
|
181
266
|
import {
|
|
182
267
|
Matrix,
|
|
183
268
|
MatrixHead,
|
|
@@ -237,7 +322,7 @@ const l = {
|
|
|
237
322
|
},
|
|
238
323
|
omitHeaderColumn: {
|
|
239
324
|
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.")),
|
|
240
|
-
react:
|
|
325
|
+
react: s`
|
|
241
326
|
import {
|
|
242
327
|
Matrix,
|
|
243
328
|
MatrixHead,
|
|
@@ -298,9 +383,15 @@ const l = {
|
|
|
298
383
|
}
|
|
299
384
|
}
|
|
300
385
|
}
|
|
301
|
-
},
|
|
302
|
-
Matrix:
|
|
386
|
+
}, v = {
|
|
387
|
+
Matrix: C
|
|
303
388
|
};
|
|
304
389
|
export {
|
|
305
|
-
|
|
390
|
+
v as MANIFEST,
|
|
391
|
+
u as Matrix,
|
|
392
|
+
H as MatrixBody,
|
|
393
|
+
E as MatrixCell,
|
|
394
|
+
w as MatrixHead,
|
|
395
|
+
x as MatrixHeader,
|
|
396
|
+
y as MatrixRow
|
|
306
397
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(l,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/i18n"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/i18n","@spscommerce/utils"],t):(l=typeof globalThis<"u"?globalThis:l||self,t(l.Matrix={},l.React,l.core,l.i18n,l.utils))})(this,(function(l,t,n,b,s){"use strict";function g(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(i,r,o.get?o:{enumerable:!0,get:()=>a[r]})}}return i.default=a,Object.freeze(i)}const e=g(t);var x="_67ajyb0",w="_67ajyb1",d="_67ajyb2",y="_67ajyb3";function c({title:a,children:i,"data-testid":r,...o}){return t.createElement("div",{className:n.cl(x),"data-testid":"matrix"},t.createElement(n.Title,{size:"lg"},a),t.createElement("table",{className:n.cl(x),"data-testid":`${r}`,...o},i))}n.Metadata.set(c,{name:"Matrix",props:{title:"string"}});function h({children:a,"data-testid":i,...r}){return t.createElement(t.Fragment,null,t.createElement("thead",{"data-testid":`${i}`,...r},a))}n.Metadata.set(h,{name:"Matrix Head"});function m({icon:a,tooltip:i,width:r,className:o,children:u,"data-testid":E,...C}){return t.createElement(t.Fragment,null,t.createElement("th",{className:n.cl(w),style:{width:`${r}`},"data-testid":`${E}`,...C},u,t.createElement("div",{className:n.cl(y)},a,i)))}n.Metadata.set(m,{name:"Matrix Header",props:{icon:"Icon",tooltip:"SpsTooltip",width:"string"}});function M({children:a,"data-testid":i,...r}){return t.createElement(t.Fragment,null,t.createElement("tbody",{"data-testid":`${i}`,...r},a))}n.Metadata.set(M,{name:"Matrix Body"});function f({children:a,"data-testid":i,...r}){return t.createElement(t.Fragment,null,t.createElement("tr",{"data-testid":`${i}`,...r},a))}n.Metadata.set(f,{name:"Matrix Row"});function p({className:a,children:i,"data-testid":r,...o}){const{t:u}=b.useWoodlandLanguage();return i!==void 0?i===null?t.createElement("td",{className:n.cl(d),"data-testid":`${r}`,...o},u("matrix.cell.null",{defaultValue:"null"})):t.createElement("td",{className:n.cl(d),"data-testid":`${r}`,...o},i):t.createElement("td",{className:n.cl(d),"data-testid":`${r}`,...o},"—")}n.Metadata.set(p,{name:"Matrix Cell"});const H={Matrix:{components:[c,m],description:({NavigateTo:a})=>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(a,{to:"tables"},"Table")," or ",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.")),examples:{general:{label:"General Usage",description:({NavigateTo:a})=>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(a,{to:"tables"},"Table")," or ",e.createElement(a,{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(a,{to:"tables"},"Table")," instead. "),e.createElement("li",null," If the data needs to be searchable, filterable or sortable, use a ",e.createElement(a,{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:s.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:s.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:s.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:s.code`
|
|
206
206
|
import {
|
|
207
207
|
Matrix,
|
|
208
208
|
MatrixHead,
|
|
@@ -258,4 +258,4 @@
|
|
|
258
258
|
</Matrix>
|
|
259
259
|
);
|
|
260
260
|
}
|
|
261
|
-
`}}}}}};
|
|
261
|
+
`}}}}}};l.MANIFEST=H,l.Matrix=c,l.MatrixBody=M,l.MatrixCell=p,l.MatrixHead=h,l.MatrixHeader=m,l.MatrixRow=f,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._67ajyb0{width:100%;flex-direction:column;word-wrap:break-word;table-layout:fixed;overflow:hidden;border-radius:.125rem;font-size:.875rem}._67ajyb1{background-color:#f3f4f4;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;padding:.5rem;vertical-align:top;line-height:1.25rem}._67ajyb2{border-style:solid;border-color:#d2d4d4;border-width:.0625rem;padding:.5rem;vertical-align:top}._67ajyb3{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.52.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,10 +17,6 @@
|
|
|
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
|
-
},
|
|
24
20
|
"./lib/style.css": {
|
|
25
21
|
"import": "./lib/style.css",
|
|
26
22
|
"require": "./lib/style.css"
|
|
@@ -30,24 +26,32 @@
|
|
|
30
26
|
"access": "public"
|
|
31
27
|
},
|
|
32
28
|
"peerDependencies": {
|
|
29
|
+
"@react-stately/collections": "^3.0.0",
|
|
33
30
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
34
31
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
35
32
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
36
|
-
"@sps-woodland/core": "8.
|
|
37
|
-
"@
|
|
33
|
+
"@sps-woodland/core": "8.52.0",
|
|
34
|
+
"@sps-woodland/tokens": "8.52.0",
|
|
35
|
+
"@spscommerce/i18n": "8.52.0"
|
|
38
36
|
},
|
|
39
37
|
"devDependencies": {
|
|
38
|
+
"@react-stately/collections": "3.12.10",
|
|
40
39
|
"@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
|
-
"@
|
|
43
|
+
"@sps-woodland/core": "8.52.0",
|
|
44
|
+
"@sps-woodland/tabs": "8.52.0",
|
|
45
|
+
"@sps-woodland/tokens": "8.52.0"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@spscommerce/ds-react": "8.52.0",
|
|
49
|
+
"@spscommerce/ds-shared": "8.52.0"
|
|
45
50
|
},
|
|
46
51
|
"scripts": {
|
|
47
|
-
"build": "pnpm run build:js && pnpm run build:types
|
|
52
|
+
"build": "pnpm run build:js && pnpm run build:types",
|
|
48
53
|
"build:js": "vite build",
|
|
49
54
|
"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'",
|
|
51
55
|
"watch": "vite build --watch",
|
|
52
56
|
"clean": "git clean -fdX",
|
|
53
57
|
"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";
|
|
2
3
|
import { defineConfig } from "vite";
|
|
4
|
+
|
|
3
5
|
import pkg from "./package.json";
|
|
4
6
|
|
|
5
7
|
export default defineConfig({
|
|
8
|
+
plugins: [vanillaExtractPlugin()],
|
|
6
9
|
build: {
|
|
7
10
|
lib: {
|
|
8
11
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
9
12
|
name: "Matrix",
|
|
10
13
|
fileName: "index",
|
|
14
|
+
cssFileName: "style",
|
|
11
15
|
},
|
|
12
16
|
outDir: path.resolve(__dirname, "./lib"),
|
|
13
17
|
emptyOutDir: false,
|
|
14
18
|
rollupOptions: {
|
|
15
|
-
|
|
16
|
-
external: (id) => {
|
|
17
|
-
const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
|
|
18
|
-
return peerDeps.some((dep) => id === dep || id.startsWith(dep + "/"));
|
|
19
|
-
},
|
|
19
|
+
external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
|
|
20
20
|
},
|
|
21
21
|
},
|
|
22
22
|
});
|