@spscommerce/ds-react 6.37.1 → 6.37.3

package/lib/index.cjs.js

@@ -833,7 +833,7 @@
                             </div>
                         </SpsCardV2Footer>
                     </SpsCardV2>
-                `}}}},py={checked:"boolean",disabled:"boolean",formMeta:"SpsFormFieldMeta<boolean>",indeterminate:"boolean",inline:"boolean",label:"string",onChange:"ChangeEventHandler"},uy=G(N({},z),{checked:E.exports.bool,disabled:E.exports.bool,formControl:ce(),formMeta:ce(),indeterminate:E.exports.bool,inline:E.exports.bool,label:E.exports.string,onChange:te()});function Nn(S){var T=S,{checked:e,className:t,disabled:n,formControl:s,formMeta:o,id:i,indeterminate:l,inline:c,label:p,onChange:m,"data-testid":f,unsafelyReplaceClassName:u}=T,g=q(T,["checked","className","disabled","formControl","formMeta","id","indeterminate","inline","label","onChange","data-testid","unsafelyReplaceClassName"]);const x=o||s,w=a.useRef(),[D,I]=a.useState(e),[v,k]=a.useState(l),{wrapperId:M,controlId:_}=Tt(i,x);a.useEffect(()=>I(e),[e]),a.useEffect(()=>k(l),[l]),a.useEffect(()=>{w.current.indeterminate=v},[v]);const R=K(u||"sps-checkbox","sps-checkable",c&&"sps-checkable--inline",!p&&"sps-checkable--no-label",t);function O(F){I(F.target.checked),k(!1),x&&(x.setValue(F.target.checked),x.markAsDirty()),m&&m(F),w.current.focus()}return a.createElement(it,{id:M,className:R,formControl:s,formMeta:o,inputRef:w,"data-testid":f},a.createElement("input",N({type:"checkbox",ref:w,className:"sps-checkable__input",id:_,checked:D,disabled:n,"data-testId":`${f}__checkbox-input`,onChange:O},g)),a.createElement("label",{className:"sps-checkable__label",htmlFor:_},p||""))}Object.assign(Nn,{props:py,propTypes:uy,displayName:"SpsCheckbox"});const dd={labels:{label:"Labels",description:y.code`
+                `}}}},py={checked:"boolean",disabled:"boolean",formMeta:"SpsFormFieldMeta<boolean>",indeterminate:"boolean",inline:"boolean",label:"string",onChange:"ChangeEventHandler"},uy=G(N({},z),{checked:E.exports.bool,disabled:E.exports.bool,formControl:ce(),formMeta:ce(),indeterminate:E.exports.bool,inline:E.exports.bool,label:E.exports.string,onChange:te()});function Nn(S){var T=S,{checked:e,className:t,disabled:n,formControl:s,formMeta:o,id:i,indeterminate:l,inline:c,label:p,onChange:m,"data-testid":f,unsafelyReplaceClassName:u}=T,g=q(T,["checked","className","disabled","formControl","formMeta","id","indeterminate","inline","label","onChange","data-testid","unsafelyReplaceClassName"]);const x=o||s,w=a.useRef(),[D,I]=a.useState(e),[v,k]=a.useState(l),{wrapperId:M,controlId:_}=Tt(i,x);a.useEffect(()=>I(e),[e]),a.useEffect(()=>k(l),[l]),a.useEffect(()=>{w.current.indeterminate=v},[v]);const R=K(u||"sps-checkbox","sps-checkable",c&&"sps-checkable--inline",!p&&"sps-checkable--no-label",t);function O(F){I(F.target.checked),k(!1),x&&(x.setValue(F.target.checked),x.markAsDirty()),m&&m(F),w.current.focus()}return a.createElement(it,{id:M,className:R,formControl:s,formMeta:o,inputRef:w,"data-testid":f},a.createElement("input",N({type:"checkbox",ref:w,className:"sps-checkable__input",id:_,checked:D,disabled:n,"data-testid":`${f}__checkbox-input`,onChange:O},g)),a.createElement("label",{className:"sps-checkable__label",htmlFor:_},p||""))}Object.assign(Nn,{props:py,propTypes:uy,displayName:"SpsCheckbox"});const dd={labels:{label:"Labels",description:y.code`
             <p>An individual checkbox should be labeled with its own <code>label</code> prop,
             not the <code>&lt;SpsLabel&gt;</code> component.</p>
         `,examples:{label:{react:y.code`
