@spscommerce/ds-react 7.1.0 → 7.1.1

package/lib/index.cjs.js

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

package/lib/index.es.js

@@ -20144,7 +20144,7 @@ function Ep(e) {
   } = e, { t: I } = r.useContext(Be);
   let S = null;
   const [k, O] = r.useState(!1), x = r.useRef(null), L = r.useRef(null), A = Rb(() => {
-    if (x.current) {
+    if (x.current && T) {
       const F = x.current.getBoundingClientRect();
       F && F.height > 0 && F.top <= 60 && (typeof S == "number" ? window.scrollY < S && (S = null, O(!1)) : (S = window.scrollY, O(!0), i && i(!1)));
     }

package/package.json

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