@sps-woodland/list-bar 8.29.6 → 8.29.7
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 +18 -17
- package/lib/index.umd.cjs +9 -7
- package/lib/style.css +1 -1
- package/package.json +14 -14
package/lib/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { Tag as w } from "@sps-woodland/tags";
|
|
|
5
5
|
import { lockToAnimationFrames as ae, code as o } from "@spscommerce/utils";
|
|
6
6
|
import { SpsInputGroup as re, SpsCheckbox as se, SpsDropdown as ne, SpsForm as oe, SpsFocusedTask as le, SpsTable as ce, SpsTableHead as ie, SpsTableHeader as x, SpsTableBody as de, SpsTableRow as v, SpsTableCell as n } from "@spscommerce/ds-react";
|
|
7
7
|
import { sprinkles as ue } from "@sps-woodland/tokens";
|
|
8
|
-
var me = "pkg_sps-woodland_list-
|
|
8
|
+
var me = "pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc0", pe = "pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc1", he = "pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc2", Se = "pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc3", fe = "pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc4", ve = "pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc5", be = "pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc6", Be = "pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc7", _e = "pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc8";
|
|
9
9
|
function C({
|
|
10
10
|
results: t,
|
|
11
11
|
selections: a,
|
|
@@ -80,7 +80,7 @@ var Te = (t, a, r) => {
|
|
|
80
80
|
for (var [p, i] of t.compoundVariants)
|
|
81
81
|
Te(p, s, t.defaultVariants) && (r += " " + i);
|
|
82
82
|
return r;
|
|
83
|
-
}, Ee = j({ defaultClassName: "pkg_sps-woodland_list-
|
|
83
|
+
}, Ee = j({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p701", variantClassNames: { pinned: { true: "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p702", false: "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), Le = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p704", ye = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p705", xe = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p706", we = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p707", Ae = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p708", Ce = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p709", ke = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70a", U = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70b", Re = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70c", Fe = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70d", Me = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70e", Ie = "pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70f";
|
|
84
84
|
function Oe({
|
|
85
85
|
children: t
|
|
86
86
|
}) {
|
|
@@ -101,7 +101,7 @@ function k({
|
|
|
101
101
|
function r(s) {
|
|
102
102
|
s.preventDefault(), t && t(s);
|
|
103
103
|
}
|
|
104
|
-
return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className:
|
|
104
|
+
return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className: Re, noValidate: !0 }, /* @__PURE__ */ e.createElement(re, { className: Fe }, /* @__PURE__ */ e.createElement(Oe, null, a)));
|
|
105
105
|
}
|
|
106
106
|
b.set(k, {
|
|
107
107
|
name: "ListBarSearch",
|
|
@@ -109,12 +109,12 @@ b.set(k, {
|
|
|
109
109
|
onSubmit: { type: "FormEventHandler" }
|
|
110
110
|
}
|
|
111
111
|
});
|
|
112
|
-
function
|
|
112
|
+
function R({
|
|
113
113
|
children: t
|
|
114
114
|
}) {
|
|
115
115
|
return /* @__PURE__ */ e.createElement("div", null, t);
|
|
116
116
|
}
|
|
117
|
-
b.set(
|
|
117
|
+
b.set(R, {
|
|
118
118
|
name: "ListBarSearchInfo"
|
|
119
119
|
});
|
|
120
120
|
function K({
|
|
@@ -131,11 +131,11 @@ function K({
|
|
|
131
131
|
pinToolbar: i = !0,
|
|
132
132
|
children: B,
|
|
133
133
|
className: g,
|
|
134
|
-
...
|
|
134
|
+
...F
|
|
135
135
|
}) {
|
|
136
136
|
const { t: W } = e.useContext(A);
|
|
137
137
|
let L = null;
|
|
138
|
-
const [S, M] = e.useState(!1), T = e.useRef(null), f = e.useRef(null), { "data-testid": I } =
|
|
138
|
+
const [S, M] = e.useState(!1), T = e.useRef(null), f = e.useRef(null), { "data-testid": I } = F, O = ae(() => {
|
|
139
139
|
if (T.current && i) {
|
|
140
140
|
const d = T.current.getBoundingClientRect();
|
|
141
141
|
d && d.height > 0 && d.top <= 60 && (typeof L == "number" ? window.scrollY < L && (L = null, M(!1)) : (L = window.scrollY, M(!0), a && a(!1)));
|
|
@@ -177,13 +177,13 @@ function K({
|
|
|
177
177
|
D
|
|
178
178
|
] = X(B, [
|
|
179
179
|
{ type: k },
|
|
180
|
-
{ type:
|
|
180
|
+
{ type: R },
|
|
181
181
|
{ type: C },
|
|
182
182
|
{
|
|
183
183
|
custom: (d) => b.isWoodlandComponent(d) && b.get(d).name === "Tabs"
|
|
184
184
|
}
|
|
185
185
|
]);
|
|
186
|
-
return /* @__PURE__ */ e.createElement("div", { className: y(g), ref: f, ...
|
|
186
|
+
return /* @__PURE__ */ e.createElement("div", { className: y(g), ref: f, ...F }, /* @__PURE__ */ e.createElement("div", { className: Ee({ pinned: S }), ref: T }, N ? $(N, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: Le }, !!l && /* @__PURE__ */ e.createElement("div", { className: ye }, /* @__PURE__ */ e.createElement(
|
|
187
187
|
se,
|
|
188
188
|
{
|
|
189
189
|
checked: u,
|
|
@@ -209,7 +209,6 @@ b.set(K, {
|
|
|
209
209
|
activeTab: { type: "Tab" },
|
|
210
210
|
advancedSearch: { type: "{ isOpen: boolean, enteredFields: number }" },
|
|
211
211
|
onToggleAdvancedSearch: { type: "(boolean) => void" },
|
|
212
|
-
onTabChange: { type: "(Tab) => void" },
|
|
213
212
|
title: { type: "string" },
|
|
214
213
|
onToolbarPinned: { type: "(boolean) => void" },
|
|
215
214
|
selectable: { type: "boolean" },
|
|
@@ -254,7 +253,7 @@ b.set(q, {
|
|
|
254
253
|
defaultOption: { type: "SortOption" }
|
|
255
254
|
}
|
|
256
255
|
});
|
|
257
|
-
var Ve = j({ defaultClassName: "pkg_sps-woodland_list-
|
|
256
|
+
var Ve = j({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj410", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj411", false: "pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ne = "pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj413", De = "pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj414", Pe = "pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj415";
|
|
258
257
|
function H({
|
|
259
258
|
formArray: t,
|
|
260
259
|
formGroup: a,
|
|
@@ -579,7 +578,7 @@ function Ue() {
|
|
|
579
578
|
}
|
|
580
579
|
const je = {
|
|
581
580
|
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."),
|
|
582
|
-
components: [K, k,
|
|
581
|
+
components: [K, k, R, q],
|
|
583
582
|
examples: {
|
|
584
583
|
general: {
|
|
585
584
|
label: "General Usage",
|
|
@@ -1389,19 +1388,21 @@ const je = {
|
|
|
1389
1388
|
|
|
1390
1389
|
function Component() {
|
|
1391
1390
|
const filterKeys = ["Document Type", "Sender Name", "Receiver Name"];
|
|
1391
|
+
|
|
1392
|
+
const [selectedTab, setSelectedTab] = React.useState("tab1");
|
|
1393
|
+
|
|
1392
1394
|
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
1393
1395
|
searchText: "",
|
|
1394
1396
|
})
|
|
1395
1397
|
|
|
1396
1398
|
function handleTabChange(tab) {
|
|
1399
|
+
setSelectedTab(tab);
|
|
1397
1400
|
console.log(tab);
|
|
1398
1401
|
}
|
|
1399
1402
|
|
|
1400
1403
|
return (
|
|
1401
|
-
<ListBar
|
|
1402
|
-
|
|
1403
|
-
>
|
|
1404
|
-
<Tabs>
|
|
1404
|
+
<ListBar>
|
|
1405
|
+
<Tabs selectedKey={selectedTab} onSelectionChange={handleTabChange}>
|
|
1405
1406
|
<Item key="tab1" title="Tab 1">
|
|
1406
1407
|
<ListBarSearch>
|
|
1407
1408
|
<SpsTextInput formMeta={formMeta.fields.searchText} value={formValue.searchText} placeholder="Search fields" />
|
|
@@ -1752,7 +1753,7 @@ export {
|
|
|
1752
1753
|
Oe as InputGroupWrapper,
|
|
1753
1754
|
K as ListBar,
|
|
1754
1755
|
k as ListBarSearch,
|
|
1755
|
-
|
|
1756
|
+
R as ListBarSearchInfo,
|
|
1756
1757
|
q as ListBarSortBy,
|
|
1757
1758
|
Je as MANIFEST,
|
|
1758
1759
|
C as SearchResultsBar
|
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,A,o,r,H){"use strict";function W(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(a,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return a.default=t,Object.freeze(a)}const e=W(g);var Y="pkg_sps-woodland_list-bar__version_8_29_6__hash_1gxdcgc0",z="pkg_sps-woodland_list-bar__version_8_29_6__hash_1gxdcgc1",Z="pkg_sps-woodland_list-bar__version_8_29_6__hash_1gxdcgc2",J="pkg_sps-woodland_list-bar__version_8_29_6__hash_1gxdcgc3",Q="pkg_sps-woodland_list-bar__version_8_29_6__hash_1gxdcgc4",X="pkg_sps-woodland_list-bar__version_8_29_6__hash_1gxdcgc5",$="pkg_sps-woodland_list-bar__version_8_29_6__hash_1gxdcgc6",ee="pkg_sps-woodland_list-bar__version_8_29_6__hash_1gxdcgc7",te="pkg_sps-woodland_list-bar__version_8_29_6__hash_1gxdcgc8";function y({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:p,...f}){const{t:d}=e.useContext(c.I18nContext),h=a?Object.keys(a).reduce((S,u)=>(a[u].length>0&&(S[u]=a[u]),S),{}):{};return e.createElement("div",{className:z,...f},t!=null&&e.createElement("div",{className:Z},e.createElement("span",null,d("design-system:searchResultsBar.results",{defaultValue:"Results:"})),e.createElement(A.Tag,{className:J,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:Q},Object.keys(h).length>0?Object.keys(h).map((S,u)=>e.createElement(e.Fragment,null,e.createElement("span",{key:u,className:X},S,":"),h[S].map((_,T)=>e.createElement(A.Tag,{className:$,key:T,kind:"key"},e.createElement("span",null,_))))):e.createElement("span",{className:"font-italic"},n||d("design-system:searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:ee},e.createElement(B.Button,{className:te,kind:"link",onClick:s},d("design-system:searchResultsBar.clearResults",{defaultValue:"Clear Results"}))))}c.Metadata.set(y,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function ae(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function I(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 O(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?I(Object(n),!0).forEach(function(s){ae(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):I(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var re=(t,a,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=a[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},V=t=>a=>{var n=t.defaultClassName,s=O(O({},t.defaultVariants),a);for(var i in s){var p,f=(p=s[i])!==null&&p!==void 0?p:t.defaultVariants[i];if(f!=null){var d=f;typeof d=="boolean"&&(d=d===!0?"true":"false");var h=t.variantClassNames[i][d];h&&(n+=" "+h)}}for(var[S,u]of t.compoundVariants)re(S,s,t.defaultVariants)&&(n+=" "+u);return n},ne=V({defaultClassName:"pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),se="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p704",oe="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p705",le="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p706",ce="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p707",ie="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p708",de="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p709",ue="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p70a",N="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p70b",me="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p70c",pe="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p70d",he="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p70e",Se="pkg_sps-woodland_list-bar__version_8_29_6__hash_9h4p70f";function R({children:t}){const a=c.modChildren(t,n=>n.type===B.Button?[{className:c.cl(n.props.className,he)}]:[]);return e.createElement(e.Fragment,null,a)}function w({onSubmit:t,children:a}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:me,noValidate:!0},e.createElement(r.SpsInputGroup,{className:pe},e.createElement(R,null,a)))}c.Metadata.set(w,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}c.Metadata.set(C,{name:"ListBarSearchInfo"});function k({advancedSearch:t,onToggleAdvancedSearch:a,title:n,onToolbarPinned:s,selectable:i,isSelected:p,isIndeterminate:f,disableSelection:d=!1,onSelectionChange:h,pinResultsBar:S,pinToolbar:u=!0,children:_,className:T,...D}){const{t:ye}=e.useContext(c.I18nContext);let x=null;const[v,P]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":G}=D,j=o.lockToAnimationFrames(()=>{if(E.current&&u){const m=E.current.getBoundingClientRect();m&&m.height>0&&m.top<=60&&(typeof x=="number"?window.scrollY<x&&(x=null,P(!1)):(x=window.scrollY,P(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",j),()=>{window.removeEventListener("scroll",j)}),[]);const L=e.useRef();e.useLayoutEffect(()=>{if(b.current&&E.current&&u){if(v&&L.current)b.current.style.height=L.current.height,b.current.style.width=L.current.width,b.current.style.marginBottom=L.current.marginBottom;else if(!v){b.current.style.height="",b.current.style.width="",b.current.style.marginBottom="";const m=window.getComputedStyle(E.current);L.current={height:m.height,width:m.width,marginBottom:m.marginBottom}}}},[v]);function we(){a&&a(!(t!=null&&t.isOpen))}function Ce(m){s&&s(m)}e.useEffect(()=>{Ce(v)},[v]);const[q,xe,Ae,[U],K]=c.selectChildren(_,[{type:w},{type:C},{type:y},{custom:m=>c.Metadata.isWoodlandComponent(m)&&c.Metadata.get(m).name==="Tabs"}]);return e.createElement("div",{className:c.cl(T),ref:b,...D},e.createElement("div",{className:ne({pinned:v}),ref:E},U?c.addProps(U,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:se},!!i&&e.createElement("div",{className:oe},e.createElement(r.SpsCheckbox,{checked:p,disabled:d,indeterminate:f,onChange:()=>{h==null||h(!p)}})),e.createElement("div",{className:le},!n&&q,!n&&xe,q.length>0&&t&&e.createElement("div",{className:ce,"data-testid":`${G}__advanced-search`},e.createElement("div",{className:ie},e.createElement(B.Button,{kind:"link",onClick:we},ye("design-system:listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:de,kind:"info","data-testid":`${G}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:ue},n)),v?e.createElement("div",{className:N},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},K)):e.createElement("div",{className:N},K)),e.createElement("div",{className:Y},(!v||S)&&Ae))))}c.Metadata.set(k,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},onTabChange:{type:"(Tab) => void"},title:{type:"string"},onToolbarPinned:{type:"(boolean) => void"},selectable:{type:"boolean"},disableSelection:{type:"boolean",default:"false"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"}}});function F({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:i,...p}){const f=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{n&&n(d)}]);return e.createElement(r.SpsDropdown,{className:c.cl(i,Se),icon:(a==null?void 0:a.icon)||(s==null?void 0:s.icon),label:(a==null?void 0:a.label)||(s==null?void 0:s.label),options:f})}c.Metadata.set(F,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var fe=V({defaultClassName:"pkg_sps-woodland_list-bar__version_8_29_6__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_29_6__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_29_6__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ve="pkg_sps-woodland_list-bar__version_8_29_6__hash_q4fj413",be="pkg_sps-woodland_list-bar__version_8_29_6__hash_q4fj414",Be="pkg_sps-woodland_list-bar__version_8_29_6__hash_q4fj415";function M({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:p,isOpen:f,onClear:d,className:h,children:S,...u}){const{t:_}=e.useContext(c.I18nContext);function T(){d&&d()}return e.createElement("div",{className:c.cl(fe({open:f})),...u},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:ve},S),e.createElement("div",{className:be},p&&e.createElement("div",{id:"footer_links"},c.contentOf(p)),e.createElement("div",{className:Be},e.createElement(B.Button,{kind:"default",type:"button",className:H.sprinkles({mr:"sm"}),onClick:T,disabled:i},_("design-system:advancedSearch.clear",{defaultValue:"Clear Fields"})),e.createElement(B.Button,{kind:"key",type:"submit",disabled:i},_("design-system:advancedSearch.search",{defaultValue:"Search"}))))))}c.Metadata.set(M,{name:"Advanced Search",props:{formArray:{type:"SpsFormArray<any>"},formGroup:{type:"SpsFormGroup"},formMeta:{type:"SpsFormSetMeta<any>"},onSubmit:{type:"React.FormEventHandler"},controlsDisabled:{type:"boolean"},footerLinks:{type:"React.ReactNode | (() => React.ReactNode)"},isOpen:{type:"boolean"},onClear:{type:"() => void"}}});const _e={components:[M],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'),e.createElement("p",null,"Advanced Search works in conjunction with the"," ",e.createElement(t,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(t,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),e.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",e.createElement("ul",null,e.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),e.createElement("li",null,"The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the"," ",e.createElement(a,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(t,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ",e.createElement(t,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:o.code`
|
|
1
|
+
(function(l,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/buttons"),require("@sps-woodland/tags"),require("@spscommerce/utils"),require("@spscommerce/ds-react"),require("@sps-woodland/tokens")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/buttons","@sps-woodland/tags","@spscommerce/utils","@spscommerce/ds-react","@sps-woodland/tokens"],g):(l=typeof globalThis<"u"?globalThis:l||self,g(l.ListBar={},l.React,l.core,l.buttons,l.tags,l.utils,l.dsReact,l.tokens))})(this,function(l,g,c,B,A,o,r,H){"use strict";function W(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(a,s,n.get?n:{enumerable:!0,get:()=>t[s]})}}return a.default=t,Object.freeze(a)}const e=W(g);var Y="pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc0",z="pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc1",Z="pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc2",J="pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc3",Q="pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc4",X="pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc5",$="pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc6",ee="pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc7",te="pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc8";function y({results:t,selections:a,zeroStateText:s,onClear:n,className:i,children:p,...f}){const{t:d}=e.useContext(c.I18nContext),h=a?Object.keys(a).reduce((S,u)=>(a[u].length>0&&(S[u]=a[u]),S),{}):{};return e.createElement("div",{className:z,...f},t!=null&&e.createElement("div",{className:Z},e.createElement("span",null,d("design-system:searchResultsBar.results",{defaultValue:"Results:"})),e.createElement(A.Tag,{className:J,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:Q},Object.keys(h).length>0?Object.keys(h).map((S,u)=>e.createElement(e.Fragment,null,e.createElement("span",{key:u,className:X},S,":"),h[S].map((_,T)=>e.createElement(A.Tag,{className:$,key:T,kind:"key"},e.createElement("span",null,_))))):e.createElement("span",{className:"font-italic"},s||d("design-system:searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:ee},e.createElement(B.Button,{className:te,kind:"link",onClick:n},d("design-system:searchResultsBar.clearResults",{defaultValue:"Clear Results"}))))}c.Metadata.set(y,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function ae(t,a,s){return a in t?Object.defineProperty(t,a,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[a]=s,t}function I(t,a){var s=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);a&&(n=n.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),s.push.apply(s,n)}return s}function O(t){for(var a=1;a<arguments.length;a++){var s=arguments[a]!=null?arguments[a]:{};a%2?I(Object(s),!0).forEach(function(n){ae(t,n,s[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(s)):I(Object(s)).forEach(function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(s,n))})}return t}var re=(t,a,s)=>{for(var n of Object.keys(t)){var i;if(t[n]!==((i=a[n])!==null&&i!==void 0?i:s[n]))return!1}return!0},V=t=>a=>{var s=t.defaultClassName,n=O(O({},t.defaultVariants),a);for(var i in n){var p,f=(p=n[i])!==null&&p!==void 0?p:t.defaultVariants[i];if(f!=null){var d=f;typeof d=="boolean"&&(d=d===!0?"true":"false");var h=t.variantClassNames[i][d];h&&(s+=" "+h)}}for(var[S,u]of t.compoundVariants)re(S,n,t.defaultVariants)&&(s+=" "+u);return s},se=V({defaultClassName:"pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),ne="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p704",oe="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p705",le="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p706",ce="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p707",ie="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p708",de="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p709",ue="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70a",R="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70b",me="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70c",pe="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70d",he="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70e",Se="pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70f";function N({children:t}){const a=c.modChildren(t,s=>s.type===B.Button?[{className:c.cl(s.props.className,he)}]:[]);return e.createElement(e.Fragment,null,a)}function w({onSubmit:t,children:a}){function s(n){n.preventDefault(),t&&t(n)}return e.createElement("form",{onSubmit:s,className:me,noValidate:!0},e.createElement(r.SpsInputGroup,{className:pe},e.createElement(N,null,a)))}c.Metadata.set(w,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}c.Metadata.set(C,{name:"ListBarSearchInfo"});function k({advancedSearch:t,onToggleAdvancedSearch:a,title:s,onToolbarPinned:n,selectable:i,isSelected:p,isIndeterminate:f,disableSelection:d=!1,onSelectionChange:h,pinResultsBar:S,pinToolbar:u=!0,children:_,className:T,...D}){const{t:ye}=e.useContext(c.I18nContext);let x=null;const[v,P]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":G}=D,j=o.lockToAnimationFrames(()=>{if(E.current&&u){const m=E.current.getBoundingClientRect();m&&m.height>0&&m.top<=60&&(typeof x=="number"?window.scrollY<x&&(x=null,P(!1)):(x=window.scrollY,P(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",j),()=>{window.removeEventListener("scroll",j)}),[]);const L=e.useRef();e.useLayoutEffect(()=>{if(b.current&&E.current&&u){if(v&&L.current)b.current.style.height=L.current.height,b.current.style.width=L.current.width,b.current.style.marginBottom=L.current.marginBottom;else if(!v){b.current.style.height="",b.current.style.width="",b.current.style.marginBottom="";const m=window.getComputedStyle(E.current);L.current={height:m.height,width:m.width,marginBottom:m.marginBottom}}}},[v]);function we(){a&&a(!(t!=null&&t.isOpen))}function Ce(m){n&&n(m)}e.useEffect(()=>{Ce(v)},[v]);const[q,xe,Ae,[U],K]=c.selectChildren(_,[{type:w},{type:C},{type:y},{custom:m=>c.Metadata.isWoodlandComponent(m)&&c.Metadata.get(m).name==="Tabs"}]);return e.createElement("div",{className:c.cl(T),ref:b,...D},e.createElement("div",{className:se({pinned:v}),ref:E},U?c.addProps(U,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:ne},!!i&&e.createElement("div",{className:oe},e.createElement(r.SpsCheckbox,{checked:p,disabled:d,indeterminate:f,onChange:()=>{h==null||h(!p)}})),e.createElement("div",{className:le},!s&&q,!s&&xe,q.length>0&&t&&e.createElement("div",{className:ce,"data-testid":`${G}__advanced-search`},e.createElement("div",{className:ie},e.createElement(B.Button,{kind:"link",onClick:we},ye("design-system:listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:de,kind:"info","data-testid":`${G}__entered-fields`},e.createElement("span",null,t.enteredFields))),s&&e.createElement("div",{className:ue},s)),v?e.createElement("div",{className:R},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},K)):e.createElement("div",{className:R},K)),e.createElement("div",{className:Y},(!v||S)&&Ae))))}c.Metadata.set(k,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},title:{type:"string"},onToolbarPinned:{type:"(boolean) => void"},selectable:{type:"boolean"},disableSelection:{type:"boolean",default:"false"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"}}});function F({options:t,activeOption:a,onSortChange:s,defaultOption:n,className:i,...p}){const f=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{s&&s(d)}]);return e.createElement(r.SpsDropdown,{className:c.cl(i,Se),icon:(a==null?void 0:a.icon)||(n==null?void 0:n.icon),label:(a==null?void 0:a.label)||(n==null?void 0:n.label),options:f})}c.Metadata.set(F,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var fe=V({defaultClassName:"pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ve="pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj413",be="pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj414",Be="pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj415";function M({formArray:t,formGroup:a,formMeta:s,onSubmit:n,controlsDisabled:i,footerLinks:p,isOpen:f,onClear:d,className:h,children:S,...u}){const{t:_}=e.useContext(c.I18nContext);function T(){d&&d()}return e.createElement("div",{className:c.cl(fe({open:f})),...u},e.createElement(r.SpsForm,{onSubmit:n,formArray:t,formGroup:a,formMeta:s},e.createElement("div",{className:ve},S),e.createElement("div",{className:be},p&&e.createElement("div",{id:"footer_links"},c.contentOf(p)),e.createElement("div",{className:Be},e.createElement(B.Button,{kind:"default",type:"button",className:H.sprinkles({mr:"sm"}),onClick:T,disabled:i},_("design-system:advancedSearch.clear",{defaultValue:"Clear Fields"})),e.createElement(B.Button,{kind:"key",type:"submit",disabled:i},_("design-system:advancedSearch.search",{defaultValue:"Search"}))))))}c.Metadata.set(M,{name:"Advanced Search",props:{formArray:{type:"SpsFormArray<any>"},formGroup:{type:"SpsFormGroup"},formMeta:{type:"SpsFormSetMeta<any>"},onSubmit:{type:"React.FormEventHandler"},controlsDisabled:{type:"boolean"},footerLinks:{type:"React.ReactNode | (() => React.ReactNode)"},isOpen:{type:"boolean"},onClear:{type:"() => void"}}});const _e={components:[M],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 ge(){const[t,a]=e.useState(!1);function
|
|
219
|
+
`}}}}};function ge(){const[t,a]=e.useState(!1);function s(){a(!1)}function n(){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:n},"View Content Order Example"),e.createElement(r.SpsFocusedTask,{isOpen:t,onClose:s},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 Te={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:[k,w,C,F],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(ge,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() {
|
|
@@ -777,19 +777,21 @@
|
|
|
777
777
|
|
|
778
778
|
function Component() {
|
|
779
779
|
const filterKeys = ["Document Type", "Sender Name", "Receiver Name"];
|
|
780
|
+
|
|
781
|
+
const [selectedTab, setSelectedTab] = React.useState("tab1");
|
|
782
|
+
|
|
780
783
|
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
781
784
|
searchText: "",
|
|
782
785
|
})
|
|
783
786
|
|
|
784
787
|
function handleTabChange(tab) {
|
|
788
|
+
setSelectedTab(tab);
|
|
785
789
|
console.log(tab);
|
|
786
790
|
}
|
|
787
791
|
|
|
788
792
|
return (
|
|
789
|
-
<ListBar
|
|
790
|
-
|
|
791
|
-
>
|
|
792
|
-
<Tabs>
|
|
793
|
+
<ListBar>
|
|
794
|
+
<Tabs selectedKey={selectedTab} onSelectionChange={handleTabChange}>
|
|
793
795
|
<Item key="tab1" title="Tab 1">
|
|
794
796
|
<ListBarSearch>
|
|
795
797
|
<SpsTextInput formMeta={formMeta.fields.searchText} value={formValue.searchText} placeholder="Search fields" />
|
|
@@ -1081,4 +1083,4 @@
|
|
|
1081
1083
|
</>
|
|
1082
1084
|
)
|
|
1083
1085
|
}
|
|
1084
|
-
`}}}}},Le={"Advanced Search":_e,"List Bar":Te,"Search Results Bar":Ee};l.AdvancedSearch=M,l.InputGroupWrapper=
|
|
1086
|
+
`}}}}},Le={"Advanced Search":_e,"List Bar":Te,"Search Results Bar":Ee};l.AdvancedSearch=M,l.InputGroupWrapper=N,l.ListBar=k,l.ListBarSearch=w,l.ListBarSearchInfo=C,l.ListBarSortBy=F,l.MANIFEST=Le,l.SearchResultsBar=y,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_29_7__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_29_7__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_29_7__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_29_7__hash_9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_29_7__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_29_7__hash_9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}.pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p708{display:inline-block;position:relative}.pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p709{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_29_7__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_29_7__hash_9h4p70b{display:inline-block;height:2rem;margin-left:.5rem;text-align:right;vertical-align:middle;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_list-bar__version_8_29_7__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_29_7__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_29_7__hash_9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70f>.sps-button>button{padding:.25rem}.pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70e>button{height:1.875rem}.pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70a>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70d>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_list-bar__version_8_29_7__hash_9h4p70d>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_list-bar__version_8_29_7__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_29_7__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_29_7__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_29_7__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_29_7__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_29_7__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_29_7__hash_9h4p70d svg{margin-bottom:0}.pkg_sps-woodland_list-bar__version_8_29_7__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_29_7__hash_9h4p701>.pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc0>.pkg_sps-woodland_list-bar__version_8_29_7__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_29_7__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_29_7__hash_1gxdcgc3{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc5:first-child{margin-left:0}.pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc6:last-child{margin-right:0}.pkg_sps-woodland_list-bar__version_8_29_7__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_29_7__hash_1gxdcgc7:hover{background:#d2d4d4}.pkg_sps-woodland_list-bar__version_8_29_7__hash_1gxdcgc8{padding:.5rem;width:5.25rem}.pkg_sps-woodland_list-bar__version_8_29_7__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_29_7__hash_q4fj411{display:block}.pkg_sps-woodland_list-bar__version_8_29_7__hash_q4fj413{padding:1rem}.pkg_sps-woodland_list-bar__version_8_29_7__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_29_7__hash_q4fj415{text-align:right}.pkg_sps-woodland_list-bar__version_8_29_7__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.29.
|
|
4
|
+
"version": "8.29.7",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/list-bar",
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.9.0",
|
|
31
31
|
"react-dom": "^16.9.0",
|
|
32
|
-
"@sps-woodland/buttons": "8.29.
|
|
33
|
-
"@sps-woodland/core": "8.29.
|
|
34
|
-
"@sps-woodland/tabs": "8.29.
|
|
35
|
-
"@sps-woodland/tags": "8.29.
|
|
36
|
-
"@sps-woodland/tokens": "8.29.
|
|
37
|
-
"@spscommerce/ds-react": "8.29.
|
|
32
|
+
"@sps-woodland/buttons": "8.29.7",
|
|
33
|
+
"@sps-woodland/core": "8.29.7",
|
|
34
|
+
"@sps-woodland/tabs": "8.29.7",
|
|
35
|
+
"@sps-woodland/tags": "8.29.7",
|
|
36
|
+
"@sps-woodland/tokens": "8.29.7",
|
|
37
|
+
"@spscommerce/ds-react": "8.29.7"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@react-stately/collections": "^3.3.3",
|
|
@@ -43,13 +43,13 @@
|
|
|
43
43
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
44
44
|
"react": "^16.9.0",
|
|
45
45
|
"react-dom": "^16.9.0",
|
|
46
|
-
"@sps-woodland/buttons": "8.29.
|
|
47
|
-
"@sps-woodland/core": "8.29.
|
|
48
|
-
"@sps-woodland/tabs": "8.29.
|
|
49
|
-
"@sps-woodland/tags": "8.29.
|
|
50
|
-
"@sps-woodland/tokens": "8.29.
|
|
51
|
-
"@spscommerce/ds-react": "8.29.
|
|
52
|
-
"@spscommerce/ds-shared": "8.29.
|
|
46
|
+
"@sps-woodland/buttons": "8.29.7",
|
|
47
|
+
"@sps-woodland/core": "8.29.7",
|
|
48
|
+
"@sps-woodland/tabs": "8.29.7",
|
|
49
|
+
"@sps-woodland/tags": "8.29.7",
|
|
50
|
+
"@sps-woodland/tokens": "8.29.7",
|
|
51
|
+
"@spscommerce/ds-react": "8.29.7",
|
|
52
|
+
"@spscommerce/ds-shared": "8.29.7"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "pnpm run build:js && pnpm run build:types",
|