@@ -1221,7 +1221,7 @@
                   </>
                 )
               }
-              `}}}},Yx={index:"number",key:"string",columnId:"string",name:"string",value:"string",onDelete:"(columnValue: string) => void",mandatory:"boolean"},zx=G(N({},z),{index:E.exports.number,key:E.exports.string,columnId:E.exports.string,name:E.exports.string,value:E.exports.string,onDelete:te(),mandatory:E.exports.bool});function Xs(e){const u=e,{index:t,key:n,columnId:s,name:o,value:i,onDelete:l,mandatory:c,ref:p}=u,m=q(u,["index","key","columnId","name","value","onDelete","mandatory","ref"]),{t:f}=a.useContext(Le);return a.createElement(gu,N({key:s,draggableId:s,index:t||0},m),g=>a.createElement("div",G(N(N({ref:g.innerRef},g.draggableProps),g.dragHandleProps),{className:"sps-content-row"}),a.createElement("div",{className:"sps-content-row__col-group","data-col-value":i},a.createElement("div",{className:"sps-content-row__col sps-column-chooser__grab-col"},a.createElement("i",{className:"sps-column-chooser__drag-handle"})),a.createElement("div",{className:"sps-content-row__col--borderless"},a.createElement("div",{className:"sps-body-12"},o)),a.createElement("div",{className:"sps-content-row__col sps-column-chooser__delete-col"},!c&&a.createElement(Ke,{"aria-label":f("design-system:columnChooser.removeButton",{elementName:o}),kind:L.ButtonKind.ICON,icon:L.SpsIcon.X,onClick:()=>{l&&l(i)}})))))}Object.assign(Xs,{props:Yx,propTypes:zx,displayName:"SpsColumnChooserColumn"});const jx={maxSelectedColumns:"number | null",unselectedColumns:"ColumnProps[]",selectedColumns:"ColumnProps[]",onApplyChanges:"(selectedColumns: ColumnProps[]) => void"},qx=G(N({},z),{maxSelectedColumns:E.exports.number||null,unselectedColumns:E.exports.array,selectedColumns:E.exports.array,onApplyChanges:te()});function pi(e){const k=e,{unselectedColumns:t,selectedColumns:n,maxSelectedColumns:s=8,onApplyChanges:o,className:i,unsafelyReplaceClassName:l}=k,c=q(k,["unselectedColumns","selectedColumns","maxSelectedColumns","onApplyChanges","className","unsafelyReplaceClassName"]),[p,m]=Vt({isVisible:!1,unselectedColumns:[...t.map(M=>G(N({},M),{label:M.name,columnId:Xt()}))],selectedColumns:[...n.map(M=>G(N({},M),{columnId:Xt()}))]}),f={searchSelectedColumn:""},u=K(p.isVisible&&"sps-button--open",i),{formMeta:g,formValue:S,updateForm:T}=vc(f);function x(M){if(M.target.value){const _=[...p.selectedColumns],R=[];p.unselectedColumns.forEach(O=>{M.target.value===O.name?_.push({columnId:Xt(),name:O.name,value:O.value}):R.push(O)}),m({selectedColumns:_,unselectedColumns:R})}}function w(M){const _=[],R=[...p.unselectedColumns];p.selectedColumns.forEach(O=>{M===O.value?R.push({columnId:Xt(),name:O.name,value:O.value}):_.push(O)}),m({selectedColumns:_,unselectedColumns:R})}function D(M){if(!M.destination)return;const _=[...p.selectedColumns],[R]=_.splice(M.source.index,1);_.splice(M.destination.index,0,R),m({selectedColumns:_})}function I(){m({isVisible:!1});const M=p.selectedColumns.map(_=>{const R=N({},_);return R.columnId&&delete R.columnId,R});T(f),o(M)}function v(){m({isVisible:!p.isVisible})}return a.createElement("div",N({className:"sps-column-chooser z-stratum-dropdown"},c),a.createElement(Ke,{className:u,"aria-label":`${p.isVisible?"Close":"Open"} Column Chooser`,kind:L.ButtonKind.ICON,icon:L.SpsIcon.TABLE,onClick:v,"data-testid":"button"}),p.isVisible&&a.createElement(ci,{"data-testid":"open",footer:()=>a.createElement(Ke,{"aria-label":"Apply Changes",kind:L.ButtonKind.LINK,onClick:I},"Apply Changes")},a.createElement("div",{className:"sps-column-chooser__search-container"},a.createElement(fs,{suggestions:p.unselectedColumns.map(M=>M.name),disabled:s&&p.selectedColumns.length>=s,value:S.searchSelectedColumn?S.searchSelectedColumn:"",formMeta:g.fields.searchSelectedColumn,onChange:x,placeholder:"Find Columns to Add","data-testid":"autocomplete"})),a.createElement("div",{className:"sps-column-chooser__selected-title"},"Selected"),a.createElement(ou,{onDragEnd:D},a.createElement(ii,{droppableId:"column-chooser"},M=>a.createElement("div",G(N({},M.droppableProps),{ref:M.innerRef}),p.selectedColumns.map((_,R)=>a.createElement(Xs,{index:R,key:_.columnId,columnId:_.columnId,name:_.name,value:_.value,onDelete:w,mandatory:_.mandatory})),M.placeholder)))))}Object.assign(pi,{props:jx,propTypes:qx,displayName:"SpsColumnChooser"});const yu={basic:{label:"Basic",description:"Column chooser component",examples:{basic:{react:y.code`
+              `}}}},Yx={index:"number",key:"string",columnId:"string",name:"string",value:"string",onDelete:"(columnValue: string) => void",mandatory:"boolean"},zx=G(N({},z),{index:E.exports.number,key:E.exports.string,columnId:E.exports.string,name:E.exports.string,value:E.exports.string,onDelete:te(),mandatory:E.exports.bool});function Xs(e){const u=e,{index:t,key:n,columnId:s,name:o,value:i,onDelete:l,mandatory:c,ref:p}=u,m=q(u,["index","key","columnId","name","value","onDelete","mandatory","ref"]),{t:f}=a.useContext(Le);return a.createElement(gu,N({key:s,draggableId:s,index:t||0},m),g=>a.createElement("div",G(N(N({ref:g.innerRef},g.draggableProps),g.dragHandleProps),{className:"sps-content-row"}),a.createElement("div",{className:"sps-content-row__col-group","data-col-value":i},a.createElement("div",{className:"sps-content-row__col sps-column-chooser__grab-col"},a.createElement("i",{className:"sps-column-chooser__drag-handle"})),a.createElement("div",{className:"sps-content-row__col--borderless"},a.createElement("div",{className:"sps-body-12"},o)),a.createElement("div",{className:"sps-content-row__col sps-column-chooser__delete-col"},!c&&a.createElement(Ke,{"aria-label":f("design-system:columnChooser.removeButton",{elementName:o}),kind:L.ButtonKind.ICON,icon:L.SpsIcon.X,onClick:()=>{l&&l(i)}})))))}Object.assign(Xs,{props:Yx,propTypes:zx,displayName:"SpsColumnChooserColumn"});const jx={maxSelectedColumns:"number | null",unselectedColumns:"ColumnProps[]",selectedColumns:"ColumnProps[]",onApplyChanges:"(selectedColumns: ColumnProps[]) => void"},qx=G(N({},z),{maxSelectedColumns:E.exports.number||null,unselectedColumns:E.exports.array,selectedColumns:E.exports.array,onApplyChanges:te()});function pi(e){const k=e,{unselectedColumns:t,selectedColumns:n,maxSelectedColumns:s=8,onApplyChanges:o,className:i,unsafelyReplaceClassName:l}=k,c=q(k,["unselectedColumns","selectedColumns","maxSelectedColumns","onApplyChanges","className","unsafelyReplaceClassName"]),[p,m]=Vt({isVisible:!1,unselectedColumns:[...t.map(M=>G(N({},M),{label:M.name,columnId:Xt()}))],selectedColumns:[...n.map(M=>G(N({},M),{columnId:Xt()}))]}),f={searchSelectedColumn:""},u=K(p.isVisible&&"sps-button--open",i),{formMeta:g,formValue:S,updateForm:T}=vc(f);function x(M){if(M.target.value){const _=[...p.selectedColumns],R=[];p.unselectedColumns.forEach(O=>{M.target.value===O.name?(T(f),_.push({columnId:Xt(),name:O.name,value:O.value})):R.push(O)}),m({selectedColumns:_,unselectedColumns:R})}}function w(M){const _=[],R=[...p.unselectedColumns];p.selectedColumns.forEach(O=>{M===O.value?R.push({columnId:Xt(),name:O.name,value:O.value}):_.push(O)}),m({selectedColumns:_,unselectedColumns:R})}function D(M){if(!M.destination)return;const _=[...p.selectedColumns],[R]=_.splice(M.source.index,1);_.splice(M.destination.index,0,R),m({selectedColumns:_})}function I(){m({isVisible:!1});const M=p.selectedColumns.map(_=>{const R=N({},_);return R.columnId&&delete R.columnId,R});T(f),o(M)}function v(){m({isVisible:!p.isVisible})}return a.createElement("div",N({className:"sps-column-chooser z-stratum-dropdown"},c),a.createElement(Ke,{className:u,"aria-label":`${p.isVisible?"Close":"Open"} Column Chooser`,kind:L.ButtonKind.ICON,icon:L.SpsIcon.TABLE,onClick:v,"data-testid":"button"}),p.isVisible&&a.createElement(ci,{"data-testid":"open",footer:()=>a.createElement(Ke,{"aria-label":"Apply Changes",kind:L.ButtonKind.LINK,onClick:I},"Apply Changes")},a.createElement("div",{className:"sps-column-chooser__search-container"},a.createElement(fs,{suggestions:p.unselectedColumns.map(M=>M.name),disabled:s&&p.selectedColumns.length>=s,value:S.searchSelectedColumn?S.searchSelectedColumn:"",formMeta:g.fields.searchSelectedColumn,onChange:x,placeholder:"Find Columns to Add","data-testid":"autocomplete"})),a.createElement("div",{className:"sps-column-chooser__selected-title"},"Selected"),a.createElement(ou,{onDragEnd:D},a.createElement(ii,{droppableId:"column-chooser"},M=>a.createElement("div",G(N({},M.droppableProps),{ref:M.innerRef}),p.selectedColumns.map((_,R)=>a.createElement(Xs,{index:R,key:_.columnId,columnId:_.columnId,name:_.name,value:_.value,onDelete:w,mandatory:_.mandatory})),M.placeholder)))))}Object.assign(pi,{props:jx,propTypes:qx,displayName:"SpsColumnChooser"});const yu={basic:{label:"Basic",description:"Column chooser component",examples:{basic:{react:y.code`
                     function DemoComponent() {
                         const unselectedCols = [
                             { name: "Red Fish", value: "Red" },
@@ -2432,7 +2432,7 @@ var s=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                     </SpsTable>
                   )
                 }
