@spscommerce/ds-react 6.21.1 → 6.23.0

package/lib/index.cjs.js

@@ -9653,7 +9653,7 @@ function Component() {
                         )
                     }
                 `}}}};function mf(e,t){const n=new RegExp(`[\\t\r
-${t.join("").replace("]","\\]").replace(" ","\\s")}]+`);return e.split(n).filter(s=>s!=="")}const JN={disabled:"boolean",formMeta:"SpsFormFieldMeta<any[]>",icon:"SpsIcon",onChange:"ChangeEventHandler",onEntryChange:"(searchText: string) => void",placeholder:"string",value:"any",createTagOptions:"string[]"},ZN=G(N({},Y),{disabled:y.exports.bool,formControl:ce(),formMeta:ce(),icon:be(_.SpsIcon),onChange:ne(),onEntryChange:ne(),placeholder:y.exports.string,value:y.exports.any,createTagOptions:y.exports.arrayOf(y.exports.string)});function ff(w){var x=w,{className:e,disabled:t,formControl:n,formMeta:s,id:o,onChange:i,onEntryChange:c,placeholder:l,unsafelyReplaceClassName:p,value:u,icon:f,createTagOptions:m=[" ",","],"data-testid":g}=x,S=z(x,["className","disabled","formControl","formMeta","id","onChange","onEntryChange","placeholder","unsafelyReplaceClassName","value","icon","createTagOptions","data-testid"]);const C=s||n,{wrapperId:D,controlId:I}=Tt(o,C),[v,k]=Kt({keyDown:null,searchText:"",activeTagIndex:null,optionIds:""});a.useEffect(()=>{c&&c(v.searchText)},[v.searchText]);const R=a.useRef(),B=a.useRef(),M=a.useRef();function L(){setTimeout(()=>{B.current.focus()},0)}function F(j){k({searchText:""}),C&&(C.setValue(j),C.markAsDirty()),i&&i(new on({value:j}))}function A(j){const Z=u.filter((oe,ee)=>ee!==j);F(Z)}function $(j){k({searchText:j.target.value})}function V(j){if(M.current&&M.current.children.length&&j!==null){const Z=M.current.children[j],oe=Z==null?void 0:Z.querySelector(".sps-clickable-tag__icon");oe&&oe.focus()}}const W=a.useCallback(j=>{k({activeTagIndex:null,searchText:""});const Z=v.searchText.trim();Z&&u.indexOf(Z)===-1&&F([...u,...mf(Z,m)]),!((j.key==="Tab"||j.key==="Enter")&&!v.searchText)&&j.preventDefault()},[v.searchText,u,mf]);function pe(j){if(!t){const Z=!j.target.selectionStart&&u&&u.length;switch(j.key){case"Backspace":if(v.activeTagIndex===u.length-1){A(v.activeTagIndex),L();return}if(v.activeTagIndex!==null){A(v.activeTagIndex);return}if(Z){F(u.slice(0,u.length-1)),L();return}break;case"Delete":v.activeTagIndex!==null&&(A(v.activeTagIndex),L());break;case"Enter":case"Tab":W(j);break;case"Up":case"ArrowUp":case"Down":case"ArrowDown":j.preventDefault();break;case"Left":case"ArrowLeft":if(Z){v.activeTagIndex===null?(k({activeTagIndex:u.length-1}),V(u.length-1)):v.activeTagIndex>0&&(k({activeTagIndex:v.activeTagIndex-1}),V(v.activeTagIndex-1));return}break;case"Right":case"ArrowRight":if(v.activeTagIndex!==null){v.activeTagIndex===u.length-1?(k({activeTagIndex:null}),B.current.focus()):(k({activeTagIndex:v.activeTagIndex+1}),V(v.activeTagIndex+1));return}break}for(const oe of m)j.key===oe&&W(j);j.persist(),k({keyDown:j})}}function me(j){F([]),j.stopPropagation()}const re=K(p||"sps-multi-select",t&&"sps-form-control--disabled",e),se=new Array(u.length).fill(0).map((j,Z)=>`${D}_tag-${Z}`);return a.createElement(it,{id:D,className:re,formControl:n,formMeta:s,ref:R,inputRef:B,focusInputOnClick:!0,onKeyDown:pe,role:"listbox","aria-multiselectable":!0,"aria-activedescendant":se[v.activeTagIndex],"aria-owns":v.optionIds},a.createElement("div",{className:"sps-text-input"},a.createElement("div",{className:K("sps-form-control",u&&!t&&"sps-form-control--clearable")},f&&a.createElement("i",{className:K("sps-text-input__icon","sps-icon",`sps-icon-${f}`)}),a.createElement("div",{className:"sps-multi-select__tags-and-input",ref:M},Array.isArray(u)&&u.map((j,Z)=>a.createElement(Da,{id:se[Z],role:"option",disabled:t,"aria-selected":"true",key:se[Z],onRemove:()=>A(Z)},a.createElement("span",null,j))),a.createElement("input",N({type:"text",ref:B,"data-testid":`${g}__multi-value-text-input`,value:v.searchText,className:"sps-text-input__input",placeholder:v.searchText.length===0?l:void 0,id:I,onChange:$,onKeyDown:pe,disabled:t,role:"listbox","aria-multiselectable":"true","aria-owns":se.join(" ")},S))),u.length!==0&&!t?a.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:j=>me(j)}):null)))}Object.assign(ff,{props:JN,propTypes:ZN,displayName:"SpsMultiValueTextInput"});const XN={general:{label:"General Usage",description:({NavigateTo:e})=>a.createElement(a.Fragment,null,a.createElement("h5",null,"Coming soon"))}};function QN(e,t){const n=N(N({},_.SPS_ACTION_DEFAULTS),e),[s,o]=Kt(n);return Object.assign(t,s),[t,i=>{o(i),Object.assign(t,s)}]}const ek={basic:{label:"Basic Sorting Header",examples:{basic:{react:T.code`
+${t.join("").replace("]","\\]").replace(" ","\\s")}]+`);return e.split(n).filter(s=>s!=="")}const JN={disabled:"boolean",formMeta:"SpsFormFieldMeta<any[]>",icon:"SpsIcon",onChange:"ChangeEventHandler",onEntryChange:"(searchText: string) => void",placeholder:"string",value:"any",createTagOptions:"string[]"},ZN=G(N({},Y),{disabled:y.exports.bool,formControl:ce(),formMeta:ce(),icon:be(_.SpsIcon),onChange:ne(),onEntryChange:ne(),placeholder:y.exports.string,value:y.exports.any,createTagOptions:y.exports.arrayOf(y.exports.string)});function ff(w){var x=w,{className:e,disabled:t,formControl:n,formMeta:s,id:o,onChange:i,onEntryChange:c,placeholder:l,unsafelyReplaceClassName:p,value:u,icon:f,createTagOptions:m=[" ",","],"data-testid":g}=x,S=z(x,["className","disabled","formControl","formMeta","id","onChange","onEntryChange","placeholder","unsafelyReplaceClassName","value","icon","createTagOptions","data-testid"]);const C=s||n,{wrapperId:D,controlId:I}=Tt(o,C),[v,k]=Kt({keyDown:null,searchText:"",activeTagIndex:null,optionIds:""});a.useEffect(()=>{c&&c(v.searchText)},[v.searchText]);const R=a.useRef(),B=a.useRef(),M=a.useRef();function L(){setTimeout(()=>{B.current.focus()},0)}function F(j){k({searchText:""}),C&&(C.setValue(j),C.markAsDirty()),i&&i(new on({value:j}))}function A(j){const Z=u.filter((oe,ee)=>ee!==j);F(Z)}function $(j){k({searchText:j.target.value})}function V(j){if(M.current&&M.current.children.length&&j!==null){const Z=M.current.children[j],oe=Z==null?void 0:Z.querySelector(".sps-clickable-tag__icon");oe&&oe.focus()}}const W=a.useCallback(j=>{k({activeTagIndex:null,searchText:""});const Z=v.searchText.trim();Z&&u.indexOf(Z)===-1&&F([...u,...mf(Z,m)]),!((j.key==="Tab"||j.key==="Enter")&&!v.searchText)&&j.preventDefault()},[v.searchText,u,mf]);function pe(j){if(!t){const Z=!j.target.selectionStart&&u&&u.length;switch(j.key){case"Backspace":if(v.activeTagIndex===u.length-1){A(v.activeTagIndex),L();return}if(v.activeTagIndex!==null){A(v.activeTagIndex);return}if(Z){F(u.slice(0,u.length-1)),L();return}break;case"Delete":v.activeTagIndex!==null&&(A(v.activeTagIndex),L());break;case"Enter":case"Tab":W(j);break;case"Up":case"ArrowUp":case"Down":case"ArrowDown":j.preventDefault();break;case"Left":case"ArrowLeft":if(Z){v.activeTagIndex===null?(k({activeTagIndex:u.length-1}),V(u.length-1)):v.activeTagIndex>0&&(k({activeTagIndex:v.activeTagIndex-1}),V(v.activeTagIndex-1));return}break;case"Right":case"ArrowRight":if(v.activeTagIndex!==null){v.activeTagIndex===u.length-1?(k({activeTagIndex:null}),B.current.focus()):(k({activeTagIndex:v.activeTagIndex+1}),V(v.activeTagIndex+1));return}break}for(const oe of m)j.key===oe&&W(j);j.persist(),k({keyDown:j})}}function me(j){F([]),j.stopPropagation()}const re=K(p||"sps-multi-select",t&&"sps-form-control--disabled",e),se=new Array(u.length).fill(0).map((j,Z)=>`${D}_tag-${Z}`);return a.createElement(it,{id:D,className:re,formControl:n,formMeta:s,ref:R,inputRef:B,focusInputOnClick:!0,onKeyDown:pe,role:"listbox","aria-multiselectable":!0,"aria-activedescendant":se[v.activeTagIndex],"aria-owns":v.optionIds},a.createElement("div",{className:"sps-text-input"},a.createElement("div",{className:K("sps-form-control",u&&!t&&"sps-form-control--clearable")},f&&a.createElement("i",{className:K("sps-text-input__icon","sps-icon",`sps-icon-${f}`)}),a.createElement("div",{className:"sps-multi-select__tags-and-input",ref:M},Array.isArray(u)&&u.map((j,Z)=>a.createElement(Da,{id:se[Z],role:"option",disabled:t,"aria-selected":"true",key:se[Z],onRemove:()=>A(Z)},a.createElement("span",null,j))),a.createElement("input",N({type:"text",ref:B,"data-testid":`${g}__multi-value-text-input`,value:v.searchText,className:"sps-text-input__input",placeholder:v.searchText.length===0&&u.length===0?l:void 0,id:I,onChange:$,onKeyDown:pe,disabled:t,role:"listbox","aria-multiselectable":"true","aria-owns":se.join(" ")},S))),u.length!==0&&!t?a.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:j=>me(j)}):null)))}Object.assign(ff,{props:JN,propTypes:ZN,displayName:"SpsMultiValueTextInput"});const XN={general:{label:"General Usage",description:({NavigateTo:e})=>a.createElement(a.Fragment,null,a.createElement("h5",null,"Coming soon"))}};function QN(e,t){const n=N(N({},_.SPS_ACTION_DEFAULTS),e),[s,o]=Kt(n);return Object.assign(t,s),[t,i=>{o(i),Object.assign(t,s)}]}const ek={basic:{label:"Basic Sorting Header",examples:{basic:{react:T.code`
                 function DemoComponent() {
                     const [sort, setSort] = React.useState([{ key: 'id', direction: SortDirection.DESCENDING }]);
             

package/lib/index.es.js

@@ -38878,7 +38878,7 @@ function SpsMultiValueTextInput(_ma) {
     "data-testid": `${testId}__multi-value-text-input`,
     value: state.searchText,
     className: "sps-text-input__input",
-    placeholder: state.searchText.length === 0 ? placeholder : void 0,
+    placeholder: state.searchText.length === 0 && value.length === 0 ? placeholder : void 0,
     id: controlId,
     onChange: handleChange,
     onKeyDown: handleKeyDown,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.21.1",
+  "version": "6.23.0",
   "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.21.1",
-    "@spscommerce/ds-illustrations": "6.21.1",
-    "@spscommerce/ds-shared": "6.21.1",
-    "@spscommerce/positioning": "6.21.1",
+    "@spscommerce/ds-colors": "6.23.0",
+    "@spscommerce/ds-illustrations": "6.23.0",
+    "@spscommerce/ds-shared": "6.23.0",
+    "@spscommerce/positioning": "6.23.0",
     "@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.21.1",
-    "@spscommerce/ds-illustrations": "6.21.1",
-    "@spscommerce/ds-shared": "6.21.1",
-    "@spscommerce/positioning": "6.21.1",
+    "@spscommerce/ds-colors": "6.23.0",
+    "@spscommerce/ds-illustrations": "6.23.0",
+    "@spscommerce/ds-shared": "6.23.0",
+    "@spscommerce/positioning": "6.23.0",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",