@spscommerce/ds-react 7.4.8 → 7.4.10
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 +4 -1
- package/lib/index.es.js +21 -20
- package/package.json +12 -12
package/lib/index.cjs.js
CHANGED
|
@@ -1777,6 +1777,7 @@ Valid keys: `+JSON.stringify(Object.keys(A),null," "));var Ee=xe(ie,re,te,Q,U+"
|
|
|
1777
1777
|
<SpsDatepicker
|
|
1778
1778
|
value={formValue.date}
|
|
1779
1779
|
formMeta={formMeta.fields.date}
|
|
1780
|
+
data-testid="datepicker-basic"
|
|
1780
1781
|
/>
|
|
1781
1782
|
</div>
|
|
1782
1783
|
</div>
|
|
@@ -1808,6 +1809,7 @@ Valid keys: `+JSON.stringify(Object.keys(A),null," "));var Ee=xe(ie,re,te,Q,U+"
|
|
|
1808
1809
|
<SpsDatepicker
|
|
1809
1810
|
value={formValue.date}
|
|
1810
1811
|
formMeta={formMeta.fields.date}
|
|
1812
|
+
data-testid="datepicker-constraints"
|
|
1811
1813
|
{...constraints.current}
|
|
1812
1814
|
/>
|
|
1813
1815
|
</div>
|
|
@@ -1836,6 +1838,7 @@ Valid keys: `+JSON.stringify(Object.keys(A),null," "));var Ee=xe(ie,re,te,Q,U+"
|
|
|
1836
1838
|
<SpsDatepicker
|
|
1837
1839
|
value={formValue.date}
|
|
1838
1840
|
formMeta={formMeta.fields.date}
|
|
1841
|
+
data-testid="datepicker-disabled"
|
|
1839
1842
|
disabled
|
|
1840
1843
|
/>
|
|
1841
1844
|
</div>
|
|
@@ -5785,7 +5788,7 @@ var n=r.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
|
|
|
5785
5788
|
import { FeedbackBlockKind } from "@spscommerce/ds-shared";
|
|
5786
5789
|
`,jsx:y.code`
|
|
5787
5790
|
<SpsMicroBlock kind={FeedbackBlockKind.TIP} message="Pro Tip: Don't be a loser."/>
|
|
5788
|
-
`}}}},TN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function sa({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(sa,{props:{},propTypes:{},displayName:"SpsModalFooter"});function Ri({children:e,className:t,id:r,kind:n=V.ModalKind.GENERAL,size:a=V.ModalSize.SMALL,onClose:i,focusElementOnOpen:l,title:c,fullHeight:p=!1,...u}){const f=Dr(r),m=$("sps-modal","z-stratum-dialog",`sps-modal--${n}`,`sps-modal--${a}`,t),{t:h}=s.useContext(Re),g=s.useRef(null),[T,E]=s.useState(!1);s.useEffect(()=>{const k=`${window.innerWidth-document.body.clientWidth}px`;return document.body.style.paddingRight=k,document.body.style.overflow="hidden",document.querySelectorAll(".z-stratum-bar").forEach(b=>{b.tempPaddingRightHolder=b.style.paddingRight,b.style.paddingRight=k}),E(!0),()=>{document.body.style.paddingRight="initial",document.body.style.overflow="auto",document.querySelectorAll(".z-stratum-bar").forEach(b=>{b.style.paddingRight=b.tempPaddingRightHolder||"",delete b.tempPaddingRightHolder})}},[]),s.useEffect(()=>{l&&l.current?l.current.focus():g.current&&g.current.focus()},[l,T]);const C=s.useCallback(k=>{if(k&&k.key==="Escape"&&i&&i(),k&&k.key==="Tab"&&g.current){const b=g.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),I=b[0],O=b[b.length-1];b.length===0?k.preventDefault():k.shiftKey&&k.target===I?(k.preventDefault(),O.focus()):!k.shiftKey&&k.target===O&&(k.preventDefault(),I.focus())}},[i]),[[D],N]=yt(e,[{type:sa}]);return T?s.createElement("div",{id:f.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${f.current}-title`,className:m,onKeyDown:C,tabIndex:-1,ref:g},s.createElement("div",{...u,className:$("sps-modal__dialog",{"sps-modal__dialog-full-height":p})},s.createElement("div",{className:"sps-modal__titlebar"},s.createElement("div",{className:"sps-modal__title",id:`${f.current}-title`},c||h(`design-system:modal.defaultTitle.${n}`)),i&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:i},s.createElement("button",{"aria-label":h("design-system:modal.close"),type:"button"},s.createElement("i",{className:"sps-icon sps-icon-x"})))),s.createElement("div",{className:"sps-modal__body"},s.createElement(vt.Provider,{value:{parentElementRef:g,fixed:!0}},N)),D||s.createElement("div",{className:"sps-modal__footer"},s.createElement(Ve,{kind:n===V.ModalKind.SERIOUS_WARNING?V.ButtonKind.DELETE:V.ButtonKind.KEY,onClick:i},h("design-system:modal.defaultButtonLabel"))))):s.createElement(s.Fragment,null)}Object.assign(Ri,{props:TN,displayName:"SpsModal"});const EN={title:"string",show:"boolean",closeOnEscapePressed:"boolean",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>"};function Pi({children:e,className:t,id:r,show:n,closeOnEscapePressed:a=!0,onClose:i,focusElementOnOpen:l,title:c,...p}){const u=Dr(r),f=$("sps-slide-in-panel","z-stratum-dialog",n?"open":"",t),
|
|
5791
|
+
`}}}},TN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function sa({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(sa,{props:{},propTypes:{},displayName:"SpsModalFooter"});function Ri({children:e,className:t,id:r,kind:n=V.ModalKind.GENERAL,size:a=V.ModalSize.SMALL,onClose:i,focusElementOnOpen:l,title:c,fullHeight:p=!1,...u}){const f=Dr(r),m=$("sps-modal","z-stratum-dialog",`sps-modal--${n}`,`sps-modal--${a}`,t),{t:h}=s.useContext(Re),g=s.useRef(null),[T,E]=s.useState(!1);s.useEffect(()=>{const k=`${window.innerWidth-document.body.clientWidth}px`;return document.body.style.paddingRight=k,document.body.style.overflow="hidden",document.querySelectorAll(".z-stratum-bar").forEach(b=>{b.tempPaddingRightHolder=b.style.paddingRight,b.style.paddingRight=k}),E(!0),()=>{document.body.style.paddingRight="initial",document.body.style.overflow="auto",document.querySelectorAll(".z-stratum-bar").forEach(b=>{b.style.paddingRight=b.tempPaddingRightHolder||"",delete b.tempPaddingRightHolder})}},[]),s.useEffect(()=>{l&&l.current?l.current.focus():g.current&&g.current.focus()},[l,T]);const C=s.useCallback(k=>{if(k&&k.key==="Escape"&&i&&i(),k&&k.key==="Tab"&&g.current){const b=g.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),I=b[0],O=b[b.length-1];b.length===0?k.preventDefault():k.shiftKey&&k.target===I?(k.preventDefault(),O.focus()):!k.shiftKey&&k.target===O&&(k.preventDefault(),I.focus())}},[i]),[[D],N]=yt(e,[{type:sa}]);return T?s.createElement("div",{id:f.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${f.current}-title`,className:m,onKeyDown:C,tabIndex:-1,ref:g},s.createElement("div",{...u,className:$("sps-modal__dialog",{"sps-modal__dialog-full-height":p})},s.createElement("div",{className:"sps-modal__titlebar"},s.createElement("div",{className:"sps-modal__title",id:`${f.current}-title`},c||h(`design-system:modal.defaultTitle.${n}`)),i&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:i},s.createElement("button",{"aria-label":h("design-system:modal.close"),type:"button"},s.createElement("i",{className:"sps-icon sps-icon-x"})))),s.createElement("div",{className:"sps-modal__body"},s.createElement(vt.Provider,{value:{parentElementRef:g,fixed:!0}},N)),D||s.createElement("div",{className:"sps-modal__footer"},s.createElement(Ve,{kind:n===V.ModalKind.SERIOUS_WARNING?V.ButtonKind.DELETE:V.ButtonKind.KEY,onClick:i},h("design-system:modal.defaultButtonLabel"))))):s.createElement(s.Fragment,null)}Object.assign(Ri,{props:TN,displayName:"SpsModal"});const EN={title:"string",show:"boolean",closeOnEscapePressed:"boolean",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>"};function Pi({children:e,className:t,id:r,show:n,closeOnEscapePressed:a=!0,onClose:i,focusElementOnOpen:l,title:c,...p}){const u=Dr(r),f=$("sps-slide-in-panel","z-stratum-dialog",n?"open":"",t),m=s.useRef(document.body.style.overflow||""),h=s.useRef(document.body.style.paddingRight||""),{t:g}=s.useContext(Re),T=s.useRef(null);s.useEffect(()=>{if(n){const D=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=D,document.body.style.overflow="hidden"}else document.body.style.overflow=m.current,document.body.style.paddingRight=h.current;return()=>{document.body.style.overflow=m.current,document.body.style.paddingRight=h.current}},[n]),s.useEffect(()=>{l&&l.current?l.current.focus():T.current&&T.current.focus()},[l]);const E=s.useCallback(D=>{if(a&&D&&D.key==="Escape"&&i&&i(),D&&D.key==="Tab"&&T.current){const N=T.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),k=N[0],b=N[N.length-1];N.length===0?D.preventDefault():D.shiftKey&&D.target===k?(D.preventDefault(),b.focus()):!D.shiftKey&&D.target===b&&(D.preventDefault(),k.focus())}},[i]),[C]=yt(e);return s.createElement("div",{id:u.current,role:"dialog","aria-labelledby":`${u.current}-title`,className:f,onKeyDown:E,tabIndex:-1,ref:T},s.createElement("div",{...p,className:`sps-slide-in-panel__dialog ${n?"open":""}`},s.createElement("div",{className:"sps-slide-in-panel__titlebar"},s.createElement("div",{className:"sps-slide-in-panel__title",id:`${u.current}-title`},c||g("design-system:slideInPanel.defaultTitle")),i&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:i},s.createElement("button",{"aria-label":g("design-system:slideInPanel.close"),type:"button"},s.createElement("i",{className:"sps-icon sps-icon-x"})))),s.createElement("div",{className:"sps-slide-in-panel__body"},s.createElement(vt.Provider,{value:{parentElementRef:T,fixed:!0}},C))))}Object.assign(Pi,{props:EN,displayName:"SpsSlideInPanel"});const Cm={generalUsage:{label:"General Usage",description:()=>s.createElement(s.Fragment,null),examples:{noCloseButton:{description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Click on the button below to show the slide-in panel.")),react:y.code`
|
|
5789
5792
|
import { SpsButton, SpsSlideInPanel } from "@spscommerce/ds-react";
|
|
5790
5793
|
import { ButtonKind } from "@spscommerce/ds-shared";
|
|
5791
5794
|
function Component() {
|
package/lib/index.es.js
CHANGED
|
@@ -12068,6 +12068,7 @@ const lD = {
|
|
|
12068
12068
|
<SpsDatepicker
|
|
12069
12069
|
value={formValue.date}
|
|
12070
12070
|
formMeta={formMeta.fields.date}
|
|
12071
|
+
data-testid="datepicker-basic"
|
|
12071
12072
|
/>
|
|
12072
12073
|
</div>
|
|
12073
12074
|
</div>
|
|
@@ -12107,6 +12108,7 @@ const lD = {
|
|
|
12107
12108
|
<SpsDatepicker
|
|
12108
12109
|
value={formValue.date}
|
|
12109
12110
|
formMeta={formMeta.fields.date}
|
|
12111
|
+
data-testid="datepicker-constraints"
|
|
12110
12112
|
{...constraints.current}
|
|
12111
12113
|
/>
|
|
12112
12114
|
</div>
|
|
@@ -12143,6 +12145,7 @@ const lD = {
|
|
|
12143
12145
|
<SpsDatepicker
|
|
12144
12146
|
value={formValue.date}
|
|
12145
12147
|
formMeta={formMeta.fields.date}
|
|
12148
|
+
data-testid="datepicker-disabled"
|
|
12146
12149
|
disabled
|
|
12147
12150
|
/>
|
|
12148
12151
|
</div>
|
|
@@ -22036,25 +22039,23 @@ function Du({
|
|
|
22036
22039
|
title: c,
|
|
22037
22040
|
...p
|
|
22038
22041
|
}) {
|
|
22039
|
-
const u = ln(r), f = V("sps-slide-in-panel", "z-stratum-dialog", n ? "open" : "", t),
|
|
22042
|
+
const u = ln(r), f = V("sps-slide-in-panel", "z-stratum-dialog", n ? "open" : "", t), m = s.useRef(document.body.style.overflow || ""), h = s.useRef(document.body.style.paddingRight || ""), { t: g } = s.useContext(Ae), y = s.useRef(null);
|
|
22040
22043
|
s.useEffect(() => {
|
|
22041
|
-
|
|
22042
|
-
|
|
22043
|
-
|
|
22044
|
-
}
|
|
22045
|
-
document.body.style.
|
|
22046
|
-
|
|
22047
|
-
|
|
22044
|
+
if (n) {
|
|
22045
|
+
const D = `${window.innerWidth - document.body.clientWidth}px`;
|
|
22046
|
+
document.body.style.paddingRight = D, document.body.style.overflow = "hidden";
|
|
22047
|
+
} else
|
|
22048
|
+
document.body.style.overflow = m.current, document.body.style.paddingRight = h.current;
|
|
22049
|
+
return () => {
|
|
22050
|
+
document.body.style.overflow = m.current, document.body.style.paddingRight = h.current;
|
|
22048
22051
|
};
|
|
22049
|
-
}, []), s.useEffect(() => {
|
|
22050
|
-
document.body.style.overflow = n ? "hidden" : "auto";
|
|
22051
22052
|
}, [n]), s.useEffect(() => {
|
|
22052
|
-
l && l.current ? l.current.focus() :
|
|
22053
|
-
}, [l
|
|
22053
|
+
l && l.current ? l.current.focus() : y.current && y.current.focus();
|
|
22054
|
+
}, [l]);
|
|
22054
22055
|
const T = s.useCallback(
|
|
22055
22056
|
(D) => {
|
|
22056
|
-
if (a && D && D.key === "Escape" && i && i(), D && D.key === "Tab" &&
|
|
22057
|
-
const N =
|
|
22057
|
+
if (a && D && D.key === "Escape" && i && i(), D && D.key === "Tab" && y.current) {
|
|
22058
|
+
const N = y.current.querySelectorAll(
|
|
22058
22059
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
22059
22060
|
), k = N[0], b = N[N.length - 1];
|
|
22060
22061
|
N.length === 0 ? D.preventDefault() : D.shiftKey && D.target === k ? (D.preventDefault(), b.focus()) : !D.shiftKey && D.target === b && (D.preventDefault(), k.focus());
|
|
@@ -22062,14 +22063,14 @@ function Du({
|
|
|
22062
22063
|
},
|
|
22063
22064
|
[i]
|
|
22064
22065
|
), [C] = Ot(e);
|
|
22065
|
-
return
|
|
22066
|
+
return /* @__PURE__ */ s.createElement("div", {
|
|
22066
22067
|
id: u.current,
|
|
22067
22068
|
role: "dialog",
|
|
22068
22069
|
"aria-labelledby": `${u.current}-title`,
|
|
22069
22070
|
className: f,
|
|
22070
22071
|
onKeyDown: T,
|
|
22071
22072
|
tabIndex: -1,
|
|
22072
|
-
ref:
|
|
22073
|
+
ref: y
|
|
22073
22074
|
}, /* @__PURE__ */ s.createElement("div", {
|
|
22074
22075
|
...p,
|
|
22075
22076
|
className: `sps-slide-in-panel__dialog ${n ? "open" : ""}`
|
|
@@ -22078,11 +22079,11 @@ function Du({
|
|
|
22078
22079
|
}, /* @__PURE__ */ s.createElement("div", {
|
|
22079
22080
|
className: "sps-slide-in-panel__title",
|
|
22080
22081
|
id: `${u.current}-title`
|
|
22081
|
-
}, c ||
|
|
22082
|
+
}, c || g("design-system:slideInPanel.defaultTitle")), i && /* @__PURE__ */ s.createElement("div", {
|
|
22082
22083
|
className: "sps-button sps-button--icon",
|
|
22083
22084
|
onClick: i
|
|
22084
22085
|
}, /* @__PURE__ */ s.createElement("button", {
|
|
22085
|
-
"aria-label":
|
|
22086
|
+
"aria-label": g("design-system:slideInPanel.close"),
|
|
22086
22087
|
type: "button"
|
|
22087
22088
|
}, /* @__PURE__ */ s.createElement("i", {
|
|
22088
22089
|
className: "sps-icon sps-icon-x"
|
|
@@ -22090,10 +22091,10 @@ function Du({
|
|
|
22090
22091
|
className: "sps-slide-in-panel__body"
|
|
22091
22092
|
}, /* @__PURE__ */ s.createElement(_t.Provider, {
|
|
22092
22093
|
value: {
|
|
22093
|
-
parentElementRef:
|
|
22094
|
+
parentElementRef: y,
|
|
22094
22095
|
fixed: !0
|
|
22095
22096
|
}
|
|
22096
|
-
}, C))))
|
|
22097
|
+
}, C))));
|
|
22097
22098
|
}
|
|
22098
22099
|
Object.assign(Du, {
|
|
22099
22100
|
props: fN,
|
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": "7.4.
|
|
4
|
+
"version": "7.4.10",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
|
|
@@ -40,11 +40,11 @@
|
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@react-stately/collections": "^3.6.0",
|
|
43
|
-
"@sps-woodland/illustrations": "7.4.
|
|
44
|
-
"@sps-woodland/tabs": "7.4.
|
|
45
|
-
"@spscommerce/ds-colors": "7.4.
|
|
46
|
-
"@spscommerce/ds-shared": "7.4.
|
|
47
|
-
"@spscommerce/positioning": "7.4.
|
|
43
|
+
"@sps-woodland/illustrations": "7.4.10",
|
|
44
|
+
"@sps-woodland/tabs": "7.4.10",
|
|
45
|
+
"@spscommerce/ds-colors": "7.4.10",
|
|
46
|
+
"@spscommerce/ds-shared": "7.4.10",
|
|
47
|
+
"@spscommerce/positioning": "7.4.10",
|
|
48
48
|
"@spscommerce/utils": "^6.11.3",
|
|
49
49
|
"moment": "^2.25.3",
|
|
50
50
|
"moment-timezone": "^0.5.28",
|
|
@@ -58,11 +58,11 @@
|
|
|
58
58
|
"@react-types/select": "^3.6.1",
|
|
59
59
|
"@react-types/shared": "^3.8.0",
|
|
60
60
|
"@react-types/tabs": "^3.0.1",
|
|
61
|
-
"@sps-woodland/illustrations": "7.4.
|
|
62
|
-
"@sps-woodland/tabs": "7.4.
|
|
63
|
-
"@spscommerce/ds-colors": "7.4.
|
|
64
|
-
"@spscommerce/ds-shared": "7.4.
|
|
65
|
-
"@spscommerce/positioning": "7.4.
|
|
61
|
+
"@sps-woodland/illustrations": "7.4.10",
|
|
62
|
+
"@sps-woodland/tabs": "7.4.10",
|
|
63
|
+
"@spscommerce/ds-colors": "7.4.10",
|
|
64
|
+
"@spscommerce/ds-shared": "7.4.10",
|
|
65
|
+
"@spscommerce/positioning": "7.4.10",
|
|
66
66
|
"@spscommerce/utils": "^6.12.1",
|
|
67
67
|
"@testing-library/dom": "^8.17.1",
|
|
68
68
|
"@testing-library/react": "^10.0.0",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"raf-stub": "^2.0.2",
|
|
77
77
|
"react": "^16.9.0",
|
|
78
78
|
"react-dom": "^16.9.0",
|
|
79
|
-
"test": "7.4.
|
|
79
|
+
"test": "7.4.10"
|
|
80
80
|
},
|
|
81
81
|
"scripts": {
|
|
82
82
|
"build": "pnpm run build:js && pnpm run build:types",
|