-              `}}}},TD={checked:"boolean",onChange:"ChangeEventHandler",indeterminate:"boolean",disabled:"boolean",options:"Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"},ED=G(N({},z),{checked:E.exports.bool,onChange:te(),indeterminate:E.exports.bool,options:E.exports.arrayOf(E.exports.oneOfType([E.exports.func,E.exports.any])).isRequired,disabled:E.exports.bool});function vi(e){const m=e,{options:t,className:n,checked:s,onChange:o,indeterminate:i,disabled:l}=m,c=q(m,["options","className","checked","onChange","indeterminate","disabled"]),p=K("sps-checkbox-dropdown",n);return a.createElement("span",N({className:p},c),a.createElement(Nn,{indeterminate:i,checked:s,disabled:l,onChange:o,inline:!0}),a.createElement(Dn,{disabled:l,options:t,icon:L.SpsIcon.CHEVRON_DOWN}))}Object.assign(vi,{props:TD,propTypes:ED,displayName:"SpsCheckboxDropdown"});const wD={kind:"FeedbackBlockKind"},CD=G(N({},z),{kind:ve(L.FeedbackBlockKind)});function yi(e){const p=e,{children:t,className:n,kind:s=L.FeedbackBlockKind.TIP,"data-testid":o,unsafelyReplaceClassName:i}=p,l=q(p,["children","className","kind","data-testid","unsafelyReplaceClassName"]),c=K(i||"sps-feedback-block",`sps-feedback-block--${s}`,n);return a.createElement("div",N({className:c,role:"alert","data-testid":o},l),a.createElement("i",{className:K("sps-icon",`sps-icon-${L.FeedbackBlockIcons[s]}`),"aria-hidden":"true"}),a.createElement("span",{className:"sps-feedback-block__content","data-testid":`${o}__text`},t))}Object.assign(yi,{props:wD,propTypes:CD,displayName:"SpsFeedbackBlock"});const Gu={standard:{label:"Standard Size",description:"Use Standard Size Feedback Blocks for the majority of cases. If a smaller or more subtle solution is needed, use the Micro Size Feedback Block.",examples:{error:{description:"Error",jsx:y.code`
+              `}}}},TD={checked:"boolean",onChange:"ChangeEventHandler",indeterminate:"boolean",disabled:"boolean",options:"Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"},ED=G(N({},z),{checked:E.exports.bool,onChange:te(),indeterminate:E.exports.bool,options:E.exports.arrayOf(E.exports.oneOfType([E.exports.func,E.exports.any])).isRequired,disabled:E.exports.bool});function vi(e){const f=e,{options:t,className:n,checked:s,onChange:o,indeterminate:i,disabled:l,"data-testid":c}=f,p=q(f,["options","className","checked","onChange","indeterminate","disabled","data-testid"]),m=K("sps-checkbox-dropdown",n);return a.createElement("span",N({className:m,"data-testid":c},p),a.createElement(Nn,{indeterminate:i,checked:s,disabled:l,onChange:o,inline:!0,"data-testid":`${c}__checkbox`}),a.createElement(Dn,{disabled:l,options:t,icon:L.SpsIcon.CHEVRON_DOWN,"data-testid":`${c}__dropdown`}))}Object.assign(vi,{props:TD,propTypes:ED,displayName:"SpsCheckboxDropdown"});const wD={kind:"FeedbackBlockKind"},CD=G(N({},z),{kind:ve(L.FeedbackBlockKind)});function yi(e){const p=e,{children:t,className:n,kind:s=L.FeedbackBlockKind.TIP,"data-testid":o,unsafelyReplaceClassName:i}=p,l=q(p,["children","className","kind","data-testid","unsafelyReplaceClassName"]),c=K(i||"sps-feedback-block",`sps-feedback-block--${s}`,n);return a.createElement("div",N({className:c,role:"alert","data-testid":o},l),a.createElement("i",{className:K("sps-icon",`sps-icon-${L.FeedbackBlockIcons[s]}`),"aria-hidden":"true"}),a.createElement("span",{className:"sps-feedback-block__content","data-testid":`${o}__text`},t))}Object.assign(yi,{props:wD,propTypes:CD,displayName:"SpsFeedbackBlock"});const Gu={standard:{label:"Standard Size",description:"Use Standard Size Feedback Blocks for the majority of cases. If a smaller or more subtle solution is needed, use the Micro Size Feedback Block.",examples:{error:{description:"Error",jsx:y.code`
                     <SpsFeedbackBlock kind={FeedbackBlockKind.ERROR}>
                         We are experiencing difficulties communicating to the server. Please try again later.
                     </SpsFeedbackBlock>

