@spscommerce/ds-react 7.7.1 → 7.7.3

package/lib/index.cjs.js

@@ -1845,7 +1845,7 @@ Valid keys: `+JSON.stringify(Object.keys(G),null,"  "));var Te=xe(le,re,ne,ee,U+
                             </div>
                         );
                     }
-                `}}}},oN={disabled:"boolean",formMeta:"SpsFormFieldMeta<SimpleDateRange | DatePreset>",maxDate:"SimpleDate",minDate:"SimpleDate",onChange:"(newDateRange: SimpleDateRange | DatePreset) => void",presets:"Array<DatePreset>",value:"SimpleDateRange | DatePreset",showTwoMonths:"boolean"},Dd="sps-datepicker",xo=[{definition:"P0D",label:"design-system:datepicker.preset.today"},{definition:"() => [null, {month: 1, date: 1, year: 3000}]",label:"design-system:datepicker.preset.before"},{definition:"() => [{month: 1, date: 1, year: 1990}, null]",label:"design-system:datepicker.preset.after"},{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 Mi({children:e,className:t,disabled:n,formMeta:r,id:a,maxDate:o,minDate:l,onChange:c,presets:p=xo,value:u,showTwoMonths:m=!1,"data-testid":f,...h}){const{t:g}=s.useContext(Re),{wrapperId:E,controlId:w}=vt(a,r),T=s.useRef(null),D=s.useRef(null),N=s.useRef(null),[k,b]=s.useState(Array.isArray(u)?oe.toStringRange(u):""),[I,L]=s.useState(null),[M,O]=s.useState(),{showPopup:R,doShowPopup:W,doHidePopup:_}=Hr(T,N);function V(A){r&&(r.setValue(A),r.markAsDirty()),c&&c(A)}function x(A){const q=u||[];let J;!q[0]||q[1]||oe.isBefore(A,q[0])?J=[A,null]:(J=[q[0],A],_(!0),D&&D.current&&D.current.focus()),I&&X(I)==="Before"&&q[0]===null&&q[1]===null&&(J=[null,A],_(!0),D&&D.current&&D.current.focus()),I&&X(I)==="After"&&(_(!0),D&&D.current&&D.current.focus()),V(J),b(oe.toStringRange(J)),O(void 0),(I&&X(I)==="Before"&&J&&J[0]!==null||I&&X(I)!=="Before"&&X(I)!=="After")&&L(null)}function F(A){b(A.target.value);const q=oe.createRangeFrom(A.target.value);V(q),O(void 0)}function Z(){b(""),V(),O(void 0),L(null)}function te(A){switch(A.key){case"Tab":_();break;case"Backspace":A.target.selectionStart===0&&u&&!Array.isArray(u)&&Z();break}}function z(A){if(!A){L(null),V(void 0);return}L(A);const q=oe.createRangeFromPreset(A);if(A&&X(A)==="Before")if(u&&u[0]&&u[1]){let J=oe.createRangeFrom("-");J&&V(J)}else{let J=oe.createRangeFrom(`-${oe.toString(u&&u[0])}`);J&&V(J)}else if(A&&X(A)==="After")if(u&&u[0]&&u[1]){let J=oe.createRangeFrom("-");J&&V(J)}else{let J=oe.createRangeFrom(`${oe.toString(u&&u[0])}-`);J&&V(J)}else JSON.stringify(u)!==JSON.stringify(q)&&V(q)}s.useEffect(()=>{if(!!u&&p!==xo&&Array.isArray(u)){const A=oe.toStringRange(u),q=p.find(J=>A===oe.toStringRange(oe.createRangeFromPreset(J)));q?z(q):L(null)}},[u]),s.useEffect(()=>{u?Array.isArray(u)&&!I?(u.every(A=>oe.isValid(A)||A===null)&&b(oe.toStringRange(u)),O(void 0)):Array.isArray(u)&&I&&X(I)==="Before"?u&&u[0]&&u[1]?L(null):u.every(A=>oe.isValid(A)||A===null)&&b(oe.toStringRange(u)):Array.isArray(u)&&I&&X(I)==="After"?u&&u[0]&&u[1]?L(null):u.every(A=>oe.isValid(A)||A===null)&&b(oe.toStringRange(u)):Array.isArray(u)&&I&&b(""):Z()},[u,I]);function X(A){return A&&/^design-system:/.test(A.label)?g(A.label):A.label}const G=H(Dd,"sps-text-input",R&&`${Dd}--open`,t);return s.createElement(s.Fragment,null,s.createElement(nt,{id:E,className:G,formMeta:r,inputRef:D,focusInputOnClick:!0,ref:T},s.createElement("div",{className:H("sps-form-control",n&&"disabled")},s.createElement("i",{className:H("sps-text-input__icon","sps-icon","sps-icon-calendar")}),I&&s.createElement("div",{"data-testid":`${f}_selected_preset`,className:"sps-datepicker__selected-preset"},s.createElement("span",{className:"sps-tag sps-tag--info"},X(I))),s.createElement("input",{type:"text",ref:D,className:"sps-text-input__input","data-testid":`${f}_date_input`,id:w,placeholder:!k&&!I?Ks:void 0,onChange:F,onClick:W,onFocus:W,onKeyDown:te,value:k,disabled:n,...h}),u&&!n&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:Z}))),s.createElement(Ii,{isOpen:R,attachTo:T,ref:N},s.createElement("div",{className:"sps-datepicker__presets"},s.createElement("fieldset",null,s.createElement("legend",{className:"sps-datepicker__presets-label"},g("design-system:datepicker.presetsLabel")),s.createElement("div",{className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},s.createElement("input",{"data-testid":`${f}_presets_custom_input`,type:"radio",id:`sps-date-range-picker-${E}__range-custom`,className:"sps-custom-control__input",checked:!I,name:`sps-date-range-picker-${E}__range`,onChange:()=>z()}),s.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${E}__range-custom`},g("design-system:datepicker.preset.custom"))),p.map((A,q)=>s.createElement("div",{key:X(A),className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},s.createElement("input",{type:"radio","data-testid":`${f}_preset_option_${A.label}`,id:`sps-date-range-picker-${E}__range-${q}`,name:`sps-date-range-picker-${E}__range`,onChange:()=>z(A),checked:I!=null&&I.definition?I.definition===A.definition:!1,className:"sps-custom-control__input"}),s.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${E}__range-${q}`},X(A)))))),s.createElement(xi,{"data-testid":`${f}_calendar`,selectedRange:Array.isArray(u)?u:M,onNewSelection:x,minDate:l,maxDate:o,showTwoMonths:m,selectedPreset:I&&X(I)})))}Object.assign(Mi,{props:oN,displayName:"SpsDateRangePicker"});const om={basic:{label:"Basic",examples:{basic:{react:y.code`
+                `}}}},oN={disabled:"boolean",formMeta:"SpsFormFieldMeta<SimpleDateRange | DatePreset>",maxDate:"SimpleDate",minDate:"SimpleDate",onChange:"(newDateRange: SimpleDateRange | DatePreset) => void",presets:"Array<DatePreset>",value:"SimpleDateRange | DatePreset",showTwoMonths:"boolean"},Dd="sps-datepicker",xo=[{definition:"P0D",label:"design-system:datepicker.preset.today"},{definition:"() => [null, {month: 1, date: 1, year: 3000}]",label:"design-system:datepicker.preset.before"},{definition:"() => [{month: 1, date: 1, year: 1990}, null]",label:"design-system:datepicker.preset.after"},{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 Mi({children:e,className:t,disabled:n,formMeta:r,id:a,maxDate:o,minDate:l,onChange:c,presets:p=xo,value:u,showTwoMonths:m=!1,"data-testid":f,...h}){const{t:g}=s.useContext(Re),{wrapperId:E,controlId:w}=vt(a,r),T=s.useRef(null),D=s.useRef(null),N=s.useRef(null),[k,b]=s.useState(Array.isArray(u)?oe.toStringRange(u):""),[I,L]=s.useState(null),[M,O]=s.useState(),{showPopup:R,doShowPopup:W,doHidePopup:_}=Hr(T,N);function V(A){r&&(r.setValue(A),r.markAsDirty()),c&&c(A)}function x(A){const q=u||[];let J;!q[0]||q[1]||oe.isBefore(A,q[0])?J=[A,null]:(J=[q[0],A],_(!0),D&&D.current&&D.current.focus()),I&&X(I)==="Before"&&q[0]===null&&q[1]===null&&(J=[null,A],_(!0),D&&D.current&&D.current.focus()),I&&X(I)==="After"&&(_(!0),D&&D.current&&D.current.focus()),V(J),b(oe.toStringRange(J)),O(void 0),(I&&X(I)==="Before"&&J&&J[0]!==null||I&&X(I)!=="Before"&&X(I)!=="After")&&L(null)}function F(A){b(A.target.value);const q=oe.createRangeFrom(A.target.value);V(q),O(void 0)}function Z(){b(""),V(),O(void 0),L(null)}function te(A){switch(A.key){case"Tab":_();break;case"Backspace":A.target.selectionStart===0&&u&&!Array.isArray(u)&&Z();break}}function z(A){if(!A){L(null),V(void 0);return}L(A);const q=oe.createRangeFromPreset(A);if(A&&X(A)==="Before")if(u&&u[0]&&u[1]){let J=oe.createRangeFrom("-");J&&V(J)}else{let J=oe.createRangeFrom(`-${oe.toString(u&&u[0])}`);J&&V(J)}else if(A&&X(A)==="After")if(u&&u[0]&&u[1]){let J=oe.createRangeFrom("-");J&&V(J)}else{let J=oe.createRangeFrom(`${oe.toString(u&&u[0])}-`);J&&V(J)}else JSON.stringify(u)!==JSON.stringify(q)&&V(q)}s.useEffect(()=>{if(!!u&&p!==xo&&Array.isArray(u)){const A=oe.toStringRange(u),q=p.find(J=>A===oe.toStringRange(oe.createRangeFromPreset(J)));q?z(q):u[0]===null||u[1]===null||L(null)}},[u]),s.useEffect(()=>{u?Array.isArray(u)&&!I?(u.every(A=>oe.isValid(A)||A===null)&&b(oe.toStringRange(u)),O(void 0)):Array.isArray(u)&&I&&X(I)==="Before"?u&&u[0]&&u[1]?L(null):u.every(A=>oe.isValid(A)||A===null)&&b(oe.toStringRange(u)):Array.isArray(u)&&I&&X(I)==="After"?u&&u[0]&&u[1]?L(null):u.every(A=>oe.isValid(A)||A===null)&&b(oe.toStringRange(u)):Array.isArray(u)&&I&&b(""):Z()},[u,I]);function X(A){return A&&/^design-system:/.test(A.label)?g(A.label):A.label}const G=H(Dd,"sps-text-input",R&&`${Dd}--open`,t);return s.createElement(s.Fragment,null,s.createElement(nt,{id:E,className:G,formMeta:r,inputRef:D,focusInputOnClick:!0,ref:T},s.createElement("div",{className:H("sps-form-control",n&&"disabled")},s.createElement("i",{className:H("sps-text-input__icon","sps-icon","sps-icon-calendar")}),I&&s.createElement("div",{"data-testid":`${f}_selected_preset`,className:"sps-datepicker__selected-preset"},s.createElement("span",{className:"sps-tag sps-tag--info"},X(I))),s.createElement("input",{type:"text",ref:D,className:"sps-text-input__input","data-testid":`${f}_date_input`,id:w,placeholder:!k&&!I?Ks:void 0,onChange:F,onClick:W,onFocus:W,onKeyDown:te,value:k,disabled:n,...h}),u&&!n&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:Z}))),s.createElement(Ii,{isOpen:R,attachTo:T,ref:N},s.createElement("div",{className:"sps-datepicker__presets"},s.createElement("fieldset",null,s.createElement("legend",{className:"sps-datepicker__presets-label"},g("design-system:datepicker.presetsLabel")),s.createElement("div",{className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},s.createElement("input",{"data-testid":`${f}_presets_custom_input`,type:"radio",id:`sps-date-range-picker-${E}__range-custom`,className:"sps-custom-control__input",checked:!I,name:`sps-date-range-picker-${E}__range`,onChange:()=>z()}),s.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${E}__range-custom`},g("design-system:datepicker.preset.custom"))),p.map((A,q)=>s.createElement("div",{key:X(A),className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},s.createElement("input",{type:"radio","data-testid":`${f}_preset_option_${A.label}`,id:`sps-date-range-picker-${E}__range-${q}`,name:`sps-date-range-picker-${E}__range`,onChange:()=>z(A),checked:I!=null&&I.definition?I.definition===A.definition:!1,className:"sps-custom-control__input"}),s.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${E}__range-${q}`},X(A)))))),s.createElement(xi,{"data-testid":`${f}_calendar`,selectedRange:Array.isArray(u)?u:M,onNewSelection:x,minDate:l,maxDate:o,showTwoMonths:m,selectedPreset:I&&X(I)})))}Object.assign(Mi,{props:oN,displayName:"SpsDateRangePicker"});const om={basic:{label:"Basic",examples:{basic:{react:y.code`
                     import {
                         useSpsForm,
                         SpsLabel,

package/lib/index.es.js

@@ -12367,7 +12367,7 @@ function Eu({
           se.createRangeFromPreset(j)
         )
       );
-      z ? U(z) : L(null);
+      z ? U(z) : u[0] === null || u[1] === null || L(null);
     }
   }, [u]), s.useEffect(() => {
     u ? Array.isArray(u) && !I ? (u.every((F) => se.isValid(F) || F === null) && b(se.toStringRange(u)), O(void 0)) : Array.isArray(u) && I && J(I) === "Before" ? u && u[0] && u[1] ? L(null) : u.every((F) => se.isValid(F) || F === null) && b(se.toStringRange(u)) : Array.isArray(u) && I && J(I) === "After" ? u && u[0] && u[1] ? L(null) : u.every((F) => se.isValid(F) || F === null) && b(se.toStringRange(u)) : Array.isArray(u) && I && b("") : q();

package/package.json

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