@spscommerce/ds-react 7.9.0 → 7.9.1

package/lib/index.cjs.js

@@ -5072,7 +5072,7 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                         </>
                       )
                   }
-                `}}}},RN={formMeta:"SpsFormSetMeta<any>",stacked:"boolean"};function Ai({children:e,className:t,formArray:n,formGroup:r,formMeta:a,stacked:o,"data-testid":l,unsafelyReplaceClassName:c,...p}){const u=r||n,m=u||a,[f,h]=s.useState(!1);s.useEffect(()=>{if(m){const E=m.isFocused();!f&&E&&m.onFocus?m.onFocus():f&&!E&&m.onBlur&&m.onBlur(),h(E)}});const g=H(c||"sps-form-group",(u&&u.invalid||a&&(!a.isValid()||!a.contentsAreValid()))&&"sps-form-group--error",t);return s.createElement("div",{className:g,"data-testid":l,...p},s.createElement("div",{className:H("sps-input-group",o&&"sps-input-group--stacked")},e))}Object.assign(Ai,{props:RN,displayName:"SpsInputGroup"});const PN={onSubmit:"FormEventHandler"};function ia(e){const{children:t,onSubmit:n}=e;function r(a){a.preventDefault(),n&&n(a)}return s.createElement("form",{onSubmit:r,className:"sps-list-toolbar__search-form",noValidate:!0},s.createElement(Ai,{className:"sps-list-toolbar__search-field"},t))}Object.assign(ia,{props:PN,displayName:"SpsListToolbarSearch"});const BN={};function la(e){const{children:t}=e;return s.createElement("div",null,t)}Object.assign(la,{props:BN,displayName:"SpsListToolbarSearchInfo"});const AN={activeTab:"SpsTab",advancedSearch:"{ isOpen: boolean, enteredFields: number }",onToggleAdvancedSearch:"(boolean) => void",onTabChange:"(SpsTab) => void",title:"string",tabs:"Array<SpsTab>",onToolbarPinned:"(boolean) => void",selectable:"boolean",isSelected:"boolean",isIndeterminate:"boolean",onSelectionChange:"(boolean) => void",pinResultsBar:"boolean",pinToolbar:"boolean"};function Fi(e){const{activeTab:t,advancedSearch:n,children:r,className:a,onToggleAdvancedSearch:o,onTabChange:l,tabs:c,title:p,unsafelyReplaceClassName:u,onToolbarPinned:m,selectable:f,isSelected:h,isIndeterminate:g,onSelectionChange:E,pinResultsBar:w,pinToolbar:T=!0,"data-testid":D,...N}=e,{t:M}=s.useContext(Re);let b=null;const[I,L]=s.useState(!1),k=s.useRef(null),O=s.useRef(null),R=y.lockToAnimationFrames(()=>{if(k.current&&T){const G=k.current.getBoundingClientRect();G&&G.height>0&&G.top<=60&&(typeof b=="number"?window.scrollY<b&&(b=null,L(!1)):(b=window.scrollY,L(!0),o&&o(!1)))}});s.useEffect(()=>(window.addEventListener("scroll",R),()=>{window.removeEventListener("scroll",R)}),[]);const W=s.useRef();s.useLayoutEffect(()=>{if(O.current&&k.current&&T){if(I&&W.current)O.current.style.height=W.current.height,O.current.style.width=W.current.width,O.current.style.marginBottom=W.current.marginBottom;else if(!I){O.current.style.height="",O.current.style.width="",O.current.style.marginBottom="";const G=window.getComputedStyle(k.current);W.current={height:G.height,width:G.width,marginBottom:G.marginBottom}}}},[I]);function _(G){l&&l(G)}function $(){o&&o(!(n!=null&&n.isOpen))}function x(G){m&&m(G)}s.useEffect(()=>{x(I)},[I]);const A=H(u||"sps-list-toolbar",I&&T&&"sps-list-toolbar--pinned",I&&T&&"z-stratum-toolbar",n&&n.isOpen&&"sps-list-toolbar--advanced-search-open",a),[te,Z,U,X]=Tt(r,[{type:ia},{type:la},{type:oa}]);return s.createElement("div",{className:"sps-list-toolbar__wrapper",ref:O},s.createElement("div",{className:A,"data-testid":D,ref:k,...N},s.createElement("div",{className:"sps-list-toolbar__content"},!!f&&s.createElement("div",{className:"sps-list-toolbar__selection-controls"},s.createElement(In,{checked:h,indeterminate:g,onChange:()=>{E==null||E(!h)}})),c&&s.createElement(Fm,{tabs:c,onTabChange:_,activeTab:t,"data-testid":`${D}__tabs`}),s.createElement("div",{className:"sps-list-toolbar__search-controls"},!p&&te,!p&&Z,te.length>0&&n&&s.createElement("div",{className:"sps-list-toolbar__advanced-search-toggle","data-testid":`${D}__advanced-search`},s.createElement("div",{className:"sps-list-toolbar__advanced-search-toggle-button-wrapper"},s.createElement($e,{kind:V.ButtonKind.LINK,onClick:$},M("design-system:listToolbar.advancedSearchToggle"))),(n.enteredFields||0)>0&&s.createElement(kt,{kind:V.TagKind.INFO},s.createElement("span",null,n.enteredFields))),p&&s.createElement("div",{"data-testid":`${D}-title`,className:"sps-list-toolbar__advanced-search-title"},p)),I?s.createElement("div",{className:"sps-list-toolbar__header-content"},s.createElement(Et.Provider,{value:{fixed:!0}},X)):s.createElement("div",{className:"sps-list-toolbar__header-content"},X)),s.createElement("div",null,(!I||I&&w)&&U)))}Object.assign(Fi,{props:AN,displayName:"SpsListToolbar"});const FN={options:"SortOption[]",activeOption:"SortOption",onSortChange:"(option: SortOption) => void",defaultOption:"SortOption"};function $i(e){const{options:t,onSortChange:n,defaultOption:r,activeOption:a,className:o,unsafelyReplaceClassName:l}=e,c=(t||[]).map(u=>[{label:u.label,icon:u.icon},()=>{n&&n(u)}]),p=H(l||"sps-list-toolbar-sort-by",o);return s.createElement(xn,{className:p,icon:(a==null?void 0:a.icon)||(r==null?void 0:r.icon),label:(a==null?void 0:a.label)||(r==null?void 0:r.label),options:c})}Object.assign($i,{props:FN,displayName:"SpsListToolbarSortBy"});function Km(){const[e,t]=s.useState(!1);function n(){t(!1)}function r(){t(!0)}return s.createElement(s.Fragment,null,s.createElement("p",null,"The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."),s.createElement($e,{kind:V.ButtonKind.LINK,onClick:r},"View Content Order Example"),s.createElement(ra,{isOpen:e,onClose:n},s.createElement("h1",null,"Content Order"),s.createElement("img",{src:"assets/images/list-toolbar-example.svg",alt:"A List Toolbar with labels on each section",className:"w-100 mb-3"}),s.createElement(Mn,null,s.createElement(on,null,s.createElement(Ge,{style:{width:"80px"}},"Order"),s.createElement(Ge,null,"Section"),s.createElement(Ge,null,"Notes")),s.createElement(ln,null,s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"1")),s.createElement(ie,null,"Checkbox"),s.createElement(ie,null,"For Content Rows and Content Tiles only.")),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"2")),s.createElement(ie,null,"Search/Filter Box"),s.createElement(ie,null)),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"3")),s.createElement(ie,null,"Saved Search"),s.createElement(ie,null)),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"4")),s.createElement(ie,null,"Advanced Search"),s.createElement(ie,null,"For more information, visit the Advanced Search page.")),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"5")),s.createElement(ie,null,"Column Editor"),s.createElement(ie,{wrap:500},"Use for Tables only. For more information, visit the Column Editor page.")),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"6")),s.createElement(ie,null,"List View Selector"),s.createElement(ie,null)),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"7")),s.createElement(ie,null,"Sorting"),s.createElement(ie,null)),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"8")),s.createElement(ie,null,"Buttons"),s.createElement(ie,{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 Hm={general:{label:"General Usage",description:()=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Use a List Toolbar:"),s.createElement("ul",null,s.createElement("li",null,"When list content needs to be searched, filtered, sorted, or otherwise interacted with.")),s.createElement("h5",null,"Avoid a List Toolbar:"),s.createElement("ul",null,s.createElement("li",null,"When no list is present."),s.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:s.createElement(Km,null)},checkbox:{label:"Checkbox",description:({NavigateTo:e})=>s.createElement("p",null,"Use a Checkbox in the List Toolbar when items in a"," ",s.createElement(e,{to:"Content rows"},"Content Row")," or"," ",s.createElement(e,{to:"Content tiles"},"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:{checkbox:{react:y.code`
+                `}}}},RN={formMeta:"SpsFormSetMeta<any>",stacked:"boolean"};function Ai({children:e,className:t,formArray:n,formGroup:r,formMeta:a,stacked:o,"data-testid":l,unsafelyReplaceClassName:c,...p}){const u=r||n,m=u||a,[f,h]=s.useState(!1);s.useEffect(()=>{if(m){const E=m.isFocused();!f&&E&&m.onFocus?m.onFocus():f&&!E&&m.onBlur&&m.onBlur(),h(E)}});const g=H(c||"sps-form-group",(u&&u.invalid||a&&(!a.isValid()||!a.contentsAreValid()))&&"sps-form-group--error",t);return s.createElement("div",{className:g,"data-testid":l,...p},s.createElement("div",{className:H("sps-input-group",o&&"sps-input-group--stacked")},e))}Object.assign(Ai,{props:RN,displayName:"SpsInputGroup"});const PN={onSubmit:"FormEventHandler"};function ia(e){const{children:t,onSubmit:n}=e;function r(a){a.preventDefault(),n&&n(a)}return s.createElement("form",{onSubmit:r,className:"sps-list-toolbar__search-form",noValidate:!0},s.createElement(Ai,{className:"sps-list-toolbar__search-field"},t))}Object.assign(ia,{props:PN,displayName:"SpsListToolbarSearch"});const BN={};function la(e){const{children:t}=e;return s.createElement("div",null,t)}Object.assign(la,{props:BN,displayName:"SpsListToolbarSearchInfo"});const AN={activeTab:"SpsTab",advancedSearch:"{ isOpen: boolean, enteredFields: number }",onToggleAdvancedSearch:"(boolean) => void",onTabChange:"(SpsTab) => void",title:"string",tabs:"Array<SpsTab>",onToolbarPinned:"(boolean) => void",selectable:"boolean",isSelected:"boolean",isIndeterminate:"boolean",onSelectionChange:"(boolean) => void",pinResultsBar:"boolean",pinToolbar:"boolean"};function Fi(e){const{activeTab:t,advancedSearch:n,children:r,className:a,onToggleAdvancedSearch:o,onTabChange:l,tabs:c,title:p,unsafelyReplaceClassName:u,onToolbarPinned:m,selectable:f,isSelected:h,isIndeterminate:g,onSelectionChange:E,pinResultsBar:w,pinToolbar:T=!0,"data-testid":D,...N}=e,{t:M}=s.useContext(Re);let b=null;const[I,L]=s.useState(!1),k=s.useRef(null),O=s.useRef(null),R=y.lockToAnimationFrames(()=>{if(k.current&&T){const G=k.current.getBoundingClientRect();G&&G.height>0&&G.top<=60&&(typeof b=="number"?window.scrollY<b&&(b=null,L(!1)):(b=window.scrollY,L(!0),o&&o(!1)))}});s.useEffect(()=>(window.addEventListener("scroll",R),()=>{window.removeEventListener("scroll",R)}),[]);const W=s.useRef();s.useLayoutEffect(()=>{if(O.current&&k.current&&T){if(I&&W.current)O.current.style.height=W.current.height,O.current.style.width=W.current.width,O.current.style.marginBottom=W.current.marginBottom;else if(!I){O.current.style.height="",O.current.style.width="",O.current.style.marginBottom="";const G=window.getComputedStyle(k.current);W.current={height:G.height,width:G.width,marginBottom:G.marginBottom}}}},[I]);function _(G){l&&l(G)}function $(){o&&o(!(n!=null&&n.isOpen))}function x(G){m&&m(G)}s.useEffect(()=>{x(I)},[I]);const A=H(u||"sps-list-toolbar",I&&T&&"sps-list-toolbar--pinned",I&&T&&"z-stratum-toolbar",n&&n.isOpen&&"sps-list-toolbar--advanced-search-open",a),[te,Z,U,X]=Tt(r,[{type:ia},{type:la},{type:oa}]);return s.createElement("div",{className:"sps-list-toolbar__wrapper",ref:O},s.createElement("div",{className:A,"data-testid":D,ref:k,...N},s.createElement("div",{className:"sps-list-toolbar__content"},!!f&&s.createElement("div",{className:"sps-list-toolbar__selection-controls"},s.createElement(In,{checked:h,indeterminate:g,onChange:()=>{E==null||E(!h)}})),c&&s.createElement(Fm,{tabs:c,onTabChange:_,activeTab:t,"data-testid":`${D}__tabs`}),s.createElement("div",{className:"sps-list-toolbar__search-controls"},!p&&te,!p&&Z,te.length>0&&n&&s.createElement("div",{className:"sps-list-toolbar__advanced-search-toggle","data-testid":`${D}__advanced-search`},s.createElement("div",{className:"sps-list-toolbar__advanced-search-toggle-button-wrapper"},s.createElement($e,{kind:V.ButtonKind.LINK,onClick:$},M("design-system:listToolbar.advancedSearchToggle"))),(n.enteredFields||0)>0&&s.createElement(kt,{"data-testid":`${D}__entered_fields`,kind:V.TagKind.INFO},s.createElement("span",null,n.enteredFields))),p&&s.createElement("div",{"data-testid":`${D}-title`,className:"sps-list-toolbar__advanced-search-title"},p)),I?s.createElement("div",{className:"sps-list-toolbar__header-content"},s.createElement(Et.Provider,{value:{fixed:!0}},X)):s.createElement("div",{className:"sps-list-toolbar__header-content"},X)),s.createElement("div",null,(!I||I&&w)&&U)))}Object.assign(Fi,{props:AN,displayName:"SpsListToolbar"});const FN={options:"SortOption[]",activeOption:"SortOption",onSortChange:"(option: SortOption) => void",defaultOption:"SortOption"};function $i(e){const{options:t,onSortChange:n,defaultOption:r,activeOption:a,className:o,unsafelyReplaceClassName:l}=e,c=(t||[]).map(u=>[{label:u.label,icon:u.icon},()=>{n&&n(u)}]),p=H(l||"sps-list-toolbar-sort-by",o);return s.createElement(xn,{className:p,icon:(a==null?void 0:a.icon)||(r==null?void 0:r.icon),label:(a==null?void 0:a.label)||(r==null?void 0:r.label),options:c})}Object.assign($i,{props:FN,displayName:"SpsListToolbarSortBy"});function Km(){const[e,t]=s.useState(!1);function n(){t(!1)}function r(){t(!0)}return s.createElement(s.Fragment,null,s.createElement("p",null,"The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."),s.createElement($e,{kind:V.ButtonKind.LINK,onClick:r},"View Content Order Example"),s.createElement(ra,{isOpen:e,onClose:n},s.createElement("h1",null,"Content Order"),s.createElement("img",{src:"assets/images/list-toolbar-example.svg",alt:"A List Toolbar with labels on each section",className:"w-100 mb-3"}),s.createElement(Mn,null,s.createElement(on,null,s.createElement(Ge,{style:{width:"80px"}},"Order"),s.createElement(Ge,null,"Section"),s.createElement(Ge,null,"Notes")),s.createElement(ln,null,s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"1")),s.createElement(ie,null,"Checkbox"),s.createElement(ie,null,"For Content Rows and Content Tiles only.")),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"2")),s.createElement(ie,null,"Search/Filter Box"),s.createElement(ie,null)),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"3")),s.createElement(ie,null,"Saved Search"),s.createElement(ie,null)),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"4")),s.createElement(ie,null,"Advanced Search"),s.createElement(ie,null,"For more information, visit the Advanced Search page.")),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"5")),s.createElement(ie,null,"Column Editor"),s.createElement(ie,{wrap:500},"Use for Tables only. For more information, visit the Column Editor page.")),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"6")),s.createElement(ie,null,"List View Selector"),s.createElement(ie,null)),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"7")),s.createElement(ie,null,"Sorting"),s.createElement(ie,null)),s.createElement(Be,null,s.createElement(ie,null,s.createElement("span",{className:"sps-tag sps-tag--info"},"8")),s.createElement(ie,null,"Buttons"),s.createElement(ie,{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 Hm={general:{label:"General Usage",description:()=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Use a List Toolbar:"),s.createElement("ul",null,s.createElement("li",null,"When list content needs to be searched, filtered, sorted, or otherwise interacted with.")),s.createElement("h5",null,"Avoid a List Toolbar:"),s.createElement("ul",null,s.createElement("li",null,"When no list is present."),s.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:s.createElement(Km,null)},checkbox:{label:"Checkbox",description:({NavigateTo:e})=>s.createElement("p",null,"Use a Checkbox in the List Toolbar when items in a"," ",s.createElement(e,{to:"Content rows"},"Content Row")," or"," ",s.createElement(e,{to:"Content tiles"},"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:{checkbox:{react:y.code`
                     import {
                         SpsListToolbar,
                         SpsListToolbarSearch,

package/lib/index.es.js

@@ -21081,6 +21081,7 @@ function Vu(e) {
     kind: Ge.LINK,
     onClick: $
   }, M("design-system:listToolbar.advancedSearchToggle"))), (r.enteredFields || 0) > 0 && /* @__PURE__ */ s.createElement(Vt, {
+    "data-testid": `${D}__entered_fields`,
     kind: rn.INFO
   }, /* @__PURE__ */ s.createElement("span", null, r.enteredFields))), p && /* @__PURE__ */ s.createElement("div", {
     "data-testid": `${D}-title`,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "7.9.0",
+  "version": "7.9.1",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
@@ -41,11 +41,11 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.6.0",
-    "@sps-woodland/illustrations": "7.9.0",
-    "@sps-woodland/tabs": "7.9.0",
-    "@spscommerce/ds-colors": "7.9.0",
-    "@spscommerce/ds-shared": "7.9.0",
-    "@spscommerce/positioning": "7.9.0",
+    "@sps-woodland/illustrations": "7.9.1",
+    "@sps-woodland/tabs": "7.9.1",
+    "@spscommerce/ds-colors": "7.9.1",
+    "@spscommerce/ds-shared": "7.9.1",
+    "@spscommerce/positioning": "7.9.1",
     "@spscommerce/utils": "^6.11.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
@@ -59,11 +59,11 @@
     "@react-types/select": "^3.6.1",
     "@react-types/shared": "^3.8.0",
     "@react-types/tabs": "^3.0.1",
-    "@sps-woodland/illustrations": "7.9.0",
-    "@sps-woodland/tabs": "7.9.0",
-    "@spscommerce/ds-colors": "7.9.0",
-    "@spscommerce/ds-shared": "7.9.0",
-    "@spscommerce/positioning": "7.9.0",
+    "@sps-woodland/illustrations": "7.9.1",
+    "@sps-woodland/tabs": "7.9.1",
+    "@spscommerce/ds-colors": "7.9.1",
+    "@spscommerce/ds-shared": "7.9.1",
+    "@spscommerce/positioning": "7.9.1",
     "@spscommerce/utils": "^6.12.1",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^10.0.0",
@@ -77,7 +77,7 @@
     "raf-stub": "^2.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "test": "7.9.0"
+    "test": "7.9.1"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",