@spscommerce/ds-react 6.37.2 → 6.37.3

package/lib/index.cjs.js

@@ -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" },

package/lib/index.es.js

@@ -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,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.37.2",
+  "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.2",
-    "@spscommerce/ds-illustrations": "6.37.2",
-    "@spscommerce/ds-shared": "6.37.2",
-    "@spscommerce/positioning": "6.37.2",
+    "@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.2",
-    "@spscommerce/ds-illustrations": "6.37.2",
-    "@spscommerce/ds-shared": "6.37.2",
-    "@spscommerce/positioning": "6.37.2",
+    "@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",