@spscommerce/ds-react 7.3.2 → 7.4.1

package/lib/index.cjs.js

@@ -1582,7 +1582,7 @@ Valid keys: `+JSON.stringify(Object.keys(F),null,"  "));var Te=xe(ie,ne,te,Q,U+"
                             </div>
                         );
                     }
-                `}}}},HD={disabled:"boolean",formMeta:"SpsFormFieldMeta<SimpleDateRange | DatePreset>",maxDate:"SimpleDate",minDate:"SimpleDate",onChange:"(newDateRange: SimpleDateRange | DatePreset) => void",presets:"Array<DatePreset>",value:"SimpleDateRange | DatePreset"},pd="sps-datepicker",yo=[{definition:"P0D",label:"design-system:datepicker.preset.today"},{definition:"P7D",label:"design-system:datepicker.preset.sevenDays"},{definition:"P30D",label:"design-system:datepicker.preset.thirtyDays"},{definition:"P60D",label:"design-system:datepicker.preset.sixtyDays"},{definition:"P90D",label:"design-system:datepicker.preset.ninetyDays"},{definition:"P1Y",label:"design-system:datepicker.preset.oneYear"}];function Ti({children:e,className:t,disabled:n,formMeta:a,id:s,maxDate:i,minDate:l,onChange:c,presets:u=yo,value:p,"data-testid":f,...m}){const{t:h}=r.useContext(Le),{wrapperId:S,controlId:y}=bt(s,a),T=r.useRef(null),C=r.useRef(null),D=r.useRef(null),[N,I]=r.useState(Array.isArray(p)?me.toStringRange(p):""),[b,k]=r.useState(null),[O,x]=r.useState(),{showPopup:L,doShowPopup:A,doHidePopup:G}=Fa(T,D);function _(F){a&&(a.setValue(F),a.markAsDirty()),c&&c(F)}function W(F){const H=p||[];let q;!H[0]||H[1]||me.isBefore(F,H[0])?q=[F,null]:(q=[H[0],F],G(!0),C&&C.current&&C.current.focus()),_(q),I(me.toStringRange(q)),x(void 0),k(null)}function M(F){I(F.target.value);const H=me.createRangeFrom(F.target.value);_(H),x(void 0)}function B(){I(""),_(),x(void 0),k(null)}function J(F){switch(F.key){case"Tab":G();break;case"Backspace":F.target.selectionStart===0&&p&&!Array.isArray(p)&&B();break}}function ee(F){if(!F){k(null),_(void 0);return}I(""),k(F);const H=me.createRangeFromPreset(F);JSON.stringify(p)!==JSON.stringify(H)&&_(H)}r.useEffect(()=>{if(!!p&&u!==yo&&Array.isArray(p)){const F=me.toStringRange(p),H=u.find(q=>F===me.toStringRange(me.createRangeFromPreset(q)));H?ee(H):k(null)}},[p]),r.useEffect(()=>{p?Array.isArray(p)&&!b?(p.every(F=>me.isValid(F))&&I(me.toStringRange(p)),x(void 0)):Array.isArray(p)&&b&&I(""):B()},[p,b]);function j(F){return F&&/^design-system:/.test(F.label)?h(F.label):F.label}const re=K(pd,"sps-text-input",L&&`${pd}--open`,t);return r.createElement(r.Fragment,null,r.createElement(et,{id:S,className:re,formMeta:a,inputRef:C,focusInputOnClick:!0,ref:T},r.createElement("div",{className:K("sps-form-control",n&&"disabled")},r.createElement("i",{className:K("sps-text-input__icon","sps-icon","sps-icon-calendar")}),b&&r.createElement("div",{"data-testid":`${f}_selected_preset`,className:"sps-datepicker__selected-preset"},r.createElement("span",{className:"sps-tag sps-tag--info"},j(b))),r.createElement("input",{type:"text",ref:C,className:"sps-text-input__input","data-testid":`${f}_date_input`,id:y,placeholder:!N&&!b?Br:void 0,onChange:M,onClick:A,onFocus:A,onKeyDown:J,value:N,disabled:n,...m}),p&&!n&&r.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:B}))),r.createElement(yi,{isOpen:L,attachTo:T,ref:D},r.createElement("div",{className:"sps-datepicker__presets"},r.createElement("fieldset",null,r.createElement("legend",{className:"sps-datepicker__presets-label"},h("design-system:datepicker.presetsLabel")),r.createElement("div",{className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},r.createElement("input",{"data-testid":`${f}_presets_custom_input`,type:"radio",id:`sps-date-range-picker-${S}__range-custom`,className:"sps-custom-control__input",checked:!b,name:`sps-date-range-picker-${S}__range`,onChange:()=>ee()}),r.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${S}__range-custom`},h("design-system:datepicker.preset.custom"))),u.map((F,H)=>r.createElement("div",{key:j(F),className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},r.createElement("input",{type:"radio","data-testid":`${f}_preset_option_${F.label}`,id:`sps-date-range-picker-${S}__range-${H}`,name:`sps-date-range-picker-${S}__range`,onChange:()=>ee(F),checked:b!=null&&b.definition?b.definition===F.definition:!1,className:"sps-custom-control__input"}),r.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${S}__range-${H}`},j(F)))))),r.createElement(vi,{"data-testid":`${f}_calendar`,selectedRange:Array.isArray(p)?p:O,onNewSelection:W,minDate:l,maxDate:i})))}Object.assign(Ti,{props:HD,displayName:"SpsDateRangePicker"});const Hp={basic:{label:"Basic",examples:{basic:{react:E.code`
+                `}}}},HD={disabled:"boolean",formMeta:"SpsFormFieldMeta<SimpleDateRange | DatePreset>",maxDate:"SimpleDate",minDate:"SimpleDate",onChange:"(newDateRange: SimpleDateRange | DatePreset) => void",presets:"Array<DatePreset>",value:"SimpleDateRange | DatePreset"},pd="sps-datepicker",yo=[{definition:"P0D",label:"design-system:datepicker.preset.today"},{definition:"P7D",label:"design-system:datepicker.preset.sevenDays"},{definition:"P30D",label:"design-system:datepicker.preset.thirtyDays"},{definition:"P60D",label:"design-system:datepicker.preset.sixtyDays"},{definition:"P90D",label:"design-system:datepicker.preset.ninetyDays"},{definition:"P1Y",label:"design-system:datepicker.preset.oneYear"}];function Ti({children:e,className:t,disabled:n,formMeta:a,id:s,maxDate:i,minDate:l,onChange:c,presets:u=yo,value:p,"data-testid":f,...m}){const{t:h}=r.useContext(Le),{wrapperId:S,controlId:y}=bt(s,a),T=r.useRef(null),C=r.useRef(null),D=r.useRef(null),[N,I]=r.useState(Array.isArray(p)?me.toStringRange(p):""),[b,k]=r.useState(null),[O,x]=r.useState(),{showPopup:L,doShowPopup:A,doHidePopup:G}=Fa(T,D);function _(F){a&&(a.setValue(F),a.markAsDirty()),c&&c(F)}function W(F){const H=p||[];let q;!H[0]||H[1]||me.isBefore(F,H[0])?q=[F,null]:(q=[H[0],F],G(!0),C&&C.current&&C.current.focus()),_(q),I(me.toStringRange(q)),x(void 0),k(null)}function M(F){I(F.target.value);const H=me.createRangeFrom(F.target.value);_(H),x(void 0)}function B(){I(""),_(),x(void 0),k(null)}function J(F){switch(F.key){case"Tab":G();break;case"Backspace":F.target.selectionStart===0&&p&&!Array.isArray(p)&&B();break}}function ee(F){if(!F){k(null),_(void 0);return}I(""),k(F);const H=me.createRangeFromPreset(F);JSON.stringify(p)!==JSON.stringify(H)&&_(H)}r.useEffect(()=>{if(!!p&&u!==yo&&Array.isArray(p)){const F=me.toStringRange(p),H=u.find(q=>F===me.toStringRange(me.createRangeFromPreset(q)));H?ee(H):k(null)}},[p]),r.useEffect(()=>{p?Array.isArray(p)&&!b?(p.every(F=>me.isValid(F)||F===null)&&I(me.toStringRange(p)),x(void 0)):Array.isArray(p)&&b&&I(""):B()},[p,b]);function j(F){return F&&/^design-system:/.test(F.label)?h(F.label):F.label}const re=K(pd,"sps-text-input",L&&`${pd}--open`,t);return r.createElement(r.Fragment,null,r.createElement(et,{id:S,className:re,formMeta:a,inputRef:C,focusInputOnClick:!0,ref:T},r.createElement("div",{className:K("sps-form-control",n&&"disabled")},r.createElement("i",{className:K("sps-text-input__icon","sps-icon","sps-icon-calendar")}),b&&r.createElement("div",{"data-testid":`${f}_selected_preset`,className:"sps-datepicker__selected-preset"},r.createElement("span",{className:"sps-tag sps-tag--info"},j(b))),r.createElement("input",{type:"text",ref:C,className:"sps-text-input__input","data-testid":`${f}_date_input`,id:y,placeholder:!N&&!b?Br:void 0,onChange:M,onClick:A,onFocus:A,onKeyDown:J,value:N,disabled:n,...m}),p&&!n&&r.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:B}))),r.createElement(yi,{isOpen:L,attachTo:T,ref:D},r.createElement("div",{className:"sps-datepicker__presets"},r.createElement("fieldset",null,r.createElement("legend",{className:"sps-datepicker__presets-label"},h("design-system:datepicker.presetsLabel")),r.createElement("div",{className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},r.createElement("input",{"data-testid":`${f}_presets_custom_input`,type:"radio",id:`sps-date-range-picker-${S}__range-custom`,className:"sps-custom-control__input",checked:!b,name:`sps-date-range-picker-${S}__range`,onChange:()=>ee()}),r.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${S}__range-custom`},h("design-system:datepicker.preset.custom"))),u.map((F,H)=>r.createElement("div",{key:j(F),className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},r.createElement("input",{type:"radio","data-testid":`${f}_preset_option_${F.label}`,id:`sps-date-range-picker-${S}__range-${H}`,name:`sps-date-range-picker-${S}__range`,onChange:()=>ee(F),checked:b!=null&&b.definition?b.definition===F.definition:!1,className:"sps-custom-control__input"}),r.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${S}__range-${H}`},j(F)))))),r.createElement(vi,{"data-testid":`${f}_calendar`,selectedRange:Array.isArray(p)?p:O,onNewSelection:W,minDate:l,maxDate:i})))}Object.assign(Ti,{props:HD,displayName:"SpsDateRangePicker"});const Hp={basic:{label:"Basic",examples:{basic:{react:E.code`
                     function Component() {
                         const { formValue, formMeta, updateForm } = useSpsForm({
                             dateRange: [

package/lib/index.es.js

@@ -11954,7 +11954,7 @@ function ap({
       V ? X(V) : k(null);
     }
   }, [p]), r.useEffect(() => {
-    p ? Array.isArray(p) && !S ? (p.every((F) => me.isValid(F)) && I(me.toStringRange(p)), x(void 0)) : Array.isArray(p) && S && I("") : B();
+    p ? Array.isArray(p) && !S ? (p.every((F) => me.isValid(F) || F === null) && I(me.toStringRange(p)), x(void 0)) : Array.isArray(p) && S && I("") : B();
   }, [p, S]);
   function U(F) {
     return F && /^design-system:/.test(F.label) ? h(F.label) : F.label;

package/package.json

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