@spscommerce/ds-react 8.23.16 → 8.23.18
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.js +1068 -1087
- package/lib/index.umd.cjs +1 -1
- package/package.json +12 -12
package/lib/index.umd.cjs
CHANGED
|
@@ -3004,7 +3004,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
|
|
|
3004
3004
|
</React.Fragment>
|
|
3005
3005
|
);
|
|
3006
3006
|
}
|
|
3007
|
-
`}}}},nw={for:{type:"SpsFormMetaBase<any>",required:!0},description:"string",stronglySuggested:"boolean",help:"ReactNodeOrRenderFn",helpIcon:"SpsIcon",helpIconColor:"string",errors:"ReactNodeOrRenderFn"};function yi({children:e,className:t,description:n,for:r,stronglySuggested:a,help:s,helpIcon:l=G.SpsIcon.QUESTION_CIRCLE,helpIconColor:c="blue200",errors:p,unsafelyReplaceClassName:m,"data-testid":f,...u}){const{t:h}=o.useContext(Ke),S=o.useRef(null),y=o.useRef(null),E=o.useRef(null),C=o.useRef(null),[T,N]=o.useState(xe.HIDDEN),[M,I]=o.useState(xe.HIDDEN),[k,V]=o.useState(xe.HIDDEN),[A,w]=o.useState(xe.HIDDEN);function P(){V(xe.HIDDEN),N(xe.HIDDEN)}function O(){I(xe.HIDDEN),w(xe.HIDDEN)}function K(U){U.preventDefault(),O(),V(Qo(k))}function j(){return r&&(r instanceof Rn&&r.isVisibilyInvalid()||!(r instanceof Rn)&&!r.isValid())?[M,I]:r&&r instanceof Rn&&r.hasPreventativeErrors()?[A,w]:[xe.HIDDEN,()=>{}]}function L(){O();const[U,R]=j();R(Qo(U))}function X(){O();const[,U]=j();U(xe.VISIBLE)}function B(U){U.preventDefault(),O(),N(Qo(T))}o.useEffect(()=>{r&&(r.onFocus=X,r.onBlur=O)},[r]);const te=Y(m||"sps-form-group__label",t),[$,Z]=r instanceof Rn?[r,void 0]:[void 0,r];function se(){var U;if($){for(const R of["dateFormat","dateRangeOrder","dateValidity","required","minLength"])if($.hasError(R))return h(`design-system:label.errors.${R}`,{context:$.errors?$.errors[R]:""});if($.hasError("dateConstraint")){const R=(U=$.errors)==null?void 0:U.dateConstraint,q=R.minExceeded?"min":"max";return h(`design-system:label.errors.dateConstraint.${q}`,{context:R})}}return null}function W(){if($){for(const U of zt)if($.hasPreventativeError(U))return h(`design-system:label.preventativeErrors.${U}`)}return null}const[z,re]=It(e,[{type:Vt}]);o.useEffect(()=>{$!=null&&$.hasPreventativeErrors()&&w(xe.VISIBLE)},[$==null?void 0:$.hasPreventativeErrors()]);const ne=o.useRef(null);return o.useEffect(()=>{function U(R){var q;(q=ne.current)!=null&&q.contains(R.target)||P()}return document.addEventListener("click",U),()=>{document.removeEventListener("click",U)}},[]),o.createElement(at,{ref:ne,formMeta:$,formControl:Z},o.createElement("
|
|
3007
|
+
`}}}},nw={for:{type:"SpsFormMetaBase<any>",required:!0},description:"string",stronglySuggested:"boolean",help:"ReactNodeOrRenderFn",helpIcon:"SpsIcon",helpIconColor:"string",errors:"ReactNodeOrRenderFn"};function yi({children:e,className:t,description:n,for:r,stronglySuggested:a,help:s,helpIcon:l=G.SpsIcon.QUESTION_CIRCLE,helpIconColor:c="blue200",errors:p,unsafelyReplaceClassName:m,"data-testid":f,...u}){const{t:h}=o.useContext(Ke),S=o.useRef(null),y=o.useRef(null),E=o.useRef(null),C=o.useRef(null),[T,N]=o.useState(xe.HIDDEN),[M,I]=o.useState(xe.HIDDEN),[k,V]=o.useState(xe.HIDDEN),[A,w]=o.useState(xe.HIDDEN);function P(){V(xe.HIDDEN),N(xe.HIDDEN)}function O(){I(xe.HIDDEN),w(xe.HIDDEN)}function K(U){U.preventDefault(),O(),V(Qo(k))}function j(){return r&&(r instanceof Rn&&r.isVisibilyInvalid()||!(r instanceof Rn)&&!r.isValid())?[M,I]:r&&r instanceof Rn&&r.hasPreventativeErrors()?[A,w]:[xe.HIDDEN,()=>{}]}function L(){O();const[U,R]=j();R(Qo(U))}function X(){O();const[,U]=j();U(xe.VISIBLE)}function B(U){U.preventDefault(),O(),N(Qo(T))}o.useEffect(()=>{r&&(r.onFocus=X,r.onBlur=O)},[r]);const te=Y(m||"sps-form-group__label-container",t),[$,Z]=r instanceof Rn?[r,void 0]:[void 0,r];function se(){var U;if($){for(const R of["dateFormat","dateRangeOrder","dateValidity","required","minLength"])if($.hasError(R))return h(`design-system:label.errors.${R}`,{context:$.errors?$.errors[R]:""});if($.hasError("dateConstraint")){const R=(U=$.errors)==null?void 0:U.dateConstraint,q=R.minExceeded?"min":"max";return h(`design-system:label.errors.dateConstraint.${q}`,{context:R})}}return null}function W(){if($){for(const U of zt)if($.hasPreventativeError(U))return h(`design-system:label.preventativeErrors.${U}`)}return null}const[z,re]=It(e,[{type:Vt}]);o.useEffect(()=>{$!=null&&$.hasPreventativeErrors()&&w(xe.VISIBLE)},[$==null?void 0:$.hasPreventativeErrors()]);const ne=o.useRef(null);return o.useEffect(()=>{function U(R){var q;(q=ne.current)!=null&&q.contains(R.target)||P()}return document.addEventListener("click",U),()=>{document.removeEventListener("click",U)}},[]),o.createElement(at,{ref:ne,formMeta:$,formControl:Z},o.createElement("div",{className:te},o.createElement("button",{className:Y("sps-icon-button-wrapper","suggested-icon",!a&&"d-none"),tabIndex:0,onClick:K,type:"button","aria-label":`${re} Strongly Suggested Help`,hidden:!a},o.createElement("i",{ref:y,"data-testid":`${f}__suggested-icon`,className:Y("sps-icon","sps-icon-exclamation-triangle","orange200","sps-form-group__label-suggested-icon",!a&&"d-none")})),o.createElement("i",{ref:S,"data-testid":`${f}__error-icon`,className:Y("sps-icon","sps-icon-exclamation-circle","sps-form-group__label--error-icon"),onClick:L,"aria-label":`${re} Error Help`}),o.createElement("label",{htmlFor:r&&"id"in r?r.id:void 0,className:"sps-form-group__label","data-testid":f,...u},o.createElement("span",{ref:C,className:"sps-form-group__label-content"},re)),o.createElement("button",{className:Y("sps-icon-button-wrapper",!s&&"d-none"),tabIndex:0,onClick:B,type:"button","aria-label":`${re} Help`,hidden:!s},o.createElement("i",{ref:E,"data-testid":`${f}__help-icon`,className:Y("sps-icon",`sps-icon-${l}`,c,!s&&"d-none"),onClick:B})),z),o.createElement(Lt,{kind:G.TooltipKind.DEFAULT,for:E,showOn:G.TooltipShowTrigger.MANUAL,isShown:T,altPosition:G.Position.TOP_MIDDLE},bt(s)),o.createElement(Lt,{kind:G.TooltipKind.ERROR,for:S,showOn:G.TooltipShowTrigger.MANUAL,isShown:M,altPosition:G.Position.LEFT_MIDDLE},bt(p)||se()),($==null?void 0:$.hasPreventativeErrors())&&o.createElement(Lt,{kind:G.TooltipKind.WARNING,for:C,showOn:G.TooltipShowTrigger.MANUAL,isShown:A,altPosition:G.Position.LEFT_MIDDLE},bt(p)||W()),o.createElement(Lt,{kind:G.TooltipKind.DEFAULT,for:y,position:G.Position.TOP_LEFT,altPosition:G.Position.TOP_LEFT,showOn:G.TooltipShowTrigger.MANUAL,isShown:k},h("design-system:label.stronglySuggested")),n&&o.createElement("div",{className:"sps-form-control__description","data-testid":`${f}__description`},n))}Object.assign(yi,{props:nw,displayName:"SpsLabel"});const yu={general:{label:"General Usage",description:()=>o.createElement("p",null,"In almost all cases, input fields should be paired with a label describing the value to be entered into the field. Certain labels can be accompanied by icons to provide additional information or context about that particular field.")},basic:{label:"Basic Label",examples:{basic:{react:v.code`
|
|
3008
3008
|
import {
|
|
3009
3009
|
SpsLabel,
|
|
3010
3010
|
SpsTextInput,
|
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": "8.23.
|
|
4
|
+
"version": "8.23.18",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
"moment-timezone": "^0.5.28",
|
|
47
47
|
"react": "^16.9.0",
|
|
48
48
|
"react-dom": "^16.9.0",
|
|
49
|
-
"@sps-woodland/illustrations": "8.23.
|
|
50
|
-
"@sps-woodland/tabs": "8.23.
|
|
51
|
-
"@spscommerce/ds-colors": "8.23.
|
|
52
|
-
"@spscommerce/ds-shared": "8.23.
|
|
53
|
-
"@spscommerce/positioning": "8.23.
|
|
49
|
+
"@sps-woodland/illustrations": "8.23.18",
|
|
50
|
+
"@sps-woodland/tabs": "8.23.18",
|
|
51
|
+
"@spscommerce/ds-colors": "8.23.18",
|
|
52
|
+
"@spscommerce/ds-shared": "8.23.18",
|
|
53
|
+
"@spscommerce/positioning": "8.23.18"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@react-spectrum/provider": "^3.4.1",
|
|
@@ -72,12 +72,12 @@
|
|
|
72
72
|
"raf-stub": "^2.0.2",
|
|
73
73
|
"react": "^16.9.0",
|
|
74
74
|
"react-dom": "^16.9.0",
|
|
75
|
-
"@sps-woodland/illustrations": "8.23.
|
|
76
|
-
"@sps-woodland/tabs": "8.23.
|
|
77
|
-
"@spscommerce/ds-colors": "8.23.
|
|
78
|
-
"@spscommerce/ds-shared": "8.23.
|
|
79
|
-
"
|
|
80
|
-
"
|
|
75
|
+
"@sps-woodland/illustrations": "8.23.18",
|
|
76
|
+
"@sps-woodland/tabs": "8.23.18",
|
|
77
|
+
"@spscommerce/ds-colors": "8.23.18",
|
|
78
|
+
"@spscommerce/ds-shared": "8.23.18",
|
|
79
|
+
"test": "8.23.18",
|
|
80
|
+
"@spscommerce/positioning": "8.23.18"
|
|
81
81
|
},
|
|
82
82
|
"scripts": {
|
|
83
83
|
"build": "pnpm run build:js && pnpm run build:types",
|