@sps-woodland/list-bar 8.33.10 → 8.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.js +31 -30
- package/lib/index.umd.cjs +4 -4
- package/lib/style.css +1 -1
- package/package.json +16 -14
package/lib/index.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { Metadata as b,
|
|
2
|
+
import { Metadata as b, 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
4
|
import { Tag as C } 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
|
|
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 A, SpsTableBody as he, SpsTableRow as v, SpsTableCell as n } from "@spscommerce/ds-react";
|
|
7
|
+
import { useWoodlandLanguage as k } from "@spscommerce/i18n";
|
|
7
8
|
import { sprinkles as Se } from "@sps-woodland/tokens";
|
|
8
|
-
var fe = "pkg_sps-woodland_list-
|
|
9
|
+
var fe = "pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc0", ve = "pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc1", be = "pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc2", Be = "pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc3", _e = "pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc4", ge = "pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc5", Te = "pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc6", Ee = "pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc7", Le = "pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc8";
|
|
9
10
|
function R({
|
|
10
11
|
results: t,
|
|
11
12
|
selections: a,
|
|
@@ -13,10 +14,10 @@ function R({
|
|
|
13
14
|
onClear: s,
|
|
14
15
|
className: l,
|
|
15
16
|
children: m,
|
|
16
|
-
...
|
|
17
|
+
...p
|
|
17
18
|
}) {
|
|
18
|
-
const { t: c } =
|
|
19
|
-
return /* @__PURE__ */ e.createElement("div", { className: ve, ...
|
|
19
|
+
const { t: c } = k(), i = a ? Object.keys(a).reduce((h, d) => (a[d].length > 0 && (h[d] = a[d]), h), {}) : {};
|
|
20
|
+
return /* @__PURE__ */ e.createElement("div", { className: ve, ...p }, t != null && /* @__PURE__ */ e.createElement("div", { className: be }, /* @__PURE__ */ e.createElement("span", null, c("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((h, d) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { key: d, className: ge }, h, ":"), i[h].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("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" }))));
|
|
20
21
|
}
|
|
21
22
|
b.set(R, {
|
|
22
23
|
name: "Search Results Bar",
|
|
@@ -66,9 +67,9 @@ var we = (t, a, r) => {
|
|
|
66
67
|
}, K = (t) => (a) => {
|
|
67
68
|
var r = t.defaultClassName, s = U(U({}, t.defaultVariants), a);
|
|
68
69
|
for (var l in s) {
|
|
69
|
-
var m,
|
|
70
|
-
if (
|
|
71
|
-
var c =
|
|
70
|
+
var m, p = (m = s[l]) !== null && m !== void 0 ? m : t.defaultVariants[l];
|
|
71
|
+
if (p != null) {
|
|
72
|
+
var c = p;
|
|
72
73
|
typeof c == "boolean" && (c = c === !0 ? "true" : "false");
|
|
73
74
|
var i = (
|
|
74
75
|
// @ts-expect-error
|
|
@@ -77,10 +78,10 @@ var we = (t, a, r) => {
|
|
|
77
78
|
i && (r += " " + i);
|
|
78
79
|
}
|
|
79
80
|
}
|
|
80
|
-
for (var [
|
|
81
|
-
we(
|
|
81
|
+
for (var [h, d] of t.compoundVariants)
|
|
82
|
+
we(h, s, t.defaultVariants) && (r += " " + d);
|
|
82
83
|
return r;
|
|
83
|
-
}, xe = K({ defaultClassName: "pkg_sps-woodland_list-
|
|
84
|
+
}, xe = K({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p701", variantClassNames: { pinned: { true: "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p702", false: "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), Ae = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p704", Ce = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p705", ke = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p706", Re = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p707", Fe = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p708", Me = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p709", Ie = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70a", j = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70b", Oe = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70c", Ve = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70d", Ne = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70e", De = "pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70f";
|
|
84
85
|
function Pe({
|
|
85
86
|
children: t
|
|
86
87
|
}) {
|
|
@@ -124,17 +125,17 @@ function q({
|
|
|
124
125
|
onToolbarPinned: s,
|
|
125
126
|
selectable: l,
|
|
126
127
|
isSelected: m,
|
|
127
|
-
isIndeterminate:
|
|
128
|
+
isIndeterminate: p,
|
|
128
129
|
disableSelection: c = !1,
|
|
129
130
|
onSelectionChange: i,
|
|
130
|
-
pinResultsBar:
|
|
131
|
+
pinResultsBar: h,
|
|
131
132
|
pinToolbar: d = !0,
|
|
132
133
|
advancedSearchToggleText: g,
|
|
133
134
|
children: B,
|
|
134
135
|
className: x,
|
|
135
136
|
...I
|
|
136
137
|
}) {
|
|
137
|
-
const { t: Y } =
|
|
138
|
+
const { t: Y } = k();
|
|
138
139
|
let L = null;
|
|
139
140
|
const [S, O] = e.useState(!1), T = e.useRef(null), f = e.useRef(null), { "data-testid": V } = I, y = oe(() => {
|
|
140
141
|
if (T.current && d) {
|
|
@@ -192,7 +193,7 @@ function q({
|
|
|
192
193
|
{
|
|
193
194
|
checked: m,
|
|
194
195
|
disabled: c,
|
|
195
|
-
indeterminate:
|
|
196
|
+
indeterminate: p,
|
|
196
197
|
onChange: () => {
|
|
197
198
|
i == null || i(!m);
|
|
198
199
|
}
|
|
@@ -203,9 +204,9 @@ function q({
|
|
|
203
204
|
className: Re,
|
|
204
205
|
"data-testid": `${V}__advanced-search`
|
|
205
206
|
},
|
|
206
|
-
/* @__PURE__ */ e.createElement("div", { className: Fe }, /* @__PURE__ */ e.createElement(_, { kind: "link", onClick: z }, g ?? Y("
|
|
207
|
+
/* @__PURE__ */ e.createElement("div", { className: Fe }, /* @__PURE__ */ e.createElement(_, { kind: "link", onClick: z }, g ?? Y("listToolbar.advancedSearchToggle", { defaultValue: "Advanced Search" }))),
|
|
207
208
|
(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 ||
|
|
209
|
+
), 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 || h) && Q))));
|
|
209
210
|
}
|
|
210
211
|
b.set(q, {
|
|
211
212
|
name: "ListBar",
|
|
@@ -233,7 +234,7 @@ function H({
|
|
|
233
234
|
className: l,
|
|
234
235
|
...m
|
|
235
236
|
}) {
|
|
236
|
-
const
|
|
237
|
+
const p = (t || []).map((c) => [
|
|
237
238
|
{ label: c.label, icon: c.icon },
|
|
238
239
|
() => {
|
|
239
240
|
r && r(c);
|
|
@@ -245,7 +246,7 @@ function H({
|
|
|
245
246
|
className: w(l, De),
|
|
246
247
|
icon: (a == null ? void 0 : a.icon) || (s == null ? void 0 : s.icon),
|
|
247
248
|
label: (a == null ? void 0 : a.label) || (s == null ? void 0 : s.label),
|
|
248
|
-
options:
|
|
249
|
+
options: p
|
|
249
250
|
}
|
|
250
251
|
);
|
|
251
252
|
}
|
|
@@ -258,7 +259,7 @@ b.set(H, {
|
|
|
258
259
|
defaultOption: { type: "SortOption" }
|
|
259
260
|
}
|
|
260
261
|
});
|
|
261
|
-
var Ge = K({ defaultClassName: "pkg_sps-woodland_list-
|
|
262
|
+
var Ge = K({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_34_0__hash_q4fj410", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_34_0__hash_q4fj411", false: "pkg_sps-woodland_list-bar__version_8_34_0__hash_q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ue = "pkg_sps-woodland_list-bar__version_8_34_0__hash_q4fj413", je = "pkg_sps-woodland_list-bar__version_8_34_0__hash_q4fj414", Ke = "pkg_sps-woodland_list-bar__version_8_34_0__hash_q4fj415";
|
|
262
263
|
function W({
|
|
263
264
|
formArray: t,
|
|
264
265
|
formGroup: a,
|
|
@@ -266,18 +267,18 @@ function W({
|
|
|
266
267
|
onSubmit: s,
|
|
267
268
|
controlsDisabled: l,
|
|
268
269
|
footerLinks: m,
|
|
269
|
-
isOpen:
|
|
270
|
+
isOpen: p,
|
|
270
271
|
onClear: c,
|
|
271
272
|
submitButtonText: i,
|
|
272
|
-
className:
|
|
273
|
+
className: h,
|
|
273
274
|
children: d,
|
|
274
275
|
...g
|
|
275
276
|
}) {
|
|
276
|
-
const { t: B } =
|
|
277
|
+
const { t: B } = k();
|
|
277
278
|
function x() {
|
|
278
279
|
c && c();
|
|
279
280
|
}
|
|
280
|
-
return /* @__PURE__ */ e.createElement("div", { className: w(Ge({ open:
|
|
281
|
+
return /* @__PURE__ */ e.createElement("div", { className: w(Ge({ open: p })), ...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(
|
|
281
282
|
_,
|
|
282
283
|
{
|
|
283
284
|
kind: "default",
|
|
@@ -286,8 +287,8 @@ function W({
|
|
|
286
287
|
onClick: x,
|
|
287
288
|
disabled: l
|
|
288
289
|
},
|
|
289
|
-
B("
|
|
290
|
-
), /* @__PURE__ */ e.createElement(_, { kind: "key", type: "submit", disabled: l }, i ?? B("
|
|
290
|
+
B("advancedSearch.clear", { defaultValue: "Clear Fields" })
|
|
291
|
+
), /* @__PURE__ */ e.createElement(_, { kind: "key", type: "submit", disabled: l }, i ?? B("advancedSearch.search", { defaultValue: "Search" }))))));
|
|
291
292
|
}
|
|
292
293
|
b.set(W, {
|
|
293
294
|
name: "Advanced Search",
|
|
@@ -581,7 +582,7 @@ function He() {
|
|
|
581
582
|
alt: "A List Toolbar with labels on each section",
|
|
582
583
|
className: "w-100 mb-3"
|
|
583
584
|
}
|
|
584
|
-
), /* @__PURE__ */ e.createElement(me, null, /* @__PURE__ */ e.createElement(
|
|
585
|
+
), /* @__PURE__ */ e.createElement(me, null, /* @__PURE__ */ e.createElement(pe, null, /* @__PURE__ */ e.createElement(A, { style: { width: "80px" } }, "Order"), /* @__PURE__ */ e.createElement(A, null, "Section"), /* @__PURE__ */ e.createElement(A, 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."))))));
|
|
585
586
|
}
|
|
586
587
|
const We = {
|
|
587
588
|
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."),
|
|
@@ -1750,7 +1751,7 @@ const We = {
|
|
|
1750
1751
|
}
|
|
1751
1752
|
}
|
|
1752
1753
|
}
|
|
1753
|
-
},
|
|
1754
|
+
}, tt = {
|
|
1754
1755
|
"Advanced Search": qe,
|
|
1755
1756
|
"List Bar": We,
|
|
1756
1757
|
"Search Results Bar": Ye
|
|
@@ -1762,6 +1763,6 @@ export {
|
|
|
1762
1763
|
F as ListBarSearch,
|
|
1763
1764
|
M as ListBarSearchInfo,
|
|
1764
1765
|
H as ListBarSortBy,
|
|
1765
|
-
|
|
1766
|
+
tt as MANIFEST,
|
|
1766
1767
|
R as SearchResultsBar
|
|
1767
1768
|
};
|
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,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_33_10__hash_1gxdcgc0",Z="pkg_sps-woodland_list-bar__version_8_33_10__hash_1gxdcgc1",J="pkg_sps-woodland_list-bar__version_8_33_10__hash_1gxdcgc2",Q="pkg_sps-woodland_list-bar__version_8_33_10__hash_1gxdcgc3",X="pkg_sps-woodland_list-bar__version_8_33_10__hash_1gxdcgc4",$="pkg_sps-woodland_list-bar__version_8_33_10__hash_1gxdcgc5",ee="pkg_sps-woodland_list-bar__version_8_33_10__hash_1gxdcgc6",te="pkg_sps-woodland_list-bar__version_8_33_10__hash_1gxdcgc7",ae="pkg_sps-woodland_list-bar__version_8_33_10__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_33_10__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),oe="pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p704",le="pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p705",ce="pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p706",ie="pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p707",de="pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p708",ue="pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p709",me="pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p70a",D="pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p70b",pe="pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p70c",he="pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p70d",Se="pkg_sps-woodland_list-bar__version_8_33_10__hash_9h4p70e",fe="pkg_sps-woodland_list-bar__version_8_33_10__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_33_10__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_33_10__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_33_10__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),be="pkg_sps-woodland_list-bar__version_8_33_10__hash_q4fj413",Be="pkg_sps-woodland_list-bar__version_8_33_10__hash_q4fj414",_e="pkg_sps-woodland_list-bar__version_8_33_10__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`
|
|
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,r,F,Y){"use strict";function z(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=z(g);var Z="pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc0",J="pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc1",Q="pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc2",X="pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc3",$="pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc4",ee="pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc5",te="pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc6",ae="pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc7",re="pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc8";function w({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:h,...S}){const{t:d}=F.useWoodlandLanguage(),u=a?Object.keys(a).reduce((f,m)=>(a[m].length>0&&(f[m]=a[m]),f),{}):{};return e.createElement("div",{className:J,...S},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(u).length>0?Object.keys(u).map((f,m)=>e.createElement(e.Fragment,null,e.createElement("span",{key:m,className:ee},f,":"),u[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,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function R(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 N(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%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,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},D=t=>a=>{var n=t.defaultClassName,s=N(N({},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)se(f,s,t.defaultVariants)&&(n+=" "+m);return n},oe=D({defaultClassName:"pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),le="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p704",ce="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p705",ie="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p706",de="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p707",ue="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p708",me="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p709",pe="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70a",P="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70b",he="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70c",Se="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70d",fe="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70e",ve="pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70f";function G({children:t}){const a=c.modChildren(t,n=>n.type===B.Button?[{className:c.cl(n.props.className,fe)}]:[]);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:he,noValidate:!0},e.createElement(r.SpsInputGroup,{className:Se},e.createElement(G,null,a)))}c.Metadata.set(y,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function A({children:t}){return e.createElement("div",null,t)}c.Metadata.set(A,{name:"ListBarSearchInfo"});function M({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:V,...j}){const{t:Ae}=F.useWoodlandLanguage();let C=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&&m){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 C=="number"?Ie<=C&&(C=null,q(!1)):(C=Math.round(window.scrollY),q(!0),a&&a(!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&&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[K,ke,Fe,[H],W]=c.selectChildren(_,[{type:y},{type:A},{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(r.SpsCheckbox,{checked:h,disabled:d,indeterminate:S,onChange:()=>{u==null||u(!h)}})),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:Ce},T??Ae("listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(k.Tag,{className:me,kind:"info","data-testid":`${U}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:pe},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: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,ve),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(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_34_0__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_34_0__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_34_0__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),Be="pkg_sps-woodland_list-bar__version_8_34_0__hash_q4fj413",_e="pkg_sps-woodland_list-bar__version_8_34_0__hash_q4fj414",ge="pkg_sps-woodland_list-bar__version_8_34_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:_}=F.useWoodlandLanguage();function V(){d&&d()}return e.createElement("div",{className:c.cl(be({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:_e},h&&e.createElement("div",{id:"footer_links"},c.contentOf(h)),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},u??_("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: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 Ee(){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 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:[M,y,A,O],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() {
|
|
@@ -883,7 +883,7 @@
|
|
|
883
883
|
</ListBar>
|
|
884
884
|
)
|
|
885
885
|
}
|
|
886
|
-
`}}}}},
|
|
886
|
+
`}}}}},we={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
|
+
`}}}}},ye={"Advanced Search":Te,"List Bar":Le,"Search Results Bar":we};l.AdvancedSearch=I,l.InputGroupWrapper=G,l.ListBar=M,l.ListBarSearch=y,l.ListBarSearchInfo=A,l.ListBarSortBy=O,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_34_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_34_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_34_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_34_0__hash_9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_34_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_34_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_34_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_34_0__hash_9h4p708{display:inline-block;position:relative}.pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p709{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_34_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_34_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_34_0__hash_9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_list-bar__version_8_34_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_34_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_34_0__hash_9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70f>.sps-button>button{padding:.25rem}.pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70e>button{height:1.875rem}.pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70a>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70d>.sps-input-group{flex-wrap:nowrap}.pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70d>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_list-bar__version_8_34_0__hash_9h4p70d>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_list-bar__version_8_34_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_34_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_34_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_34_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_34_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_34_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_34_0__hash_9h4p70d svg{margin-bottom:0}.pkg_sps-woodland_list-bar__version_8_34_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_34_0__hash_9h4p701>.pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc0>.pkg_sps-woodland_list-bar__version_8_34_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_34_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_34_0__hash_1gxdcgc3{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc5:first-child{margin-left:0}.pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc6:last-child{margin-right:0}.pkg_sps-woodland_list-bar__version_8_34_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_34_0__hash_1gxdcgc7:hover{background:#d2d4d4}.pkg_sps-woodland_list-bar__version_8_34_0__hash_1gxdcgc8{padding:.5rem;width:5.25rem}.pkg_sps-woodland_list-bar__version_8_34_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_34_0__hash_q4fj411{display:block}.pkg_sps-woodland_list-bar__version_8_34_0__hash_q4fj413{padding:1rem}.pkg_sps-woodland_list-bar__version_8_34_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_34_0__hash_q4fj415{text-align:right}.pkg_sps-woodland_list-bar__version_8_34_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.34.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,13 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.9.0",
|
|
31
31
|
"react-dom": "^16.9.0",
|
|
32
|
-
"@sps-woodland/
|
|
33
|
-
"@sps-woodland/
|
|
34
|
-
"@sps-woodland/
|
|
35
|
-
"@sps-woodland/
|
|
36
|
-
"@
|
|
37
|
-
"@
|
|
32
|
+
"@sps-woodland/buttons": "8.34.0",
|
|
33
|
+
"@sps-woodland/core": "8.34.0",
|
|
34
|
+
"@sps-woodland/tabs": "8.34.0",
|
|
35
|
+
"@sps-woodland/tags": "8.34.0",
|
|
36
|
+
"@sps-woodland/tokens": "8.34.0",
|
|
37
|
+
"@spscommerce/ds-react": "8.34.0",
|
|
38
|
+
"@spscommerce/i18n": "8.34.0"
|
|
38
39
|
},
|
|
39
40
|
"devDependencies": {
|
|
40
41
|
"@react-stately/collections": "^3.3.3",
|
|
@@ -43,13 +44,14 @@
|
|
|
43
44
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
44
45
|
"react": "^16.9.0",
|
|
45
46
|
"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.
|
|
47
|
+
"@sps-woodland/buttons": "8.34.0",
|
|
48
|
+
"@sps-woodland/core": "8.34.0",
|
|
49
|
+
"@sps-woodland/tabs": "8.34.0",
|
|
50
|
+
"@sps-woodland/tags": "8.34.0",
|
|
51
|
+
"@sps-woodland/tokens": "8.34.0",
|
|
52
|
+
"@spscommerce/ds-react": "8.34.0",
|
|
53
|
+
"@spscommerce/ds-shared": "8.34.0",
|
|
54
|
+
"@spscommerce/i18n": "8.34.0"
|
|
53
55
|
},
|
|
54
56
|
"scripts": {
|
|
55
57
|
"build": "pnpm run build:js && pnpm run build:types",
|