@sps-woodland/list-bar 8.53.31 → 8.55.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 +85 -8
- package/lib/index.umd.cjs +71 -2
- package/lib/style.css +1 -1
- package/package.json +5 -5
package/lib/index.js
CHANGED
|
@@ -4,14 +4,14 @@ import * as e from "react";
|
|
|
4
4
|
import { code as r } from "@spscommerce/utils";
|
|
5
5
|
import { AdvancedSearch as h } from "@sps-woodland/core/advanced-search";
|
|
6
6
|
import { Button as p } from "@sps-woodland/core/button";
|
|
7
|
-
import { SpsFocusedTask as S, SpsTable as f, SpsTableHead as v, SpsTableHeader as
|
|
8
|
-
import { SearchResultsBar as
|
|
7
|
+
import { SpsFocusedTask as S, SpsTable as f, SpsTableHead as v, SpsTableHeader as s, SpsTableBody as b, SpsTableRow as n, SpsTableCell as a } from "@spscommerce/ds-react";
|
|
8
|
+
import { SearchResultsBar as B } from "@sps-woodland/core/search-results-bar";
|
|
9
9
|
const T = {
|
|
10
10
|
components: [h],
|
|
11
11
|
examples: {
|
|
12
12
|
general: {
|
|
13
13
|
label: "General Usage",
|
|
14
|
-
description: ({ NavigateTo: t, Link:
|
|
14
|
+
description: ({ NavigateTo: t, Link: o }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ 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).'), /* @__PURE__ */ e.createElement("p", null, "Advanced Search works in conjunction with the", " ", /* @__PURE__ */ e.createElement(t, { to: "list-toolbar" }, "List Bar"), " and", " ", /* @__PURE__ */ e.createElement(t, { to: "search-results-bar" }, "Search Results"), " components. Refer to those pages for additional details."), /* @__PURE__ */ e.createElement("p", null, "Use the following guidelines when including Advanced Search on your page:", /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement("li", null, "The Advanced Search Panel can contain any number of input fields."), /* @__PURE__ */ 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", " ", /* @__PURE__ */ e.createElement(o, { to: "/style-and-layout/grid/" }, "SPS Grid"), " and guidelines for", " ", /* @__PURE__ */ e.createElement(t, { to: "form" }, "Form Layouts"), "."))))
|
|
15
15
|
},
|
|
16
16
|
basic: {
|
|
17
17
|
label: "Basic Usage",
|
|
@@ -270,12 +270,12 @@ const T = {
|
|
|
270
270
|
}
|
|
271
271
|
};
|
|
272
272
|
function L() {
|
|
273
|
-
const [t,
|
|
273
|
+
const [t, o] = e.useState(!1);
|
|
274
274
|
function l() {
|
|
275
|
-
|
|
275
|
+
o(!1);
|
|
276
276
|
}
|
|
277
277
|
function c() {
|
|
278
|
-
|
|
278
|
+
o(!0);
|
|
279
279
|
}
|
|
280
280
|
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(p, { kind: "link", onClick: c }, "View Content Order Example"), /* @__PURE__ */ e.createElement(S, { isOpen: t, onClose: l }, /* @__PURE__ */ e.createElement("h1", null, "Content Order"), /* @__PURE__ */ e.createElement(
|
|
281
281
|
"img",
|
|
@@ -284,7 +284,7 @@ function L() {
|
|
|
284
284
|
alt: "A List Toolbar with labels on each section",
|
|
285
285
|
className: "w-100 mb-3"
|
|
286
286
|
}
|
|
287
|
-
), /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(
|
|
287
|
+
), /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, { style: { width: "80px" } }, "Order"), /* @__PURE__ */ e.createElement(s, null, "Section"), /* @__PURE__ */ e.createElement(s, null, "Notes")), /* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(a, null, "Checkbox"), /* @__PURE__ */ e.createElement(a, null, "For Content Rows and Content Tiles only.")), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(a, null, "Search/Filter Box"), /* @__PURE__ */ e.createElement(a, null)), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(a, null, "Saved Search"), /* @__PURE__ */ e.createElement(a, null)), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(a, null, "Advanced Search"), /* @__PURE__ */ e.createElement(a, null, "For more information, visit the Advanced Search page.")), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(a, null, "Column Editor"), /* @__PURE__ */ e.createElement(a, { wrap: 500 }, "Use for Tables only. For more information, visit the Column Editor page.")), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "6")), /* @__PURE__ */ e.createElement(a, null, "List View Selector"), /* @__PURE__ */ e.createElement(a, null)), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "7")), /* @__PURE__ */ e.createElement(a, null, "Sorting"), /* @__PURE__ */ e.createElement(a, null)), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "8")), /* @__PURE__ */ e.createElement(a, null, "Buttons"), /* @__PURE__ */ e.createElement(a, { 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."))))));
|
|
288
288
|
}
|
|
289
289
|
const g = {
|
|
290
290
|
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."),
|
|
@@ -482,6 +482,83 @@ const g = {
|
|
|
482
482
|
}
|
|
483
483
|
`
|
|
484
484
|
},
|
|
485
|
+
multiValueTextArea: {
|
|
486
|
+
description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Filter + Multi Value Text Input (Textarea)"), /* @__PURE__ */ e.createElement("p", null, "Use ", /* @__PURE__ */ e.createElement("code", null, "preferTextAreaInput"), " on Multi Value Text Input when users need to paste or type many values at once, such as a list of order numbers.")),
|
|
487
|
+
react: r`
|
|
488
|
+
import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
|
|
489
|
+
import { Button } from "@sps-woodland/buttons";
|
|
490
|
+
import { SpsMultiValueTextInput } from "@spscommerce/ds-react";
|
|
491
|
+
|
|
492
|
+
function Component() {
|
|
493
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
494
|
+
orderNumbers: ["10245", "10246"],
|
|
495
|
+
});
|
|
496
|
+
|
|
497
|
+
function handleSearch(event) {
|
|
498
|
+
console.log(event, formValue.orderNumbers)
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
return (
|
|
502
|
+
<ListBar>
|
|
503
|
+
<ListBarSearch onSubmit={handleSearch}>
|
|
504
|
+
<SpsMultiValueTextInput
|
|
505
|
+
value={formValue.orderNumbers}
|
|
506
|
+
formMeta={formMeta.fields.orderNumbers}
|
|
507
|
+
placeholder="Filter by order number"
|
|
508
|
+
isSingleLine
|
|
509
|
+
preferTextAreaInput
|
|
510
|
+
textAreaRows={6}
|
|
511
|
+
/>
|
|
512
|
+
<Button kind="icon" icon="search" type="submit" />
|
|
513
|
+
</ListBarSearch>
|
|
514
|
+
</ListBar>
|
|
515
|
+
)
|
|
516
|
+
}
|
|
517
|
+
`
|
|
518
|
+
},
|
|
519
|
+
multiValueTextAreaWithSelect: {
|
|
520
|
+
description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Select + Multi Value Text Input (Textarea)"), /* @__PURE__ */ e.createElement("p", null, "Use ", /* @__PURE__ */ e.createElement("code", null, "preferTextAreaInput"), " on Multi Value Text Input alongside a Select when users need to choose a category and paste or type many values at once.")),
|
|
521
|
+
react: r`
|
|
522
|
+
import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
|
|
523
|
+
import { Button } from "@sps-woodland/buttons";
|
|
524
|
+
import { SpsSelect, SpsMultiValueTextInput } from "@spscommerce/ds-react";
|
|
525
|
+
|
|
526
|
+
function Component() {
|
|
527
|
+
const filterKeys = ["Document Type", "Sender Name", "Receiver Name"];
|
|
528
|
+
|
|
529
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
530
|
+
orderNumbers: ["10245", "10246"],
|
|
531
|
+
filterOption: filterKeys[0],
|
|
532
|
+
});
|
|
533
|
+
|
|
534
|
+
function handleSearch(event) {
|
|
535
|
+
console.log(event, formValue.orderNumbers)
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
return (
|
|
539
|
+
<ListBar>
|
|
540
|
+
<ListBarSearch onSubmit={handleSearch}>
|
|
541
|
+
<SpsSelect
|
|
542
|
+
options={filterKeys}
|
|
543
|
+
formMeta={formMeta.fields.filterOption}
|
|
544
|
+
value={formValue.filterOption}
|
|
545
|
+
notClearable
|
|
546
|
+
/>
|
|
547
|
+
<SpsMultiValueTextInput
|
|
548
|
+
value={formValue.orderNumbers}
|
|
549
|
+
formMeta={formMeta.fields.orderNumbers}
|
|
550
|
+
placeholder="Filter by order number"
|
|
551
|
+
isSingleLine
|
|
552
|
+
preferTextAreaInput
|
|
553
|
+
textAreaRows={6}
|
|
554
|
+
/>
|
|
555
|
+
<Button kind="icon" icon="search" type="submit" />
|
|
556
|
+
</ListBarSearch>
|
|
557
|
+
</ListBar>
|
|
558
|
+
)
|
|
559
|
+
}
|
|
560
|
+
`
|
|
561
|
+
},
|
|
485
562
|
filter: {
|
|
486
563
|
description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Filter"), /* @__PURE__ */ e.createElement("p", null, "Use Filter to find list item(s) starting from a populated list.")),
|
|
487
564
|
react: r`
|
|
@@ -1228,7 +1305,7 @@ const g = {
|
|
|
1228
1305
|
}
|
|
1229
1306
|
}
|
|
1230
1307
|
}, x = {
|
|
1231
|
-
components: [
|
|
1308
|
+
components: [B],
|
|
1232
1309
|
examples: {
|
|
1233
1310
|
basic: {
|
|
1234
1311
|
label: "Basic",
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(n,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("@sps-woodland/core/list-bar"),require("react"),require("@spscommerce/utils"),require("@sps-woodland/core/advanced-search"),require("@sps-woodland/core/button"),require("@spscommerce/ds-react"),require("@sps-woodland/core/search-results-bar")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/list-bar","react","@spscommerce/utils","@sps-woodland/core/advanced-search","@sps-woodland/core/button","@spscommerce/ds-react","@sps-woodland/core/search-results-bar"],o):(n=typeof globalThis<"u"?globalThis:n||self,o(n.ListBar={},n.spsWoodlandCoreListBar,n.react,n.spscommerceUtils,n.spsWoodlandCoreAdvancedSearch,n.spsWoodlandCoreButton,n.spscommerceDsReact,n.spsWoodlandCoreSearchResultsBar))})(this,(function(n,o,i,r,d,u,t,m){"use strict";function
|
|
1
|
+
(function(n,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("@sps-woodland/core/list-bar"),require("react"),require("@spscommerce/utils"),require("@sps-woodland/core/advanced-search"),require("@sps-woodland/core/button"),require("@spscommerce/ds-react"),require("@sps-woodland/core/search-results-bar")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/list-bar","react","@spscommerce/utils","@sps-woodland/core/advanced-search","@sps-woodland/core/button","@spscommerce/ds-react","@sps-woodland/core/search-results-bar"],o):(n=typeof globalThis<"u"?globalThis:n||self,o(n.ListBar={},n.spsWoodlandCoreListBar,n.react,n.spscommerceUtils,n.spsWoodlandCoreAdvancedSearch,n.spsWoodlandCoreButton,n.spscommerceDsReact,n.spsWoodlandCoreSearchResultsBar))})(this,(function(n,o,i,r,d,u,t,m){"use strict";function p(a){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const l in a)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(a,l);Object.defineProperty(s,l,c.get?c:{enumerable:!0,get:()=>a[l]})}}return s.default=a,Object.freeze(s)}const e=p(i),h={components:[d.AdvancedSearch],examples:{general:{label:"General Usage",description:({NavigateTo:a,Link:s})=>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(a,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(a,{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(s,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(a,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:a})=>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(a,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:r.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";
|
|
@@ -375,6 +375,75 @@
|
|
|
375
375
|
</ListBar>
|
|
376
376
|
)
|
|
377
377
|
}
|
|
378
|
+
`},multiValueTextArea:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Filter + Multi Value Text Input (Textarea)"),e.createElement("p",null,"Use ",e.createElement("code",null,"preferTextAreaInput")," on Multi Value Text Input when users need to paste or type many values at once, such as a list of order numbers.")),react:r.code`
|
|
379
|
+
import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
|
|
380
|
+
import { Button } from "@sps-woodland/buttons";
|
|
381
|
+
import { SpsMultiValueTextInput } from "@spscommerce/ds-react";
|
|
382
|
+
|
|
383
|
+
function Component() {
|
|
384
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
385
|
+
orderNumbers: ["10245", "10246"],
|
|
386
|
+
});
|
|
387
|
+
|
|
388
|
+
function handleSearch(event) {
|
|
389
|
+
console.log(event, formValue.orderNumbers)
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
return (
|
|
393
|
+
<ListBar>
|
|
394
|
+
<ListBarSearch onSubmit={handleSearch}>
|
|
395
|
+
<SpsMultiValueTextInput
|
|
396
|
+
value={formValue.orderNumbers}
|
|
397
|
+
formMeta={formMeta.fields.orderNumbers}
|
|
398
|
+
placeholder="Filter by order number"
|
|
399
|
+
isSingleLine
|
|
400
|
+
preferTextAreaInput
|
|
401
|
+
textAreaRows={6}
|
|
402
|
+
/>
|
|
403
|
+
<Button kind="icon" icon="search" type="submit" />
|
|
404
|
+
</ListBarSearch>
|
|
405
|
+
</ListBar>
|
|
406
|
+
)
|
|
407
|
+
}
|
|
408
|
+
`},multiValueTextAreaWithSelect:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Select + Multi Value Text Input (Textarea)"),e.createElement("p",null,"Use ",e.createElement("code",null,"preferTextAreaInput")," on Multi Value Text Input alongside a Select when users need to choose a category and paste or type many values at once.")),react:r.code`
|
|
409
|
+
import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
|
|
410
|
+
import { Button } from "@sps-woodland/buttons";
|
|
411
|
+
import { SpsSelect, SpsMultiValueTextInput } from "@spscommerce/ds-react";
|
|
412
|
+
|
|
413
|
+
function Component() {
|
|
414
|
+
const filterKeys = ["Document Type", "Sender Name", "Receiver Name"];
|
|
415
|
+
|
|
416
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
417
|
+
orderNumbers: ["10245", "10246"],
|
|
418
|
+
filterOption: filterKeys[0],
|
|
419
|
+
});
|
|
420
|
+
|
|
421
|
+
function handleSearch(event) {
|
|
422
|
+
console.log(event, formValue.orderNumbers)
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
return (
|
|
426
|
+
<ListBar>
|
|
427
|
+
<ListBarSearch onSubmit={handleSearch}>
|
|
428
|
+
<SpsSelect
|
|
429
|
+
options={filterKeys}
|
|
430
|
+
formMeta={formMeta.fields.filterOption}
|
|
431
|
+
value={formValue.filterOption}
|
|
432
|
+
notClearable
|
|
433
|
+
/>
|
|
434
|
+
<SpsMultiValueTextInput
|
|
435
|
+
value={formValue.orderNumbers}
|
|
436
|
+
formMeta={formMeta.fields.orderNumbers}
|
|
437
|
+
placeholder="Filter by order number"
|
|
438
|
+
isSingleLine
|
|
439
|
+
preferTextAreaInput
|
|
440
|
+
textAreaRows={6}
|
|
441
|
+
/>
|
|
442
|
+
<Button kind="icon" icon="search" type="submit" />
|
|
443
|
+
</ListBarSearch>
|
|
444
|
+
</ListBar>
|
|
445
|
+
)
|
|
446
|
+
}
|
|
378
447
|
`},filter:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Filter"),e.createElement("p",null,"Use Filter to find list item(s) starting from a populated list.")),react:r.code`
|
|
379
448
|
import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
|
|
380
449
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -1083,4 +1152,4 @@
|
|
|
1083
1152
|
</>
|
|
1084
1153
|
)
|
|
1085
1154
|
}
|
|
1086
|
-
`}}}}},v={"Advanced Search":
|
|
1155
|
+
`}}}}},v={"Advanced Search":h,"List Bar":f,"Search Results Bar":b};n.MANIFEST=v,Object.keys(o).forEach(a=>{a!=="default"&&!Object.prototype.hasOwnProperty.call(n,a)&&Object.defineProperty(n,a,{enumerable:!0,get:()=>o[a]})}),Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_core__family_list-
|
|
1
|
+
.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwv1{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_core__family_list-bar__version_8_55_0__hash_uzzgwv2{width:calc(1280px - 2.5rem);border-radius:0;transform:translate(-50%);position:fixed;top:3.75rem;left:50%;z-index:999}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwv2: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_core__family_list-bar__version_8_55_0__hash_uzzgwv4{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwv5{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_core__family_list-bar__version_8_55_0__hash_uzzgwv6{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwv7{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwv8{display:inline-block;position:relative}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwv9{margin-left:.25rem}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwva{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_core__family_list-bar__version_8_55_0__hash_uzzgwvb{display:inline-block;height:2rem;margin-left:auto;text-align:right;vertical-align:middle;white-space:nowrap}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwvc{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwve{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_core__family_list-bar__version_8_55_0__hash_uzzgwve:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwvf>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwvf>.sps-button>button{padding:.25rem}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwve>button{height:1.875rem}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwva>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwvd>.sps-input-group{flex-wrap:nowrap}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwvd>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwvd>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwvd>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwvd>.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_core__family_list-bar__version_8_55_0__hash_uzzgwvd>.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_core__family_list-bar__version_8_55_0__hash_uzzgwvd>.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_core__family_list-bar__version_8_55_0__hash_uzzgwvd>.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_core__family_list-bar__version_8_55_0__hash_uzzgwvd>.sps-input-group>.sps-multi-select>.sps-text-input>.sps-form-control{border-radius:0;border-left:0;height:32px}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwvd>.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_core__family_list-bar__version_8_55_0__hash_uzzgwvd svg{margin-bottom:0}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_1o1g57h1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_uzzgwv1>.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_1o1g57h0>.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_1o1g57h1{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_core__family_list-bar__version_8_55_0__hash_1o1g57h2{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_core__family_list-bar__version_8_55_0__hash_1o1g57h3{margin-left:.25rem}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_1o1g57h4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_1o1g57h5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_1o1g57h5:first-child{margin-left:0}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_1o1g57h6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_1o1g57h6:last-child{margin-right:0}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_1o1g57h7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_1o1g57h7:hover{background:#d2d4d4}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_am9pfc0{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_core__family_list-bar__version_8_55_0__hash_am9pfc1,.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_am9pfc3{display:block}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_am9pfc5{padding:1rem}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_am9pfc7{display:none}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_am9pfc8{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_core__family_list-bar__version_8_55_0__hash_am9pfc9{text-align:right}.pkg_sps-woodland_core__family_list-bar__version_8_55_0__hash_am9pfc8>*{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.55.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,15 +30,15 @@
|
|
|
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/core": "8.
|
|
34
|
-
"@spscommerce/ds-react": "8.
|
|
33
|
+
"@sps-woodland/core": "8.55.0",
|
|
34
|
+
"@spscommerce/ds-react": "8.55.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@spscommerce/utils": "9.1.1",
|
|
38
38
|
"react": "16.14.0",
|
|
39
39
|
"react-dom": "16.14.0",
|
|
40
|
-
"@sps-woodland/core": "8.
|
|
41
|
-
"@spscommerce/ds-react": "8.
|
|
40
|
+
"@sps-woodland/core": "8.55.0",
|
|
41
|
+
"@spscommerce/ds-react": "8.55.0"
|
|
42
42
|
},
|
|
43
43
|
"scripts": {
|
|
44
44
|
"build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
|