@sps-woodland/list-bar 8.49.0 → 8.50.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.css.d.ts +3 -2
- package/lib/advanced-search/AdvancedSearch.d.ts +2 -1
- package/lib/index.js +116 -114
- package/lib/index.umd.cjs +3 -3
- package/lib/style.css +1 -1
- package/package.json +16 -16
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { BooleanRecipeVariant, VariantDefinitions } from "@sps-woodland/core";
|
|
2
2
|
interface AdvancedSearchVariantDefinitions extends VariantDefinitions {
|
|
3
3
|
open: BooleanRecipeVariant;
|
|
4
|
+
compact: BooleanRecipeVariant;
|
|
4
5
|
}
|
|
5
|
-
export declare const advancedSearch: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<AdvancedSearchVariantDefinitions, "open">>;
|
|
6
|
-
export declare const advancedSearchForm:
|
|
6
|
+
export declare const advancedSearch: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<AdvancedSearchVariantDefinitions, "compact" | "open">>;
|
|
7
|
+
export declare const advancedSearchForm: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<AdvancedSearchVariantDefinitions, "open">>;
|
|
7
8
|
export declare const advancedSearchFooter: string;
|
|
8
9
|
export declare const advancedSearchFooterControls: string;
|
|
9
10
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
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<{
|
|
4
|
+
export declare function AdvancedSearch({ formArray, formGroup, formMeta, onSubmit, controlsDisabled, footerLinks, isOpen, onClear, submitButtonText, compact, className, children, ...rest }: ComponentProps<{
|
|
5
5
|
formArray?: SpsFormArray<any>;
|
|
6
6
|
formGroup?: SpsFormGroup;
|
|
7
7
|
formMeta?: SpsFormSetMeta<any>;
|
|
@@ -11,4 +11,5 @@ export declare function AdvancedSearch({ formArray, formGroup, formMeta, onSubmi
|
|
|
11
11
|
isOpen?: boolean;
|
|
12
12
|
onClear?: () => void;
|
|
13
13
|
submitButtonText?: string;
|
|
14
|
+
compact?: boolean;
|
|
14
15
|
}, HTMLDivElement>): React.ReactElement;
|
package/lib/index.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { Metadata as b, modChildren as te, cl as
|
|
2
|
+
import { Metadata as b, modChildren as te, cl as A, 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
|
|
4
|
+
import { Tag as k } from "@sps-woodland/tags";
|
|
5
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 pe, SpsTableHeader as
|
|
7
|
-
import { useWoodlandLanguage as
|
|
6
|
+
import { SpsInputGroup as le, SpsCheckbox as ce, SpsDropdown as ie, SpsForm as de, SpsFocusedTask as ue, SpsTable as me, SpsTableHead as pe, SpsTableHeader as C, SpsTableBody as he, SpsTableRow as v, SpsTableCell as n } from "@spscommerce/ds-react";
|
|
7
|
+
import { useWoodlandLanguage as R } from "@spscommerce/i18n";
|
|
8
8
|
import { sprinkles as Se } from "@sps-woodland/tokens";
|
|
9
|
-
var fe = "pkg_sps-woodland_list-
|
|
10
|
-
function
|
|
9
|
+
var fe = "pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc0", ve = "pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc1", be = "pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc2", _e = "pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc3", Be = "pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc4", ge = "pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc5", Te = "pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc6", Ee = "pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc7", Le = "pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc8";
|
|
10
|
+
function F({
|
|
11
11
|
results: t,
|
|
12
12
|
selections: a,
|
|
13
13
|
zeroStateText: r,
|
|
14
|
-
onClear:
|
|
14
|
+
onClear: s,
|
|
15
15
|
className: l,
|
|
16
|
-
children:
|
|
17
|
-
...
|
|
16
|
+
children: d,
|
|
17
|
+
...u
|
|
18
18
|
}) {
|
|
19
|
-
const { t: c } =
|
|
20
|
-
return /* @__PURE__ */ e.createElement("div", { className: ve, ...
|
|
19
|
+
const { t: c } = R(), h = a ? Object.keys(a).reduce((m, p) => (a[p].length > 0 && (m[p] = a[p]), m), {}) : {};
|
|
20
|
+
return /* @__PURE__ */ e.createElement("div", { className: ve, ...u }, t != null && /* @__PURE__ */ e.createElement("div", { className: be }, /* @__PURE__ */ e.createElement("span", null, c("searchResultsBar.results", { defaultValue: "Results:" })), /* @__PURE__ */ e.createElement(k, { className: _e, kind: "info" }, /* @__PURE__ */ e.createElement("span", null, t))), /* @__PURE__ */ e.createElement("div", { className: Be }, Object.keys(h).length > 0 ? Object.keys(h).map((m, p) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { key: p, className: ge }, m, ":"), h[m].map((B, g) => /* @__PURE__ */ e.createElement(k, { className: Te, key: g, kind: "key" }, /* @__PURE__ */ e.createElement("span", null, B))))) : /* @__PURE__ */ e.createElement("span", { className: "font-italic" }, r || c("searchResultsBar.noAdvancedSearchSelections", { defaultValue: "No Advanced Search Selections" }))), /* @__PURE__ */ e.createElement("div", { className: Ee }, /* @__PURE__ */ e.createElement(_, { className: Le, kind: "link", onClick: s }, c("searchResultsBar.clearResults", { defaultValue: "Clear Results" }))));
|
|
21
21
|
}
|
|
22
|
-
b.set(
|
|
22
|
+
b.set(F, {
|
|
23
23
|
name: "Search Results Bar",
|
|
24
24
|
props: {
|
|
25
25
|
results: { type: "number | string | null" },
|
|
@@ -28,7 +28,7 @@ b.set(R, {
|
|
|
28
28
|
onClear: { type: "() => void" }
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
-
function
|
|
31
|
+
function we(t, a, r) {
|
|
32
32
|
return a in t ? Object.defineProperty(t, a, {
|
|
33
33
|
value: r,
|
|
34
34
|
enumerable: !0,
|
|
@@ -36,52 +36,52 @@ function ye(t, a, r) {
|
|
|
36
36
|
writable: !0
|
|
37
37
|
}) : t[a] = r, t;
|
|
38
38
|
}
|
|
39
|
-
function
|
|
39
|
+
function j(t, a) {
|
|
40
40
|
var r = Object.keys(t);
|
|
41
41
|
if (Object.getOwnPropertySymbols) {
|
|
42
|
-
var
|
|
43
|
-
a && (
|
|
42
|
+
var s = Object.getOwnPropertySymbols(t);
|
|
43
|
+
a && (s = s.filter(function(l) {
|
|
44
44
|
return Object.getOwnPropertyDescriptor(t, l).enumerable;
|
|
45
|
-
})), r.push.apply(r,
|
|
45
|
+
})), r.push.apply(r, s);
|
|
46
46
|
}
|
|
47
47
|
return r;
|
|
48
48
|
}
|
|
49
49
|
function U(t) {
|
|
50
50
|
for (var a = 1; a < arguments.length; a++) {
|
|
51
51
|
var r = arguments[a] != null ? arguments[a] : {};
|
|
52
|
-
a % 2 ?
|
|
53
|
-
|
|
54
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) :
|
|
55
|
-
Object.defineProperty(t,
|
|
52
|
+
a % 2 ? j(Object(r), !0).forEach(function(s) {
|
|
53
|
+
we(t, s, r[s]);
|
|
54
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : j(Object(r)).forEach(function(s) {
|
|
55
|
+
Object.defineProperty(t, s, Object.getOwnPropertyDescriptor(r, s));
|
|
56
56
|
});
|
|
57
57
|
}
|
|
58
58
|
return t;
|
|
59
59
|
}
|
|
60
|
-
var
|
|
61
|
-
for (var
|
|
60
|
+
var ye = (t, a, r) => {
|
|
61
|
+
for (var s of Object.keys(t)) {
|
|
62
62
|
var l;
|
|
63
|
-
if (t[
|
|
63
|
+
if (t[s] !== ((l = a[s]) !== null && l !== void 0 ? l : r[s]))
|
|
64
64
|
return !1;
|
|
65
65
|
}
|
|
66
66
|
return !0;
|
|
67
|
-
},
|
|
68
|
-
var r = t.defaultClassName,
|
|
69
|
-
for (var l in
|
|
70
|
-
var
|
|
71
|
-
if (
|
|
72
|
-
var c =
|
|
67
|
+
}, O = (t) => (a) => {
|
|
68
|
+
var r = t.defaultClassName, s = U(U({}, t.defaultVariants), a);
|
|
69
|
+
for (var l in s) {
|
|
70
|
+
var d, u = (d = s[l]) !== null && d !== void 0 ? d : t.defaultVariants[l];
|
|
71
|
+
if (u != null) {
|
|
72
|
+
var c = u;
|
|
73
73
|
typeof c == "boolean" && (c = c === !0 ? "true" : "false");
|
|
74
|
-
var
|
|
74
|
+
var h = (
|
|
75
75
|
// @ts-expect-error
|
|
76
76
|
t.variantClassNames[l][c]
|
|
77
77
|
);
|
|
78
|
-
|
|
78
|
+
h && (r += " " + h);
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
|
-
for (var [
|
|
82
|
-
|
|
81
|
+
for (var [m, p] of t.compoundVariants)
|
|
82
|
+
ye(m, s, t.defaultVariants) && (r += " " + p);
|
|
83
83
|
return r;
|
|
84
|
-
}, xe =
|
|
84
|
+
}, xe = O({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p701", variantClassNames: { pinned: { true: "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p702", false: "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), Ae = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p704", Ce = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p705", ke = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p706", Re = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p707", Fe = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p708", Oe = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p709", Me = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70a", K = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70b", Ie = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70c", Ve = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70d", Ne = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70e", De = "pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70f";
|
|
85
85
|
function Pe({
|
|
86
86
|
children: t
|
|
87
87
|
}) {
|
|
@@ -89,78 +89,78 @@ function Pe({
|
|
|
89
89
|
t,
|
|
90
90
|
(r) => r.type === _ ? [
|
|
91
91
|
{
|
|
92
|
-
className:
|
|
92
|
+
className: A(r.props.className, Ne)
|
|
93
93
|
}
|
|
94
94
|
] : []
|
|
95
95
|
);
|
|
96
96
|
return /* @__PURE__ */ e.createElement(e.Fragment, null, a);
|
|
97
97
|
}
|
|
98
|
-
function
|
|
98
|
+
function M({
|
|
99
99
|
onSubmit: t,
|
|
100
100
|
children: a
|
|
101
101
|
}) {
|
|
102
|
-
function r(
|
|
103
|
-
|
|
102
|
+
function r(s) {
|
|
103
|
+
s.preventDefault(), t && t(s);
|
|
104
104
|
}
|
|
105
105
|
return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className: Ie, noValidate: !0 }, /* @__PURE__ */ e.createElement(le, { className: Ve }, /* @__PURE__ */ e.createElement(Pe, null, a)));
|
|
106
106
|
}
|
|
107
|
-
b.set(
|
|
107
|
+
b.set(M, {
|
|
108
108
|
name: "ListBarSearch",
|
|
109
109
|
props: {
|
|
110
110
|
onSubmit: { type: "FormEventHandler" }
|
|
111
111
|
}
|
|
112
112
|
});
|
|
113
|
-
function
|
|
113
|
+
function I({
|
|
114
114
|
children: t
|
|
115
115
|
}) {
|
|
116
116
|
return /* @__PURE__ */ e.createElement("div", null, t);
|
|
117
117
|
}
|
|
118
|
-
b.set(
|
|
118
|
+
b.set(I, {
|
|
119
119
|
name: "ListBarSearchInfo"
|
|
120
120
|
});
|
|
121
121
|
function q({
|
|
122
122
|
advancedSearch: t,
|
|
123
123
|
onToggleAdvancedSearch: a,
|
|
124
124
|
title: r,
|
|
125
|
-
onToolbarPinned:
|
|
125
|
+
onToolbarPinned: s,
|
|
126
126
|
selectable: l,
|
|
127
|
-
isSelected:
|
|
128
|
-
isIndeterminate:
|
|
127
|
+
isSelected: d,
|
|
128
|
+
isIndeterminate: u,
|
|
129
129
|
disableSelection: c = !1,
|
|
130
|
-
onSelectionChange:
|
|
131
|
-
pinResultsBar:
|
|
132
|
-
pinToolbar:
|
|
133
|
-
advancedSearchToggleText:
|
|
134
|
-
children:
|
|
135
|
-
className:
|
|
136
|
-
...
|
|
130
|
+
onSelectionChange: h,
|
|
131
|
+
pinResultsBar: m,
|
|
132
|
+
pinToolbar: p = !0,
|
|
133
|
+
advancedSearchToggleText: B,
|
|
134
|
+
children: g,
|
|
135
|
+
className: L,
|
|
136
|
+
...w
|
|
137
137
|
}) {
|
|
138
|
-
const { t: Y } =
|
|
139
|
-
let
|
|
140
|
-
const [S,
|
|
141
|
-
if (T.current &&
|
|
142
|
-
const
|
|
143
|
-
if (!
|
|
138
|
+
const { t: Y } = R();
|
|
139
|
+
let y = null;
|
|
140
|
+
const [S, V] = e.useState(!1), T = e.useRef(null), f = e.useRef(null), { "data-testid": N } = w, x = oe(() => {
|
|
141
|
+
if (T.current && p) {
|
|
142
|
+
const i = T.current.getBoundingClientRect();
|
|
143
|
+
if (!i)
|
|
144
144
|
return;
|
|
145
|
-
const X = Math.round(
|
|
146
|
-
X > 0 && $ <= 60 && (typeof
|
|
145
|
+
const X = Math.round(i.height), $ = Math.round(i.top), ee = Math.round(window.scrollY);
|
|
146
|
+
X > 0 && $ <= 60 && (typeof y == "number" ? ee <= y && (y = null, V(!1)) : (y = Math.round(window.scrollY), V(!0), a && a(!1)));
|
|
147
147
|
}
|
|
148
148
|
});
|
|
149
|
-
e.useEffect(() => (window.addEventListener("scroll",
|
|
150
|
-
window.removeEventListener("scroll",
|
|
149
|
+
e.useEffect(() => (window.addEventListener("scroll", x), window.addEventListener("resize", x), () => {
|
|
150
|
+
window.removeEventListener("scroll", x), window.removeEventListener("resize", x);
|
|
151
151
|
}), []);
|
|
152
152
|
const E = e.useRef();
|
|
153
153
|
e.useLayoutEffect(() => {
|
|
154
|
-
if (f.current && T.current &&
|
|
154
|
+
if (f.current && T.current && p) {
|
|
155
155
|
if (S && E.current)
|
|
156
156
|
f.current.style.height = E.current.height, f.current.style.width = E.current.width, f.current.style.marginBottom = E.current.marginBottom;
|
|
157
157
|
else if (!S) {
|
|
158
158
|
f.current.style.height = "", f.current.style.width = "", f.current.style.marginBottom = "";
|
|
159
|
-
const
|
|
159
|
+
const i = window.getComputedStyle(T.current);
|
|
160
160
|
E.current = {
|
|
161
|
-
height:
|
|
162
|
-
width:
|
|
163
|
-
marginBottom:
|
|
161
|
+
height: i.height,
|
|
162
|
+
width: i.width,
|
|
163
|
+
marginBottom: i.marginBottom
|
|
164
164
|
};
|
|
165
165
|
}
|
|
166
166
|
}
|
|
@@ -168,45 +168,45 @@ function q({
|
|
|
168
168
|
function z() {
|
|
169
169
|
a && a(!t?.isOpen);
|
|
170
170
|
}
|
|
171
|
-
function Z(
|
|
172
|
-
|
|
171
|
+
function Z(i) {
|
|
172
|
+
s && s(i);
|
|
173
173
|
}
|
|
174
174
|
e.useEffect(() => {
|
|
175
175
|
Z(S);
|
|
176
176
|
}, [S]);
|
|
177
177
|
const [
|
|
178
|
-
|
|
178
|
+
D,
|
|
179
179
|
J,
|
|
180
180
|
Q,
|
|
181
|
-
[
|
|
182
|
-
|
|
183
|
-
] = ae(
|
|
181
|
+
[P],
|
|
182
|
+
G
|
|
183
|
+
] = ae(g, [
|
|
184
|
+
{ type: M },
|
|
185
|
+
{ type: I },
|
|
184
186
|
{ type: F },
|
|
185
|
-
{ type: O },
|
|
186
|
-
{ type: R },
|
|
187
187
|
{
|
|
188
|
-
custom: (
|
|
188
|
+
custom: (i) => b.isWoodlandComponent(i) && b.get(i).name === "Tabs"
|
|
189
189
|
}
|
|
190
190
|
]);
|
|
191
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
191
|
+
return /* @__PURE__ */ e.createElement("div", { className: A(L), ref: f, ...w }, /* @__PURE__ */ e.createElement("div", { className: xe({ pinned: S }), ref: T }, P ? re(P, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: Ae }, !!l && /* @__PURE__ */ e.createElement("div", { className: Ce }, /* @__PURE__ */ e.createElement(
|
|
192
192
|
ce,
|
|
193
193
|
{
|
|
194
|
-
checked:
|
|
194
|
+
checked: d,
|
|
195
195
|
disabled: c,
|
|
196
|
-
indeterminate:
|
|
196
|
+
indeterminate: u,
|
|
197
197
|
onChange: () => {
|
|
198
|
-
|
|
198
|
+
h?.(!d);
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
|
-
)), /* @__PURE__ */ e.createElement("div", { className: ke }, !r &&
|
|
201
|
+
)), /* @__PURE__ */ e.createElement("div", { className: ke }, !r && D, !r && J, D.length > 0 && t && /* @__PURE__ */ e.createElement(
|
|
202
202
|
"div",
|
|
203
203
|
{
|
|
204
204
|
className: Re,
|
|
205
|
-
"data-testid": `${
|
|
205
|
+
"data-testid": `${N}__advanced-search`
|
|
206
206
|
},
|
|
207
|
-
/* @__PURE__ */ e.createElement("div", { className: Fe }, /* @__PURE__ */ e.createElement(_, { kind: "link", onClick: z },
|
|
208
|
-
(t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(
|
|
209
|
-
), r && /* @__PURE__ */ e.createElement("div", { className: Me }, r)), S ? /* @__PURE__ */ e.createElement("div", { className:
|
|
207
|
+
/* @__PURE__ */ e.createElement("div", { className: Fe }, /* @__PURE__ */ e.createElement(_, { kind: "link", onClick: z }, B ?? Y("listToolbar.advancedSearchToggle", { defaultValue: "Advanced Search" }))),
|
|
208
|
+
(t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(k, { className: Oe, kind: "info", "data-testid": `${N}__entered-fields` }, /* @__PURE__ */ e.createElement("span", null, t.enteredFields))
|
|
209
|
+
), r && /* @__PURE__ */ e.createElement("div", { className: Me }, r)), S ? /* @__PURE__ */ e.createElement("div", { className: K }, /* @__PURE__ */ e.createElement(se.Provider, { value: { fixed: !0 } }, G)) : /* @__PURE__ */ e.createElement("div", { className: K }, G)), /* @__PURE__ */ e.createElement("div", { className: fe }, (!S || m) && Q))));
|
|
210
210
|
}
|
|
211
211
|
b.set(q, {
|
|
212
212
|
name: "ListBar",
|
|
@@ -230,11 +230,11 @@ function H({
|
|
|
230
230
|
options: t,
|
|
231
231
|
activeOption: a,
|
|
232
232
|
onSortChange: r,
|
|
233
|
-
defaultOption:
|
|
233
|
+
defaultOption: s,
|
|
234
234
|
className: l,
|
|
235
|
-
...
|
|
235
|
+
...d
|
|
236
236
|
}) {
|
|
237
|
-
const
|
|
237
|
+
const u = (t || []).map((c) => [
|
|
238
238
|
{ label: c.label, icon: c.icon },
|
|
239
239
|
() => {
|
|
240
240
|
r && r(c);
|
|
@@ -243,10 +243,10 @@ function H({
|
|
|
243
243
|
return /* @__PURE__ */ e.createElement(
|
|
244
244
|
ie,
|
|
245
245
|
{
|
|
246
|
-
className:
|
|
247
|
-
icon: a?.icon ||
|
|
248
|
-
label: a?.label ||
|
|
249
|
-
options:
|
|
246
|
+
className: A(l, De),
|
|
247
|
+
icon: a?.icon || s?.icon,
|
|
248
|
+
label: a?.label || s?.label,
|
|
249
|
+
options: u
|
|
250
250
|
}
|
|
251
251
|
);
|
|
252
252
|
}
|
|
@@ -259,36 +259,37 @@ b.set(H, {
|
|
|
259
259
|
defaultOption: { type: "SortOption" }
|
|
260
260
|
}
|
|
261
261
|
});
|
|
262
|
-
var Ge =
|
|
262
|
+
var Ge = O({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj410", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj411", false: "pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj412" }, compact: { true: "pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj413", false: "pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj414" } }, defaultVariants: { open: !1, compact: !1 }, compoundVariants: [] }), je = O({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj415", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj416", false: "pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj417" } }, defaultVariants: { open: !0 }, compoundVariants: [] }), Ue = "pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj418", Ke = "pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj419";
|
|
263
263
|
function W({
|
|
264
264
|
formArray: t,
|
|
265
265
|
formGroup: a,
|
|
266
266
|
formMeta: r,
|
|
267
|
-
onSubmit:
|
|
267
|
+
onSubmit: s,
|
|
268
268
|
controlsDisabled: l,
|
|
269
|
-
footerLinks:
|
|
270
|
-
isOpen:
|
|
269
|
+
footerLinks: d,
|
|
270
|
+
isOpen: u,
|
|
271
271
|
onClear: c,
|
|
272
|
-
submitButtonText:
|
|
273
|
-
|
|
274
|
-
|
|
272
|
+
submitButtonText: h,
|
|
273
|
+
compact: m,
|
|
274
|
+
className: p,
|
|
275
|
+
children: B,
|
|
275
276
|
...g
|
|
276
277
|
}) {
|
|
277
|
-
const { t:
|
|
278
|
-
function
|
|
278
|
+
const { t: L } = R();
|
|
279
|
+
function w() {
|
|
279
280
|
c && c();
|
|
280
281
|
}
|
|
281
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
282
|
+
return /* @__PURE__ */ e.createElement("div", { className: A(Ge({ open: u, compact: m })), ...g }, /* @__PURE__ */ e.createElement(de, { onSubmit: s, formArray: t, formGroup: a, formMeta: r }, /* @__PURE__ */ e.createElement("div", { className: je({ open: u }) }, B), /* @__PURE__ */ e.createElement("div", { className: Ue }, d && /* @__PURE__ */ e.createElement("div", { id: "footer_links" }, ne(d)), /* @__PURE__ */ e.createElement("div", { className: Ke }, /* @__PURE__ */ e.createElement(
|
|
282
283
|
_,
|
|
283
284
|
{
|
|
284
285
|
kind: "default",
|
|
285
286
|
type: "button",
|
|
286
287
|
className: Se({ mr: "sm" }),
|
|
287
|
-
onClick:
|
|
288
|
+
onClick: w,
|
|
288
289
|
disabled: l
|
|
289
290
|
},
|
|
290
|
-
|
|
291
|
-
), /* @__PURE__ */ e.createElement(_, { kind: "key", type: "submit", disabled: l },
|
|
291
|
+
L("advancedSearch.clear", { defaultValue: "Clear Fields" })
|
|
292
|
+
), /* @__PURE__ */ e.createElement(_, { kind: "key", type: "submit", disabled: l }, h ?? L("advancedSearch.search", { defaultValue: "Search" }))))));
|
|
292
293
|
}
|
|
293
294
|
b.set(W, {
|
|
294
295
|
name: "Advanced Search",
|
|
@@ -301,7 +302,8 @@ b.set(W, {
|
|
|
301
302
|
footerLinks: { type: "React.ReactNode | (() => React.ReactNode)" },
|
|
302
303
|
isOpen: { type: "boolean" },
|
|
303
304
|
onClear: { type: "() => void" },
|
|
304
|
-
submitButtonText: { type: "string" }
|
|
305
|
+
submitButtonText: { type: "string" },
|
|
306
|
+
compact: { type: "boolean" }
|
|
305
307
|
}
|
|
306
308
|
});
|
|
307
309
|
const qe = {
|
|
@@ -572,21 +574,21 @@ function He() {
|
|
|
572
574
|
function r() {
|
|
573
575
|
a(!1);
|
|
574
576
|
}
|
|
575
|
-
function
|
|
577
|
+
function s() {
|
|
576
578
|
a(!0);
|
|
577
579
|
}
|
|
578
|
-
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:
|
|
580
|
+
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(
|
|
579
581
|
"img",
|
|
580
582
|
{
|
|
581
583
|
src: "assets/images/list-toolbar-example.svg",
|
|
582
584
|
alt: "A List Toolbar with labels on each section",
|
|
583
585
|
className: "w-100 mb-3"
|
|
584
586
|
}
|
|
585
|
-
), /* @__PURE__ */ e.createElement(me, null, /* @__PURE__ */ e.createElement(pe, null, /* @__PURE__ */ e.createElement(
|
|
587
|
+
), /* @__PURE__ */ e.createElement(me, null, /* @__PURE__ */ e.createElement(pe, null, /* @__PURE__ */ e.createElement(C, { style: { width: "80px" } }, "Order"), /* @__PURE__ */ e.createElement(C, null, "Section"), /* @__PURE__ */ e.createElement(C, null, "Notes")), /* @__PURE__ */ e.createElement(he, 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."))))));
|
|
586
588
|
}
|
|
587
589
|
const We = {
|
|
588
590
|
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."),
|
|
589
|
-
components: [q,
|
|
591
|
+
components: [q, M, I, H],
|
|
590
592
|
examples: {
|
|
591
593
|
general: {
|
|
592
594
|
label: "General Usage",
|
|
@@ -1526,7 +1528,7 @@ const We = {
|
|
|
1526
1528
|
}
|
|
1527
1529
|
}
|
|
1528
1530
|
}, Ye = {
|
|
1529
|
-
components: [
|
|
1531
|
+
components: [F],
|
|
1530
1532
|
examples: {
|
|
1531
1533
|
basic: {
|
|
1532
1534
|
label: "Basic",
|
|
@@ -1760,9 +1762,9 @@ export {
|
|
|
1760
1762
|
W as AdvancedSearch,
|
|
1761
1763
|
Pe as InputGroupWrapper,
|
|
1762
1764
|
q as ListBar,
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
+
M as ListBarSearch,
|
|
1766
|
+
I as ListBarSearchInfo,
|
|
1765
1767
|
H as ListBarSortBy,
|
|
1766
1768
|
tt as MANIFEST,
|
|
1767
|
-
|
|
1769
|
+
F as SearchResultsBar
|
|
1768
1770
|
};
|
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("@spscommerce/i18n"),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","@spscommerce/i18n","@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.i18n,l.tokens))})(this,(function(l,g,c,B,k,o,a,F,Y){"use strict";function z(t){const r=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(r,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const e=z(g);var Z="pkg_sps-woodland_list-bar__version_8_49_0__hash_1gxdcgc0",J="pkg_sps-woodland_list-bar__version_8_49_0__hash_1gxdcgc1",Q="pkg_sps-woodland_list-bar__version_8_49_0__hash_1gxdcgc2",X="pkg_sps-woodland_list-bar__version_8_49_0__hash_1gxdcgc3",$="pkg_sps-woodland_list-bar__version_8_49_0__hash_1gxdcgc4",ee="pkg_sps-woodland_list-bar__version_8_49_0__hash_1gxdcgc5",te="pkg_sps-woodland_list-bar__version_8_49_0__hash_1gxdcgc6",ae="pkg_sps-woodland_list-bar__version_8_49_0__hash_1gxdcgc7",re="pkg_sps-woodland_list-bar__version_8_49_0__hash_1gxdcgc8";function w({results:t,selections:r,zeroStateText:n,onClear:s,className:i,children:m,...h}){const{t:d}=F.useWoodlandLanguage(),S=r?Object.keys(r).reduce((f,u)=>(r[u].length>0&&(f[u]=r[u]),f),{}):{};return e.createElement("div",{className:J,...h},t!=null&&e.createElement("div",{className:Q},e.createElement("span",null,d("searchResultsBar.results",{defaultValue:"Results:"})),e.createElement(k.Tag,{className:X,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:$},Object.keys(S).length>0?Object.keys(S).map((f,u)=>e.createElement(e.Fragment,null,e.createElement("span",{key:u,className:ee},f,":"),S[f].map((T,_)=>e.createElement(k.Tag,{className:te,key:_,kind:"key"},e.createElement("span",null,T))))):e.createElement("span",{className:"font-italic"},n||d("searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:ae},e.createElement(B.Button,{className:re,kind:"link",onClick:s},d("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 ne(t,r,n){return r in t?Object.defineProperty(t,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[r]=n,t}function R(t,r){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);r&&(s=s.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),n.push.apply(n,s)}return n}function N(t){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};r%2?R(Object(n),!0).forEach(function(s){ne(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):R(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var se=(t,r,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=r[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},D=t=>r=>{var n=t.defaultClassName,s=N(N({},t.defaultVariants),r);for(var i in s){var m,h=(m=s[i])!==null&&m!==void 0?m:t.defaultVariants[i];if(h!=null){var d=h;typeof d=="boolean"&&(d=d===!0?"true":"false");var S=t.variantClassNames[i][d];S&&(n+=" "+S)}}for(var[f,u]of t.compoundVariants)se(f,s,t.defaultVariants)&&(n+=" "+u);return n},oe=D({defaultClassName:"pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),le="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p704",ce="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p705",ie="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p706",de="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p707",ue="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p708",pe="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p709",me="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p70a",P="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p70b",he="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p70c",Se="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p70d",fe="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p70e",ve="pkg_sps-woodland_list-bar__version_8_49_0__hash_9h4p70f";function G({children:t}){const r=c.modChildren(t,n=>n.type===B.Button?[{className:c.cl(n.props.className,fe)}]:[]);return e.createElement(e.Fragment,null,r)}function y({onSubmit:t,children:r}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:he,noValidate:!0},e.createElement(a.SpsInputGroup,{className:Se},e.createElement(G,null,r)))}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 M({advancedSearch:t,onToggleAdvancedSearch:r,title:n,onToolbarPinned:s,selectable:i,isSelected:m,isIndeterminate:h,disableSelection:d=!1,onSelectionChange:S,pinResultsBar:f,pinToolbar:u=!0,advancedSearchToggleText:T,children:_,className:V,...j}){const{t:Ce}=F.useWoodlandLanguage();let A=null;const[v,q]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":U}=j,x=o.lockToAnimationFrames(()=>{if(E.current&&u){const p=E.current.getBoundingClientRect();if(!p)return;const Me=Math.round(p.height),Oe=Math.round(p.top),Ie=Math.round(window.scrollY);Me>0&&Oe<=60&&(typeof A=="number"?Ie<=A&&(A=null,q(!1)):(A=Math.round(window.scrollY),q(!0),r&&r(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",x),window.addEventListener("resize",x),()=>{window.removeEventListener("scroll",x),window.removeEventListener("resize",x)}),[]);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 p=window.getComputedStyle(E.current);L.current={height:p.height,width:p.width,marginBottom:p.marginBottom}}}},[v]);function Ae(){r&&r(!t?.isOpen)}function xe(p){s&&s(p)}e.useEffect(()=>{xe(v)},[v]);const[K,ke,Fe,[H],W]=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(V),ref:b,...j},e.createElement("div",{className:oe({pinned:v}),ref:E},H?c.addProps(H,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:le},!!i&&e.createElement("div",{className:ce},e.createElement(a.SpsCheckbox,{checked:m,disabled:d,indeterminate:h,onChange:()=>{S?.(!m)}})),e.createElement("div",{className:ie},!n&&K,!n&&ke,K.length>0&&t&&e.createElement("div",{className:de,"data-testid":`${U}__advanced-search`},e.createElement("div",{className:ue},e.createElement(B.Button,{kind:"link",onClick:Ae},T??Ce("listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(k.Tag,{className:pe,kind:"info","data-testid":`${U}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:me},n)),v?e.createElement("div",{className:P},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},W)):e.createElement("div",{className:P},W)),e.createElement("div",{className:Z},(!v||f)&&Fe))))}c.Metadata.set(M,{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 O({options:t,activeOption:r,onSortChange:n,defaultOption:s,className:i,...m}){const h=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{n&&n(d)}]);return e.createElement(a.SpsDropdown,{className:c.cl(i,ve),icon:r?.icon||s?.icon,label:r?.label||s?.label,options:h})}c.Metadata.set(O,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var be=D({defaultClassName:"pkg_sps-woodland_list-bar__version_8_49_0__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_49_0__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_49_0__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),Be="pkg_sps-woodland_list-bar__version_8_49_0__hash_q4fj413",_e="pkg_sps-woodland_list-bar__version_8_49_0__hash_q4fj414",ge="pkg_sps-woodland_list-bar__version_8_49_0__hash_q4fj415";function I({formArray:t,formGroup:r,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:m,isOpen:h,onClear:d,submitButtonText:S,className:f,children:u,...T}){const{t:_}=F.useWoodlandLanguage();function V(){d&&d()}return e.createElement("div",{className:c.cl(be({open:h})),...T},e.createElement(a.SpsForm,{onSubmit:s,formArray:t,formGroup:r,formMeta:n},e.createElement("div",{className:Be},u),e.createElement("div",{className:_e},m&&e.createElement("div",{id:"footer_links"},c.contentOf(m)),e.createElement("div",{className:ge},e.createElement(B.Button,{kind:"default",type:"button",className:Y.sprinkles({mr:"sm"}),onClick:V,disabled:i},_("advancedSearch.clear",{defaultValue:"Clear Fields"})),e.createElement(B.Button,{kind:"key",type:"submit",disabled:i},S??_("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 Te={components:[I],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:r})=>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(r,{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,B){typeof exports=="object"&&typeof module<"u"?B(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/buttons"),require("@sps-woodland/tags"),require("@spscommerce/utils"),require("@spscommerce/ds-react"),require("@spscommerce/i18n"),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","@spscommerce/i18n","@sps-woodland/tokens"],B):(l=typeof globalThis<"u"?globalThis:l||self,B(l.ListBar={},l.React,l.core,l.buttons,l.tags,l.utils,l.dsReact,l.i18n,l.tokens))})(this,(function(l,B,c,_,M,o,a,O,Y){"use strict";function z(t){const r=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(r,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const e=z(B);var Z="pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc0",J="pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc1",Q="pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc2",X="pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc3",$="pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc4",ee="pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc5",te="pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc6",ae="pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc7",re="pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc8";function w({results:t,selections:r,zeroStateText:n,onClear:s,className:i,children:p,...m}){const{t:d}=O.useWoodlandLanguage(),f=r?Object.keys(r).reduce((h,S)=>(r[S].length>0&&(h[S]=r[S]),h),{}):{};return e.createElement("div",{className:J,...m},t!=null&&e.createElement("div",{className:Q},e.createElement("span",null,d("searchResultsBar.results",{defaultValue:"Results:"})),e.createElement(M.Tag,{className:X,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:$},Object.keys(f).length>0?Object.keys(f).map((h,S)=>e.createElement(e.Fragment,null,e.createElement("span",{key:S,className:ee},h,":"),f[h].map((g,T)=>e.createElement(M.Tag,{className:te,key:T,kind:"key"},e.createElement("span",null,g))))):e.createElement("span",{className:"font-italic"},n||d("searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:ae},e.createElement(_.Button,{className:re,kind:"link",onClick:s},d("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 ne(t,r,n){return r in t?Object.defineProperty(t,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[r]=n,t}function D(t,r){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);r&&(s=s.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),n.push.apply(n,s)}return n}function P(t){for(var r=1;r<arguments.length;r++){var n=arguments[r]!=null?arguments[r]:{};r%2?D(Object(n),!0).forEach(function(s){ne(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):D(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var se=(t,r,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=r[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},I=t=>r=>{var n=t.defaultClassName,s=P(P({},t.defaultVariants),r);for(var i in s){var p,m=(p=s[i])!==null&&p!==void 0?p:t.defaultVariants[i];if(m!=null){var d=m;typeof d=="boolean"&&(d=d===!0?"true":"false");var f=t.variantClassNames[i][d];f&&(n+=" "+f)}}for(var[h,S]of t.compoundVariants)se(h,s,t.defaultVariants)&&(n+=" "+S);return n},oe=I({defaultClassName:"pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),le="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p704",ce="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p705",ie="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p706",de="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p707",ue="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p708",pe="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p709",me="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70a",j="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70b",he="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70c",Se="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70d",fe="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70e",ve="pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70f";function G({children:t}){const r=c.modChildren(t,n=>n.type===_.Button?[{className:c.cl(n.props.className,fe)}]:[]);return e.createElement(e.Fragment,null,r)}function y({onSubmit:t,children:r}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:he,noValidate:!0},e.createElement(a.SpsInputGroup,{className:Se},e.createElement(G,null,r)))}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 V({advancedSearch:t,onToggleAdvancedSearch:r,title:n,onToolbarPinned:s,selectable:i,isSelected:p,isIndeterminate:m,disableSelection:d=!1,onSelectionChange:f,pinResultsBar:h,pinToolbar:S=!0,advancedSearchToggleText:g,children:T,className:A,...x}){const{t:Ce}=O.useWoodlandLanguage();let k=null;const[v,q]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":U}=x,F=o.lockToAnimationFrames(()=>{if(E.current&&S){const u=E.current.getBoundingClientRect();if(!u)return;const Me=Math.round(u.height),Oe=Math.round(u.top),Ie=Math.round(window.scrollY);Me>0&&Oe<=60&&(typeof k=="number"?Ie<=k&&(k=null,q(!1)):(k=Math.round(window.scrollY),q(!0),r&&r(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",F),window.addEventListener("resize",F),()=>{window.removeEventListener("scroll",F),window.removeEventListener("resize",F)}),[]);const L=e.useRef();e.useLayoutEffect(()=>{if(b.current&&E.current&&S){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 u=window.getComputedStyle(E.current);L.current={height:u.height,width:u.width,marginBottom:u.marginBottom}}}},[v]);function Ae(){r&&r(!t?.isOpen)}function xe(u){s&&s(u)}e.useEffect(()=>{xe(v)},[v]);const[K,ke,Fe,[H],W]=c.selectChildren(T,[{type:y},{type:C},{type:w},{custom:u=>c.Metadata.isWoodlandComponent(u)&&c.Metadata.get(u).name==="Tabs"}]);return e.createElement("div",{className:c.cl(A),ref:b,...x},e.createElement("div",{className:oe({pinned:v}),ref:E},H?c.addProps(H,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:le},!!i&&e.createElement("div",{className:ce},e.createElement(a.SpsCheckbox,{checked:p,disabled:d,indeterminate:m,onChange:()=>{f?.(!p)}})),e.createElement("div",{className:ie},!n&&K,!n&&ke,K.length>0&&t&&e.createElement("div",{className:de,"data-testid":`${U}__advanced-search`},e.createElement("div",{className:ue},e.createElement(_.Button,{kind:"link",onClick:Ae},g??Ce("listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(M.Tag,{className:pe,kind:"info","data-testid":`${U}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:me},n)),v?e.createElement("div",{className:j},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},W)):e.createElement("div",{className:j},W)),e.createElement("div",{className:Z},(!v||h)&&Fe))))}c.Metadata.set(V,{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 N({options:t,activeOption:r,onSortChange:n,defaultOption:s,className:i,...p}){const m=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{n&&n(d)}]);return e.createElement(a.SpsDropdown,{className:c.cl(i,ve),icon:r?.icon||s?.icon,label:r?.label||s?.label,options:m})}c.Metadata.set(N,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var be=I({defaultClassName:"pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj412"},compact:{true:"pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj413",false:"pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj414"}},defaultVariants:{open:!1,compact:!1},compoundVariants:[]}),_e=I({defaultClassName:"pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj415",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj416",false:"pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj417"}},defaultVariants:{open:!0},compoundVariants:[]}),Be="pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj418",ge="pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj419";function R({formArray:t,formGroup:r,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:p,isOpen:m,onClear:d,submitButtonText:f,compact:h,className:S,children:g,...T}){const{t:A}=O.useWoodlandLanguage();function x(){d&&d()}return e.createElement("div",{className:c.cl(be({open:m,compact:h})),...T},e.createElement(a.SpsForm,{onSubmit:s,formArray:t,formGroup:r,formMeta:n},e.createElement("div",{className:_e({open:m})},g),e.createElement("div",{className:Be},p&&e.createElement("div",{id:"footer_links"},c.contentOf(p)),e.createElement("div",{className:ge},e.createElement(_.Button,{kind:"default",type:"button",className:Y.sprinkles({mr:"sm"}),onClick:x,disabled:i},A("advancedSearch.clear",{defaultValue:"Clear Fields"})),e.createElement(_.Button,{kind:"key",type:"submit",disabled:i},f??A("advancedSearch.search",{defaultValue:"Search"}))))))}c.Metadata.set(R,{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"},compact:{type:"boolean"}}});const Te={components:[R],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:r})=>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(r,{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 Ee(){const[t,r]=e.useState(!1);function n(){r(!1)}function s(){r(!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(
|
|
219
|
+
`}}}}};function Ee(){const[t,r]=e.useState(!1);function n(){r(!1)}function s(){r(!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(_.Button,{kind:"link",onClick:s},"View Content Order Example"),e.createElement(a.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(a.SpsTable,null,e.createElement(a.SpsTableHead,null,e.createElement(a.SpsTableHeader,{style:{width:"80px"}},"Order"),e.createElement(a.SpsTableHeader,null,"Section"),e.createElement(a.SpsTableHeader,null,"Notes")),e.createElement(a.SpsTableBody,null,e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(a.SpsTableCell,null,"Checkbox"),e.createElement(a.SpsTableCell,null,"For Content Rows and Content Tiles only.")),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(a.SpsTableCell,null,"Search/Filter Box"),e.createElement(a.SpsTableCell,null)),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(a.SpsTableCell,null,"Saved Search"),e.createElement(a.SpsTableCell,null)),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(a.SpsTableCell,null,"Advanced Search"),e.createElement(a.SpsTableCell,null,"For more information, visit the Advanced Search page.")),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(a.SpsTableCell,null,"Column Editor"),e.createElement(a.SpsTableCell,{wrap:500},"Use for Tables only. For more information, visit the Column Editor page.")),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"6")),e.createElement(a.SpsTableCell,null,"List View Selector"),e.createElement(a.SpsTableCell,null)),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"7")),e.createElement(a.SpsTableCell,null,"Sorting"),e.createElement(a.SpsTableCell,null)),e.createElement(a.SpsTableRow,null,e.createElement(a.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"8")),e.createElement(a.SpsTableCell,null,"Buttons"),e.createElement(a.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 Le={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:[V,y,C,N],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(Ee,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() {
|
|
@@ -1083,4 +1083,4 @@
|
|
|
1083
1083
|
</>
|
|
1084
1084
|
)
|
|
1085
1085
|
}
|
|
1086
|
-
`}}}}},ye={"Advanced Search":Te,"List Bar":Le,"Search Results Bar":we};l.AdvancedSearch=
|
|
1086
|
+
`}}}}},ye={"Advanced Search":Te,"List Bar":Le,"Search Results Bar":we};l.AdvancedSearch=R,l.InputGroupWrapper=G,l.ListBar=V,l.ListBarSearch=y,l.ListBarSearchInfo=C,l.ListBarSortBy=N,l.MANIFEST=ye,l.SearchResultsBar=w,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_list-
|
|
1
|
+
.pkg_sps-woodland_list-bar__version_8_50_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_50_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_50_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_50_0__hash_9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_50_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_50_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_50_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_50_0__hash_9h4p708{display:inline-block;position:relative}.pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p709{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_50_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_50_0__hash_9h4p70b{display:inline-block;height:2rem;margin-left:auto;text-align:right;vertical-align:middle;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_list-bar__version_8_50_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_50_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_50_0__hash_9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70f>.sps-button>button{padding:.25rem}.pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70e>button{height:1.875rem}.pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70a>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70d>.sps-input-group{flex-wrap:nowrap}.pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70d>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_list-bar__version_8_50_0__hash_9h4p70d>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_list-bar__version_8_50_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_50_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_50_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_50_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_50_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_50_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_50_0__hash_9h4p70d svg{margin-bottom:0}.pkg_sps-woodland_list-bar__version_8_50_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_50_0__hash_9h4p701>.pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc0>.pkg_sps-woodland_list-bar__version_8_50_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_50_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_50_0__hash_1gxdcgc3{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc5:first-child{margin-left:0}.pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc6:last-child{margin-right:0}.pkg_sps-woodland_list-bar__version_8_50_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_50_0__hash_1gxdcgc7:hover{background:#d2d4d4}.pkg_sps-woodland_list-bar__version_8_50_0__hash_1gxdcgc8{padding:.5rem;width:5.25rem}.pkg_sps-woodland_list-bar__version_8_50_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_50_0__hash_q4fj411,.pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj413{display:block}.pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj415{padding:1rem}.pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj417{display:none}.pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj418{background:#f3f4f4;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;display:flex;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj419{text-align:right}.pkg_sps-woodland_list-bar__version_8_50_0__hash_q4fj418>*{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.50.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",
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
31
31
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
32
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
33
|
-
"@sps-woodland/buttons": "8.
|
|
34
|
-
"@sps-woodland/core": "8.
|
|
35
|
-
"@sps-woodland/tabs": "8.
|
|
36
|
-
"@sps-woodland/tags": "8.
|
|
37
|
-
"@sps-woodland/tokens": "8.
|
|
38
|
-
"@spscommerce/ds-react": "8.
|
|
39
|
-
"@spscommerce/i18n": "8.
|
|
33
|
+
"@sps-woodland/buttons": "8.50.0",
|
|
34
|
+
"@sps-woodland/core": "8.50.0",
|
|
35
|
+
"@sps-woodland/tabs": "8.50.0",
|
|
36
|
+
"@sps-woodland/tags": "8.50.0",
|
|
37
|
+
"@sps-woodland/tokens": "8.50.0",
|
|
38
|
+
"@spscommerce/ds-react": "8.50.0",
|
|
39
|
+
"@spscommerce/i18n": "8.50.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@react-stately/collections": "3.12.10",
|
|
@@ -45,14 +45,14 @@
|
|
|
45
45
|
"@vanilla-extract/recipes": "0.2.5",
|
|
46
46
|
"react": "16.14.0",
|
|
47
47
|
"react-dom": "16.14.0",
|
|
48
|
-
"@sps-woodland/buttons": "8.
|
|
49
|
-
"@sps-woodland/core": "8.
|
|
50
|
-
"@sps-woodland/tabs": "8.
|
|
51
|
-
"@sps-woodland/tags": "8.
|
|
52
|
-
"@
|
|
53
|
-
"@spscommerce/ds-
|
|
54
|
-
"@spscommerce/
|
|
55
|
-
"@
|
|
48
|
+
"@sps-woodland/buttons": "8.50.0",
|
|
49
|
+
"@sps-woodland/core": "8.50.0",
|
|
50
|
+
"@sps-woodland/tabs": "8.50.0",
|
|
51
|
+
"@sps-woodland/tags": "8.50.0",
|
|
52
|
+
"@sps-woodland/tokens": "8.50.0",
|
|
53
|
+
"@spscommerce/ds-react": "8.50.0",
|
|
54
|
+
"@spscommerce/ds-shared": "8.50.0",
|
|
55
|
+
"@spscommerce/i18n": "8.50.0"
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
58
|
"build": "pnpm run build:js && pnpm run build:types",
|