package/lib/index.es.js

@@ -6443,7 +6443,7 @@ function SpsCheckbox(_q) {
     id: controlId,
     checked,
     disabled,
-    "data-testId": `${testId}__checkbox-input`,
+    "data-testid": `${testId}__checkbox-input`,
     onChange: handleChange
   }, rest)), /* @__PURE__ */ React.createElement("label", {
     className: "sps-checkable__label",
@@ -15668,6 +15668,7 @@ function SpsColumnChooser(props2) {
       const unselected = [];
       state.unselectedColumns.forEach((column) => {
         if (event.target.value === column.name) {
+          updateForm(initialSearchValue);
           selected.push({
             columnId: nanoid(),
             name: column.name,
@@ -23095,28 +23096,33 @@ function SpsCheckboxDropdown(props2) {
     checked,
     onChange,
     indeterminate,
-    disabled
+    disabled,
+    "data-testid": testId
   } = _a, rest = __objRest(_a, [
     "options",
     "className",
     "checked",
     "onChange",
     "indeterminate",
-    "disabled"
+    "disabled",
+    "data-testid"
   ]);
   const classes = clsx("sps-checkbox-dropdown", className);
   return /* @__PURE__ */ React.createElement("span", __spreadValues({
-    className: classes
+    className: classes,
+    "data-testid": testId
   }, rest), /* @__PURE__ */ React.createElement(SpsCheckbox, {
     indeterminate,
     checked,
     disabled,
     onChange,
-    inline: true
+    inline: true,
+    "data-testid": `${testId}__checkbox`
   }), /* @__PURE__ */ React.createElement(SpsDropdown, {
     disabled,
     options,
-    icon: SpsIcon.CHEVRON_DOWN
+    icon: SpsIcon.CHEVRON_DOWN,
+    "data-testid": `${testId}__dropdown`
   }));
 }
 Object.assign(SpsCheckboxDropdown, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.37.1",
+  "version": "6.37.3",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,10 +28,10 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "6.37.1",
-    "@spscommerce/ds-illustrations": "6.37.1",
-    "@spscommerce/ds-shared": "6.37.1",
-    "@spscommerce/positioning": "6.37.1",
+    "@spscommerce/ds-colors": "6.37.3",
+    "@spscommerce/ds-illustrations": "6.37.3",
+    "@spscommerce/ds-shared": "6.37.3",
+    "@spscommerce/positioning": "6.37.3",
     "@spscommerce/utils": "^6.11.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
@@ -40,10 +40,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "6.37.1",
-    "@spscommerce/ds-illustrations": "6.37.1",
-    "@spscommerce/ds-shared": "6.37.1",
-    "@spscommerce/positioning": "6.37.1",
+    "@spscommerce/ds-colors": "6.37.3",
+    "@spscommerce/ds-illustrations": "6.37.3",
+    "@spscommerce/ds-shared": "6.37.3",
+    "@spscommerce/positioning": "6.37.3",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^10.4.0",
     "@types/prop-types": "^15.7.1",