@sps-woodland/tags 8.7.3 → 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 +37 -34
- 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 _=require("react"),s=require("@sps-woodland/core"),c=require("@spscommerce/utils");function O(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,l.get?l:{enumerable:!0,get:()=>e[a]})}}return r.default=e,Object.freeze(r)}const n=O(_);function S(e,r,a){return r in e?Object.defineProperty(e,r,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[r]=a,e}function y(e,r){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);r&&(l=l.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,l)}return a}function v(e){for(var r=1;r<arguments.length;r++){var a=arguments[r]!=null?arguments[r]:{};r%2?y(Object(a),!0).forEach(function(l){S(e,l,a[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):y(Object(a)).forEach(function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(a,l))})}return e}var E=(e,r,a)=>{for(var l of Object.keys(e)){var t;if(e[l]!==((t=r[l])!==null&&t!==void 0?t:a[l]))return!1}return!0},u=e=>r=>{var a=e.defaultClassName,l=v(v({},e.defaultVariants),r);for(var t in l){var m,g=(m=l[t])!==null&&m!==void 0?m:e.defaultVariants[t];if(g!=null){var o=g;typeof o=="boolean"&&(o=o===!0?"true":"false");var i=e.variantClassNames[t][o];i&&(a+=" "+i)}}for(var[p,b]of e.compoundVariants)E(p,l,e.defaultVariants)&&(a+=" "+b);return a},h=u({defaultClassName:"_160drw10",variantClassNames:{kind:{blue:"_160drw11",gray:"_160drw12"},disabled:{true:"_160drw13",false:"_160drw14"}},defaultVariants:{kind:"blue",disabled:!1},compoundVariants:[]}),K="_160drw1e",P="_160drw1d",j=u({defaultClassName:"_160drw15",variantClassNames:{link:{true:"_160drw16",false:"_160drw17"},disabled:{true:"_160drw18",false:"_160drw19"},addOrRemove:{true:"_160drw1a",false:"_160drw1b"}},defaultVariants:{link:!1,disabled:!1,addOrRemove:!1},compoundVariants:[[{disabled:!1,addOrRemove:!0},"_160drw1c"]]}),x="_160drw1f";function T({children:e,className:r,onClick:a,disabled:l,href:t,target:m,kind:g,onAdd:o,onRemove:i,...p}){const b=n.Children.toArray(e).filter(d=>typeof d=="string").join("");n.useEffect(()=>{if(i&&o)throw new Error("Clickable tag should have onRemove or onAdd, not both")},[o,i]);function w(d){o?o():i&&i(),d.stopPropagation()}function N(d){d.stopPropagation(),a&&a(d)}return n.createElement("div",{className:s.cl(h({kind:g,disabled:l}),r),...p},n.createElement("span",{className:s.cl(j({link:!!t||!!a,disabled:l,addOrRemove:o||i})),onClick:N,title:b},t?n.createElement("a",{className:x,href:t,target:m},e):e),(o||i)&&!l&&n.createElement("div",{className:P,onClick:l?void 0:w,tabIndex:-1,"aria-label":o?"Add":"Remove"},n.createElement(s.Icon,{className:K,"aria-hidden":"true",icon:o?"plus-sign":"x"})))}s.Metadata.set(T,{name:"Clickable Tag",props:{disabled:{type:"boolean",default:"false"},href:{type:"string"},target:{type:"'_blank' | '_self' | '_parent' | '_top'"},kind:{type:"ClickableTagKind",default:"blue"},onAdd:{type:"() => void"},onRemove:{type:"() => void"}}});var F=u({defaultClassName:"_5f3efi0",variantClassNames:{kind:{default:"_5f3efi1",key:"_5f3efi2",warning:"_5f3efi3",error:"_5f3efi4",pending:"_5f3efi5",success:"_5f3efi6",info:"_5f3efi7"}},defaultVariants:{kind:"default"},compoundVariants:[]}),V=u({defaultClassName:"_5f3efi8",variantClassNames:{kind:{default:"_5f3efi9",key:"_5f3efia",warning:"_5f3efib",error:"_5f3efic",pending:"_5f3efid",success:"_5f3efie",info:"_5f3efif"}},defaultVariants:{kind:"default"},compoundVariants:[]});const C=Object.freeze({default:"info-circle",key:"info-circle",warning:"status-warning",error:"status-error",pending:"status-in-process",success:"status-ok",info:"info-circle"});function f({children:e,className:r,kind:a="default",icon:l,...t}){return n.createElement("span",{className:s.cl(F({kind:a}),r),...t},l&&n.createElement(s.Icon,{className:s.cl(V({kind:a})),icon:C[a]}),e)}s.Metadata.set(f,{name:"Tag",props:{kind:{type:"TagKind",default:"default"},icon:{type:"boolean",default:"false"}}});var I="_79ofse0",D="_79ofse1",R="_79ofsec",L=u({defaultClassName:"_79ofse2",variantClassNames:{href:{true:"_79ofse3",false:"_79ofse4"},kind:{default:"_79ofse5",key:"_79ofse6",warning:"_79ofse7",error:"_79ofse8",pending:"_79ofse9",success:"_79ofsea",info:"_79ofseb"}},defaultVariants:{href:!1,kind:"default"},compoundVariants:[]});function k({children:e,className:r,color:a="default",href:l,target:t,icon:m,tagKey:g,value:o,...i}){return n.createElement("span",{className:s.cl(I,r),...i},n.createElement(f,{className:s.cl(D),icon:m,kind:a},g),n.createElement(f,{className:s.cl(L({href:!!l,kind:a}))},l?n.createElement("a",{className:R,href:l,target:t},o):o))}s.Metadata.set(k,{name:"Split Tag",props:{color:{type:"TagKind",default:"key"},href:{type:"string"},target:{type:"'_blank' | '_self' | '_parent' | '_top'"},icon:{type:"boolean",default:"false"},tagKey:{type:"string",required:!0},value:{type:"string",required:!0}}});const M={components:[T],examples:{basic:{label:"Basic Tag",examples:{basic:{react:c.code`
|
|
2
2
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
3
3
|
|
|
4
4
|
function Component() {
|
|
@@ -133,4 +133,4 @@
|
|
|
133
133
|
<SplitTag tagKey="Foo" value="1234" icon href="https://www.google.com" />
|
|
134
134
|
);
|
|
135
135
|
}
|
|
136
|
-
`}}}}},A={"Clickable Tags":
|
|
136
|
+
`}}}}},A={"Clickable Tags":M,Tags:q,"Split Tags":B};exports.ClickableTag=T;exports.MANIFEST=A;exports.SplitTag=k;exports.Tag=f;exports.TagIcons=C;
|
package/lib/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { Metadata as T, cl as m, Icon as
|
|
1
|
+
import * as s from "react";
|
|
2
|
+
import { Metadata as T, cl as m, Icon as v } from "@sps-woodland/core";
|
|
3
3
|
import { code as i } from "@spscommerce/utils";
|
|
4
4
|
function O(a, r, e) {
|
|
5
5
|
return r in a ? Object.defineProperty(a, r, {
|
|
@@ -19,7 +19,7 @@ function k(a, r) {
|
|
|
19
19
|
}
|
|
20
20
|
return e;
|
|
21
21
|
}
|
|
22
|
-
function
|
|
22
|
+
function C(a) {
|
|
23
23
|
for (var r = 1; r < arguments.length; r++) {
|
|
24
24
|
var e = arguments[r] != null ? arguments[r] : {};
|
|
25
25
|
r % 2 ? k(Object(e), !0).forEach(function(l) {
|
|
@@ -38,13 +38,16 @@ var S = (a, r, e) => {
|
|
|
38
38
|
}
|
|
39
39
|
return !0;
|
|
40
40
|
}, d = (a) => (r) => {
|
|
41
|
-
var e = a.defaultClassName, l =
|
|
41
|
+
var e = a.defaultClassName, l = C(C({}, a.defaultVariants), r);
|
|
42
42
|
for (var t in l) {
|
|
43
43
|
var c, g = (c = l[t]) !== null && c !== void 0 ? c : a.defaultVariants[t];
|
|
44
44
|
if (g != null) {
|
|
45
|
-
var
|
|
46
|
-
typeof
|
|
47
|
-
var o =
|
|
45
|
+
var n = g;
|
|
46
|
+
typeof n == "boolean" && (n = n === !0 ? "true" : "false");
|
|
47
|
+
var o = (
|
|
48
|
+
// @ts-expect-error
|
|
49
|
+
a.variantClassNames[t][n]
|
|
50
|
+
);
|
|
48
51
|
o && (e += " " + o);
|
|
49
52
|
}
|
|
50
53
|
}
|
|
@@ -52,7 +55,7 @@ var S = (a, r, e) => {
|
|
|
52
55
|
S(u, l, a.defaultVariants) && (e += " " + b);
|
|
53
56
|
return e;
|
|
54
57
|
}, E = d({ defaultClassName: "_160drw10", variantClassNames: { kind: { blue: "_160drw11", gray: "_160drw12" }, disabled: { true: "_160drw13", false: "_160drw14" } }, defaultVariants: { kind: "blue", disabled: !1 }, compoundVariants: [] }), h = "_160drw1e", K = "_160drw1d", x = d({ defaultClassName: "_160drw15", variantClassNames: { link: { true: "_160drw16", false: "_160drw17" }, disabled: { true: "_160drw18", false: "_160drw19" }, addOrRemove: { true: "_160drw1a", false: "_160drw1b" } }, defaultVariants: { link: !1, disabled: !1, addOrRemove: !1 }, compoundVariants: [[{ disabled: !1, addOrRemove: !0 }, "_160drw1c"]] }), F = "_160drw1f";
|
|
55
|
-
function
|
|
58
|
+
function w({
|
|
56
59
|
children: a,
|
|
57
60
|
className: r,
|
|
58
61
|
onClick: e,
|
|
@@ -60,47 +63,47 @@ function _({
|
|
|
60
63
|
href: t,
|
|
61
64
|
target: c,
|
|
62
65
|
kind: g,
|
|
63
|
-
onAdd:
|
|
66
|
+
onAdd: n,
|
|
64
67
|
onRemove: o,
|
|
65
68
|
...u
|
|
66
69
|
}) {
|
|
67
|
-
const b =
|
|
68
|
-
|
|
69
|
-
if (o &&
|
|
70
|
+
const b = s.Children.toArray(a).filter((f) => typeof f == "string").join("");
|
|
71
|
+
s.useEffect(() => {
|
|
72
|
+
if (o && n)
|
|
70
73
|
throw new Error("Clickable tag should have onRemove or onAdd, not both");
|
|
71
|
-
}, [
|
|
72
|
-
function y(f) {
|
|
73
|
-
s ? s() : o && o(), f.stopPropagation();
|
|
74
|
-
}
|
|
74
|
+
}, [n, o]);
|
|
75
75
|
function N(f) {
|
|
76
|
+
n ? n() : o && o(), f.stopPropagation();
|
|
77
|
+
}
|
|
78
|
+
function _(f) {
|
|
76
79
|
f.stopPropagation(), e && e(f);
|
|
77
80
|
}
|
|
78
|
-
return /* @__PURE__ */
|
|
81
|
+
return /* @__PURE__ */ s.createElement("div", { className: m(E({ kind: g, disabled: l }), r), ...u }, /* @__PURE__ */ s.createElement(
|
|
79
82
|
"span",
|
|
80
83
|
{
|
|
81
84
|
className: m(
|
|
82
85
|
x({
|
|
83
86
|
link: !!t || !!e,
|
|
84
87
|
disabled: l,
|
|
85
|
-
addOrRemove:
|
|
88
|
+
addOrRemove: n || o
|
|
86
89
|
})
|
|
87
90
|
),
|
|
88
|
-
onClick:
|
|
91
|
+
onClick: _,
|
|
89
92
|
title: b
|
|
90
93
|
},
|
|
91
|
-
t ? /* @__PURE__ */
|
|
92
|
-
), (
|
|
94
|
+
t ? /* @__PURE__ */ s.createElement("a", { className: F, href: t, target: c }, a) : a
|
|
95
|
+
), (n || o) && !l && /* @__PURE__ */ s.createElement(
|
|
93
96
|
"div",
|
|
94
97
|
{
|
|
95
98
|
className: K,
|
|
96
|
-
onClick: l ? void 0 :
|
|
99
|
+
onClick: l ? void 0 : N,
|
|
97
100
|
tabIndex: -1,
|
|
98
|
-
"aria-label":
|
|
101
|
+
"aria-label": n ? "Add" : "Remove"
|
|
99
102
|
},
|
|
100
|
-
/* @__PURE__ */
|
|
103
|
+
/* @__PURE__ */ s.createElement(v, { className: h, "aria-hidden": "true", icon: n ? "plus-sign" : "x" })
|
|
101
104
|
));
|
|
102
105
|
}
|
|
103
|
-
T.set(
|
|
106
|
+
T.set(w, {
|
|
104
107
|
name: "Clickable Tag",
|
|
105
108
|
props: {
|
|
106
109
|
disabled: { type: "boolean", default: "false" },
|
|
@@ -128,7 +131,7 @@ function p({
|
|
|
128
131
|
icon: l,
|
|
129
132
|
...t
|
|
130
133
|
}) {
|
|
131
|
-
return /* @__PURE__ */
|
|
134
|
+
return /* @__PURE__ */ s.createElement("span", { className: m(V({ kind: e }), r), ...t }, l && /* @__PURE__ */ s.createElement(v, { className: m(P({ kind: e })), icon: j[e] }), a);
|
|
132
135
|
}
|
|
133
136
|
T.set(p, {
|
|
134
137
|
name: "Tag",
|
|
@@ -138,7 +141,7 @@ T.set(p, {
|
|
|
138
141
|
}
|
|
139
142
|
});
|
|
140
143
|
var I = "_79ofse0", R = "_79ofse1", D = "_79ofsec", L = d({ defaultClassName: "_79ofse2", variantClassNames: { href: { true: "_79ofse3", false: "_79ofse4" }, kind: { default: "_79ofse5", key: "_79ofse6", warning: "_79ofse7", error: "_79ofse8", pending: "_79ofse9", success: "_79ofsea", info: "_79ofseb" } }, defaultVariants: { href: !1, kind: "default" }, compoundVariants: [] });
|
|
141
|
-
function
|
|
144
|
+
function y({
|
|
142
145
|
children: a,
|
|
143
146
|
className: r,
|
|
144
147
|
color: e = "default",
|
|
@@ -146,12 +149,12 @@ function w({
|
|
|
146
149
|
target: t,
|
|
147
150
|
icon: c,
|
|
148
151
|
tagKey: g,
|
|
149
|
-
value:
|
|
152
|
+
value: n,
|
|
150
153
|
...o
|
|
151
154
|
}) {
|
|
152
|
-
return /* @__PURE__ */
|
|
155
|
+
return /* @__PURE__ */ s.createElement("span", { className: m(I, r), ...o }, /* @__PURE__ */ s.createElement(p, { className: m(R), icon: c, kind: e }, g), /* @__PURE__ */ s.createElement(p, { className: m(L({ href: !!l, kind: e })) }, l ? /* @__PURE__ */ s.createElement("a", { className: D, href: l, target: t }, n) : n));
|
|
153
156
|
}
|
|
154
|
-
T.set(
|
|
157
|
+
T.set(y, {
|
|
155
158
|
name: "Split Tag",
|
|
156
159
|
props: {
|
|
157
160
|
color: { type: "TagKind", default: "key" },
|
|
@@ -163,7 +166,7 @@ T.set(w, {
|
|
|
163
166
|
}
|
|
164
167
|
});
|
|
165
168
|
const B = {
|
|
166
|
-
components: [
|
|
169
|
+
components: [w],
|
|
167
170
|
examples: {
|
|
168
171
|
basic: {
|
|
169
172
|
label: "Basic Tag",
|
|
@@ -317,7 +320,7 @@ const B = {
|
|
|
317
320
|
}
|
|
318
321
|
}
|
|
319
322
|
}, W = {
|
|
320
|
-
components: [
|
|
323
|
+
components: [y],
|
|
321
324
|
examples: {
|
|
322
325
|
basic: {
|
|
323
326
|
label: "Basic",
|
|
@@ -388,9 +391,9 @@ const B = {
|
|
|
388
391
|
"Split Tags": W
|
|
389
392
|
};
|
|
390
393
|
export {
|
|
391
|
-
|
|
394
|
+
w as ClickableTag,
|
|
392
395
|
z as MANIFEST,
|
|
393
|
-
|
|
396
|
+
y as SplitTag,
|
|
394
397
|
p as Tag,
|
|
395
398
|
j as TagIcons
|
|
396
399
|
};
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._160drw10{border-radius:.125rem;display:inline-flex;color
|
|
1
|
+
._160drw10{border-radius:.125rem;display:inline-flex;color:#08638d;font-size:.75rem;font-weight:600;height:1.125rem;line-height:.75rem;max-width:100%}._160drw11{background-color:#e6f2f8}._160drw12{background-color:#e9e9ea}._160drw13{background-color:#fff;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;color:#717779;cursor:not-allowed}._160drw15{border-radius:.125rem;flex-grow:1;flex-shrink:1;height:1.125rem;overflow:hidden;padding:.125rem .25rem;text-overflow:ellipsis;white-space:nowrap}._160drw16{cursor:pointer;text-decoration:underline}._160drw16:hover{color:#e6f2f8;background-color:#08638d;border-radius:.125rem}._160drw1c{border-top-left-radius:.125rem;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:.125rem}._160drw1d{border-top-left-radius:0;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-bottom-left-radius:0;color:#08638d;height:1.125rem;line-height:.75rem;padding:.125rem .25rem}._160drw1d:focus,._160drw1d:hover{background-color:#08638d;color:#e6f2f8;cursor:pointer}._160drw1e{cursor:pointer;font-size:.625rem;position:relative;text-decoration:none;top:-.0625rem;vertical-align:middle}span>._160drw1f{color:#08638d}span:hover>._160drw1f{color:#e6f2f8}._5f3efi0{border-radius:.125rem;display:inline-block;font-size:.75rem;font-weight:600;line-height:.75rem;overflow:hidden;padding:.125rem .25rem;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}._5f3efi1{background:#e9e9ea;color:#4b5356}._5f3efi2{background:#4b5356;color:#fff}._5f3efi3{background:#e77609;color:#fff}._5f3efi4{background:#de012e;color:#fff}._5f3efi5{background:#91467f;color:#fff}._5f3efi6{background:#0b8940;color:#fff}._5f3efi7{background:#027db8;color:#fff}._5f3efi8{font-size:.75rem;line-height:.625rem;margin-right:.25rem}._5f3efi8:before{vertical-align:text-bottom}._5f3efi9{display:none}._79ofse0{display:inline-block}._79ofse1{border-top-left-radius:.125rem;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:.125rem}._79ofse2{background:#fff;border-top-left-radius:0;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-bottom-left-radius:0;padding:.125rem .25rem;box-shadow:.0625rem 0 #e9e9ea inset,-.0625rem 0 #e9e9ea inset,0 .0625rem #e9e9ea inset,0 -.0625rem #e9e9ea inset}._79ofse3{cursor:pointer;text-decoration:underline;color:#4b5356}._79ofse6{box-shadow:.0625rem 0 #4b5356 inset,-.0625rem 0 #4b5356 inset,0 .0625rem #4b5356 inset,0 -.0625rem #4b5356 inset}._79ofse7{box-shadow:.0625rem 0 #e77609 inset,-.0625rem 0 #e77609 inset,0 .0625rem #e77609 inset,0 -.0625rem #e77609 inset}._79ofse8{box-shadow:.0625rem 0 #de012e inset,-.0625rem 0 #de012e inset,0 .0625rem #de012e inset,0 -.0625rem #de012e inset}._79ofse9{box-shadow:.0625rem 0 #91467f inset,-.0625rem 0 #91467f inset,0 .0625rem #91467f inset,0 -.0625rem #91467f inset}._79ofsea{box-shadow:.0625rem 0 #0b8940 inset,-.0625rem 0 #0b8940 inset,0 .0625rem #0b8940 inset,0 -.0625rem #0b8940 inset}._79ofseb{box-shadow:.0625rem 0 #027db8 inset,-.0625rem 0 #027db8 inset,0 .0625rem #027db8 inset,0 -.0625rem #027db8 inset}._79ofsec,._79ofsec:hover{color:#4b5356}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/tags",
|
|
3
3
|
"description": "SPS Woodland Design System tag 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/cards",
|
|
@@ -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",
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
39
39
|
"react": "^16.14.0",
|
|
40
40
|
"react-dom": "^16.14.0",
|
|
41
|
-
"@sps-woodland/core": "8.7.
|
|
42
|
-
"@sps-woodland/tokens": "8.7.
|
|
41
|
+
"@sps-woodland/core": "8.7.5",
|
|
42
|
+
"@sps-woodland/tokens": "8.7.5"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"build": "pnpm run build:js && pnpm run build:types",
|
|
File without changes
|