@sps-woodland/list-bar 8.31.6 → 8.32.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/advanced-search/AdvancedSearch.d.ts +4 -3
- package/lib/index.js +130 -126
- package/lib/index.umd.cjs +4 -4
- package/lib/list-bar/ListBar.d.ts +2 -1
- package/lib/style.css +1 -1
- package/package.json +14 -14
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { ComponentProps } from "@sps-woodland/core";
|
|
3
|
-
import { SpsFormArray, SpsFormGroup, SpsFormSetMeta } from "@spscommerce/ds-react";
|
|
4
|
-
export declare function AdvancedSearch({ formArray, formGroup, formMeta, onSubmit, controlsDisabled, footerLinks, isOpen, onClear, className, children, ...rest }: ComponentProps<{
|
|
2
|
+
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
|
+
import type { SpsFormArray, SpsFormGroup, SpsFormSetMeta } from "@spscommerce/ds-react";
|
|
4
|
+
export declare function AdvancedSearch({ formArray, formGroup, formMeta, onSubmit, controlsDisabled, footerLinks, isOpen, onClear, submitButtonText, className, children, ...rest }: ComponentProps<{
|
|
5
5
|
formArray?: SpsFormArray<any>;
|
|
6
6
|
formGroup?: SpsFormGroup;
|
|
7
7
|
formMeta?: SpsFormSetMeta<any>;
|
|
@@ -10,4 +10,5 @@ export declare function AdvancedSearch({ formArray, formGroup, formMeta, onSubmi
|
|
|
10
10
|
footerLinks?: React.ReactNode | (() => React.ReactNode);
|
|
11
11
|
isOpen?: boolean;
|
|
12
12
|
onClear?: () => void;
|
|
13
|
+
submitButtonText?: string;
|
|
13
14
|
}, HTMLDivElement>): React.ReactElement;
|
package/lib/index.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { Metadata as b, I18nContext as
|
|
2
|
+
import { Metadata as b, I18nContext as k, modChildren as te, cl as w, selectChildren as ae, addProps as re, PortalContext as se, contentOf as ne } from "@sps-woodland/core";
|
|
3
3
|
import { Button as _ } from "@sps-woodland/buttons";
|
|
4
|
-
import { Tag as
|
|
5
|
-
import { lockToAnimationFrames as
|
|
6
|
-
import { SpsInputGroup as
|
|
7
|
-
import { sprinkles as
|
|
8
|
-
var
|
|
9
|
-
function
|
|
4
|
+
import { Tag as C } from "@sps-woodland/tags";
|
|
5
|
+
import { lockToAnimationFrames as oe, code as o } from "@spscommerce/utils";
|
|
6
|
+
import { SpsInputGroup as le, SpsCheckbox as ce, SpsDropdown as ie, SpsForm as de, SpsFocusedTask as ue, SpsTable as me, SpsTableHead as he, SpsTableHeader as A, SpsTableBody as pe, SpsTableRow as v, SpsTableCell as n } from "@spscommerce/ds-react";
|
|
7
|
+
import { sprinkles as Se } from "@sps-woodland/tokens";
|
|
8
|
+
var fe = "pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc0", ve = "pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc1", be = "pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc2", Be = "pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc3", _e = "pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc4", ge = "pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc5", Te = "pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc6", Ee = "pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc7", Le = "pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc8";
|
|
9
|
+
function R({
|
|
10
10
|
results: t,
|
|
11
11
|
selections: a,
|
|
12
12
|
zeroStateText: r,
|
|
13
13
|
onClear: s,
|
|
14
14
|
className: l,
|
|
15
|
-
children:
|
|
16
|
-
...
|
|
15
|
+
children: m,
|
|
16
|
+
...h
|
|
17
17
|
}) {
|
|
18
|
-
const { t: c } = e.useContext(
|
|
19
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
18
|
+
const { t: c } = e.useContext(k), i = a ? Object.keys(a).reduce((p, d) => (a[d].length > 0 && (p[d] = a[d]), p), {}) : {};
|
|
19
|
+
return /* @__PURE__ */ e.createElement("div", { className: ve, ...h }, t != null && /* @__PURE__ */ e.createElement("div", { className: be }, /* @__PURE__ */ e.createElement("span", null, c("design-system:searchResultsBar.results", { defaultValue: "Results:" })), /* @__PURE__ */ e.createElement(C, { className: Be, kind: "info" }, /* @__PURE__ */ e.createElement("span", null, t))), /* @__PURE__ */ e.createElement("div", { className: _e }, Object.keys(i).length > 0 ? Object.keys(i).map((p, d) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { key: d, className: ge }, p, ":"), i[p].map((g, B) => /* @__PURE__ */ e.createElement(C, { className: Te, key: B, kind: "key" }, /* @__PURE__ */ e.createElement("span", null, g))))) : /* @__PURE__ */ e.createElement("span", { className: "font-italic" }, r || c("design-system:searchResultsBar.noAdvancedSearchSelections", { defaultValue: "No Advanced Search Selections" }))), /* @__PURE__ */ e.createElement("div", { className: Ee }, /* @__PURE__ */ e.createElement(_, { className: Le, kind: "link", onClick: s }, c("design-system:searchResultsBar.clearResults", { defaultValue: "Clear Results" }))));
|
|
20
20
|
}
|
|
21
|
-
b.set(
|
|
21
|
+
b.set(R, {
|
|
22
22
|
name: "Search Results Bar",
|
|
23
23
|
props: {
|
|
24
24
|
results: { type: "number | string | null" },
|
|
@@ -27,7 +27,7 @@ b.set(k, {
|
|
|
27
27
|
onClear: { type: "() => void" }
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
-
function
|
|
30
|
+
function ye(t, a, r) {
|
|
31
31
|
return a in t ? Object.defineProperty(t, a, {
|
|
32
32
|
value: r,
|
|
33
33
|
enumerable: !0,
|
|
@@ -35,7 +35,7 @@ function Le(t, a, r) {
|
|
|
35
35
|
writable: !0
|
|
36
36
|
}) : t[a] = r, t;
|
|
37
37
|
}
|
|
38
|
-
function
|
|
38
|
+
function G(t, a) {
|
|
39
39
|
var r = Object.keys(t);
|
|
40
40
|
if (Object.getOwnPropertySymbols) {
|
|
41
41
|
var s = Object.getOwnPropertySymbols(t);
|
|
@@ -45,103 +45,104 @@ function P(t, a) {
|
|
|
45
45
|
}
|
|
46
46
|
return r;
|
|
47
47
|
}
|
|
48
|
-
function
|
|
48
|
+
function U(t) {
|
|
49
49
|
for (var a = 1; a < arguments.length; a++) {
|
|
50
50
|
var r = arguments[a] != null ? arguments[a] : {};
|
|
51
|
-
a % 2 ?
|
|
52
|
-
|
|
53
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) :
|
|
51
|
+
a % 2 ? G(Object(r), !0).forEach(function(s) {
|
|
52
|
+
ye(t, s, r[s]);
|
|
53
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : G(Object(r)).forEach(function(s) {
|
|
54
54
|
Object.defineProperty(t, s, Object.getOwnPropertyDescriptor(r, s));
|
|
55
55
|
});
|
|
56
56
|
}
|
|
57
57
|
return t;
|
|
58
58
|
}
|
|
59
|
-
var
|
|
59
|
+
var we = (t, a, r) => {
|
|
60
60
|
for (var s of Object.keys(t)) {
|
|
61
61
|
var l;
|
|
62
62
|
if (t[s] !== ((l = a[s]) !== null && l !== void 0 ? l : r[s]))
|
|
63
63
|
return !1;
|
|
64
64
|
}
|
|
65
65
|
return !0;
|
|
66
|
-
},
|
|
67
|
-
var r = t.defaultClassName, s =
|
|
66
|
+
}, K = (t) => (a) => {
|
|
67
|
+
var r = t.defaultClassName, s = U(U({}, t.defaultVariants), a);
|
|
68
68
|
for (var l in s) {
|
|
69
|
-
var
|
|
70
|
-
if (
|
|
71
|
-
var c =
|
|
69
|
+
var m, h = (m = s[l]) !== null && m !== void 0 ? m : t.defaultVariants[l];
|
|
70
|
+
if (h != null) {
|
|
71
|
+
var c = h;
|
|
72
72
|
typeof c == "boolean" && (c = c === !0 ? "true" : "false");
|
|
73
|
-
var
|
|
73
|
+
var i = (
|
|
74
74
|
// @ts-expect-error
|
|
75
75
|
t.variantClassNames[l][c]
|
|
76
76
|
);
|
|
77
|
-
|
|
77
|
+
i && (r += " " + i);
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
|
-
for (var [
|
|
81
|
-
|
|
80
|
+
for (var [p, d] of t.compoundVariants)
|
|
81
|
+
we(p, s, t.defaultVariants) && (r += " " + d);
|
|
82
82
|
return r;
|
|
83
|
-
},
|
|
84
|
-
function
|
|
83
|
+
}, xe = K({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p701", variantClassNames: { pinned: { true: "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p702", false: "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), Ae = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p704", Ce = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p705", ke = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p706", Re = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p707", Fe = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p708", Me = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p709", Ie = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70a", j = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70b", Oe = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70c", Ve = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d", Ne = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70e", De = "pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70f";
|
|
84
|
+
function Pe({
|
|
85
85
|
children: t
|
|
86
86
|
}) {
|
|
87
|
-
const a =
|
|
87
|
+
const a = te(
|
|
88
88
|
t,
|
|
89
89
|
(r) => r.type === _ ? [
|
|
90
90
|
{
|
|
91
|
-
className: w(r.props.className,
|
|
91
|
+
className: w(r.props.className, Ne)
|
|
92
92
|
}
|
|
93
93
|
] : []
|
|
94
94
|
);
|
|
95
95
|
return /* @__PURE__ */ e.createElement(e.Fragment, null, a);
|
|
96
96
|
}
|
|
97
|
-
function
|
|
97
|
+
function F({
|
|
98
98
|
onSubmit: t,
|
|
99
99
|
children: a
|
|
100
100
|
}) {
|
|
101
101
|
function r(s) {
|
|
102
102
|
s.preventDefault(), t && t(s);
|
|
103
103
|
}
|
|
104
|
-
return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className:
|
|
104
|
+
return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className: Oe, noValidate: !0 }, /* @__PURE__ */ e.createElement(le, { className: Ve }, /* @__PURE__ */ e.createElement(Pe, null, a)));
|
|
105
105
|
}
|
|
106
|
-
b.set(
|
|
106
|
+
b.set(F, {
|
|
107
107
|
name: "ListBarSearch",
|
|
108
108
|
props: {
|
|
109
109
|
onSubmit: { type: "FormEventHandler" }
|
|
110
110
|
}
|
|
111
111
|
});
|
|
112
|
-
function
|
|
112
|
+
function M({
|
|
113
113
|
children: t
|
|
114
114
|
}) {
|
|
115
115
|
return /* @__PURE__ */ e.createElement("div", null, t);
|
|
116
116
|
}
|
|
117
|
-
b.set(
|
|
117
|
+
b.set(M, {
|
|
118
118
|
name: "ListBarSearchInfo"
|
|
119
119
|
});
|
|
120
|
-
function
|
|
120
|
+
function q({
|
|
121
121
|
advancedSearch: t,
|
|
122
122
|
onToggleAdvancedSearch: a,
|
|
123
123
|
title: r,
|
|
124
124
|
onToolbarPinned: s,
|
|
125
125
|
selectable: l,
|
|
126
|
-
isSelected:
|
|
127
|
-
isIndeterminate:
|
|
126
|
+
isSelected: m,
|
|
127
|
+
isIndeterminate: h,
|
|
128
128
|
disableSelection: c = !1,
|
|
129
|
-
onSelectionChange:
|
|
130
|
-
pinResultsBar:
|
|
131
|
-
pinToolbar:
|
|
129
|
+
onSelectionChange: i,
|
|
130
|
+
pinResultsBar: p,
|
|
131
|
+
pinToolbar: d = !0,
|
|
132
|
+
advancedSearchToggleText: g,
|
|
132
133
|
children: B,
|
|
133
|
-
className:
|
|
134
|
-
...
|
|
134
|
+
className: x,
|
|
135
|
+
...I
|
|
135
136
|
}) {
|
|
136
|
-
const { t:
|
|
137
|
+
const { t: Y } = e.useContext(k);
|
|
137
138
|
let L = null;
|
|
138
|
-
const [S,
|
|
139
|
-
if (T.current &&
|
|
140
|
-
const
|
|
141
|
-
if (!
|
|
139
|
+
const [S, O] = e.useState(!1), T = e.useRef(null), f = e.useRef(null), { "data-testid": V } = I, y = oe(() => {
|
|
140
|
+
if (T.current && d) {
|
|
141
|
+
const u = T.current.getBoundingClientRect();
|
|
142
|
+
if (!u)
|
|
142
143
|
return;
|
|
143
|
-
const
|
|
144
|
-
|
|
144
|
+
const X = Math.round(u.height), $ = Math.round(u.top), ee = Math.round(window.scrollY);
|
|
145
|
+
X > 0 && $ <= 60 && (typeof L == "number" ? ee <= L && (L = null, O(!1)) : (L = Math.round(window.scrollY), O(!0), a && a(!1)));
|
|
145
146
|
}
|
|
146
147
|
});
|
|
147
148
|
e.useEffect(() => (window.addEventListener("scroll", y), window.addEventListener("resize", y), () => {
|
|
@@ -149,64 +150,64 @@ function K({
|
|
|
149
150
|
}), []);
|
|
150
151
|
const E = e.useRef();
|
|
151
152
|
e.useLayoutEffect(() => {
|
|
152
|
-
if (f.current && T.current &&
|
|
153
|
+
if (f.current && T.current && d) {
|
|
153
154
|
if (S && E.current)
|
|
154
155
|
f.current.style.height = E.current.height, f.current.style.width = E.current.width, f.current.style.marginBottom = E.current.marginBottom;
|
|
155
156
|
else if (!S) {
|
|
156
157
|
f.current.style.height = "", f.current.style.width = "", f.current.style.marginBottom = "";
|
|
157
|
-
const
|
|
158
|
+
const u = window.getComputedStyle(T.current);
|
|
158
159
|
E.current = {
|
|
159
|
-
height:
|
|
160
|
-
width:
|
|
161
|
-
marginBottom:
|
|
160
|
+
height: u.height,
|
|
161
|
+
width: u.width,
|
|
162
|
+
marginBottom: u.marginBottom
|
|
162
163
|
};
|
|
163
164
|
}
|
|
164
165
|
}
|
|
165
166
|
}, [S]);
|
|
166
|
-
function
|
|
167
|
+
function z() {
|
|
167
168
|
a && a(!(t != null && t.isOpen));
|
|
168
169
|
}
|
|
169
|
-
function
|
|
170
|
-
s && s(
|
|
170
|
+
function Z(u) {
|
|
171
|
+
s && s(u);
|
|
171
172
|
}
|
|
172
173
|
e.useEffect(() => {
|
|
173
|
-
|
|
174
|
+
Z(S);
|
|
174
175
|
}, [S]);
|
|
175
176
|
const [
|
|
176
|
-
|
|
177
|
-
Z,
|
|
177
|
+
N,
|
|
178
178
|
J,
|
|
179
|
-
|
|
180
|
-
D
|
|
181
|
-
|
|
182
|
-
|
|
179
|
+
Q,
|
|
180
|
+
[D],
|
|
181
|
+
P
|
|
182
|
+
] = ae(B, [
|
|
183
183
|
{ type: F },
|
|
184
|
-
{ type:
|
|
184
|
+
{ type: M },
|
|
185
|
+
{ type: R },
|
|
185
186
|
{
|
|
186
|
-
custom: (
|
|
187
|
+
custom: (u) => b.isWoodlandComponent(u) && b.get(u).name === "Tabs"
|
|
187
188
|
}
|
|
188
189
|
]);
|
|
189
|
-
return /* @__PURE__ */ e.createElement("div", { className: w(
|
|
190
|
-
|
|
190
|
+
return /* @__PURE__ */ e.createElement("div", { className: w(x), ref: f, ...I }, /* @__PURE__ */ e.createElement("div", { className: xe({ pinned: S }), ref: T }, D ? re(D, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: Ae }, !!l && /* @__PURE__ */ e.createElement("div", { className: Ce }, /* @__PURE__ */ e.createElement(
|
|
191
|
+
ce,
|
|
191
192
|
{
|
|
192
|
-
checked:
|
|
193
|
+
checked: m,
|
|
193
194
|
disabled: c,
|
|
194
|
-
indeterminate:
|
|
195
|
+
indeterminate: h,
|
|
195
196
|
onChange: () => {
|
|
196
|
-
|
|
197
|
+
i == null || i(!m);
|
|
197
198
|
}
|
|
198
199
|
}
|
|
199
|
-
)), /* @__PURE__ */ e.createElement("div", { className:
|
|
200
|
+
)), /* @__PURE__ */ e.createElement("div", { className: ke }, !r && N, !r && J, N.length > 0 && t && /* @__PURE__ */ e.createElement(
|
|
200
201
|
"div",
|
|
201
202
|
{
|
|
202
|
-
className:
|
|
203
|
-
"data-testid": `${
|
|
203
|
+
className: Re,
|
|
204
|
+
"data-testid": `${V}__advanced-search`
|
|
204
205
|
},
|
|
205
|
-
/* @__PURE__ */ e.createElement("div", { className:
|
|
206
|
-
(t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(
|
|
207
|
-
), r && /* @__PURE__ */ e.createElement("div", { className:
|
|
206
|
+
/* @__PURE__ */ e.createElement("div", { className: Fe }, /* @__PURE__ */ e.createElement(_, { kind: "link", onClick: z }, g ?? Y("design-system:listToolbar.advancedSearchToggle", { defaultValue: "Advanced Search" }))),
|
|
207
|
+
(t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(C, { className: Me, kind: "info", "data-testid": `${V}__entered-fields` }, /* @__PURE__ */ e.createElement("span", null, t.enteredFields))
|
|
208
|
+
), r && /* @__PURE__ */ e.createElement("div", { className: Ie }, r)), S ? /* @__PURE__ */ e.createElement("div", { className: j }, /* @__PURE__ */ e.createElement(se.Provider, { value: { fixed: !0 } }, P)) : /* @__PURE__ */ e.createElement("div", { className: j }, P)), /* @__PURE__ */ e.createElement("div", { className: fe }, (!S || p) && Q))));
|
|
208
209
|
}
|
|
209
|
-
b.set(
|
|
210
|
+
b.set(q, {
|
|
210
211
|
name: "ListBar",
|
|
211
212
|
props: {
|
|
212
213
|
activeTab: { type: "Tab" },
|
|
@@ -220,34 +221,35 @@ b.set(K, {
|
|
|
220
221
|
isIndeterminate: { type: "boolean" },
|
|
221
222
|
onSelectionChange: { type: "(boolean) => void" },
|
|
222
223
|
pinResultsBar: { type: "boolean" },
|
|
223
|
-
pinToolbar: { type: "boolean", default: "true" }
|
|
224
|
+
pinToolbar: { type: "boolean", default: "true" },
|
|
225
|
+
advancedSearchToggleText: { type: "string" }
|
|
224
226
|
}
|
|
225
227
|
});
|
|
226
|
-
function
|
|
228
|
+
function H({
|
|
227
229
|
options: t,
|
|
228
230
|
activeOption: a,
|
|
229
231
|
onSortChange: r,
|
|
230
232
|
defaultOption: s,
|
|
231
233
|
className: l,
|
|
232
|
-
...
|
|
234
|
+
...m
|
|
233
235
|
}) {
|
|
234
|
-
const
|
|
236
|
+
const h = (t || []).map((c) => [
|
|
235
237
|
{ label: c.label, icon: c.icon },
|
|
236
238
|
() => {
|
|
237
239
|
r && r(c);
|
|
238
240
|
}
|
|
239
241
|
]);
|
|
240
242
|
return /* @__PURE__ */ e.createElement(
|
|
241
|
-
|
|
243
|
+
ie,
|
|
242
244
|
{
|
|
243
|
-
className: w(l,
|
|
245
|
+
className: w(l, De),
|
|
244
246
|
icon: (a == null ? void 0 : a.icon) || (s == null ? void 0 : s.icon),
|
|
245
247
|
label: (a == null ? void 0 : a.label) || (s == null ? void 0 : s.label),
|
|
246
|
-
options:
|
|
248
|
+
options: h
|
|
247
249
|
}
|
|
248
250
|
);
|
|
249
251
|
}
|
|
250
|
-
b.set(
|
|
252
|
+
b.set(H, {
|
|
251
253
|
name: "ListBarSortBy",
|
|
252
254
|
props: {
|
|
253
255
|
options: { type: "SortOption[]" },
|
|
@@ -256,37 +258,38 @@ b.set(q, {
|
|
|
256
258
|
defaultOption: { type: "SortOption" }
|
|
257
259
|
}
|
|
258
260
|
});
|
|
259
|
-
var
|
|
260
|
-
function
|
|
261
|
+
var Ge = K({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj410", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj411", false: "pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ue = "pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj413", je = "pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj414", Ke = "pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj415";
|
|
262
|
+
function W({
|
|
261
263
|
formArray: t,
|
|
262
264
|
formGroup: a,
|
|
263
265
|
formMeta: r,
|
|
264
266
|
onSubmit: s,
|
|
265
267
|
controlsDisabled: l,
|
|
266
|
-
footerLinks:
|
|
267
|
-
isOpen:
|
|
268
|
+
footerLinks: m,
|
|
269
|
+
isOpen: h,
|
|
268
270
|
onClear: c,
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
271
|
+
submitButtonText: i,
|
|
272
|
+
className: p,
|
|
273
|
+
children: d,
|
|
274
|
+
...g
|
|
272
275
|
}) {
|
|
273
|
-
const { t: B } = e.useContext(
|
|
274
|
-
function
|
|
276
|
+
const { t: B } = e.useContext(k);
|
|
277
|
+
function x() {
|
|
275
278
|
c && c();
|
|
276
279
|
}
|
|
277
|
-
return /* @__PURE__ */ e.createElement("div", { className: w(
|
|
280
|
+
return /* @__PURE__ */ e.createElement("div", { className: w(Ge({ open: h })), ...g }, /* @__PURE__ */ e.createElement(de, { onSubmit: s, formArray: t, formGroup: a, formMeta: r }, /* @__PURE__ */ e.createElement("div", { className: Ue }, d), /* @__PURE__ */ e.createElement("div", { className: je }, m && /* @__PURE__ */ e.createElement("div", { id: "footer_links" }, ne(m)), /* @__PURE__ */ e.createElement("div", { className: Ke }, /* @__PURE__ */ e.createElement(
|
|
278
281
|
_,
|
|
279
282
|
{
|
|
280
283
|
kind: "default",
|
|
281
284
|
type: "button",
|
|
282
|
-
className:
|
|
283
|
-
onClick:
|
|
285
|
+
className: Se({ mr: "sm" }),
|
|
286
|
+
onClick: x,
|
|
284
287
|
disabled: l
|
|
285
288
|
},
|
|
286
289
|
B("design-system:advancedSearch.clear", { defaultValue: "Clear Fields" })
|
|
287
|
-
), /* @__PURE__ */ e.createElement(_, { kind: "key", type: "submit", disabled: l }, B("design-system:advancedSearch.search", { defaultValue: "Search" }))))));
|
|
290
|
+
), /* @__PURE__ */ e.createElement(_, { kind: "key", type: "submit", disabled: l }, i ?? B("design-system:advancedSearch.search", { defaultValue: "Search" }))))));
|
|
288
291
|
}
|
|
289
|
-
b.set(
|
|
292
|
+
b.set(W, {
|
|
290
293
|
name: "Advanced Search",
|
|
291
294
|
props: {
|
|
292
295
|
formArray: { type: "SpsFormArray<any>" },
|
|
@@ -296,11 +299,12 @@ b.set(H, {
|
|
|
296
299
|
controlsDisabled: { type: "boolean" },
|
|
297
300
|
footerLinks: { type: "React.ReactNode | (() => React.ReactNode)" },
|
|
298
301
|
isOpen: { type: "boolean" },
|
|
299
|
-
onClear: { type: "() => void" }
|
|
302
|
+
onClear: { type: "() => void" },
|
|
303
|
+
submitButtonText: { type: "string" }
|
|
300
304
|
}
|
|
301
305
|
});
|
|
302
|
-
const
|
|
303
|
-
components: [
|
|
306
|
+
const qe = {
|
|
307
|
+
components: [W],
|
|
304
308
|
examples: {
|
|
305
309
|
general: {
|
|
306
310
|
label: "General Usage",
|
|
@@ -562,7 +566,7 @@ const Ke = {
|
|
|
562
566
|
}
|
|
563
567
|
}
|
|
564
568
|
};
|
|
565
|
-
function
|
|
569
|
+
function He() {
|
|
566
570
|
const [t, a] = e.useState(!1);
|
|
567
571
|
function r() {
|
|
568
572
|
a(!1);
|
|
@@ -570,18 +574,18 @@ function qe() {
|
|
|
570
574
|
function s() {
|
|
571
575
|
a(!0);
|
|
572
576
|
}
|
|
573
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."), /* @__PURE__ */ e.createElement(_, { kind: "link", onClick: s }, "View Content Order Example"), /* @__PURE__ */ e.createElement(
|
|
577
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."), /* @__PURE__ */ e.createElement(_, { kind: "link", onClick: s }, "View Content Order Example"), /* @__PURE__ */ e.createElement(ue, { isOpen: t, onClose: r }, /* @__PURE__ */ e.createElement("h1", null, "Content Order"), /* @__PURE__ */ e.createElement(
|
|
574
578
|
"img",
|
|
575
579
|
{
|
|
576
580
|
src: "assets/images/list-toolbar-example.svg",
|
|
577
581
|
alt: "A List Toolbar with labels on each section",
|
|
578
582
|
className: "w-100 mb-3"
|
|
579
583
|
}
|
|
580
|
-
), /* @__PURE__ */ e.createElement(
|
|
584
|
+
), /* @__PURE__ */ e.createElement(me, null, /* @__PURE__ */ e.createElement(he, null, /* @__PURE__ */ e.createElement(A, { style: { width: "80px" } }, "Order"), /* @__PURE__ */ e.createElement(A, null, "Section"), /* @__PURE__ */ e.createElement(A, null, "Notes")), /* @__PURE__ */ e.createElement(pe, null, /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(n, null, "Checkbox"), /* @__PURE__ */ e.createElement(n, null, "For Content Rows and Content Tiles only.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(n, null, "Search/Filter Box"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(n, null, "Saved Search"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(n, null, "Advanced Search"), /* @__PURE__ */ e.createElement(n, null, "For more information, visit the Advanced Search page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(n, null, "Column Editor"), /* @__PURE__ */ e.createElement(n, { wrap: 500 }, "Use for Tables only. For more information, visit the Column Editor page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "6")), /* @__PURE__ */ e.createElement(n, null, "List View Selector"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "7")), /* @__PURE__ */ e.createElement(n, null, "Sorting"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "8")), /* @__PURE__ */ e.createElement(n, null, "Buttons"), /* @__PURE__ */ e.createElement(n, { wrap: 500 }, "Buttons always appear in the rightmost section of the List Toolbar. For the ordering of Buttons, refer to the Button Groups section on the Buttons page."))))));
|
|
581
585
|
}
|
|
582
|
-
const
|
|
586
|
+
const We = {
|
|
583
587
|
description: () => /* @__PURE__ */ e.createElement("p", null, "The List Toolbar provides the ability to interact with elements in a list or table. It can contain elements to search, filter, sort, or perform other actions."),
|
|
584
|
-
components: [
|
|
588
|
+
components: [q, F, M, H],
|
|
585
589
|
examples: {
|
|
586
590
|
general: {
|
|
587
591
|
label: "General Usage",
|
|
@@ -589,7 +593,7 @@ const He = {
|
|
|
589
593
|
},
|
|
590
594
|
contentOrder: {
|
|
591
595
|
label: "Content Order",
|
|
592
|
-
description: /* @__PURE__ */ e.createElement(
|
|
596
|
+
description: /* @__PURE__ */ e.createElement(He, null)
|
|
593
597
|
},
|
|
594
598
|
checkbox: {
|
|
595
599
|
label: "Checkbox",
|
|
@@ -1520,8 +1524,8 @@ const He = {
|
|
|
1520
1524
|
}
|
|
1521
1525
|
}
|
|
1522
1526
|
}
|
|
1523
|
-
},
|
|
1524
|
-
components: [
|
|
1527
|
+
}, Ye = {
|
|
1528
|
+
components: [R],
|
|
1525
1529
|
examples: {
|
|
1526
1530
|
basic: {
|
|
1527
1531
|
label: "Basic",
|
|
@@ -1746,18 +1750,18 @@ const He = {
|
|
|
1746
1750
|
}
|
|
1747
1751
|
}
|
|
1748
1752
|
}
|
|
1749
|
-
},
|
|
1750
|
-
"Advanced Search":
|
|
1751
|
-
"List Bar":
|
|
1752
|
-
"Search Results Bar":
|
|
1753
|
+
}, et = {
|
|
1754
|
+
"Advanced Search": qe,
|
|
1755
|
+
"List Bar": We,
|
|
1756
|
+
"Search Results Bar": Ye
|
|
1753
1757
|
};
|
|
1754
1758
|
export {
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1759
|
+
W as AdvancedSearch,
|
|
1760
|
+
Pe as InputGroupWrapper,
|
|
1761
|
+
q as ListBar,
|
|
1762
|
+
F as ListBarSearch,
|
|
1763
|
+
M as ListBarSearchInfo,
|
|
1764
|
+
H as ListBarSortBy,
|
|
1765
|
+
et as MANIFEST,
|
|
1766
|
+
R as SearchResultsBar
|
|
1763
1767
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(l,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/buttons"),require("@sps-woodland/tags"),require("@spscommerce/utils"),require("@spscommerce/ds-react"),require("@sps-woodland/tokens")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/buttons","@sps-woodland/tags","@spscommerce/utils","@spscommerce/ds-react","@sps-woodland/tokens"],g):(l=typeof globalThis<"u"?globalThis:l||self,g(l.ListBar={},l.React,l.core,l.buttons,l.tags,l.utils,l.dsReact,l.tokens))})(this,function(l,g,c,B,k,o,r,H){"use strict";function W(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(a,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return a.default=t,Object.freeze(a)}const e=W(g);var Y="pkg_sps-woodland_list-bar__version_8_31_6__hash_1gxdcgc0",z="pkg_sps-woodland_list-bar__version_8_31_6__hash_1gxdcgc1",Z="pkg_sps-woodland_list-bar__version_8_31_6__hash_1gxdcgc2",J="pkg_sps-woodland_list-bar__version_8_31_6__hash_1gxdcgc3",Q="pkg_sps-woodland_list-bar__version_8_31_6__hash_1gxdcgc4",X="pkg_sps-woodland_list-bar__version_8_31_6__hash_1gxdcgc5",$="pkg_sps-woodland_list-bar__version_8_31_6__hash_1gxdcgc6",ee="pkg_sps-woodland_list-bar__version_8_31_6__hash_1gxdcgc7",te="pkg_sps-woodland_list-bar__version_8_31_6__hash_1gxdcgc8";function w({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:p,...f}){const{t:d}=e.useContext(c.I18nContext),h=a?Object.keys(a).reduce((S,u)=>(a[u].length>0&&(S[u]=a[u]),S),{}):{};return e.createElement("div",{className:z,...f},t!=null&&e.createElement("div",{className:Z},e.createElement("span",null,d("design-system:searchResultsBar.results",{defaultValue:"Results:"})),e.createElement(k.Tag,{className:J,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:Q},Object.keys(h).length>0?Object.keys(h).map((S,u)=>e.createElement(e.Fragment,null,e.createElement("span",{key:u,className:X},S,":"),h[S].map((_,T)=>e.createElement(k.Tag,{className:$,key:T,kind:"key"},e.createElement("span",null,_))))):e.createElement("span",{className:"font-italic"},n||d("design-system:searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:ee},e.createElement(B.Button,{className:te,kind:"link",onClick:s},d("design-system:searchResultsBar.clearResults",{defaultValue:"Clear Results"}))))}c.Metadata.set(w,{name:"Search Results Bar",props:{results:{type:"number | string | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function ae(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function O(t,a){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);a&&(s=s.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),n.push.apply(n,s)}return n}function V(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?O(Object(n),!0).forEach(function(s){ae(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var re=(t,a,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=a[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},R=t=>a=>{var n=t.defaultClassName,s=V(V({},t.defaultVariants),a);for(var i in s){var p,f=(p=s[i])!==null&&p!==void 0?p:t.defaultVariants[i];if(f!=null){var d=f;typeof d=="boolean"&&(d=d===!0?"true":"false");var h=t.variantClassNames[i][d];h&&(n+=" "+h)}}for(var[S,u]of t.compoundVariants)re(S,s,t.defaultVariants)&&(n+=" "+u);return n},ne=R({defaultClassName:"pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),se="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p704",oe="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p705",le="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p706",ce="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p707",ie="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p708",de="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p709",ue="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p70a",N="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p70b",me="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p70c",pe="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p70d",he="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p70e",Se="pkg_sps-woodland_list-bar__version_8_31_6__hash_9h4p70f";function D({children:t}){const a=c.modChildren(t,n=>n.type===B.Button?[{className:c.cl(n.props.className,he)}]:[]);return e.createElement(e.Fragment,null,a)}function y({onSubmit:t,children:a}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:me,noValidate:!0},e.createElement(r.SpsInputGroup,{className:pe},e.createElement(D,null,a)))}c.Metadata.set(y,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}c.Metadata.set(C,{name:"ListBarSearchInfo"});function F({advancedSearch:t,onToggleAdvancedSearch:a,title:n,onToolbarPinned:s,selectable:i,isSelected:p,isIndeterminate:f,disableSelection:d=!1,onSelectionChange:h,pinResultsBar:S,pinToolbar:u=!0,children:_,className:T,...P}){const{t:we}=e.useContext(c.I18nContext);let x=null;const[v,G]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":j}=P,A=o.lockToAnimationFrames(()=>{if(E.current&&u){const m=E.current.getBoundingClientRect();if(!m)return;const ke=Math.round(m.height),Fe=Math.round(m.top),Me=Math.round(window.scrollY);ke>0&&Fe<=60&&(typeof x=="number"?Me<=x&&(x=null,G(!1)):(x=Math.round(window.scrollY),G(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",A),window.addEventListener("resize",A),()=>{window.removeEventListener("scroll",A),window.removeEventListener("resize",A)}),[]);const L=e.useRef();e.useLayoutEffect(()=>{if(b.current&&E.current&&u){if(v&&L.current)b.current.style.height=L.current.height,b.current.style.width=L.current.width,b.current.style.marginBottom=L.current.marginBottom;else if(!v){b.current.style.height="",b.current.style.width="",b.current.style.marginBottom="";const m=window.getComputedStyle(E.current);L.current={height:m.height,width:m.width,marginBottom:m.marginBottom}}}},[v]);function ye(){a&&a(!(t!=null&&t.isOpen))}function Ce(m){s&&s(m)}e.useEffect(()=>{Ce(v)},[v]);const[q,xe,Ae,[U],K]=c.selectChildren(_,[{type:y},{type:C},{type:w},{custom:m=>c.Metadata.isWoodlandComponent(m)&&c.Metadata.get(m).name==="Tabs"}]);return e.createElement("div",{className:c.cl(T),ref:b,...P},e.createElement("div",{className:ne({pinned:v}),ref:E},U?c.addProps(U,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:se},!!i&&e.createElement("div",{className:oe},e.createElement(r.SpsCheckbox,{checked:p,disabled:d,indeterminate:f,onChange:()=>{h==null||h(!p)}})),e.createElement("div",{className:le},!n&&q,!n&&xe,q.length>0&&t&&e.createElement("div",{className:ce,"data-testid":`${j}__advanced-search`},e.createElement("div",{className:ie},e.createElement(B.Button,{kind:"link",onClick:ye},we("design-system:listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(k.Tag,{className:de,kind:"info","data-testid":`${j}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:ue},n)),v?e.createElement("div",{className:N},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},K)):e.createElement("div",{className:N},K)),e.createElement("div",{className:Y},(!v||S)&&Ae))))}c.Metadata.set(F,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},title:{type:"string"},onToolbarPinned:{type:"(boolean) => void"},selectable:{type:"boolean"},disableSelection:{type:"boolean",default:"false"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"}}});function M({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:i,...p}){const f=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{n&&n(d)}]);return e.createElement(r.SpsDropdown,{className:c.cl(i,Se),icon:(a==null?void 0:a.icon)||(s==null?void 0:s.icon),label:(a==null?void 0:a.label)||(s==null?void 0:s.label),options:f})}c.Metadata.set(M,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var fe=R({defaultClassName:"pkg_sps-woodland_list-bar__version_8_31_6__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_31_6__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_31_6__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ve="pkg_sps-woodland_list-bar__version_8_31_6__hash_q4fj413",be="pkg_sps-woodland_list-bar__version_8_31_6__hash_q4fj414",Be="pkg_sps-woodland_list-bar__version_8_31_6__hash_q4fj415";function I({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:p,isOpen:f,onClear:d,className:h,children:S,...u}){const{t:_}=e.useContext(c.I18nContext);function T(){d&&d()}return e.createElement("div",{className:c.cl(fe({open:f})),...u},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:ve},S),e.createElement("div",{className:be},p&&e.createElement("div",{id:"footer_links"},c.contentOf(p)),e.createElement("div",{className:Be},e.createElement(B.Button,{kind:"default",type:"button",className:H.sprinkles({mr:"sm"}),onClick:T,disabled:i},_("design-system:advancedSearch.clear",{defaultValue:"Clear Fields"})),e.createElement(B.Button,{kind:"key",type:"submit",disabled:i},_("design-system:advancedSearch.search",{defaultValue:"Search"}))))))}c.Metadata.set(I,{name:"Advanced Search",props:{formArray:{type:"SpsFormArray<any>"},formGroup:{type:"SpsFormGroup"},formMeta:{type:"SpsFormSetMeta<any>"},onSubmit:{type:"React.FormEventHandler"},controlsDisabled:{type:"boolean"},footerLinks:{type:"React.ReactNode | (() => React.ReactNode)"},isOpen:{type:"boolean"},onClear:{type:"() => void"}}});const _e={components:[I],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'),e.createElement("p",null,"Advanced Search works in conjunction with the"," ",e.createElement(t,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(t,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),e.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",e.createElement("ul",null,e.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),e.createElement("li",null,"The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the"," ",e.createElement(a,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(t,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ",e.createElement(t,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:o.code`
|
|
1
|
+
(function(l,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/buttons"),require("@sps-woodland/tags"),require("@spscommerce/utils"),require("@spscommerce/ds-react"),require("@sps-woodland/tokens")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/buttons","@sps-woodland/tags","@spscommerce/utils","@spscommerce/ds-react","@sps-woodland/tokens"],g):(l=typeof globalThis<"u"?globalThis:l||self,g(l.ListBar={},l.React,l.core,l.buttons,l.tags,l.utils,l.dsReact,l.tokens))})(this,function(l,g,c,B,k,o,r,W){"use strict";function Y(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(a,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return a.default=t,Object.freeze(a)}const e=Y(g);var z="pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc0",Z="pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc1",J="pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc2",Q="pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc3",X="pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc4",$="pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc5",ee="pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc6",te="pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc7",ae="pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc8";function w({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:h,...S}){const{t:d}=e.useContext(c.I18nContext),u=a?Object.keys(a).reduce((f,m)=>(a[m].length>0&&(f[m]=a[m]),f),{}):{};return e.createElement("div",{className:Z,...S},t!=null&&e.createElement("div",{className:J},e.createElement("span",null,d("design-system:searchResultsBar.results",{defaultValue:"Results:"})),e.createElement(k.Tag,{className:Q,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:X},Object.keys(u).length>0?Object.keys(u).map((f,m)=>e.createElement(e.Fragment,null,e.createElement("span",{key:m,className:$},f,":"),u[f].map((T,_)=>e.createElement(k.Tag,{className:ee,key:_,kind:"key"},e.createElement("span",null,T))))):e.createElement("span",{className:"font-italic"},n||d("design-system:searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:te},e.createElement(B.Button,{className:ae,kind:"link",onClick:s},d("design-system:searchResultsBar.clearResults",{defaultValue:"Clear Results"}))))}c.Metadata.set(w,{name:"Search Results Bar",props:{results:{type:"number | string | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function re(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function V(t,a){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);a&&(s=s.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),n.push.apply(n,s)}return n}function R(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?V(Object(n),!0).forEach(function(s){re(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):V(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var ne=(t,a,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=a[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},N=t=>a=>{var n=t.defaultClassName,s=R(R({},t.defaultVariants),a);for(var i in s){var h,S=(h=s[i])!==null&&h!==void 0?h:t.defaultVariants[i];if(S!=null){var d=S;typeof d=="boolean"&&(d=d===!0?"true":"false");var u=t.variantClassNames[i][d];u&&(n+=" "+u)}}for(var[f,m]of t.compoundVariants)ne(f,s,t.defaultVariants)&&(n+=" "+m);return n},se=N({defaultClassName:"pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),oe="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p704",le="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p705",ce="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p706",ie="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p707",de="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p708",ue="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p709",me="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70a",D="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70b",pe="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70c",he="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d",Se="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70e",fe="pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70f";function P({children:t}){const a=c.modChildren(t,n=>n.type===B.Button?[{className:c.cl(n.props.className,Se)}]:[]);return e.createElement(e.Fragment,null,a)}function y({onSubmit:t,children:a}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:pe,noValidate:!0},e.createElement(r.SpsInputGroup,{className:he},e.createElement(P,null,a)))}c.Metadata.set(y,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}c.Metadata.set(C,{name:"ListBarSearchInfo"});function F({advancedSearch:t,onToggleAdvancedSearch:a,title:n,onToolbarPinned:s,selectable:i,isSelected:h,isIndeterminate:S,disableSelection:d=!1,onSelectionChange:u,pinResultsBar:f,pinToolbar:m=!0,advancedSearchToggleText:T,children:_,className:O,...G}){const{t:ye}=e.useContext(c.I18nContext);let x=null;const[v,j]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":q}=G,A=o.lockToAnimationFrames(()=>{if(E.current&&m){const p=E.current.getBoundingClientRect();if(!p)return;const Fe=Math.round(p.height),Me=Math.round(p.top),Ie=Math.round(window.scrollY);Fe>0&&Me<=60&&(typeof x=="number"?Ie<=x&&(x=null,j(!1)):(x=Math.round(window.scrollY),j(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",A),window.addEventListener("resize",A),()=>{window.removeEventListener("scroll",A),window.removeEventListener("resize",A)}),[]);const L=e.useRef();e.useLayoutEffect(()=>{if(b.current&&E.current&&m){if(v&&L.current)b.current.style.height=L.current.height,b.current.style.width=L.current.width,b.current.style.marginBottom=L.current.marginBottom;else if(!v){b.current.style.height="",b.current.style.width="",b.current.style.marginBottom="";const p=window.getComputedStyle(E.current);L.current={height:p.height,width:p.width,marginBottom:p.marginBottom}}}},[v]);function Ce(){a&&a(!(t!=null&&t.isOpen))}function xe(p){s&&s(p)}e.useEffect(()=>{xe(v)},[v]);const[U,Ae,ke,[K],H]=c.selectChildren(_,[{type:y},{type:C},{type:w},{custom:p=>c.Metadata.isWoodlandComponent(p)&&c.Metadata.get(p).name==="Tabs"}]);return e.createElement("div",{className:c.cl(O),ref:b,...G},e.createElement("div",{className:se({pinned:v}),ref:E},K?c.addProps(K,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:oe},!!i&&e.createElement("div",{className:le},e.createElement(r.SpsCheckbox,{checked:h,disabled:d,indeterminate:S,onChange:()=>{u==null||u(!h)}})),e.createElement("div",{className:ce},!n&&U,!n&&Ae,U.length>0&&t&&e.createElement("div",{className:ie,"data-testid":`${q}__advanced-search`},e.createElement("div",{className:de},e.createElement(B.Button,{kind:"link",onClick:Ce},T??ye("design-system:listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(k.Tag,{className:ue,kind:"info","data-testid":`${q}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:me},n)),v?e.createElement("div",{className:D},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},H)):e.createElement("div",{className:D},H)),e.createElement("div",{className:z},(!v||f)&&ke))))}c.Metadata.set(F,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},title:{type:"string"},onToolbarPinned:{type:"(boolean) => void"},selectable:{type:"boolean"},disableSelection:{type:"boolean",default:"false"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"},advancedSearchToggleText:{type:"string"}}});function M({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:i,...h}){const S=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{n&&n(d)}]);return e.createElement(r.SpsDropdown,{className:c.cl(i,fe),icon:(a==null?void 0:a.icon)||(s==null?void 0:s.icon),label:(a==null?void 0:a.label)||(s==null?void 0:s.label),options:S})}c.Metadata.set(M,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var ve=N({defaultClassName:"pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),be="pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj413",Be="pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj414",_e="pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj415";function I({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:h,isOpen:S,onClear:d,submitButtonText:u,className:f,children:m,...T}){const{t:_}=e.useContext(c.I18nContext);function O(){d&&d()}return e.createElement("div",{className:c.cl(ve({open:S})),...T},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:be},m),e.createElement("div",{className:Be},h&&e.createElement("div",{id:"footer_links"},c.contentOf(h)),e.createElement("div",{className:_e},e.createElement(B.Button,{kind:"default",type:"button",className:W.sprinkles({mr:"sm"}),onClick:O,disabled:i},_("design-system:advancedSearch.clear",{defaultValue:"Clear Fields"})),e.createElement(B.Button,{kind:"key",type:"submit",disabled:i},u??_("design-system:advancedSearch.search",{defaultValue:"Search"}))))))}c.Metadata.set(I,{name:"Advanced Search",props:{formArray:{type:"SpsFormArray<any>"},formGroup:{type:"SpsFormGroup"},formMeta:{type:"SpsFormSetMeta<any>"},onSubmit:{type:"React.FormEventHandler"},controlsDisabled:{type:"boolean"},footerLinks:{type:"React.ReactNode | (() => React.ReactNode)"},isOpen:{type:"boolean"},onClear:{type:"() => void"},submitButtonText:{type:"string"}}});const ge={components:[I],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'),e.createElement("p",null,"Advanced Search works in conjunction with the"," ",e.createElement(t,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(t,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),e.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",e.createElement("ul",null,e.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),e.createElement("li",null,"The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the"," ",e.createElement(a,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(t,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ",e.createElement(t,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:o.code`
|
|
2
2
|
import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
|
|
3
3
|
import { Button } from "@sps-woodland/buttons";
|
|
4
4
|
import { grid } from "@sps-woodland/tokens";
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
</>
|
|
217
217
|
)
|
|
218
218
|
}
|
|
219
|
-
`}}}}};function
|
|
219
|
+
`}}}}};function Te(){const[t,a]=e.useState(!1);function n(){a(!1)}function s(){a(!0)}return e.createElement(e.Fragment,null,e.createElement("p",null,"The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."),e.createElement(B.Button,{kind:"link",onClick:s},"View Content Order Example"),e.createElement(r.SpsFocusedTask,{isOpen:t,onClose:n},e.createElement("h1",null,"Content Order"),e.createElement("img",{src:"assets/images/list-toolbar-example.svg",alt:"A List Toolbar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,{style:{width:"80px"}},"Order"),e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Notes")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Checkbox"),e.createElement(r.SpsTableCell,null,"For Content Rows and Content Tiles only.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Search/Filter Box"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Saved Search"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Advanced Search"),e.createElement(r.SpsTableCell,null,"For more information, visit the Advanced Search page.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Column Editor"),e.createElement(r.SpsTableCell,{wrap:500},"Use for Tables only. For more information, visit the Column Editor page.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"6")),e.createElement(r.SpsTableCell,null,"List View Selector"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"7")),e.createElement(r.SpsTableCell,null,"Sorting"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"8")),e.createElement(r.SpsTableCell,null,"Buttons"),e.createElement(r.SpsTableCell,{wrap:500},"Buttons always appear in the rightmost section of the List Toolbar. For the ordering of Buttons, refer to the Button Groups section on the Buttons page."))))))}const Ee={description:()=>e.createElement("p",null,"The List Toolbar provides the ability to interact with elements in a list or table. It can contain elements to search, filter, sort, or perform other actions."),components:[F,y,C,M],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Use a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When list content needs to be searched, filtered, sorted, or otherwise interacted with.")),e.createElement("h5",null,"Avoid a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When no list is present."),e.createElement("li",null,"When there will always be a small number of elements in the list, or the list does not require searching, filtering, or other actions.")))},contentOrder:{label:"Content Order",description:e.createElement(Te,null)},checkbox:{label:"Checkbox",description:({NavigateTo:t})=>e.createElement("p",null,"Use a Checkbox in the List Bar when items in a"," ",e.createElement(t,{to:"content-row"},"Content Row")," or"," ",e.createElement(t,{to:"content-tile"},"Content Tile")," are selectable. The Checkbox selects all items in the list, and will cause the Action Bar to appear. Do not use this with a Table, as Tables have a built-in checkbox in the header row."),examples:{basic:{react:o.code`
|
|
220
220
|
import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
|
|
221
221
|
|
|
222
222
|
function Component() {
|
|
@@ -883,7 +883,7 @@
|
|
|
883
883
|
</ListBar>
|
|
884
884
|
)
|
|
885
885
|
}
|
|
886
|
-
`}}}}},
|
|
886
|
+
`}}}}},Le={components:[w],examples:{basic:{label:"Basic",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The SearchResultsBar should be used with List Bar and Advanced Search."),e.createElement("p",null,"For more examples go to the Advanced Search section on the"," ",e.createElement(t,{to:"list-bar"},"List Bar")," page.")),examples:{basic:{react:o.code`
|
|
887
887
|
import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
|
|
888
888
|
import { Button } from "@sps-woodland/buttons";
|
|
889
889
|
import { SpsTextInput } from "@spscommerce/ds-react";
|
|
@@ -1083,4 +1083,4 @@
|
|
|
1083
1083
|
</>
|
|
1084
1084
|
)
|
|
1085
1085
|
}
|
|
1086
|
-
`}}}}},
|
|
1086
|
+
`}}}}},we={"Advanced Search":ge,"List Bar":Ee,"Search Results Bar":Le};l.AdvancedSearch=I,l.InputGroupWrapper=P,l.ListBar=F,l.ListBarSearch=y,l.ListBarSearchInfo=C,l.ListBarSortBy=M,l.MANIFEST=we,l.SearchResultsBar=w,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
|
-
export declare function ListBar({ advancedSearch, onToggleAdvancedSearch, title, onToolbarPinned, selectable, isSelected, isIndeterminate, disableSelection, onSelectionChange, pinResultsBar, pinToolbar, children, className, ...rest }: ComponentProps<{
|
|
3
|
+
export declare function ListBar({ advancedSearch, onToggleAdvancedSearch, title, onToolbarPinned, selectable, isSelected, isIndeterminate, disableSelection, onSelectionChange, pinResultsBar, pinToolbar, advancedSearchToggleText, children, className, ...rest }: ComponentProps<{
|
|
4
4
|
advancedSearch?: {
|
|
5
5
|
isOpen: boolean;
|
|
6
6
|
enteredFields?: number;
|
|
@@ -15,4 +15,5 @@ export declare function ListBar({ advancedSearch, onToggleAdvancedSearch, title,
|
|
|
15
15
|
onSelectionChange?: (arg: boolean) => void;
|
|
16
16
|
pinResultsBar?: boolean;
|
|
17
17
|
pinToolbar?: boolean;
|
|
18
|
+
advancedSearchToggleText?: string;
|
|
18
19
|
}, HTMLDivElement>): React.ReactElement;
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_list-
|
|
1
|
+
.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p701{background:#fff;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-flow:column wrap;margin-top:0;margin-right:0;margin-bottom:.5rem;margin-left:0;position:relative}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p702{width:calc(1280px - 2.5rem);border-radius:0;transform:translate(-50%);position:fixed;top:3.75rem;left:50%;z-index:999}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p702:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;position:absolute;top:calc(100% + 1px);width:100%}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p705{display:flex;align-items:center;border-right-color:#d2d4d4;border-right-style:solid;border-right-width:.0625rem;padding:1rem;margin:-.5rem .5rem -.5rem -.5rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p708{display:inline-block;position:relative}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p709{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70a{align-items:center;display:flex;float:left;font-size:.75rem;font-weight:600;line-height:1.5rem;margin-bottom:0;padding-left:.5rem;text-transform:uppercase}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70b{display:inline-block;height:2rem;margin-left:.5rem;text-align:right;vertical-align:middle;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70e{background-color:#e9e9ea;border-color:#717779;border-width:.0625rem;border-style:solid;border-bottom-left-radius:0;border-bottom-right-radius:.25rem;border-top-left-radius:0;border-top-right-radius:.25rem;border-left-width:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70e:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70f>.sps-button>button{padding:.25rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70e>button{height:1.875rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70a>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d>.sps-input-group>.sps-select:not(:last-child)>.sps-select__dropctrl{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete:not(:first-child)>.sps-text-input>.sps-form-control{border-bottom-left-radius:0;border-top-left-radius:0;border-left:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete:not(:last-child)>.sps-text-input>.sps-form-control{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d>.sps-input-group>.sps-multi-select>.sps-text-input>.sps-form-control{border-radius:0;border-left:0;height:32px}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d>.sps-input-group>.sps-text-input:not(:first-child):not(:only-child)>.sps-form-control{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p70d svg{margin-bottom:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_9h4p701>.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc0>.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc1{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem;border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:#d2d4d4;border-right-style:solid;padding:.5rem;display:flex;align-items:center}.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc3{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc5:first-child{margin-left:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc6:last-child{margin-right:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc7:hover{background:#d2d4d4}.pkg_sps-woodland_list-bar__version_8_32_0__hash_1gxdcgc8{padding:.5rem;width:5.25rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj410{background:#fff;border-color:#d2d4d4;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;border-style:solid;border-top-width:0;border-right-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;display:none;margin-top:-.625rem;margin-right:0;margin-bottom:1rem;margin-left:0}.pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj411{display:block}.pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj413{padding:1rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj414{background:#f3f4f4;border-top-left-radius:undefined;border-top-right-radius:undefined;border-bottom-left-radius:undefined;border-bottom-right-radius:undefined;display:flex;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj415{text-align:right}.pkg_sps-woodland_list-bar__version_8_32_0__hash_q4fj414>*{flex:1}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/list-bar",
|
|
3
3
|
"description": "SPS Woodland Design System list bar components",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.32.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/list-bar",
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.9.0",
|
|
31
31
|
"react-dom": "^16.9.0",
|
|
32
|
-
"@sps-woodland/buttons": "8.
|
|
33
|
-
"@sps-woodland/core": "8.
|
|
34
|
-
"@sps-woodland/tabs": "8.
|
|
35
|
-
"@sps-woodland/tags": "8.
|
|
36
|
-
"@sps-woodland/tokens": "8.
|
|
37
|
-
"@spscommerce/ds-react": "8.
|
|
32
|
+
"@sps-woodland/buttons": "8.32.0",
|
|
33
|
+
"@sps-woodland/core": "8.32.0",
|
|
34
|
+
"@sps-woodland/tabs": "8.32.0",
|
|
35
|
+
"@sps-woodland/tags": "8.32.0",
|
|
36
|
+
"@sps-woodland/tokens": "8.32.0",
|
|
37
|
+
"@spscommerce/ds-react": "8.32.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@react-stately/collections": "^3.3.3",
|
|
@@ -43,13 +43,13 @@
|
|
|
43
43
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
44
44
|
"react": "^16.9.0",
|
|
45
45
|
"react-dom": "^16.9.0",
|
|
46
|
-
"@sps-woodland/buttons": "8.
|
|
47
|
-
"@sps-woodland/core": "8.
|
|
48
|
-
"@sps-woodland/tabs": "8.
|
|
49
|
-
"@sps-woodland/tags": "8.
|
|
50
|
-
"@sps-woodland/tokens": "8.
|
|
51
|
-
"@spscommerce/ds-react": "8.
|
|
52
|
-
"@spscommerce/ds-shared": "8.
|
|
46
|
+
"@sps-woodland/buttons": "8.32.0",
|
|
47
|
+
"@sps-woodland/core": "8.32.0",
|
|
48
|
+
"@sps-woodland/tabs": "8.32.0",
|
|
49
|
+
"@sps-woodland/tags": "8.32.0",
|
|
50
|
+
"@sps-woodland/tokens": "8.32.0",
|
|
51
|
+
"@spscommerce/ds-react": "8.32.0",
|
|
52
|
+
"@spscommerce/ds-shared": "8.32.0"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "pnpm run build:js && pnpm run build:types",
|