@sps-woodland/column-manager 8.50.2 → 8.51.1
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 +19 -0
- package/lib/index.d.ts +1 -2
- package/lib/index.js +12 -166
- package/lib/index.umd.cjs +5 -5
- package/package.json +5 -20
- package/vite.config.mjs +5 -13
- package/lib/column-manager/ColumnManager.d.ts +0 -22
- package/lib/column-manager/useColumnManager.d.ts +0 -26
package/README.md
CHANGED
|
@@ -1,3 +1,22 @@
|
|
|
1
1
|
## [@sps-woodland/column-manager](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/column-manager#readme)
|
|
2
2
|
|
|
3
3
|
SPS Woodland Design System Column Manager
|
|
4
|
+
|
|
5
|
+
### Imports
|
|
6
|
+
|
|
7
|
+
Prefer the mono-package subpath (single shared peer-dep declaration, deterministic tree-shaking):
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { ColumnManager, useColumnManager } from "@sps-woodland/core/column-manager";
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
`ColumnManager` styles come from `@sps-woodland/tokens` sprinkles — there is no separate
|
|
14
|
+
`column-manager/style.css` to import. Make sure your app already loads `@sps-woodland/tokens`
|
|
15
|
+
CSS, and you are set.
|
|
16
|
+
|
|
17
|
+
The legacy wrapper import still works during the transition (it re-exports from
|
|
18
|
+
`@sps-woodland/core/column-manager`):
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
|
|
22
|
+
```
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -1,167 +1,15 @@
|
|
|
1
|
+
import { ColumnManager as n } from "@sps-woodland/core/column-manager";
|
|
2
|
+
export * from "@sps-woodland/core/column-manager";
|
|
1
3
|
import * as e from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
import { SpsModal as V, SpsModalFooter as x, SpsButton as H } from "@spscommerce/ds-react";
|
|
6
|
-
import { ModalSize as F, ModalKind as j, ButtonKind as P } from "@spscommerce/ds-shared";
|
|
7
|
-
import { useWoodlandLanguage as q } from "@spscommerce/i18n";
|
|
8
|
-
import { code as m } from "@spscommerce/utils";
|
|
9
|
-
function y({
|
|
10
|
-
isOpen: a,
|
|
11
|
-
title: d,
|
|
12
|
-
visibleColumnsHeader: c,
|
|
13
|
-
hiddenColumnsHeader: p,
|
|
14
|
-
visibleColumns: s,
|
|
15
|
-
hiddenColumns: i,
|
|
16
|
-
maxDisplayedItems: l,
|
|
17
|
-
manualSort: t = !0,
|
|
18
|
-
showIcons: h = !0,
|
|
19
|
-
showCount: C = !0,
|
|
20
|
-
showFilter: b = !0,
|
|
21
|
-
showMoveAllLinks: f = !0,
|
|
22
|
-
cancelButtonText: g,
|
|
23
|
-
saveButtonText: n,
|
|
24
|
-
onSave: o,
|
|
25
|
-
onOpen: v,
|
|
26
|
-
onClose: B,
|
|
27
|
-
"data-testid": w
|
|
28
|
-
}) {
|
|
29
|
-
const [E, O] = e.useState(!!a), { t: r } = q(), M = A({ "data-testid": w }), [u, S] = e.useState({
|
|
30
|
-
visibleColumns: s,
|
|
31
|
-
hiddenColumns: i
|
|
32
|
-
}), k = () => {
|
|
33
|
-
O(!1), B?.();
|
|
34
|
-
};
|
|
35
|
-
return e.useEffect(() => {
|
|
36
|
-
E && (S({ visibleColumns: s, hiddenColumns: i }), v?.());
|
|
37
|
-
}, [E]), e.useEffect(() => {
|
|
38
|
-
O(!!a);
|
|
39
|
-
}, [a]), E ? /* @__PURE__ */ e.createElement(
|
|
40
|
-
V,
|
|
41
|
-
{
|
|
42
|
-
title: d || r("columnManager.title", { defaultValue: "Manage Table Columns" }),
|
|
43
|
-
kind: j.GENERAL,
|
|
44
|
-
size: F.LARGE,
|
|
45
|
-
"data-testid": w,
|
|
46
|
-
onClose: k
|
|
47
|
-
},
|
|
48
|
-
/* @__PURE__ */ e.createElement(
|
|
49
|
-
I,
|
|
50
|
-
{
|
|
51
|
-
onHeader: c || r("columnManager.onListHeader", { defaultValue: "Visible Columns" }),
|
|
52
|
-
offHeader: p || r("columnManager.offListHeader", { defaultValue: "Hidden Columns" }),
|
|
53
|
-
onList: u.visibleColumns,
|
|
54
|
-
offList: u.hiddenColumns,
|
|
55
|
-
onChange: (T) => {
|
|
56
|
-
S({ visibleColumns: T.onList, hiddenColumns: T.offList });
|
|
57
|
-
},
|
|
58
|
-
manualSort: t,
|
|
59
|
-
maxDisplayedItems: l,
|
|
60
|
-
showIcons: h,
|
|
61
|
-
showCount: C,
|
|
62
|
-
showFilter: b,
|
|
63
|
-
showMoveAllLinks: f,
|
|
64
|
-
...M("add-to-list")
|
|
65
|
-
}
|
|
66
|
-
),
|
|
67
|
-
/* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement(
|
|
68
|
-
H,
|
|
69
|
-
{
|
|
70
|
-
kind: P.DEFAULT,
|
|
71
|
-
onClick: () => {
|
|
72
|
-
S({ visibleColumns: s, hiddenColumns: i }), k();
|
|
73
|
-
},
|
|
74
|
-
className: L({ mr: "sm" }),
|
|
75
|
-
...M("cancel-button")
|
|
76
|
-
},
|
|
77
|
-
g || r("columnManager.cancelButton", { defaultValue: "Cancel" })
|
|
78
|
-
), /* @__PURE__ */ e.createElement(
|
|
79
|
-
H,
|
|
80
|
-
{
|
|
81
|
-
kind: P.KEY,
|
|
82
|
-
onClick: () => {
|
|
83
|
-
o?.(u.visibleColumns, u.hiddenColumns), k();
|
|
84
|
-
},
|
|
85
|
-
...M("save-button")
|
|
86
|
-
},
|
|
87
|
-
n || r("columnManager.saveButton", { defaultValue: "Save" })
|
|
88
|
-
))
|
|
89
|
-
) : null;
|
|
90
|
-
}
|
|
91
|
-
R.set(y, {
|
|
92
|
-
name: "Column Manager",
|
|
93
|
-
props: {
|
|
94
|
-
isOpen: { type: "boolean", required: !0 },
|
|
95
|
-
title: { type: "string" },
|
|
96
|
-
visibleColumnsHeader: { type: "string" },
|
|
97
|
-
hiddenColumnsHeader: { type: "string" },
|
|
98
|
-
visibleColumns: { type: "ItemProps[]", required: !0 },
|
|
99
|
-
hiddenColumns: { type: "ItemProps[]", required: !0 },
|
|
100
|
-
manualSort: { type: "boolean" },
|
|
101
|
-
maxDisplayedItems: { type: "number" },
|
|
102
|
-
showIcons: { type: "boolean" },
|
|
103
|
-
showCount: { type: "boolean" },
|
|
104
|
-
showFilter: { type: "boolean" },
|
|
105
|
-
showMoveAllLinks: { type: "boolean" },
|
|
106
|
-
cancelButtonText: { type: "string" },
|
|
107
|
-
saveButtonText: { type: "string" },
|
|
108
|
-
onSave: { type: "(visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void" },
|
|
109
|
-
onClose: { type: "() => void" },
|
|
110
|
-
onOpen: { type: "() => void" }
|
|
111
|
-
}
|
|
112
|
-
});
|
|
113
|
-
const Y = ({
|
|
114
|
-
isOpen: a,
|
|
115
|
-
visibleColumns: d,
|
|
116
|
-
hiddenColumns: c,
|
|
117
|
-
onClose: p,
|
|
118
|
-
onOpen: s,
|
|
119
|
-
onSave: i
|
|
120
|
-
}) => {
|
|
121
|
-
const [l, t] = e.useState({
|
|
122
|
-
isOpen: !!a,
|
|
123
|
-
visibleColumns: d,
|
|
124
|
-
hiddenColumns: c
|
|
125
|
-
});
|
|
126
|
-
e.useEffect(() => {
|
|
127
|
-
t((n) => ({ ...n, isOpen: !!a }));
|
|
128
|
-
}, [a]);
|
|
129
|
-
const h = () => {
|
|
130
|
-
t((n) => ({ ...n, isOpen: !0 })), s?.();
|
|
131
|
-
}, C = () => {
|
|
132
|
-
t((n) => ({ ...n, isOpen: !1 })), p?.();
|
|
133
|
-
}, b = (n, o) => {
|
|
134
|
-
t({ isOpen: !1, visibleColumns: n, hiddenColumns: o }), i?.(n, o);
|
|
135
|
-
}, f = e.useCallback((n, o) => {
|
|
136
|
-
t((v) => ({ ...v, visibleColumns: n, hiddenColumns: o }));
|
|
137
|
-
}, []), g = e.useCallback((n) => {
|
|
138
|
-
t((o) => ({ ...o, isOpen: n }));
|
|
139
|
-
}, []);
|
|
140
|
-
return {
|
|
141
|
-
visibleColumns: l.visibleColumns,
|
|
142
|
-
hiddenColumns: l.hiddenColumns,
|
|
143
|
-
isOpen: l.isOpen,
|
|
144
|
-
columnManagerProps: {
|
|
145
|
-
visibleColumns: l.visibleColumns,
|
|
146
|
-
hiddenColumns: l.hiddenColumns,
|
|
147
|
-
isOpen: l.isOpen,
|
|
148
|
-
onClose: C,
|
|
149
|
-
onSave: b
|
|
150
|
-
},
|
|
151
|
-
triggerProps: {
|
|
152
|
-
onClick: h
|
|
153
|
-
},
|
|
154
|
-
setColumns: f,
|
|
155
|
-
setOpen: g
|
|
156
|
-
};
|
|
157
|
-
}, J = {
|
|
158
|
-
components: [y],
|
|
4
|
+
import { code as l } from "@spscommerce/utils";
|
|
5
|
+
const o = {
|
|
6
|
+
components: [n],
|
|
159
7
|
examples: {
|
|
160
8
|
basic: {
|
|
161
9
|
label: "Basic Usage",
|
|
162
10
|
examples: {
|
|
163
11
|
basic: {
|
|
164
|
-
react:
|
|
12
|
+
react: l`
|
|
165
13
|
import { ColumnManager } from "@sps-woodland/column-manager";
|
|
166
14
|
import { SpsButton } from "@spscommerce/ds-react";
|
|
167
15
|
|
|
@@ -226,7 +74,7 @@ const Y = ({
|
|
|
226
74
|
examples: {
|
|
227
75
|
basic: {
|
|
228
76
|
description: "Minimal API Reference",
|
|
229
|
-
react:
|
|
77
|
+
react: l`
|
|
230
78
|
import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
|
|
231
79
|
import { SpsButton } from "@spscommerce/ds-react";
|
|
232
80
|
|
|
@@ -265,7 +113,7 @@ const Y = ({
|
|
|
265
113
|
},
|
|
266
114
|
complete: {
|
|
267
115
|
description: "Complete API Reference",
|
|
268
|
-
react:
|
|
116
|
+
react: l`
|
|
269
117
|
import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
|
|
270
118
|
import { SpsButton } from "@spscommerce/ds-react";
|
|
271
119
|
|
|
@@ -325,7 +173,7 @@ const Y = ({
|
|
|
325
173
|
examples: {
|
|
326
174
|
basic: {
|
|
327
175
|
description: "This is the minimal visual interface for the ColumnManager component",
|
|
328
|
-
react:
|
|
176
|
+
react: l`
|
|
329
177
|
import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
|
|
330
178
|
import { SpsButton } from "@spscommerce/ds-react";
|
|
331
179
|
|
|
@@ -370,11 +218,9 @@ const Y = ({
|
|
|
370
218
|
}
|
|
371
219
|
}
|
|
372
220
|
}
|
|
373
|
-
},
|
|
374
|
-
"Column Manager":
|
|
221
|
+
}, i = {
|
|
222
|
+
"Column Manager": o
|
|
375
223
|
};
|
|
376
224
|
export {
|
|
377
|
-
|
|
378
|
-
Q as MANIFEST,
|
|
379
|
-
Y as useColumnManager
|
|
225
|
+
i as MANIFEST
|
|
380
226
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(n,
|
|
1
|
+
(function(n,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("@sps-woodland/core/column-manager"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/column-manager","react","@spscommerce/utils"],o):(n=typeof globalThis<"u"?globalThis:n||self,o(n.ColumnManager={},n.columnManager,n.React,n.utils))})(this,(function(n,o,r,t){"use strict";function m(l){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const a in l)if(a!=="default"){const s=Object.getOwnPropertyDescriptor(l,a);Object.defineProperty(i,a,s.get?s:{enumerable:!0,get:()=>l[a]})}}return i.default=l,Object.freeze(i)}const e=m(r),d={"Column Manager":{components:[o.ColumnManager],examples:{basic:{label:"Basic Usage",examples:{basic:{react:t.code`
|
|
2
2
|
import { ColumnManager } from "@sps-woodland/column-manager";
|
|
3
3
|
import { SpsButton } from "@spscommerce/ds-react";
|
|
4
4
|
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
</div>
|
|
51
51
|
)
|
|
52
52
|
}
|
|
53
|
-
`}}},hooks:{label:"useColumnManager hook",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Arguments"),e.createElement("p",null,"The column manager comes with a ",e.createElement("code",null,"useColumnManager")," hook that implements the default behavior. Arguments for this hook include:"),e.createElement("dl",null,e.createElement("dt",null,e.createElement("code",null,"visibleColumns"),": ItemProps[] (required)"),e.createElement("dd",null,"The initial visible columns state"),e.createElement("dt",null,e.createElement("code",null,"hiddenColumns"),": ItemProps[] (required)"),e.createElement("dd",null,"The initial hidden columns state"),e.createElement("dt",null,e.createElement("code",null,"isOpen"),": boolean (optional)"),e.createElement("dd",null,"Whether the column manager is open by default"),e.createElement("dt",null,e.createElement("code",null,"onOpen"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager opens",e.createElement("code",null,"() => void")),e.createElement("dt",null,e.createElement("code",null,"onClose"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager closes",e.createElement("code",null,"() => void")),e.createElement("dt",null,e.createElement("code",null,"onSave"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager saves",e.createElement("code",null,"(visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void"))),e.createElement("h5",null,"Return value"),e.createElement("p",null,"The ",e.createElement("code",null,"useColumnManager")," hook returns an object with"," ",e.createElement("code",null,"visibleColumns"),", ",e.createElement("code",null,"hiddenColumns"),", ",e.createElement("code",null,"columnManagerProps"),", ",e.createElement("code",null,"triggerProps")," ,",e.createElement("code",null,"setColumns")," and ",e.createElement("code",null,"setOpen")),e.createElement("p",null,e.createElement("code",null,"triggerProps"),": needs to be spread on the element that triggers the modal."),e.createElement("p",null,e.createElement("code",null,"columnManagerProps"),": needs to be spread on the ",e.createElement("code",null,"ColumnManager")," ","component"),e.createElement("p",null,e.createElement("code",null,"visibleColumns"),": the current state of the visible columns"),e.createElement("p",null,e.createElement("code",null,"hiddenColumns"),": the current state of the hidden columns"),e.createElement("p",null,e.createElement("code",null,"setColumns"),": function that allows programmatically setting the current state of the visible and hidden columns. This function is safe to use in effects."),e.createElement("p",null,e.createElement("code",null,"setOpen"),": function that allows programmatically setting the current isOpen state. This function is safe to use in effects."),e.createElement("p",null,"Please refer to the examples to see its implementation"))},hooksExamples:{label:"Hook Usage",examples:{basic:{description:"Minimal API Reference",react:
|
|
53
|
+
`}}},hooks:{label:"useColumnManager hook",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Arguments"),e.createElement("p",null,"The column manager comes with a ",e.createElement("code",null,"useColumnManager")," hook that implements the default behavior. Arguments for this hook include:"),e.createElement("dl",null,e.createElement("dt",null,e.createElement("code",null,"visibleColumns"),": ItemProps[] (required)"),e.createElement("dd",null,"The initial visible columns state"),e.createElement("dt",null,e.createElement("code",null,"hiddenColumns"),": ItemProps[] (required)"),e.createElement("dd",null,"The initial hidden columns state"),e.createElement("dt",null,e.createElement("code",null,"isOpen"),": boolean (optional)"),e.createElement("dd",null,"Whether the column manager is open by default"),e.createElement("dt",null,e.createElement("code",null,"onOpen"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager opens",e.createElement("code",null,"() => void")),e.createElement("dt",null,e.createElement("code",null,"onClose"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager closes",e.createElement("code",null,"() => void")),e.createElement("dt",null,e.createElement("code",null,"onSave"),": function (optional)"),e.createElement("dd",null,"Handler that is called when the column manager saves",e.createElement("code",null,"(visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void"))),e.createElement("h5",null,"Return value"),e.createElement("p",null,"The ",e.createElement("code",null,"useColumnManager")," hook returns an object with"," ",e.createElement("code",null,"visibleColumns"),", ",e.createElement("code",null,"hiddenColumns"),", ",e.createElement("code",null,"columnManagerProps"),", ",e.createElement("code",null,"triggerProps")," ,",e.createElement("code",null,"setColumns")," and ",e.createElement("code",null,"setOpen")),e.createElement("p",null,e.createElement("code",null,"triggerProps"),": needs to be spread on the element that triggers the modal."),e.createElement("p",null,e.createElement("code",null,"columnManagerProps"),": needs to be spread on the ",e.createElement("code",null,"ColumnManager")," ","component"),e.createElement("p",null,e.createElement("code",null,"visibleColumns"),": the current state of the visible columns"),e.createElement("p",null,e.createElement("code",null,"hiddenColumns"),": the current state of the hidden columns"),e.createElement("p",null,e.createElement("code",null,"setColumns"),": function that allows programmatically setting the current state of the visible and hidden columns. This function is safe to use in effects."),e.createElement("p",null,e.createElement("code",null,"setOpen"),": function that allows programmatically setting the current isOpen state. This function is safe to use in effects."),e.createElement("p",null,"Please refer to the examples to see its implementation"))},hooksExamples:{label:"Hook Usage",examples:{basic:{description:"Minimal API Reference",react:t.code`
|
|
54
54
|
import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
|
|
55
55
|
import { SpsButton } from "@spscommerce/ds-react";
|
|
56
56
|
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
</div>
|
|
86
86
|
)
|
|
87
87
|
}
|
|
88
|
-
`},complete:{description:"Complete API Reference",react:
|
|
88
|
+
`},complete:{description:"Complete API Reference",react:t.code`
|
|
89
89
|
import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
|
|
90
90
|
import { SpsButton } from "@spscommerce/ds-react";
|
|
91
91
|
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
</div>
|
|
137
137
|
)
|
|
138
138
|
}
|
|
139
|
-
`}}},minimalInterface:{label:"Minimal Interface",examples:{basic:{description:"This is the minimal visual interface for the ColumnManager component",react:
|
|
139
|
+
`}}},minimalInterface:{label:"Minimal Interface",examples:{basic:{description:"This is the minimal visual interface for the ColumnManager component",react:t.code`
|
|
140
140
|
import { ColumnManager, useColumnManager } from "@sps-woodland/column-manager";
|
|
141
141
|
import { SpsButton } from "@spscommerce/ds-react";
|
|
142
142
|
|
|
@@ -176,4 +176,4 @@
|
|
|
176
176
|
</div>
|
|
177
177
|
)
|
|
178
178
|
}
|
|
179
|
-
`}}}}}};n.
|
|
179
|
+
`}}}}}};n.MANIFEST=d,Object.keys(o).forEach(l=>{l!=="default"&&!Object.prototype.hasOwnProperty.call(n,l)&&Object.defineProperty(n,l,{enumerable:!0,get:()=>o[l]})}),Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/column-manager",
|
|
3
3
|
"description": "SPS Woodland Design System column manager component",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.51.1",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/column-manager",
|
|
@@ -23,32 +23,17 @@
|
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
26
|
-
"@vanilla-extract/css-utils": "^0.1.3",
|
|
27
26
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
28
27
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
29
|
-
"@sps-woodland/
|
|
30
|
-
"@
|
|
31
|
-
"@sps-woodland/tokens": "8.50.2",
|
|
32
|
-
"@spscommerce/ds-react": "8.50.2",
|
|
33
|
-
"@spscommerce/ds-shared": "8.50.2",
|
|
34
|
-
"@spscommerce/i18n": "8.50.2"
|
|
28
|
+
"@sps-woodland/core": "8.51.1",
|
|
29
|
+
"@spscommerce/ds-react": "8.51.1"
|
|
35
30
|
},
|
|
36
31
|
"devDependencies": {
|
|
37
32
|
"@spscommerce/utils": "9.0.3",
|
|
38
|
-
"@vanilla-extract/css": "1.17.4",
|
|
39
|
-
"@vanilla-extract/css-utils": "0.1.3",
|
|
40
|
-
"@vanilla-extract/recipes": "0.2.5",
|
|
41
33
|
"react": "16.14.0",
|
|
42
34
|
"react-dom": "16.14.0",
|
|
43
|
-
"@sps-woodland/
|
|
44
|
-
"@
|
|
45
|
-
"@sps-woodland/tokens": "8.50.2",
|
|
46
|
-
"@spscommerce/ds-react": "8.50.2",
|
|
47
|
-
"@spscommerce/ds-shared": "8.50.2",
|
|
48
|
-
"@spscommerce/i18n": "8.50.2"
|
|
49
|
-
},
|
|
50
|
-
"dependencies": {
|
|
51
|
-
"nanoid": "5.1.5"
|
|
35
|
+
"@sps-woodland/core": "8.51.1",
|
|
36
|
+
"@spscommerce/ds-react": "8.51.1"
|
|
52
37
|
},
|
|
53
38
|
"scripts": {
|
|
54
39
|
"build": "pnpm run build:js && pnpm run build:types",
|
package/vite.config.mjs
CHANGED
|
@@ -1,20 +1,8 @@
|
|
|
1
1
|
import path from "node:path";
|
|
2
|
-
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
3
2
|
import { defineConfig } from "vite";
|
|
4
|
-
import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
|
|
5
3
|
import pkg from "./package.json";
|
|
6
4
|
|
|
7
|
-
const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
|
|
8
|
-
|
|
9
5
|
export default defineConfig({
|
|
10
|
-
plugins: [
|
|
11
|
-
vanillaExtractPlugin(
|
|
12
|
-
getVanillaExtractPluginProps({
|
|
13
|
-
packageName: pkg.name,
|
|
14
|
-
packageVersion,
|
|
15
|
-
})
|
|
16
|
-
),
|
|
17
|
-
],
|
|
18
6
|
build: {
|
|
19
7
|
lib: {
|
|
20
8
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
@@ -24,7 +12,11 @@ export default defineConfig({
|
|
|
24
12
|
outDir: path.resolve(__dirname, "./lib"),
|
|
25
13
|
emptyOutDir: false,
|
|
26
14
|
rollupOptions: {
|
|
27
|
-
|
|
15
|
+
// External must match subpath imports like @sps-woodland/core/column-manager
|
|
16
|
+
external: (id) => {
|
|
17
|
+
const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
|
|
18
|
+
return peerDeps.some((dep) => id === dep || id.startsWith(dep + "/"));
|
|
19
|
+
},
|
|
28
20
|
},
|
|
29
21
|
},
|
|
30
22
|
});
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps } from "@sps-woodland/core";
|
|
2
|
-
import type { ItemProps } from "@sps-woodland/add-to-list";
|
|
3
|
-
export type ColumnmanagerProps = ComponentProps<{
|
|
4
|
-
isOpen?: boolean;
|
|
5
|
-
title?: string;
|
|
6
|
-
visibleColumnsHeader?: string;
|
|
7
|
-
hiddenColumnsHeader?: string;
|
|
8
|
-
visibleColumns: ItemProps[];
|
|
9
|
-
hiddenColumns: ItemProps[];
|
|
10
|
-
manualSort?: boolean;
|
|
11
|
-
maxDisplayedItems?: number;
|
|
12
|
-
showIcons?: boolean;
|
|
13
|
-
showCount?: boolean;
|
|
14
|
-
showFilter?: boolean;
|
|
15
|
-
showMoveAllLinks?: boolean;
|
|
16
|
-
cancelButtonText?: string;
|
|
17
|
-
saveButtonText?: string;
|
|
18
|
-
onSave?: (visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void;
|
|
19
|
-
onClose?: () => void;
|
|
20
|
-
onOpen?: () => void;
|
|
21
|
-
}>;
|
|
22
|
-
export declare function ColumnManager({ isOpen: isOpenProp, title, visibleColumnsHeader, hiddenColumnsHeader, visibleColumns, hiddenColumns, maxDisplayedItems, manualSort, showIcons, showCount, showFilter, showMoveAllLinks, cancelButtonText, saveButtonText, onSave, onOpen, onClose, "data-testid": dataTestId, }: ColumnmanagerProps): JSX.Element | null;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { ItemProps } from "@sps-woodland/add-to-list";
|
|
2
|
-
export interface UseColumnManagerArgs {
|
|
3
|
-
visibleColumns: ItemProps[];
|
|
4
|
-
hiddenColumns: ItemProps[];
|
|
5
|
-
isOpen?: boolean;
|
|
6
|
-
onClose?: () => void;
|
|
7
|
-
onOpen?: () => void;
|
|
8
|
-
onSave?: (visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void;
|
|
9
|
-
}
|
|
10
|
-
export declare const useColumnManager: ({ isOpen: isOpenArg, visibleColumns, hiddenColumns, onClose, onOpen, onSave, }: UseColumnManagerArgs) => {
|
|
11
|
-
visibleColumns: ItemProps[];
|
|
12
|
-
hiddenColumns: ItemProps[];
|
|
13
|
-
isOpen: boolean;
|
|
14
|
-
columnManagerProps: {
|
|
15
|
-
visibleColumns: ItemProps[];
|
|
16
|
-
hiddenColumns: ItemProps[];
|
|
17
|
-
isOpen: boolean;
|
|
18
|
-
onClose: () => void;
|
|
19
|
-
onSave: (visible: ItemProps[], hidden: ItemProps[]) => void;
|
|
20
|
-
};
|
|
21
|
-
triggerProps: {
|
|
22
|
-
onClick: () => void;
|
|
23
|
-
};
|
|
24
|
-
setColumns: (visible: ItemProps[], hidden: ItemProps[]) => void;
|
|
25
|
-
setOpen: (open: boolean) => void;
|
|
26
|
-
};
|