@spscommerce/ds-react 6.35.2 → 6.35.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +1 -1
- package/lib/index.es.js +2 -0
- package/package.json +9 -9
package/lib/index.cjs.js
CHANGED
|
@@ -1697,7 +1697,7 @@
|
|
|
1697
1697
|
</div>
|
|
1698
1698
|
);
|
|
1699
1699
|
}
|
|
1700
|
-
`}}}},pD={disabled:"boolean",formMeta:"SpsFormFieldMeta<SimpleDateRange | DatePreset>",maxDate:"SimpleDate",minDate:"SimpleDate",onChange:"(newDateRange: SimpleDateRange | DatePreset) => void",presets:"Array<DatePreset>",value:"SimpleDateRange | DatePreset"},uD=G(N({},z),{disabled:T.exports.bool,formMeta:ce(),maxDate:ce(),minDate:ce(),onChange:te(),presets:T.exports.arrayOf(ce())}),ku="sps-datepicker",gi=[{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 Si(g){var S=g,{children:e,className:t,disabled:n,formMeta:s,id:o,maxDate:i,minDate:c,onChange:l,presets:p=gi,value:u,"data-testid":f}=S,m=q(S,["children","className","disabled","formMeta","id","maxDate","minDate","onChange","presets","value","data-testid"]);const{t:w}=a.useContext(Le),{wrapperId:x,controlId:E}=Tt(o,s),I=a.useRef(null),D=a.useRef(),v=a.useRef(),[k,M]=a.useState(Array.isArray(u)?he.toStringRange(u):""),[L,_]=a.useState(null),[P,F]=a.useState(),{showPopup:O,doShowPopup:$,doHidePopup:V}=Ta(I,v);function W(Z){s&&(s.setValue(Z),s.markAsDirty()),l&&l(Z)}function le(Z){const X=u||[];let ae;!X[0]||X[1]||he.isBefore(Z,X[0])?ae=[Z,null]:(ae=[X[0],Z],V(!0),D&&D.current&&D.current.focus()),W(ae),M(he.toStringRange(ae)),F(null),_(null)}function me(Z){M(Z.target.value);const X=he.createRangeFrom(Z.target.value);W(X),F(null)}function re(){M(""),W(),F(null),_(null)}function oe(Z){switch(Z.key){case"Tab":V();break;case"Backspace":Z.target.selectionStart===0&&u&&!Array.isArray(u)&&re();break}}function se(Z){if(!Z){_(null),W(null);return}M(""),_(Z);const X=he.createRangeFromPreset(Z);JSON.stringify(u)!==JSON.stringify(X)&&W(X)}a.useEffect(()=>{if(!!u&&p!==gi&&Array.isArray(u)){const Z=he.toStringRange(u),X=p.find(ae=>Z===he.toStringRange(he.createRangeFromPreset(ae)));X
|
|
1700
|
+
`}}}},pD={disabled:"boolean",formMeta:"SpsFormFieldMeta<SimpleDateRange | DatePreset>",maxDate:"SimpleDate",minDate:"SimpleDate",onChange:"(newDateRange: SimpleDateRange | DatePreset) => void",presets:"Array<DatePreset>",value:"SimpleDateRange | DatePreset"},uD=G(N({},z),{disabled:T.exports.bool,formMeta:ce(),maxDate:ce(),minDate:ce(),onChange:te(),presets:T.exports.arrayOf(ce())}),ku="sps-datepicker",gi=[{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 Si(g){var S=g,{children:e,className:t,disabled:n,formMeta:s,id:o,maxDate:i,minDate:c,onChange:l,presets:p=gi,value:u,"data-testid":f}=S,m=q(S,["children","className","disabled","formMeta","id","maxDate","minDate","onChange","presets","value","data-testid"]);const{t:w}=a.useContext(Le),{wrapperId:x,controlId:E}=Tt(o,s),I=a.useRef(null),D=a.useRef(),v=a.useRef(),[k,M]=a.useState(Array.isArray(u)?he.toStringRange(u):""),[L,_]=a.useState(null),[P,F]=a.useState(),{showPopup:O,doShowPopup:$,doHidePopup:V}=Ta(I,v);function W(Z){s&&(s.setValue(Z),s.markAsDirty()),l&&l(Z)}function le(Z){const X=u||[];let ae;!X[0]||X[1]||he.isBefore(Z,X[0])?ae=[Z,null]:(ae=[X[0],Z],V(!0),D&&D.current&&D.current.focus()),W(ae),M(he.toStringRange(ae)),F(null),_(null)}function me(Z){M(Z.target.value);const X=he.createRangeFrom(Z.target.value);W(X),F(null)}function re(){M(""),W(),F(null),_(null)}function oe(Z){switch(Z.key){case"Tab":V();break;case"Backspace":Z.target.selectionStart===0&&u&&!Array.isArray(u)&&re();break}}function se(Z){if(!Z){_(null),W(null);return}M(""),_(Z);const X=he.createRangeFromPreset(Z);JSON.stringify(u)!==JSON.stringify(X)&&W(X)}a.useEffect(()=>{if(!!u&&p!==gi&&Array.isArray(u)){const Z=he.toStringRange(u),X=p.find(ae=>Z===he.toStringRange(he.createRangeFromPreset(ae)));X?se(X):_(null)}},[u]),a.useEffect(()=>{u?Array.isArray(u)&&!L?(u.every(Z=>he.isValid(Z))&&M(he.toStringRange(u)),F(null)):Array.isArray(u)&&L&&M(""):re()},[u,L]);function j(Z){return Z&&/^design-system:/.test(Z.label)?w(Z.label):Z.label}const ee=K(ku,"sps-text-input",O&&`${ku}--open`,t);return a.createElement(a.Fragment,null,a.createElement(it,{id:x,className:ee,formMeta:s,inputRef:D,focusInputOnClick:!0,ref:I},a.createElement("div",{className:K("sps-form-control",n&&"disabled")},a.createElement("i",{className:K("sps-text-input__icon","sps-icon","sps-icon-calendar")}),L&&a.createElement("div",{"data-testid":`${f}_selected_preset`,className:"sps-datepicker__selected-preset"},a.createElement("span",{className:"sps-tag sps-tag--info"},j(L))),a.createElement("input",N({type:"text",ref:D,className:"sps-text-input__input","data-testid":`${f}_date_input`,id:E,placeholder:!k&&!L?os:void 0,onChange:me,onClick:$,onFocus:$,onKeyDown:oe,value:k,disabled:n},m)),u&&!n&&a.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:re}))),a.createElement(fi,{isOpen:O,attachTo:I,ref:v},a.createElement("div",{className:"sps-datepicker__presets"},a.createElement("fieldset",null,a.createElement("legend",{className:"sps-datepicker__presets-label"},w("design-system:datepicker.presetsLabel")),a.createElement("div",{className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},a.createElement("input",{"data-testid":`${f}_presets_custom_input`,type:"radio",id:`sps-date-range-picker-${x}__range-custom`,className:"sps-custom-control__input",checked:!L,name:`sps-date-range-picker-${x}__range`,onChange:()=>se(null)}),a.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${x}__range-custom`},w("design-system:datepicker.preset.custom"))),p.map((Z,X)=>a.createElement("div",{key:j(Z),className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},a.createElement("input",{type:"radio","data-testid":`${f}_preset_option_${Z.label}`,id:`sps-date-range-picker-${x}__range-${X}`,name:`sps-date-range-picker-${x}__range`,onChange:()=>se(Z),checked:(L==null?void 0:L.definition)?L.definition===Z.definition:!1,className:"sps-custom-control__input"}),a.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${x}__range-${X}`},j(Z)))))),a.createElement(mi,{"data-testid":`${f}_calendar`,selectedRange:Array.isArray(u)?u:P,onNewSelection:le,minDate:c,maxDate:i})))}Object.assign(Si,{props:pD,propTypes:uD,displayName:"SpsDateRangePicker"});const Mu={basic:{label:"Basic",examples:{basic:{react:y.code`
|
|
1701
1701
|
function Component() {
|
|
1702
1702
|
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
1703
1703
|
dateRange: [
|
package/lib/index.es.js
CHANGED
|
@@ -17031,6 +17031,8 @@ function SpsDateRangePicker(_w) {
|
|
|
17031
17031
|
const preselectedPreset = presets.find((preset2) => preselectedRange === SimpleDateUtils.toStringRange(SimpleDateUtils.createRangeFromPreset(preset2)));
|
|
17032
17032
|
if (preselectedPreset) {
|
|
17033
17033
|
selectPreset(preselectedPreset);
|
|
17034
|
+
} else {
|
|
17035
|
+
setSelectedPreset(null);
|
|
17034
17036
|
}
|
|
17035
17037
|
}
|
|
17036
17038
|
}, [value]);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spscommerce/ds-react",
|
|
3
3
|
"description": "SPS Design System React components",
|
|
4
|
-
"version": "6.35.
|
|
4
|
+
"version": "6.35.3",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"@react-stately/collections": "^3.3.3",
|
|
31
|
-
"@spscommerce/ds-colors": "6.35.
|
|
32
|
-
"@spscommerce/ds-illustrations": "6.35.
|
|
33
|
-
"@spscommerce/ds-shared": "6.35.
|
|
34
|
-
"@spscommerce/positioning": "6.35.
|
|
31
|
+
"@spscommerce/ds-colors": "6.35.3",
|
|
32
|
+
"@spscommerce/ds-illustrations": "6.35.3",
|
|
33
|
+
"@spscommerce/ds-shared": "6.35.3",
|
|
34
|
+
"@spscommerce/positioning": "6.35.3",
|
|
35
35
|
"@spscommerce/utils": "^6.11.3",
|
|
36
36
|
"moment": "^2.25.3",
|
|
37
37
|
"moment-timezone": "^0.5.28",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@react-stately/collections": "^3.3.3",
|
|
43
|
-
"@spscommerce/ds-colors": "6.35.
|
|
44
|
-
"@spscommerce/ds-illustrations": "6.35.
|
|
45
|
-
"@spscommerce/ds-shared": "6.35.
|
|
46
|
-
"@spscommerce/positioning": "6.35.
|
|
43
|
+
"@spscommerce/ds-colors": "6.35.3",
|
|
44
|
+
"@spscommerce/ds-illustrations": "6.35.3",
|
|
45
|
+
"@spscommerce/ds-shared": "6.35.3",
|
|
46
|
+
"@spscommerce/positioning": "6.35.3",
|
|
47
47
|
"@spscommerce/utils": "^6.11.3",
|
|
48
48
|
"@testing-library/react": "^10.4.0",
|
|
49
49
|
"@types/prop-types": "^15.7.1",
|