@sps-woodland/column-manager 7.7.4 → 7.8.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 +6 -6
- package/lib/index.es.js +10 -10
- package/package.json +11 -11
package/lib/index.cjs.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const H=require("react"),P=require("@sps-woodland/core"),B=require("@sps-woodland/add-to-list"),R=require("@sps-woodland/tokens"),b=require("@spscommerce/ds-react"),g=require("@spscommerce/ds-shared"),f=require("@spscommerce/utils");function A(n){if(n&&n.__esModule)return n;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:()=>n[o]})}}return r.default=n,Object.freeze(r)}const e=A(H);function T({isOpen:n,title:r,visibleColumnsHeader:o,hiddenColumnsHeader:s,visibleColumns:u,hiddenColumns:d,manualSort:a=!0,showIcons:i=!0,showCount:v=!0,showFilter:E=!0,showMoveAllLinks:M=!0,onSave:m,onOpen:c,onClose:l,"data-testid":t}){const[p,O]=e.useState(!!n),{t:h}=e.useContext(P.I18nContext),k=P.useChildTestIdAttrBuilder({"data-testid":t}),[C,S]=e.useState({visibleColumns:u,hiddenColumns:d}),w=()=>{O(!1),l==null||l()};return e.useEffect(()=>{p&&(S({visibleColumns:u,hiddenColumns:d}),c==null||c())},[p]),e.useEffect(()=>{O(!!n)},[n]),p?e.createElement(b.SpsModal,{title:r||h("design-system:columnManager.title"),kind:g.ModalKind.GENERAL,size:g.ModalSize.LARGE,"data-testid":t,onClose:w},e.createElement(B.AddToList,{onHeader:o||h("design-system:columnManager.onListHeader"),offHeader:s||h("design-system:columnManager.offListHeader"),onList:C.visibleColumns,offList:C.hiddenColumns,onChange:y=>{S({visibleColumns:y.onList,hiddenColumns:y.offList})},manualSort:a,showIcons:i,showCount:v,showFilter:E,showMoveAllLinks:M,...k("add-to-list")}),e.createElement(b.SpsModalFooter,null,e.createElement(b.SpsButton,{kind:g.ButtonKind.DEFAULT,onClick:()=>{S({visibleColumns:u,hiddenColumns:d}),w()},className:R.sprinkles({mr:"sm"}),...k("cancel-button")},h("design-system:columnManager.cancelButton")),e.createElement(b.SpsButton,{kind:g.ButtonKind.KEY,onClick:()=>{m==null||m(C.visibleColumns,C.hiddenColumns),w()},...k("save-button")},h("design-system:columnManager.saveButton")))):null}P.Metadata.set(T,{name:"Column Manager",props:{isOpen:{type:"boolean",required:!0},title:{type:"string"},visibleColumnsHeader:{type:"string"},hiddenColumnsHeader:{type:"string"},visibleColumns:{type:"ItemProps[]",required:!0},hiddenColumns:{type:"ItemProps[]",required:!0},manualSort:{type:"boolean"},showIcons:{type:"boolean"},showCount:{type:"boolean"},showFilter:{type:"boolean"},showMoveAllLinks:{type:"boolean"},onSave:{type:"(visibleColumns: ItemProps[], hiddenColumns: ItemProps[]) => void"},onClose:{type:"() => void"},onOpen:{type:"() => void"}}});const I=({isOpen:n,visibleColumns:r,hiddenColumns:o,onClose:s,onOpen:u,onSave:d})=>{const[a,i]=e.useState({isOpen:!!n,visibleColumns:r,hiddenColumns:o});e.useEffect(()=>{i(l=>({...l,isOpen:!!n}))},[n]);const v=()=>{i(l=>({...l,isOpen:!0})),u==null||u()},E=()=>{i(l=>({...l,isOpen:!1})),s==null||s()},M=(l,t)=>{i({isOpen:!1,visibleColumns:l,hiddenColumns:t}),d==null||d(l,t)},m=e.useCallback((l,t)=>{i(p=>({...p,visibleColumns:l,hiddenColumns:t}))},[]),c=e.useCallback(l=>{i(t=>({...t,isOpen:l}))},[]);return{visibleColumns:a.visibleColumns,hiddenColumns:a.hiddenColumns,isOpen:a.isOpen,columnManagerProps:{visibleColumns:a.visibleColumns,hiddenColumns:a.hiddenColumns,isOpen:a.isOpen,onClose:E,onSave:M},triggerProps:{onClick:v},setColumns:m,setOpen:c}},L={components:[T],examples:{basic:{label:"Basic Usage",examples:{basic:{react:f.code`
|
|
2
2
|
import { ColumnManager } from "@sps-woodland/column-manager";
|
|
3
3
|
import { SpsButton } from "@spscommerce/ds-react";
|
|
4
4
|
|
|
5
5
|
function Component() {
|
|
6
6
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
7
7
|
const [visibleColumns, setVisibleColumns] = React.useState([
|
|
8
|
-
{id: 1, label: "Phantom Menace"},
|
|
8
|
+
{id: 1, label: "The Phantom Menace"},
|
|
9
9
|
{id: 2, label: "Attack of the Clones"},
|
|
10
10
|
{id: 3, label: "Revenge of the Sith"},
|
|
11
11
|
{id: 4, label: "A New Hope", required: true},
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
function Component() {
|
|
58
58
|
const { visibleColumns, hiddenColumns, columnManagerProps, triggerProps } = useColumnManager({
|
|
59
59
|
visibleColumns: [
|
|
60
|
-
{id: 1, label: "Phantom Menace"},
|
|
60
|
+
{id: 1, label: "The Phantom Menace"},
|
|
61
61
|
{id: 2, label: "Attack of the Clones"},
|
|
62
62
|
{id: 3, label: "Revenge of the Sith"},
|
|
63
63
|
{id: 4, label: "A New Hope", required: true},
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
|
|
92
92
|
function Component() {
|
|
93
93
|
const initialVisibleColumns = [
|
|
94
|
-
{id: 1, label: "Phantom Menace"},
|
|
94
|
+
{id: 1, label: "The Phantom Menace"},
|
|
95
95
|
{id: 2, label: "Attack of the Clones"},
|
|
96
96
|
{id: 3, label: "Revenge of the Sith"},
|
|
97
97
|
{id: 4, label: "A New Hope", required: true},
|
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
function Component() {
|
|
144
144
|
const { visibleColumns, hiddenColumns, columnManagerProps, triggerProps } = useColumnManager({
|
|
145
145
|
visibleColumns: [
|
|
146
|
-
{id: 1, label: "Phantom Menace"},
|
|
146
|
+
{id: 1, label: "The Phantom Menace"},
|
|
147
147
|
{id: 2, label: "Attack of the Clones"},
|
|
148
148
|
{id: 3, label: "Revenge of the Sith"},
|
|
149
149
|
{id: 4, label: "A New Hope", required: true},
|
|
@@ -176,4 +176,4 @@
|
|
|
176
176
|
</div>
|
|
177
177
|
)
|
|
178
178
|
}
|
|
179
|
-
`}}}}},q={"Column Manager":L};exports.ColumnManager=
|
|
179
|
+
`}}}}},q={"Column Manager":L};exports.ColumnManager=T;exports.MANIFEST=q;exports.useColumnManager=I;
|
package/lib/index.es.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { Metadata as
|
|
2
|
+
import { Metadata as y, I18nContext as O, useChildTestIdAttrBuilder as B } from "@sps-woodland/core";
|
|
3
3
|
import { AddToList as R } from "@sps-woodland/add-to-list";
|
|
4
4
|
import { sprinkles as A } from "@sps-woodland/tokens";
|
|
5
5
|
import { SpsModal as I, SpsModalFooter as L, SpsButton as H } from "@spscommerce/ds-react";
|
|
6
6
|
import { ModalKind as x, ModalSize as F, ButtonKind as P } from "@spscommerce/ds-shared";
|
|
7
7
|
import { code as h } from "@spscommerce/utils";
|
|
8
|
-
function
|
|
8
|
+
function T({
|
|
9
9
|
isOpen: s,
|
|
10
10
|
title: C,
|
|
11
11
|
visibleColumnsHeader: b,
|
|
@@ -22,7 +22,7 @@ function y({
|
|
|
22
22
|
onClose: n,
|
|
23
23
|
"data-testid": l
|
|
24
24
|
}) {
|
|
25
|
-
const [d, S] = e.useState(!!s), { t: c } = e.useContext(
|
|
25
|
+
const [d, S] = e.useState(!!s), { t: c } = e.useContext(O), E = B({ "data-testid": l }), [p, M] = e.useState({
|
|
26
26
|
visibleColumns: a,
|
|
27
27
|
hiddenColumns: i
|
|
28
28
|
}), k = () => {
|
|
@@ -67,7 +67,7 @@ function y({
|
|
|
67
67
|
...E("save-button")
|
|
68
68
|
}, c("design-system:columnManager.saveButton")))) : null;
|
|
69
69
|
}
|
|
70
|
-
|
|
70
|
+
y.set(T, {
|
|
71
71
|
name: "Column Manager",
|
|
72
72
|
props: {
|
|
73
73
|
isOpen: { type: "boolean", required: !0 },
|
|
@@ -131,7 +131,7 @@ const z = ({
|
|
|
131
131
|
setOpen: u
|
|
132
132
|
};
|
|
133
133
|
}, j = {
|
|
134
|
-
components: [
|
|
134
|
+
components: [T],
|
|
135
135
|
examples: {
|
|
136
136
|
basic: {
|
|
137
137
|
label: "Basic Usage",
|
|
@@ -144,7 +144,7 @@ const z = ({
|
|
|
144
144
|
function Component() {
|
|
145
145
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
146
146
|
const [visibleColumns, setVisibleColumns] = React.useState([
|
|
147
|
-
{id: 1, label: "Phantom Menace"},
|
|
147
|
+
{id: 1, label: "The Phantom Menace"},
|
|
148
148
|
{id: 2, label: "Attack of the Clones"},
|
|
149
149
|
{id: 3, label: "Revenge of the Sith"},
|
|
150
150
|
{id: 4, label: "A New Hope", required: true},
|
|
@@ -209,7 +209,7 @@ const z = ({
|
|
|
209
209
|
function Component() {
|
|
210
210
|
const { visibleColumns, hiddenColumns, columnManagerProps, triggerProps } = useColumnManager({
|
|
211
211
|
visibleColumns: [
|
|
212
|
-
{id: 1, label: "Phantom Menace"},
|
|
212
|
+
{id: 1, label: "The Phantom Menace"},
|
|
213
213
|
{id: 2, label: "Attack of the Clones"},
|
|
214
214
|
{id: 3, label: "Revenge of the Sith"},
|
|
215
215
|
{id: 4, label: "A New Hope", required: true},
|
|
@@ -247,7 +247,7 @@ const z = ({
|
|
|
247
247
|
|
|
248
248
|
function Component() {
|
|
249
249
|
const initialVisibleColumns = [
|
|
250
|
-
{id: 1, label: "Phantom Menace"},
|
|
250
|
+
{id: 1, label: "The Phantom Menace"},
|
|
251
251
|
{id: 2, label: "Attack of the Clones"},
|
|
252
252
|
{id: 3, label: "Revenge of the Sith"},
|
|
253
253
|
{id: 4, label: "A New Hope", required: true},
|
|
@@ -308,7 +308,7 @@ const z = ({
|
|
|
308
308
|
function Component() {
|
|
309
309
|
const { visibleColumns, hiddenColumns, columnManagerProps, triggerProps } = useColumnManager({
|
|
310
310
|
visibleColumns: [
|
|
311
|
-
{id: 1, label: "Phantom Menace"},
|
|
311
|
+
{id: 1, label: "The Phantom Menace"},
|
|
312
312
|
{id: 2, label: "Attack of the Clones"},
|
|
313
313
|
{id: 3, label: "Revenge of the Sith"},
|
|
314
314
|
{id: 4, label: "A New Hope", required: true},
|
|
@@ -350,7 +350,7 @@ const z = ({
|
|
|
350
350
|
"Column Manager": j
|
|
351
351
|
};
|
|
352
352
|
export {
|
|
353
|
-
|
|
353
|
+
T as ColumnManager,
|
|
354
354
|
G as MANIFEST,
|
|
355
355
|
z as useColumnManager
|
|
356
356
|
};
|
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": "7.
|
|
4
|
+
"version": "7.8.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/column-manager",
|
|
@@ -21,26 +21,26 @@
|
|
|
21
21
|
"access": "public"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"@sps-woodland/core": "7.
|
|
25
|
-
"@sps-woodland/add-to-list": "7.
|
|
26
|
-
"@sps-woodland/tokens": "7.
|
|
24
|
+
"@sps-woodland/core": "7.8.0",
|
|
25
|
+
"@sps-woodland/add-to-list": "7.8.0",
|
|
26
|
+
"@sps-woodland/tokens": "7.8.0",
|
|
27
27
|
"@spscommerce/utils": "^6.12.1",
|
|
28
28
|
"@vanilla-extract/css-utils": "^0.1.3",
|
|
29
|
-
"@spscommerce/ds-react": "7.
|
|
30
|
-
"@spscommerce/ds-shared": "7.
|
|
29
|
+
"@spscommerce/ds-react": "7.8.0",
|
|
30
|
+
"@spscommerce/ds-shared": "7.8.0",
|
|
31
31
|
"react": "^16.9.0",
|
|
32
32
|
"react-dom": "^16.9.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@sps-woodland/core": "7.
|
|
36
|
-
"@sps-woodland/add-to-list": "7.
|
|
37
|
-
"@sps-woodland/tokens": "7.
|
|
35
|
+
"@sps-woodland/core": "7.8.0",
|
|
36
|
+
"@sps-woodland/add-to-list": "7.8.0",
|
|
37
|
+
"@sps-woodland/tokens": "7.8.0",
|
|
38
38
|
"@spscommerce/utils": "^6.12.1",
|
|
39
39
|
"@vanilla-extract/css": "^1.9.1",
|
|
40
40
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
41
41
|
"@vanilla-extract/css-utils": "^0.1.3",
|
|
42
|
-
"@spscommerce/ds-react": "7.
|
|
43
|
-
"@spscommerce/ds-shared": "7.
|
|
42
|
+
"@spscommerce/ds-react": "7.8.0",
|
|
43
|
+
"@spscommerce/ds-shared": "7.8.0",
|
|
44
44
|
"react": "^16.9.0",
|
|
45
45
|
"react-dom": "^16.9.0"
|
|
46
46
|
},
|