@sps-woodland/action-bar 8.35.6 → 8.37.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/ActionBar.d.ts +2 -1
- package/lib/index.js +31 -25
- package/lib/index.umd.cjs +5 -4
- package/lib/style.css +1 -1
- package/package.json +11 -11
package/lib/ActionBar.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
|
-
export declare function ActionBar({ className, children, clearSelected, itemsSelected, itemsSelectedLabel, ...rest }: ComponentProps<{
|
|
3
|
+
export declare function ActionBar({ className, children, clearSelected, itemsSelected, itemsSelectedLabel, clearSelectedLabel, ...rest }: ComponentProps<{
|
|
4
4
|
clearSelected: () => void;
|
|
5
5
|
itemsSelected: number | string;
|
|
6
6
|
itemsSelectedLabel?: string;
|
|
7
|
+
clearSelectedLabel?: string;
|
|
7
8
|
}>): React.ReactElement;
|
package/lib/index.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { Button as
|
|
3
|
-
import { Metadata as r, Box as
|
|
4
|
-
import { Tag as
|
|
5
|
-
import { useWoodlandLanguage as
|
|
2
|
+
import { Button as h } from "@sps-woodland/buttons";
|
|
3
|
+
import { Metadata as r, Box as S, cl as l, selectChildren as f } from "@sps-woodland/core";
|
|
4
|
+
import { Tag as b } from "@sps-woodland/tags";
|
|
5
|
+
import { useWoodlandLanguage as A } from "@spscommerce/i18n";
|
|
6
6
|
import { code as s } from "@spscommerce/utils";
|
|
7
|
-
var
|
|
7
|
+
var w = "pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s90", v = "pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s91", g = "pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s92", k = "pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s93", C = "pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s94", x = "pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s95", E = "pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s96", I = "pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s97";
|
|
8
8
|
function i({
|
|
9
9
|
className: t,
|
|
10
10
|
children: n,
|
|
11
|
-
...
|
|
11
|
+
...a
|
|
12
12
|
}) {
|
|
13
13
|
return /* @__PURE__ */ e.createElement(
|
|
14
|
-
|
|
14
|
+
S,
|
|
15
15
|
{
|
|
16
|
-
className: l(
|
|
17
|
-
...
|
|
16
|
+
className: l(I, t),
|
|
17
|
+
...a
|
|
18
18
|
},
|
|
19
19
|
n
|
|
20
20
|
);
|
|
@@ -26,29 +26,30 @@ r.set(i, {
|
|
|
26
26
|
function d({
|
|
27
27
|
className: t,
|
|
28
28
|
children: n,
|
|
29
|
-
clearSelected:
|
|
29
|
+
clearSelected: a,
|
|
30
30
|
itemsSelected: c,
|
|
31
31
|
itemsSelectedLabel: m,
|
|
32
|
-
|
|
32
|
+
clearSelectedLabel: u,
|
|
33
|
+
...p
|
|
33
34
|
}) {
|
|
34
|
-
const { t:
|
|
35
|
+
const { t: o } = A(), [_, B] = f(n, [
|
|
35
36
|
{ type: i }
|
|
36
37
|
]);
|
|
37
38
|
return Number(c) > 0 ? /* @__PURE__ */ e.createElement(
|
|
38
39
|
"div",
|
|
39
40
|
{
|
|
40
|
-
className: l(
|
|
41
|
-
...
|
|
41
|
+
className: l(w, t),
|
|
42
|
+
...p
|
|
42
43
|
},
|
|
43
|
-
/* @__PURE__ */ e.createElement("div", { className:
|
|
44
|
-
|
|
44
|
+
/* @__PURE__ */ e.createElement("div", { className: v }, _, /* @__PURE__ */ e.createElement("div", { className: g }, /* @__PURE__ */ e.createElement("div", { className: k }, /* @__PURE__ */ e.createElement(b, { kind: "info", className: C }, c), m ?? o("listActionBar.itemsSelected", { defaultValue: "Items Selected" })), /* @__PURE__ */ e.createElement("div", { className: x }, B), /* @__PURE__ */ e.createElement("div", { className: E }, /* @__PURE__ */ e.createElement(
|
|
45
|
+
h,
|
|
45
46
|
{
|
|
46
|
-
title:
|
|
47
|
+
title: o("listActionBar.clearSelected", { defaultValue: "Clear Selected" }),
|
|
47
48
|
kind: "link",
|
|
48
49
|
icon: "x",
|
|
49
|
-
onPress:
|
|
50
|
+
onPress: a
|
|
50
51
|
},
|
|
51
|
-
|
|
52
|
+
u ?? o("listActionBar.clearSelected", { defaultValue: "Clear Selected" })
|
|
52
53
|
))))
|
|
53
54
|
) : /* @__PURE__ */ e.createElement(e.Fragment, null);
|
|
54
55
|
}
|
|
@@ -66,10 +67,14 @@ r.set(d, {
|
|
|
66
67
|
itemsSelectedLabel: {
|
|
67
68
|
type: "string",
|
|
68
69
|
required: !1
|
|
70
|
+
},
|
|
71
|
+
clearSelectedLabel: {
|
|
72
|
+
type: "string",
|
|
73
|
+
required: !1
|
|
69
74
|
}
|
|
70
75
|
}
|
|
71
76
|
});
|
|
72
|
-
const
|
|
77
|
+
const y = {
|
|
73
78
|
components: [d, i],
|
|
74
79
|
description: () => /* @__PURE__ */ e.createElement("p", null, "The Action Bar contains the action buttons relevant to selected items from a Table List, Row List, or Card List. The Action Bar is only visible when one or more list items have been selected and appears anchored to the bottom of the page above all other content."),
|
|
75
80
|
examples: {
|
|
@@ -134,8 +139,8 @@ const I = {
|
|
|
134
139
|
}
|
|
135
140
|
},
|
|
136
141
|
customLabel: {
|
|
137
|
-
label:
|
|
138
|
-
description: "If needed, the text that appears next to the Tag indicating the number of items that have been selected can be customized.",
|
|
142
|
+
label: "Custom Labels",
|
|
143
|
+
description: "If needed, the text that appears next to the Tag indicating the number of items that have been selected can be customized, as well as the text for the Clear Selected button.",
|
|
139
144
|
examples: {
|
|
140
145
|
basic: {
|
|
141
146
|
react: s`
|
|
@@ -171,6 +176,7 @@ const I = {
|
|
|
171
176
|
<ActionBar
|
|
172
177
|
itemsSelected={itemsSelected.length}
|
|
173
178
|
itemsSelectedLabel={\`\${itemsSelected.length} Items Selected - $\${costOfSelectedItems}\`}
|
|
179
|
+
clearSelectedLabel="Discard Changes"
|
|
174
180
|
clearSelected={handleClear}
|
|
175
181
|
>
|
|
176
182
|
<Button kind="confirm">Button</Button>
|
|
@@ -224,11 +230,11 @@ const I = {
|
|
|
224
230
|
}
|
|
225
231
|
}
|
|
226
232
|
}
|
|
227
|
-
},
|
|
228
|
-
"Action Bar":
|
|
233
|
+
}, P = {
|
|
234
|
+
"Action Bar": y
|
|
229
235
|
};
|
|
230
236
|
export {
|
|
231
237
|
d as ActionBar,
|
|
232
238
|
i as ActionBarAdditionalContent,
|
|
233
|
-
|
|
239
|
+
P as MANIFEST
|
|
234
240
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(e,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react"),require("@sps-woodland/buttons"),require("@sps-woodland/core"),require("@sps-woodland/tags"),require("@spscommerce/i18n"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/buttons","@sps-woodland/core","@sps-woodland/tags","@spscommerce/i18n","@spscommerce/utils"],i):(e=typeof globalThis<"u"?globalThis:e||self,i(e.ActionBar={},e.React,e.buttons,e.core,e.tags,e.i18n,e.utils))})(this,function(e,i,u,s,p,_,
|
|
1
|
+
(function(e,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react"),require("@sps-woodland/buttons"),require("@sps-woodland/core"),require("@sps-woodland/tags"),require("@spscommerce/i18n"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/buttons","@sps-woodland/core","@sps-woodland/tags","@spscommerce/i18n","@spscommerce/utils"],i):(e=typeof globalThis<"u"?globalThis:e||self,i(e.ActionBar={},e.React,e.buttons,e.core,e.tags,e.i18n,e.utils))})(this,function(e,i,u,s,p,_,l){"use strict";function B(n){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const c=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(a,o,c.get?c:{enumerable:!0,get:()=>n[o]})}}return a.default=n,Object.freeze(a)}const t=B(i);var h="pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s90",f="pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s91",S="pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s92",b="pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s93",A="pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s94",w="pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s95",g="pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s96",v="pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s97";function r({className:n,children:a,...o}){return t.createElement(s.Box,{className:s.cl(v,n),...o},a)}s.Metadata.set(r,{name:"ActionBarAdditionalContent",props:{}});function d({className:n,children:a,clearSelected:o,itemsSelected:c,itemsSelectedLabel:C,clearSelectedLabel:x,...y}){const{t:m}=_.useWoodlandLanguage(),[E,I]=s.selectChildren(a,[{type:r}]);return Number(c)>0?t.createElement("div",{className:s.cl(h,n),...y},t.createElement("div",{className:f},E,t.createElement("div",{className:S},t.createElement("div",{className:b},t.createElement(p.Tag,{kind:"info",className:A},c),C??m("listActionBar.itemsSelected",{defaultValue:"Items Selected"})),t.createElement("div",{className:w},I),t.createElement("div",{className:g},t.createElement(u.Button,{title:m("listActionBar.clearSelected",{defaultValue:"Clear Selected"}),kind:"link",icon:"x",onPress:o},x??m("listActionBar.clearSelected",{defaultValue:"Clear Selected"})))))):t.createElement(t.Fragment,null)}s.Metadata.set(d,{name:"ActionBar",props:{clearSelected:{type:"() => void",required:!0},itemsSelected:{type:"number | string",required:!0},itemsSelectedLabel:{type:"string",required:!1},clearSelectedLabel:{type:"string",required:!1}}});const k={"Action Bar":{components:[d,r],description:()=>t.createElement("p",null,"The Action Bar contains the action buttons relevant to selected items from a Table List, Row List, or Card List. The Action Bar is only visible when one or more list items have been selected and appears anchored to the bottom of the page above all other content."),examples:{general:{label:"General Usage",description:""},actionBar:{label:"Action Bar",description:"This example makes use of the Text Buttons + Icon Buttons + Basic Buttons Group.",examples:{basic:{react:l.code`
|
|
2
2
|
import { ActionBar } from "@sps-woodland/action-bar";
|
|
3
3
|
import { Button } from "@sps-woodland/buttons";
|
|
4
4
|
import { Vr } from "@sps-woodland/core";
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
</ActionBar>
|
|
45
45
|
</>
|
|
46
46
|
}
|
|
47
|
-
`}}},customLabel:{label:
|
|
47
|
+
`}}},customLabel:{label:"Custom Labels",description:"If needed, the text that appears next to the Tag indicating the number of items that have been selected can be customized, as well as the text for the Clear Selected button.",examples:{basic:{react:l.code`
|
|
48
48
|
import { ActionBar } from "@sps-woodland/action-bar";
|
|
49
49
|
import { Button } from "@sps-woodland/buttons";
|
|
50
50
|
|
|
@@ -77,13 +77,14 @@
|
|
|
77
77
|
<ActionBar
|
|
78
78
|
itemsSelected={itemsSelected.length}
|
|
79
79
|
itemsSelectedLabel={\`\${itemsSelected.length} Items Selected - $\${costOfSelectedItems}\`}
|
|
80
|
+
clearSelectedLabel="Discard Changes"
|
|
80
81
|
clearSelected={handleClear}
|
|
81
82
|
>
|
|
82
83
|
<Button kind="confirm">Button</Button>
|
|
83
84
|
</ActionBar>
|
|
84
85
|
</>
|
|
85
86
|
}
|
|
86
|
-
`}}},addlContent:{label:"Additional Content",description:"An Action Bar may contain additional content that is not part of the action buttons group, which is displayed above the main content.",examples:{basic:{react:
|
|
87
|
+
`}}},addlContent:{label:"Additional Content",description:"An Action Bar may contain additional content that is not part of the action buttons group, which is displayed above the main content.",examples:{basic:{react:l.code`
|
|
87
88
|
import { ActionBar, ActionBarAdditionalContent } from "@sps-woodland/action-bar";
|
|
88
89
|
import { Button } from "@sps-woodland/buttons";
|
|
89
90
|
import { Card } from "@sps-woodland/cards";
|
|
@@ -116,4 +117,4 @@
|
|
|
116
117
|
</ActionBar>
|
|
117
118
|
</>
|
|
118
119
|
}
|
|
119
|
-
`}}}}}};e.ActionBar=
|
|
120
|
+
`}}}}}};e.ActionBar=d,e.ActionBarAdditionalContent=r,e.MANIFEST=k,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_action-
|
|
1
|
+
.pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s90{background-color:#fff;display:flex;bottom:0;position:fixed;justify-content:center;left:0;right:0;padding:.5rem;box-shadow:0 0 .25rem .25rem #1f282c1a;z-index:99}.pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s91{display:flex;flex-direction:column;max-width:1280px;padding-left:1.25rem;padding-right:1.25rem;width:100%}.pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s92{height:2rem;display:flex;align-items:center;width:100%}.pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s93{flex:1}.pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s94{margin-right:.25rem}.pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s95{display:flex;flex:2;align-items:center;justify-content:center}.pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s96{flex:1;text-align:right}.pkg_sps-woodland_action-bar__version_8_37_0__hash_9yu2s97{margin-bottom:.5rem}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/action-bar",
|
|
3
3
|
"description": "SPS Woodland Design System Action Bar component",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.37.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/action-bar",
|
|
@@ -29,11 +29,11 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0",
|
|
30
30
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
31
31
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
|
-
"@sps-woodland/buttons": "8.
|
|
33
|
-
"@sps-woodland/core": "8.
|
|
34
|
-
"@sps-woodland/tags": "8.
|
|
35
|
-
"@sps-woodland/tokens": "8.
|
|
36
|
-
"@spscommerce/i18n": "8.
|
|
32
|
+
"@sps-woodland/buttons": "8.37.0",
|
|
33
|
+
"@sps-woodland/core": "8.37.0",
|
|
34
|
+
"@sps-woodland/tags": "8.37.0",
|
|
35
|
+
"@sps-woodland/tokens": "8.37.0",
|
|
36
|
+
"@spscommerce/i18n": "8.37.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@spscommerce/utils": "^8.1.1",
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
42
42
|
"react": "^16.14.0",
|
|
43
43
|
"react-dom": "^16.14.0",
|
|
44
|
-
"@sps-woodland/buttons": "8.
|
|
45
|
-
"@sps-woodland/core": "8.
|
|
46
|
-
"@sps-woodland/tags": "8.
|
|
47
|
-
"@sps-woodland/tokens": "8.
|
|
48
|
-
"@spscommerce/i18n": "8.
|
|
44
|
+
"@sps-woodland/buttons": "8.37.0",
|
|
45
|
+
"@sps-woodland/core": "8.37.0",
|
|
46
|
+
"@sps-woodland/tags": "8.37.0",
|
|
47
|
+
"@sps-woodland/tokens": "8.37.0",
|
|
48
|
+
"@spscommerce/i18n": "8.37.0"
|
|
49
49
|
},
|
|
50
50
|
"scripts": {
|
|
51
51
|
"build": "pnpm run build:js && pnpm run build:types",
|