@sps-woodland/list-bar 8.0.0-rc1

package/lib/index.cjs.js

@@ -0,0 +1,1047 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const W=require("react"),l=require("@sps-woodland/core"),T=require("@sps-woodland/buttons"),A=require("@sps-woodland/tags"),o=require("@spscommerce/utils"),r=require("@spscommerce/ds-react"),Y=require("@sps-woodland/tokens");function z(t){if(t&&t.__esModule)return 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(W);function Z(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 _(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){Z(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 J=(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},P=t=>a=>{var n=t.defaultClassName,s=_(_({},t.defaultVariants),a);for(var i in s){var m,h=(m=s[i])!==null&&m!==void 0?m:t.defaultVariants[i];if(h!=null){var c=h;typeof c=="boolean"&&(c=c===!0?"true":"false");var S=t.variantClassNames[i][c];S&&(n+=" "+S)}}for(var[d,p]of t.compoundVariants)J(d,s,t.defaultVariants)&&(n+=" "+p);return n},Q="_9h4p70e",X=P({defaultClassName:"_9h4p701",variantClassNames:{pinned:{true:"_9h4p702",false:"_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),$="_9h4p709",ee="_9h4p70a",te="_9h4p707",ae="_9h4p708",re="_9h4p704",D="_9h4p70b",ne="_9h4p706",se="_9h4p70d",oe="_9h4p70c",le="_9h4p705",ce="_9h4p70f";function G({children:t}){const a=l.modChildren(t,n=>n.type===T.Button?[{className:l.cl(n.props.className,Q)}]:[]);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:oe,noValidate:!0},e.createElement(r.SpsInputGroup,{className:se},e.createElement(G,null,a)))}l.Metadata.set(y,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}l.Metadata.set(C,{name:"ListBarSearchInfo"});var ie="_1gxdcgc1",de="_1gxdcgc8",ue="_1gxdcgc7",me="_1gxdcgc2",pe="_1gxdcgc5",he="_1gxdcgc6",Se="_1gxdcgc4",fe="_1gxdcgc0",ve="_1gxdcgc3";function x({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:m,...h}){const{t:c}=e.useContext(l.I18nContext),S=a?Object.keys(a).reduce((d,p)=>(a[p].length>0&&(d[p]=a[p]),d),{}):{};return e.createElement("div",{className:ie,...h},t!=null&&e.createElement("div",{className:me},e.createElement("span",null,c("design-system:searchResultsBar.results")),e.createElement(A.Tag,{className:ve,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:Se},Object.keys(S).length>0?Object.keys(S).map((d,p)=>e.createElement(e.Fragment,null,e.createElement("span",{key:p,className:pe},d,":"),S[d].map((b,B)=>e.createElement(A.Tag,{className:he,key:B,kind:"key"},e.createElement("span",null,b))))):e.createElement("span",{className:"font-italic"},n||c("design-system:searchResultsBar.noAdvancedSearchSelections"))),e.createElement("div",{className:ue},e.createElement(T.Button,{className:de,kind:"link",onClick:s},c("design-system:searchResultsBar.clearResults"))))}l.Metadata.set(x,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function w({advancedSearch:t,onToggleAdvancedSearch:a,title:n,onToolbarPinned:s,selectable:i,isSelected:m,isIndeterminate:h,onSelectionChange:c,pinResultsBar:S,pinToolbar:d=!0,children:p,className:b,...B}){const{t:j}=e.useContext(l.I18nContext);let L=null;const[f,M]=e.useState(!1),g=e.useRef(null),v=e.useRef(null),I=o.lockToAnimationFrames(()=>{if(g.current&&d){const u=g.current.getBoundingClientRect();u&&u.height>0&&u.top<=60&&(typeof L=="number"?window.scrollY<L&&(L=null,M(!1)):(L=window.scrollY,M(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",I),()=>{window.removeEventListener("scroll",I)}),[]);const E=e.useRef();e.useLayoutEffect(()=>{if(v.current&&g.current&&d){if(f&&E.current)v.current.style.height=E.current.height,v.current.style.width=E.current.width,v.current.style.marginBottom=E.current.marginBottom;else if(!f){v.current.style.height="",v.current.style.width="",v.current.style.marginBottom="";const u=window.getComputedStyle(g.current);E.current={height:u.height,width:u.width,marginBottom:u.marginBottom}}}},[f]);function q(){a&&a(!(t!=null&&t.isOpen))}function U(u){s&&s(u)}e.useEffect(()=>{U(f)},[f]);const[O,H,K,[k],N]=l.selectChildren(p,[{type:y},{type:C},{type:x},{custom:u=>l.Metadata.isWoodlandComponent(u)&&l.Metadata.get(u).name==="Tabs"}]);return e.createElement("div",{className:l.cl(b),ref:v,...B},e.createElement("div",{className:X({pinned:f}),ref:g,...B},k?l.addProps(k,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:re},!!i&&e.createElement("div",{className:le},e.createElement(r.SpsCheckbox,{checked:m,indeterminate:h,onChange:()=>{c==null||c(!m)}})),e.createElement("div",{className:ne},!n&&O,!n&&H,O.length>0&&t&&e.createElement("div",{className:te},e.createElement("div",{className:ae},e.createElement(T.Button,{kind:"link",onClick:q},j("design-system:listToolbar.advancedSearchToggle"))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:$,kind:"info"},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:ee},n)),f?e.createElement("div",{className:D},e.createElement(l.PortalContext.Provider,{value:{fixed:!0}},N)):e.createElement("div",{className:D},N)),e.createElement("div",{className:fe},(!f||f&&S)&&K))))}l.Metadata.set(w,{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"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"}}});function R({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:i,...m}){const h=(t||[]).map(c=>[{label:c.label,icon:c.icon},()=>{n&&n(c)}]);return e.createElement(r.SpsDropdown,{className:l.cl(i,ce),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:h})}l.Metadata.set(R,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var be=P({defaultClassName:"q4fj410",variantClassNames:{open:{true:"q4fj411",false:"q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),Be="q4fj414",Te="q4fj415",ge="q4fj413";function F({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:m,isOpen:h,onClear:c,className:S,children:d,...p}){const{t:b}=e.useContext(l.I18nContext);function B(){c&&c()}return e.createElement("div",{className:l.cl(be({open:h})),...p},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:ge},d),e.createElement("div",{className:Be},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:Te},e.createElement(T.Button,{kind:"default",type:"button",className:Y.sprinkles({mr:"sm"}),onClick:B,disabled:i},b("design-system:advancedSearch.clear")),e.createElement(T.Button,{kind:"key",type:"submit",disabled:i},b("design-system:advancedSearch.search"))))))}l.Metadata.set(F,{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 Ee={components:[F],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`
+            import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { grid } from "@sps-woodland/tokens";
+            import { SpsLabel, SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component() {
+              const [toolbarSearchText, setToolbarSearchText] = React.useState("");
+              const [advSearch, patchAdvSearch] = usePatchReducer({
+                isOpen: false,
+                enteredFields: 0,
+              });
+
+              const initValue = {
+                sender: "",
+                receiver: "",
+                doctype: "",
+                status: "",
+              };
+              const { formValue, formMeta, updateForm } = useSpsForm(initValue);
+
+              React.useEffect(() => {
+                // Simulate that someone has entered a search term
+                updateForm({
+                  ...formValue,
+                  receiver: "Walmart"
+                });
+                patchAdvSearch({ enteredFields: 1 });
+              }, []);
+
+              function handleToolbarSearchChange(event) {
+                setToolbarSearchText(event.target.value);
+              }
+
+              function handleToggleAdvancedSearch(isOpen) {
+                patchAdvSearch({ isOpen });
+              }
+
+              function handleAdvancedSearchSubmit() {
+                patchAdvSearch({ enteredFields: diff(initValue, formValue).length });
+              }
+
+              function handleAdvancedSearchClear() {
+                updateForm(initValue);
+                patchAdvSearch({ enteredFields: 0 });
+              }
+
+              return (
+                <>
+                  <ListBar
+                    advancedSearch={advSearch}
+                    onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                  >
+                    <ListBarSearch>
+                      <SpsTextInput
+                        value={toolbarSearchText}
+                        onChange={handleToolbarSearchChange}
+                        disabled={advSearch.isOpen}
+                        title="Search"
+                      />
+                      <Button kind="icon" icon="search" disabled={advSearch.isOpen} data-testid="search-button" />
+                    </ListBarSearch>
+                  </ListBar>
+                  <AdvancedSearch
+                    {...advSearch}
+                    formMeta={formMeta}
+                    onSubmit={handleAdvancedSearchSubmit}
+                    onClear={handleAdvancedSearchClear}
+                    data-testid="advanced-search"
+                  >
+                    <div className={grid.root}>
+                      <div className={grid[4]}>
+                        <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>
+                        <SpsTextInput formMeta={formMeta.fields.sender}
+                          value={formValue.sender}
+                        />
+                      </div>
+                      <div className={grid[4]}>
+                        <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>
+                        <SpsTextInput formMeta={formMeta.fields.receiver}
+                          value={formValue.receiver}
+                        />
+                      </div>
+                      <div className={grid[4]}>
+                        <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>
+                        <SpsTextInput formMeta={formMeta.fields.doctype}
+                          value={formValue.doctype}
+                        />
+                      </div>
+                      <div className={grid[4]}>
+                        <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>
+                        <SpsTextInput formMeta={formMeta.fields.status}
+                          value={formValue.status}
+                        />
+                      </div>
+                    </div>
+                  </AdvancedSearch>
+                </>
+              )
+            }
+          `}}},footerLink:{label:"Footer Link",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Footer Link can be included in the Advanced Search footer (visible only when the menu is exposed). The Footer Link is used to link to preferences that control the Advanced Search panel display (such as customized fields and defaults).")),examples:{footerLink:{react:o.code`
+            import { ListBar, ListBarSearch, AdvancedSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component(props) {
+              const [toolbarSearchText, setToolbarSearchText] = React.useState("");
+              const [advSearch, setAdvSearch] = React.useState({
+                isOpen: false
+              });
+
+              function handleToggleAdvancedSearch(isOpen) {
+                setAdvSearch({ isOpen });
+              }
+
+              function handleToolbarSearchChange(event) {
+                setToolbarSearchText(event.target.value);
+              }
+
+              return (
+                <>
+                  <ListBar advancedSearch={advSearch}
+                    onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                  >
+                    <ListBarSearch>
+                      <SpsTextInput value={toolbarSearchText}
+                        onChange={handleToolbarSearchChange}
+                        disabled={advSearch.isOpen}
+                        title="Search"
+                      />
+                      <Button kind="icon"
+                        icon="search"
+                        disabled={advSearch.isOpen}
+                      />
+                    </ListBarSearch>
+                  </ListBar>
+                  <AdvancedSearch {...advSearch}
+                    footerLinks={
+                      <Button kind="link" icon="gear">
+                          Advanced Search Defaults
+                      </Button>
+                    }
+                    data-testid="advanced-search"
+                  >
+                    <br />
+                    <br />
+                    <br />
+                    <br />
+                  </AdvancedSearch>
+                </>
+              )
+            }
+          `}}},disabledButtons:{label:"Disabling the Clear/Search Buttons",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"The Search and Clear Fields buttons in the footer can be disabled when no input fields in the Advanced Search Panel contain values.")),examples:{disabledButtons:{react:o.code`
+            import { ListBar, ListBarSearch, AdvancedSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component() {
+              const [toolbarSearchText, setToolbarSearchText] = React.useState("");
+              const [advSearch, setAdvSearch] = React.useState({
+                isOpen: false,
+                controlsDisabled: true,
+              });
+
+              function handleToggleAdvancedSearch(isOpen) {
+                setAdvSearch({ ...advSearch, isOpen });
+              }
+
+              function handleToolbarSearchChange(event) {
+                setToolbarSearchText(event.target.value);
+              }
+
+              return (
+                <>
+                  <ListBar advancedSearch={advSearch}
+                    onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                  >
+                    <ListBarSearch>
+                      <SpsTextInput value={toolbarSearchText}
+                        onChange={handleToolbarSearchChange}
+                        disabled={advSearch.isOpen}
+                        title="Search"
+                      />
+                      <Button kind="icon"
+                        icon="search"
+                        disabled={advSearch.isOpen}
+                      />
+                    </ListBarSearch>
+                  </ListBar>
+                  <AdvancedSearch {...advSearch}>
+                    <br />
+                    <br />
+                    <br />
+                    <br />
+                  </AdvancedSearch>
+                </>
+              )
+            }
+          `}}},advancedSearchOnly:{label:'"Advanced Search Only" List Bar',description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Certain scenarios may require an Advanced Search Panel to display by default (eschewing a basic search). In these scenarios a title will replace the search input in the List Bar."),e.createElement("p",null,"To achieve an Advanced Search Only effect, remove the basic search input from the List Bar.")),examples:{withTitle:{react:o.code`
+            import { ListBar, AdvancedSearch } from "@sps-woodland/list-bar";
+
+            function Component() {
+              const [advSearch, patchAdvSearch] = usePatchReducer({
+                isOpen: true,
+              });
+
+              return (
+                <>
+                  <ListBar title="Advanced Search" advancedSearch={advSearch} />
+                  <AdvancedSearch isOpen={advSearch.isOpen} data-testid="advanced-search">
+                    <br />
+                    <br />
+                    <br />
+                    <br />
+                  </AdvancedSearch>
+                </>
+              )
+            }
+          `}}}}};function Le(){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(T.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 ye={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:[w,y,C,R],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(Le,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`
+            import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                searchText: "",
+              });
+          
+              function handleSearch(event) {
+                console.log(event, formValue.searchText)
+              }
+              
+              const [selectedColors, setSelectedColors] = React.useState([]);
+              colors = ['Red', 'Blue', 'Green']
+          
+              const isIndeterminate = selectedColors.length > 0 && selectedColors.length < colors.length
+              const isSelected = selectedColors.length > 0
+        
+              return (
+                <>
+                  <ListBar
+                    selectable
+                    isIndeterminate={isIndeterminate}
+                    isSelected={isSelected}
+                    onSelectionChange={() => {
+                      if (isIndeterminate || isSelected) {
+                        setSelectedColors([])
+                      } else {
+                          etSelectedColors(colors);
+                      }
+                    }}
+                    data-testid="list-bar"
+                  >
+                    <ListBarSearch onSubmit={handleSearch}>
+                      <SpsTextInput
+                        value={formValue.searchText}
+                        formMeta={formMeta.fields.searchText}
+                        icon={SpsIcon.FILTER}
+                        placeholder="Filter fields"
+                      />
+                    </ListBarSearch>
+                  </ListBar>
+                  {colors.map((color) => (
+                    <SpsCheckbox 
+                        checked={selectedColors.includes(color)} 
+                        inline 
+                        label={color} 
+                        onChange={() => {
+                          if (selectedColors.includes(color)) {
+                            setSelectedColors(selectedColors.filter((c) => c !== color))
+                          } else { 
+                            setSelectedColors([...selectedColors, color])
+                          }
+                        }
+                      }
+                    />
+                  ))}
+                </>
+              )
+            }
+          `}}},searchAndFilter:{label:"Search + Filter Inputs",description:()=>e.createElement("p",null,"Use Search and Filter inputs to make it easier to quickly find list items."),examples:{search:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search"),e.createElement("p",null,"Use Search to find list item(s) starting from an empty list.")),react:o.code`
+            import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                  searchText: "",
+              });
+
+              function handleSearch(event) {
+                  console.log(event, formValue.searchText)
+              }
+
+              return (
+                <ListBar>
+                  <ListBarSearch onSubmit={handleSearch}>
+                    <SpsTextInput
+                      value={formValue.searchText}
+                      formMeta={formMeta.fields.searchText}
+                      placeholder="Search fields"
+                    />
+                    <Button kind="icon" icon="search" type="submit" />
+                  </ListBarSearch>
+                </ListBar>
+              )
+            }
+          `},searchAndSelect:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search + Select"),e.createElement("p",null,"Use Select to search for list item(s) in a particular category.")),react:o.code`
+            import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component() {
+              const filterKeys = ["Document Type", "Sender Name", "Receiver Name"];
+
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                  searchText: "",
+                  filterOption: filterKeys[0],
+              });
+
+              function handleSearch(event) {
+                  console.log(event, formValue.searchText)
+              }
+
+              return (
+                <ListBar>
+                  <ListBarSearch onSubmit={handleSearch}>
+                    <SpsSelect
+                      options={filterKeys}
+                      formMeta={formMeta.fields.filterOption}
+                      value={formValue.filterOption}
+                      notClearable
+                    />
+                    <SpsTextInput
+                        value={formValue.searchText}
+                        formMeta={formMeta.fields.searchText}
+                        placeholder="Search fields"
+                    />
+                    <Button kind="icon" icon="search" type="submit" />
+                  </ListBarSearch>
+                </ListBar>
+              )
+            }
+        `},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:o.code`
+            import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsTextInput } from "@spscommerce/ds-react";
+            
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                  searchText: "",
+              });
+
+              function handleSearch(event) {
+                  console.log(event, formValue.searchText)
+              }
+
+              return (
+                <ListBar>
+                  <ListBarSearch onSubmit={handleSearch}>
+                      <SpsTextInput
+                        value={formValue.searchText}
+                        formMeta={formMeta.fields.searchText}
+                        icon={SpsIcon.FILTER}
+                        placeholder="Filter fields"
+                      />
+                  </ListBarSearch>
+                </ListBar>
+              )
+            }
+          `},filterAndSelect:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Filter + Select"),e.createElement("p",null,"Use Select to filter list item(s) in a particular category.")),react:o.code`
+            import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component() {
+              const filterKeys = ["Document Type", "Sender Name", "Receiver Name"];
+
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                  searchText: "",
+                  filterOption: filterKeys[0],
+              });
+
+              function handleSearch(event) {
+                  console.log(event, formValue.searchText)
+              }
+
+              return (
+                  <ListBar>
+                    <ListBarSearch onSubmit={handleSearch}>
+                      <SpsSelect
+                          options={filterKeys}
+                          formMeta={formMeta.fields.filterOption}
+                          value={formValue.filterOption}
+                          notClearable
+                      />
+                      <SpsTextInput
+                          value={formValue.searchText}
+                          formMeta={formMeta.fields.searchText}
+                          icon={SpsIcon.FILTER}
+                          placeholder="Filter fields"
+                      />
+                    </ListBarSearch>
+                  </ListBar>
+              )
+            }
+          `},searchInfo:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search Info"),e.createElement("p",null,"Use SpsListToolbarSearchInfo component to add additional information about your search.")),react:o.code`
+            import { ListBar, ListBarSearch, ListBarSearchInfo } from "@sps-woodland/list-bar";
+            import { Icon } from "@sps-woodland/core";
+            import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component() {
+              const filterKeys = ["Key Item ID", "Document Type", "Sender Name", "Receiver Name"];
+
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                  searchText: "",
+                  filterOption: filterKeys[0],
+              });
+
+              function handleSearch(event) {
+                  console.log(event, formValue.searchText)
+              }
+
+              return (
+                <ListBar>
+                  <ListBarSearch onSubmit={handleSearch}>
+                    <SpsSelect
+                      options={filterKeys}
+                      formMeta={formMeta.fields.filterOption}
+                      value={formValue.filterOption}
+                      notClearable
+                    />
+                    <SpsTextInput
+                      value={formValue.searchText}
+                      formMeta={formMeta.fields.searchText}
+                      icon={SpsIcon.FILTER}
+                      placeholder="Filter fields"
+                    />
+                  </ListBarSearch>
+                  <ListBarSearchInfo>
+                    <div style={{ display: 'flex', alignItems: 'center'}}>
+                      <span  style={{ marginRight: 5 }} >
+                        Key Item ID = Vendor Part Number
+                      </span>
+                      <Icon icon="info-circle" className="blue200"/>
+                    </div>
+                  </ListBarSearchInfo>
+                </ListBar>
+              )
+            }
+          `}}},advancedSearch:{label:"Advanced Search",description:({NavigateTo:t})=>e.createElement("p",null,"Include the Advanced Search feature when more complex options are required to narrow down search results. For more information, visit the"," ",e.createElement(t,{to:"advanced-search"},"Advanced Search")," page."),examples:{advancedSearch:{react:o.code`
+            import { ListBar, ListBarSearch, AdvancedSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component() {
+              const [advSearch, setAdvSearch] = React.useState({
+                isOpen: false,
+                controlsDisabled: true,
+              });
+
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                  searchText: "",
+              });
+
+              function handleToggleAdvancedSearch(isOpen) {
+                  setAdvSearch({ isOpen });
+              }
+
+              return (
+                <>
+                  <ListBar
+                    advancedSearch={advSearch}
+                    onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                  >
+                    <ListBarSearch>
+                      <SpsTextInput
+                        value={formValue.searchText}
+                        formMeta={formMeta.fields.searchText}
+                        placeholder="Search fields"
+                      />
+                      <Button kind="icon" icon="search" />
+                    </ListBarSearch>
+                  </ListBar>
+                  <AdvancedSearch {...advSearch}>
+                    <i>insert form here</i>
+                  </AdvancedSearch>
+                </>
+              )
+            }
+          `},withResultsBar:{description:({NavigateTo:t})=>e.createElement("p",null,"You can include ",e.createElement(t,{to:"search-results-bar"},"Search Results Bar"),"."),react:o.code`
+            import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsTextInput, SpsLabel, SpsMultiselect } from "@spscommerce/ds-react";
+
+            function Component() {
+              const senderOptions = ["Aktie Sports", "FGL Sports","Modells Sporting Goods", "Perry Sport", "Sportman Warhouse Australia"];
+              const receiverOptions = ["FGL Sports", "Foot Asylum", "Hervis", "Lovell Rugby", "Aktie Sports"];    
+              const doctypeOptions = [".doc", ".txt", ".pdf"];    
+              const statusOptions = ["pending", "done"];
+          
+              const [advSearch, setAdvSearch] = React.useState({
+                isOpen: false
+              });
+              
+              const [showSearchBar, setShowSearchBar] = React.useState(true);
+              
+              const [selections, setSelections] = React.useState();
+              const [results, setResults] = React.useState(0);
+              
+              const initValue = {
+                searchText: "",
+                sender: [],
+                receiver: [],
+                doctype: [],
+                status: [],
+              };
+
+              const { formValue, formMeta, updateForm } = useSpsForm(initValue);
+              
+              function handleToggleAdvancedSearch(isOpen) {
+                setAdvSearch({ isOpen });
+              }
+              
+              function handleAdvancedSearchSubmit() {
+                console.log("submit");
+                setShowSearchBar(true);
+                setSelections(omit(formValue, "searchText"));
+                setResults(Math.floor(Math.random() * 100));
+              }
+          
+              function handleAdvancedSearchClear() {
+                updateForm(initValue);
+              }
+          
+              return (
+                <>
+                  <ListBar advancedSearch={advSearch}
+                    onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                  >
+                    <ListBarSearch>
+                      <SpsTextInput
+                        value={formValue.searchText}
+                        formMeta={formMeta.fields.searchText}
+                        placeholder="Search fields"
+                      />
+                      <Button kind="icon" icon="search" />
+                    </ListBarSearch>
+                    <Button className={sprinkles({ mr: "sm" })} kind="icon" icon="download-cloud" />
+                    <Button className={sprinkles({ mr: "sm" })}>Button</Button>
+                    <Button kind="key">Button</Button>
+                    {showSearchBar && (
+                      <SearchResultsBar
+                        results={results}
+                        selections={selections}
+                        onClear={() => setShowSearchBar(false)}
+                      />
+                    )}
+                  </ListBar>
+                  <AdvancedSearch {...advSearch}
+                    formMeta={formMeta}
+                    onSubmit={handleAdvancedSearchSubmit}
+                    onClear={handleAdvancedSearchClear}
+                  >
+                    <div className="sfg-row">
+                      <div className="sfg-col-4">
+                        <SpsLabel for={formMeta.fields.sender}>Sender</SpsLabel>
+                        <SpsMultiSelect
+                          formMeta={formMeta.fields.sender}
+                          value={formValue.sender}
+                          options={senderOptions}
+                        />
+                      </div>
+                      <div className="sfg-col-4">
+                        <SpsLabel for={formMeta.fields.receiver}>Receiver</SpsLabel>
+                        <SpsMultiSelect
+                          formMeta={formMeta.fields.receiver}
+                          value={formValue.receiver}
+                          options={receiverOptions}
+                        />
+                        </div>
+                        <div className="sfg-col-4">
+                          <SpsLabel for={formMeta.fields.doctype}>Document Type</SpsLabel>
+                          <SpsMultiSelect
+                            formMeta={formMeta.fields.doctype}
+                            value={formValue.doctype}
+                            options={doctypeOptions}
+                          />
+                        </div>
+                        <div className="sfg-col-4">
+                          <SpsLabel for={formMeta.fields.status}>Status</SpsLabel>
+                          <SpsMultiSelect
+                            formMeta={formMeta.fields.status}
+                            value={formValue.status}
+                            options={statusOptions}
+                          />
+                        </div>
+                      </div>
+                  </AdvancedSearch>
+                </>
+              )
+            }
+          `},pinnedResultsBar:{description:()=>e.createElement("p",null,"You can pin the Results Bar by passing pinResultsBar prop to SpsListToolbar."),react:o.code`
+            import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component() {
+              const [advSearch, setAdvSearch] = React.useState({
+                isOpen: false
+              });
+            
+              const [showSearchBar, setShowSearchBar] = React.useState(true);
+              
+              const [results, setResults] = React.useState(0);
+              
+              const initValue = {
+                searchText: "",
+              };
+          
+              const { formValue, formMeta, updateForm } = useSpsForm(initValue);
+          
+              function handleToggleAdvancedSearch(isOpen) {
+                setAdvSearch({ isOpen });
+              }
+              
+              function handleAdvancedSearchSubmit() {
+                setShowSearchBar(true);
+                setResults(Math.floor(Math.random() * 100));
+              }
+          
+              function handleAdvancedSearchClear() {
+                updateForm(initValue);
+              }
+
+              return (
+                <>
+                  <ListBar advancedSearch={advSearch}
+                    onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                    pinResultsBar
+                  >
+                    <ListBarSearch>
+                      <SpsTextInput
+                        value={formValue.searchText}
+                        formMeta={formMeta.fields.searchText}
+                        placeholder="Search fields"
+                      />
+                      <Button kind="icon" icon="search" />
+                    </ListBarSearch>
+                    <Button className={sprinkles({ mr: "sm" })} kind="icon" icon="download-cloud" />
+                    <Button className={sprinkles({ mr: "sm" })}>Button</Button>
+                    <Button kind="key">Button</Button>
+                    {showSearchBar && (
+                      <SearchResultsBar
+                        results={results}
+                        onClear={() => setShowSearchBar(false)}
+                      />
+                    )}
+                  </ListBar>
+                  <AdvancedSearch {...advSearch} 
+                    onSubmit={handleAdvancedSearchSubmit}
+                  >
+                    <i>insert form here</i>
+                  </AdvancedSearch>
+                </>
+              )
+            }
+          `}}},columnEditor:{label:"Column Editor",description:({NavigateTo:t})=>e.createElement("p",null,"Use a Column Editor when tables require the ability to show or hide specific columns based on the user's preferences. The Column Editor should only be used for"," ",e.createElement(t,{to:"tables"},"Tables"),", and not any other type of list view. For more information, visit the ",e.createElement(t,{to:"column-chooser"},"Column Editor")," page."),examples:{columnEditor:{react:o.code`
+            import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            
+            function Component() {
+              const unselectedCols = [
+                { name: "Title" },
+              ];
+              const selectedCols = [
+                { name: "Documents" },
+                { name: "Price" },
+              ]
+              
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                searchText: "",
+              });
+
+              function handleSearch(event) {
+                console.log(event, formValue.searchText)
+              }
+
+              return (
+                <ListBar>
+                  <ListBarSearch onSubmit={handleSearch}>
+                    <SpsTextInput
+                      value={formValue.searchText}
+                      formMeta={formMeta.fields.searchText}
+                      placeholder="Search fields"
+                    />
+                    <Button kind="icon" icon="search" type="submit" />
+                  </ListBarSearch>
+                  <SpsColumnChooser
+                    unselectedColumns={unselectedCols}
+                    selectedColumns={selectedCols}
+                    onApplyChanges={(selectedColumns) => {console.log(selectedColumns)}}
+                  />
+                </ListBar>
+              )
+            }
+          `}}},buttons:{label:"Buttons",description:({NavigateTo:t})=>e.createElement("p",null,"Use Buttons only for actions that do not affect existing list items, such as exporting the list or creating a new list item. For actions that are taken on list items, such as changing a status of a list item, refer to the"," ",e.createElement(t,{to:"list-action-bar"},"List Action Bar"),"."),examples:{buttons:{react:o.code`
+            import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                  searchText: "",
+              });
+
+              function handleSearch(event) {
+                  console.log(event, formValue.searchText)
+              }
+
+              return (
+                <ListBar>
+                  <ListBarSearch onSubmit={handleSearch}>
+                    <SpsTextInput
+                      value={formValue.searchText}
+                      formMeta={formMeta.fields.searchText}
+                      placeholder="Search fields"
+                    />
+                    <Button kind="icon" icon="search" type="submit" />
+                  </ListBarSearch>
+                  <Button className={sprinkles({ mr: "sm" })} kind="link">Text Button</Button>
+                  <Button className={sprinkles({ mr: "sm" })} kind="icon" icon="download-cloud" />
+                  <Button className={sprinkles({ mr: "sm" })}>Button</Button>
+                  <Button kind="key">Button</Button>
+                </ListBar>
+              )
+            }
+          `}}},tabs:{label:"Tabs",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"When tabs are included, they appear above the List Toolbar. Tab rules are outlined on the ",e.createElement(t,{to:"cards"},"Cards")," page."),e.createElement("p",null,e.createElement("code",null,"<Item>")," comes from the ",e.createElement("code",null,"@react-stately/collections"),"package, which is a peer dependency of our React components.")),examples:{tabs:{react:o.code`
+            import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
+            import { Item } from "@react-stately/collections";
+
+            function Component() {
+              const filterKeys = ["Document Type", "Sender Name", "Receiver Name"];
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                searchText: "",
+              })
+
+              function handleTabChange(tab) {
+                console.log(tab);
+              }
+
+              return (
+                <ListBar
+                  onTabChange={handleTabChange}
+                >
+                  <Tabs>
+                    <Item key="tab1" title="Tab 1">
+                      <ListBarSearch>
+                        <SpsTextInput formMeta={formMeta.fields.searchText} value={formValue.searchText} placeholder="Search fields" />
+                        <Button kind="icon" icon="search" type="submit" />
+                      </ListBarSearch>
+                    </Item>
+                    <Item key="tab2" title="Tab 2">
+                      <ListBarSearch>
+                        <SpsSelect
+                          options={filterKeys}
+                          notClearable
+                        />
+                        <SpsTextInput
+                          value={formValue.searchText}
+                          formMeta={formMeta.fields.searchText}
+                          icon={SpsIcon.FILTER}
+                          placeholder="Filter fields"
+                        />
+                      </ListBarSearch>
+                    </Item>
+                  </Tabs>
+                </ListBar>
+              )
+            }
+          `}}},title:{label:"Title",description:({NavigateTo:t})=>e.createElement("p",null,"Use Titles when there is no Search or Filter input required for the list items, such as when the only search options are in an Advanced Search panel. For more information, visit the ",e.createElement(t,{to:"advanced-search"},"Advanced Search")," page."),examples:{title:{react:o.code`
+            import { ListBar } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              return (
+                <ListBar title="Good List Title">
+                  <Button>Button</Button>
+                </ListBar>
+              )
+            }
+          `}}},sortBy:{label:"Sort By",description:()=>e.createElement("p",null,"Use Sort By component to sort list of rows. It looks like SpsDropdown but with sorting interface."),examples:{basic:{react:o.code`
+            import { ListBar, ListBarSortBy } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { VerticalRule } from "@sps-woodland/core";
+
+            function Component() {
+              const [activeOption, setActiveOption] = React.useState(null);
+              const defaultOption = {
+                label: "Default",
+                key: "default",
+                direction: SortDirection.ASCENDING,
+                icon: SpsIcon.SORT_ALPHA_ASC,
+              }
+              const options = [
+                defaultOption,
+                {
+                  label: "Company Name: A-Z",
+                  key: "name",
+                  direction: SortDirection.ASCENDING,
+                  icon: SpsIcon.SORT_ALPHA_ASC,
+                },
+                {
+                  label: "Company Name: Z-A",
+                  key: "name",
+                  direction: SortDirection.DESCENDING,
+                  icon: SpsIcon.SORT_ALPHA_DESC,
+                },
+                {
+                  label: 'Created Date: Oldest to Newest',
+                  key: 'created',
+                  direction: SortDirection.ASCENDING,
+                  icon: SpsIcon.SORT_NUM_ASC,
+                },
+                {
+                  label: 'Created Date: Newest to Oldest',
+                  key: 'created',
+                  direction: SortDirection.DESCENDING,
+                  icon: SpsIcon.SORT_NUM_DESC,
+                }
+              ]
+              
+              return (
+                <ListBar title="List of sortable rows">
+                  <Button kind="icon" icon="download-cloud" />
+                  <VerticalRule />
+                  <ListBarSortBy
+                    options={options}
+                    activeOption={activeOption}
+                    defaultOption={defaultOption}
+                    onSortChange={(option) => setActiveOption(option)}
+                  />
+                  <VerticalRule />
+                  <Button kind="confirm">Create New</Button>
+                </ListBar>
+              )
+            }
+          `}}}}},Ce={components:[x],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`
+            import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component() {
+              const [advSearch, setAdvSearch] = React.useState({
+                isOpen: false
+              });
+            
+              const [showSearchBar, setShowSearchBar] = React.useState(true);
+
+              const [results, setResults] = React.useState(10);
+
+              const initialSelections = {
+                sender: ["Aktie Sports","Modells Sporting Goods", "Perry Sport"],
+                receiver: ["FGL Sports", "Foot Asylum", "Hervis", "Lovell Rugby"],
+              };
+
+              const [selections, setSelections] = React.useState(initialSelections);
+              
+              const initValue = {
+                searchText: "",
+              };
+
+              const { formValue, formMeta, updateForm } = useSpsForm(initValue);
+
+              function handleToggleAdvancedSearch(isOpen) {
+                setAdvSearch({ isOpen });
+              }
+
+              function handleAdvancedSearchSubmit() {
+                console.log("submit");
+                setResults(10);
+                setSelections(initialSelections);
+              }
+
+              function handleClear() {
+                setResults(0);
+                setSelections({});
+              }
+
+              return (
+                <>
+                  <ListBar
+                    advancedSearch={advSearch}
+                    onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                  >
+                    <ListBarSearch>
+                      <SpsTextInput
+                        value={formValue.searchText}
+                        formMeta={formMeta.fields.searchText}
+                        placeholder="Search fields"
+                      />
+                      <Button kind="icon" icon="search" />
+                    </ListBarSearch>
+                    <SearchResultsBar
+                      results={results}
+                      onClear={handleClear}
+                      selections={selections}
+                    />
+                  </ListBar>
+                  <AdvancedSearch {...advSearch} onSubmit={handleAdvancedSearchSubmit}>
+                    <i>insert form here</i>
+                  </AdvancedSearch>
+                </>
+              )
+            }
+          `},situational:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Unknown Results Count"),e.createElement("p",null,"In cases where the exact count of results is not able to be determined, Results section won't be displayed.")),react:o.code`
+            import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component() {
+              const [advSearch, setAdvSearch] = React.useState({
+                isOpen: false
+              });
+            
+              const [showSearchBar, setShowSearchBar] = React.useState(true);
+
+              const initialSelections = {
+                sender: ["Aktie Sports","Modells Sporting Goods", "Perry Sport"],
+                receiver: ["FGL Sports", "Foot Asylum", "Hervis", "Lovell Rugby"],
+              };
+
+              const [selections, setSelections] = React.useState(initialSelections);
+              
+              const initValue = {
+                searchText: "",
+              };
+
+              const { formValue, formMeta, updateForm } = useSpsForm(initValue);
+
+              function handleToggleAdvancedSearch(isOpen) {
+                setAdvSearch({ isOpen });
+              }
+
+              function handleAdvancedSearchSubmit() {
+                console.log("submit");
+                setSelections(initialSelections);
+              }
+
+              function handleClear() {
+                setSelections({});
+              }
+
+              return (
+                <>
+                  <ListBar
+                    advancedSearch={advSearch}
+                    onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                  >
+                    <ListBarSearch>
+                      <SpsTextInput
+                        value={formValue.searchText}
+                        formMeta={formMeta.fields.searchText}
+                        placeholder="Search fields"
+                      />
+                      <Button kind="icon" icon="search" />
+                    </ListBarSearch>
+                    <SearchResultsBar
+                      onClear={handleClear}
+                      selections={selections}
+                    />
+                  </ListBar>
+                  <AdvancedSearch {...advSearch} onSubmit={handleAdvancedSearchSubmit}>
+                    <i>insert form here</i>
+                  </AdvancedSearch>
+                </>
+              )
+            }
+          `}}},customText:{label:"Custom Text",description:()=>e.createElement("p",null,"You can pass in custom text to be displayed when there are no selections."),examples:{customText:{react:o.code`
+            import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
+            import { Button } from "@sps-woodland/buttons";
+            import { SpsTextInput } from "@spscommerce/ds-react";
+
+            function Component() {
+              const [advSearch, setAdvSearch] = React.useState({
+                isOpen: false
+              });
+            
+              const [showSearchBar, setShowSearchBar] = React.useState(true);
+
+              const [results, setResults] = React.useState(0);
+
+              const initialSelections = {
+                sender: ["Aktie Sports","Modells Sporting Goods", "Perry Sport"],
+                receiver: ["FGL Sports", "Foot Asylum", "Hervis", "Lovell Rugby"],
+              };
+
+              const [selections, setSelections] = React.useState({});
+              
+              const initValue = {
+                searchText: "",
+              };
+
+              const { formValue, formMeta, updateForm } = useSpsForm(initValue);
+
+              function handleToggleAdvancedSearch(isOpen) {
+                setAdvSearch({ isOpen });
+              }
+
+              function handleAdvancedSearchSubmit() {
+                console.log("submit");
+                setResults(10);
+                setSelections(initialSelections);
+              }
+
+              function handleClear() {
+                setResults(0);
+                setSelections({});
+              }
+
+              return (
+                <>
+                  <ListBar
+                    advancedSearch={advSearch}
+                    onToggleAdvancedSearch={handleToggleAdvancedSearch}
+                  >
+                    <ListBarSearch>
+                      <SpsTextInput
+                        value={formValue.searchText}
+                        formMeta={formMeta.fields.searchText}
+                        placeholder="Search fields"
+                      />
+                      <Button kind="icon" icon="search" />
+                    </ListBarSearch>
+                    <SearchResultsBar
+                      results={results}
+                      onClear={handleClear}
+                      selections={selections}
+                      zeroStateText="There are no selections here"
+                    />
+                  </ListBar>
+                  <AdvancedSearch {...advSearch} onSubmit={handleAdvancedSearchSubmit}>
+                    <i>insert form here</i>
+                  </AdvancedSearch>
+                </>
+              )
+            }
+          `}}}}},xe={"Advanced Search":Ee,"List Bar":ye,"Search Results Bar":Ce};exports.AdvancedSearch=F;exports.InputGroupWrapper=G;exports.ListBar=w;exports.ListBarSearch=y;exports.ListBarSearchInfo=C;exports.ListBarSortBy=R;exports.MANIFEST=xe;exports.SearchResultsBar=x;