@spscommerce/ds-react 7.16.6 → 7.16.8

package/lib/dateRangePicker/SpsDateRangePicker.d.ts

@@ -7,7 +7,7 @@ export type SpsDateRangePickerProps = React.PropsWithChildren<SpsGlobalPropTypes
     formMeta?: SpsFormFieldMeta<SimpleDateRange | DatePreset | undefined>;
     maxDate?: SimpleDate;
     minDate?: SimpleDate;
-    onChange?: (newDateRange?: SimpleDateRange | DatePreset) => void;
+    onChange?: (newDateRange?: SimpleDateRange | DatePreset | null) => void;
     presets?: DatePreset[];
     value?: SimpleDateRange | DatePreset;
     showTwoMonths?: boolean;

package/lib/index.cjs.js

@@ -1873,7 +1873,7 @@ Valid keys: `+JSON.stringify(Object.keys(G),null,"  "));var Ne=De(ie,ae,re,ee,U+
                             </div>
                         );
                     }
-                `}}}},DN={disabled:"boolean",formMeta:"SpsFormFieldMeta<SimpleDateRange | DatePreset>",maxDate:"SimpleDate",minDate:"SimpleDate",onChange:"(newDateRange: SimpleDateRange | DatePreset) => void",presets:"Array<DatePreset>",value:"SimpleDateRange | DatePreset",showTwoMonths:"boolean"},Ad="sps-datepicker",Fo=[{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 Vi({children:e,className:t,disabled:n,formMeta:r,id:a,maxDate:o,minDate:l,onChange:c,presets:p=Fo,value:u,showTwoMonths:m=!1,"data-testid":f,...h}){const{t:S}=s.useContext(Pe),{wrapperId:T,controlId:E}=ut(a,r),w=s.useRef(null),C=s.useRef(null),x=s.useRef(null),[M,b]=s.useState(Array.isArray(u)?Z.toStringRange(u):""),[I,L]=s.useState(null),[k,R]=s.useState(),{showPopup:P,doShowPopup:H,doHidePopup:_}=gr(w,x);function B(A){r&&(r.setValue(A),r.markAsDirty()),c&&c(A)}function N(A){const j=u||[];let q;!j[0]||j[1]||Z.isBefore(A,j[0])?q=[A,null]:(q=[j[0],A],_(!0),C&&C.current&&C.current.focus()),I&&Q(I)==="Before"&&j[0]===null&&j[1]===null&&(q=[null,A],_(!0),C&&C.current&&C.current.focus()),I&&Q(I)==="After"&&(_(!0),C&&C.current&&C.current.focus()),B(q),b(Z.toStringRange(q)),R(void 0),(I&&Q(I)==="Before"&&q&&q[0]!==null||I&&Q(I)!=="Before"&&Q(I)!=="After")&&L(null)}function O(A){b(A.target.value);const j=Z.createRangeFrom(A.target.value);B(j),R(void 0)}function te(){b(""),B(),R(void 0),L(null)}function X(A){switch(A.key){case"Tab":_();break;case"Backspace":A.target.selectionStart===0&&u&&!Array.isArray(u)&&te();break}}function Y(A){if(!A){L(null),B(void 0);return}L(A);const j=Z.createRangeFromPreset(A);if(A&&Q(A)==="Before")if(u&&u[0]&&u[1]){let q=Z.createRangeFrom("-");q&&B(q)}else{let q=Z.createRangeFrom(`-${Z.toString(u&&u[0])}`);q&&B(q)}else if(A&&Q(A)==="After")if(u&&u[0]&&u[1]){let q=Z.createRangeFrom("-");q&&B(q)}else{let q=Z.createRangeFrom(`${Z.toString(u&&u[0])}-`);q&&B(q)}else JSON.stringify(u)!==JSON.stringify(j)&&B(j)}s.useEffect(()=>{if(!!u&&p!==Fo&&Array.isArray(u)){const A=Z.toStringRange(u),j=p.find(q=>A===Z.toStringRange(Z.createRangeFromPreset(q)));j?Y(j):u[0]===null||u[1]===null||L(null)}},[u]),s.useEffect(()=>{u?Array.isArray(u)&&!I?(u.every(A=>Z.isValid(A)||A===null)&&b(Z.toStringRange(u)),R(void 0)):Array.isArray(u)&&I&&Q(I)==="Before"?u&&u[0]&&u[1]?L(null):u.every(A=>Z.isValid(A)||A===null)&&b(Z.toStringRange(u)):Array.isArray(u)&&I&&Q(I)==="After"?u&&u[0]&&u[1]?L(null):u.every(A=>Z.isValid(A)||A===null)&&b(Z.toStringRange(u)):Array.isArray(u)&&I&&b(""):te()},[u,I]);function Q(A){return A&&/^design-system:/.test(A.label)?S(A.label):A.label}const G=K(Ad,"sps-text-input",P&&`${Ad}--open`,t);return s.createElement(s.Fragment,null,s.createElement(Qe,{id:T,className:G,formMeta:r,inputRef:C,focusInputOnClick:!0,ref:w},s.createElement("div",{className:K("sps-form-control",n&&"disabled")},s.createElement("i",{className:K("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"},Q(I))),s.createElement("input",{type:"text",ref:C,className:"sps-text-input__input","data-testid":`${f}_date_input`,id:E,placeholder:!M&&!I?cr:void 0,onChange:O,onClick:H,onFocus:H,onKeyDown:X,value:M,disabled:n,...h}),u&&!n&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:te}))),s.createElement(ua,{isOpen:P,attachTo:w,ref:x},s.createElement("div",{className:"sps-datepicker__presets"},s.createElement("fieldset",null,s.createElement("legend",{className:"sps-datepicker__presets-label"},S("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-${T}__range-custom`,className:"sps-custom-control__input",checked:!I,name:`sps-date-range-picker-${T}__range`,onChange:()=>Y()}),s.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${T}__range-custom`},S("design-system:datepicker.preset.custom"))),p.map((A,j)=>s.createElement("div",{key:Q(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-${T}__range-${j}`,name:`sps-date-range-picker-${T}__range`,onChange:()=>Y(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-${T}__range-${j}`},Q(A)))))),s.createElement(pa,{"data-testid":`${f}_calendar`,selectedRange:Array.isArray(u)?u:k,onNewSelection:N,minDate:l,maxDate:o,showTwoMonths:m,selectedPreset:I&&Q(I)})))}Object.assign(Vi,{props:DN,displayName:"SpsDateRangePicker"});const bm={basic:{label:"Basic",examples:{basic:{react:y.code`
+                `}}}},DN={disabled:"boolean",formMeta:"SpsFormFieldMeta<SimpleDateRange | DatePreset>",maxDate:"SimpleDate",minDate:"SimpleDate",onChange:"(newDateRange: SimpleDateRange | DatePreset | null) => void",presets:"Array<DatePreset>",value:"SimpleDateRange | DatePreset",showTwoMonths:"boolean"},Ad="sps-datepicker",Fo=[{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 Vi({children:e,className:t,disabled:n,formMeta:r,id:a,maxDate:o,minDate:l,onChange:c,presets:p=Fo,value:u,showTwoMonths:m=!1,"data-testid":f,...h}){const{t:S}=s.useContext(Pe),{wrapperId:T,controlId:E}=ut(a,r),w=s.useRef(null),C=s.useRef(null),x=s.useRef(null),[M,b]=s.useState(Array.isArray(u)?Z.toStringRange(u):""),[I,L]=s.useState(null),[k,R]=s.useState(),{showPopup:P,doShowPopup:H,doHidePopup:_}=gr(w,x);function B(A){r&&(r.setValue(A),r.markAsDirty()),c&&c(A)}function N(A){const j=u||[];let q;!j[0]||j[1]||Z.isBefore(A,j[0])?q=[A,null]:(q=[j[0],A],_(!0),C&&C.current&&C.current.focus()),I&&Q(I)==="Before"&&j[0]===null&&j[1]===null&&(q=[null,A],_(!0),C&&C.current&&C.current.focus()),I&&Q(I)==="After"&&(_(!0),C&&C.current&&C.current.focus()),B(q),b(Z.toStringRange(q)),R(void 0),(I&&Q(I)==="Before"&&q&&q[0]!==null||I&&Q(I)!=="Before"&&Q(I)!=="After")&&L(null)}function O(A){b(A.target.value);const j=Z.createRangeFrom(A.target.value);B(j),R(void 0)}function te(){b(""),B(),R(void 0),L(null)}function X(A){switch(A.key){case"Tab":_();break;case"Backspace":A.target.selectionStart===0&&u&&!Array.isArray(u)&&te();break}}function Y(A){if(!A){L(null),B(void 0);return}L(A);const j=Z.createRangeFromPreset(A);if(A&&Q(A)==="Before")if(u&&u[0]&&u[1]){let q=Z.createRangeFrom("-");q&&B(q)}else{let q=Z.createRangeFrom(`-${Z.toString(u&&u[0])}`);q&&B(q)}else if(A&&Q(A)==="After")if(u&&u[0]&&u[1]){let q=Z.createRangeFrom("-");q&&B(q)}else{let q=Z.createRangeFrom(`${Z.toString(u&&u[0])}-`);q&&B(q)}else JSON.stringify(u)!==JSON.stringify(j)&&B(j)}s.useEffect(()=>{if(!!u&&p!==Fo&&Array.isArray(u)){const A=Z.toStringRange(u),j=p.find(q=>A===Z.toStringRange(Z.createRangeFromPreset(q)));j?Y(j):u[0]===null||u[1]===null||L(null)}},[u]),s.useEffect(()=>{u?Array.isArray(u)&&!I?(u.every(A=>Z.isValid(A)||A===null)&&b(Z.toStringRange(u)),R(void 0)):Array.isArray(u)&&I&&Q(I)==="Before"?u&&u[0]&&u[1]?L(null):u.every(A=>Z.isValid(A)||A===null)&&b(Z.toStringRange(u)):Array.isArray(u)&&I&&Q(I)==="After"?u&&u[0]&&u[1]?L(null):u.every(A=>Z.isValid(A)||A===null)&&b(Z.toStringRange(u)):Array.isArray(u)&&I&&b(""):te()},[u,I]);function Q(A){return A&&/^design-system:/.test(A.label)?S(A.label):A.label}const G=K(Ad,"sps-text-input",P&&`${Ad}--open`,t);return s.createElement(s.Fragment,null,s.createElement(Qe,{id:T,className:G,formMeta:r,inputRef:C,focusInputOnClick:!0,ref:w},s.createElement("div",{className:K("sps-form-control",n&&"disabled")},s.createElement("i",{className:K("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"},Q(I))),s.createElement("input",{type:"text",ref:C,className:"sps-text-input__input","data-testid":`${f}_date_input`,id:E,placeholder:!M&&!I?cr:void 0,onChange:O,onClick:H,onFocus:H,onKeyDown:X,value:M,disabled:n,...h}),u&&!n&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:te}))),s.createElement(ua,{isOpen:P,attachTo:w,ref:x},s.createElement("div",{className:"sps-datepicker__presets"},s.createElement("fieldset",null,s.createElement("legend",{className:"sps-datepicker__presets-label"},S("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-${T}__range-custom`,className:"sps-custom-control__input",checked:!I,name:`sps-date-range-picker-${T}__range`,onChange:()=>Y()}),s.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${T}__range-custom`},S("design-system:datepicker.preset.custom"))),p.map((A,j)=>s.createElement("div",{key:Q(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-${T}__range-${j}`,name:`sps-date-range-picker-${T}__range`,onChange:()=>Y(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-${T}__range-${j}`},Q(A)))))),s.createElement(pa,{"data-testid":`${f}_calendar`,selectedRange:Array.isArray(u)?u:k,onNewSelection:N,minDate:l,maxDate:o,showTwoMonths:m,selectedPreset:I&&Q(I)})))}Object.assign(Vi,{props:DN,displayName:"SpsDateRangePicker"});const bm={basic:{label:"Basic",examples:{basic:{react:y.code`
                     import {
                         useSpsForm,
                         SpsLabel,

package/lib/index.es.js

@@ -12417,7 +12417,7 @@ const KD = {
   formMeta: "SpsFormFieldMeta<SimpleDateRange | DatePreset>",
   maxDate: "SimpleDate",
   minDate: "SimpleDate",
-  onChange: "(newDateRange: SimpleDateRange | DatePreset) => void",
+  onChange: "(newDateRange: SimpleDateRange | DatePreset | null) => void",
   presets: "Array<DatePreset>",
   value: "SimpleDateRange | DatePreset",
   showTwoMonths: "boolean"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "7.16.6",
+  "version": "7.16.8",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
@@ -46,11 +46,11 @@
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/illustrations": "7.16.6",
-    "@sps-woodland/tabs": "7.16.6",
-    "@spscommerce/ds-colors": "7.16.6",
-    "@spscommerce/positioning": "7.16.6",
-    "@spscommerce/ds-shared": "7.16.6"
+    "@sps-woodland/illustrations": "7.16.8",
+    "@sps-woodland/tabs": "7.16.8",
+    "@spscommerce/ds-colors": "7.16.8",
+    "@spscommerce/ds-shared": "7.16.8",
+    "@spscommerce/positioning": "7.16.8"
   },
   "devDependencies": {
     "@react-spectrum/provider": "^3.4.1",
@@ -72,12 +72,12 @@
     "raf-stub": "^2.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/illustrations": "7.16.6",
-    "@spscommerce/ds-colors": "7.16.6",
-    "@spscommerce/positioning": "7.16.6",
-    "test": "7.16.6",
-    "@sps-woodland/tabs": "7.16.6",
-    "@spscommerce/ds-shared": "7.16.6"
+    "@sps-woodland/illustrations": "7.16.8",
+    "@sps-woodland/tabs": "7.16.8",
+    "@spscommerce/ds-colors": "7.16.8",
+    "@spscommerce/ds-shared": "7.16.8",
+    "@spscommerce/positioning": "7.16.8",
+    "test": "7.16.8"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",