@spscommerce/ds-react 6.36.1 → 6.36.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 +210 -109
- package/lib/index.es.js +167 -45
- package/package.json +9 -9
package/lib/index.es.js
CHANGED
|
@@ -22238,14 +22238,35 @@ function SpsDescriptionListTerm(props2) {
|
|
|
22238
22238
|
"data-testid",
|
|
22239
22239
|
"unsafelyReplaceClassName"
|
|
22240
22240
|
]);
|
|
22241
|
+
const dtElement = React.useRef();
|
|
22242
|
+
const spsLabelEl = React.useRef();
|
|
22243
|
+
function shouldShowLabelErrorState() {
|
|
22244
|
+
var _a2;
|
|
22245
|
+
return (spsLabelEl == null ? void 0 : spsLabelEl.current) && ((_a2 = spsLabelEl.current.parentElement) == null ? void 0 : _a2.classList.contains("sps-form-group--error"));
|
|
22246
|
+
}
|
|
22241
22247
|
function shouldShowErrorState() {
|
|
22242
22248
|
return formControl2 && !formControl2.isPristine() && !formControl2.isValid();
|
|
22243
22249
|
}
|
|
22244
|
-
const dtElement = React.useRef();
|
|
22245
22250
|
const [tipKind, setTipKind] = React.useState();
|
|
22246
22251
|
const [showTip, setShowTip] = React.useState(TooltipVisibility.HIDDEN);
|
|
22247
22252
|
React.useEffect(() => {
|
|
22248
|
-
setTipKind(shouldShowErrorState() ? TooltipKind.ERROR : TooltipKind.HELP);
|
|
22253
|
+
setTipKind(shouldShowErrorState() || shouldShowLabelErrorState() ? TooltipKind.ERROR : TooltipKind.HELP);
|
|
22254
|
+
});
|
|
22255
|
+
React.useEffect(() => {
|
|
22256
|
+
var _a2;
|
|
22257
|
+
spsLabelEl.current = (_a2 = dtElement == null ? void 0 : dtElement.current) == null ? void 0 : _a2.getElementsByClassName("sps-form-group__label")[0];
|
|
22258
|
+
const onFocusListener = () => setShowTip(TooltipVisibility.VISIBLE);
|
|
22259
|
+
const onBlurListener = () => setShowTip(TooltipVisibility.HIDDEN);
|
|
22260
|
+
if (spsLabelEl.current) {
|
|
22261
|
+
spsLabelEl.current.addEventListener("focus", onFocusListener);
|
|
22262
|
+
spsLabelEl.current.addEventListener("blur", onBlurListener);
|
|
22263
|
+
}
|
|
22264
|
+
return () => {
|
|
22265
|
+
if (spsLabelEl.current) {
|
|
22266
|
+
spsLabelEl.current.removeEventListener("focus", onFocusListener);
|
|
22267
|
+
spsLabelEl.current.removeEventListener("blur", onBlurListener);
|
|
22268
|
+
}
|
|
22269
|
+
};
|
|
22249
22270
|
});
|
|
22250
22271
|
if (formControl2) {
|
|
22251
22272
|
formControl2.onFocus = () => setShowTip(TooltipVisibility.VISIBLE);
|
|
@@ -22428,7 +22449,9 @@ const SpsDescriptionListExamples = {
|
|
|
22428
22449
|
return (
|
|
22429
22450
|
<SpsForm formMeta={formMeta}>
|
|
22430
22451
|
<SpsDl>
|
|
22431
|
-
<SpsDt
|
|
22452
|
+
<SpsDt errors="This field is required" help="Enter a description">
|
|
22453
|
+
<SpsLabel for={formMeta.fields.term1}>Term 1</SpsLabel>
|
|
22454
|
+
</SpsDt>
|
|
22432
22455
|
<SpsDd>
|
|
22433
22456
|
<SpsTextInput
|
|
22434
22457
|
value={formValue.term1}
|
|
@@ -22436,7 +22459,9 @@ const SpsDescriptionListExamples = {
|
|
|
22436
22459
|
placeholder="Description"
|
|
22437
22460
|
/>
|
|
22438
22461
|
</SpsDd>
|
|
22439
|
-
<SpsDt
|
|
22462
|
+
<SpsDt>
|
|
22463
|
+
<SpsLabel for={formMeta.fields.term2}>Term 2</SpsLabel>
|
|
22464
|
+
</SpsDt>
|
|
22440
22465
|
<SpsDd>
|
|
22441
22466
|
<SpsTextInput
|
|
22442
22467
|
value={formValue.term2}
|
|
@@ -22446,10 +22471,9 @@ const SpsDescriptionListExamples = {
|
|
|
22446
22471
|
</SpsDd>
|
|
22447
22472
|
<SpsDt
|
|
22448
22473
|
id="accomplishmentsLabel"
|
|
22449
|
-
labelFor={formMeta.fields.term3}
|
|
22450
22474
|
help="Enter a description"
|
|
22451
22475
|
>
|
|
22452
|
-
|
|
22476
|
+
<SpsLabel for={formMeta.fields.term3}>Term 3</SpsLabel>
|
|
22453
22477
|
</SpsDt>
|
|
22454
22478
|
<SpsDd>
|
|
22455
22479
|
<SpsTextInput
|
|
@@ -22485,7 +22509,9 @@ const SpsDescriptionListExamples = {
|
|
|
22485
22509
|
return (
|
|
22486
22510
|
<SpsForm formMeta={formMeta}>
|
|
22487
22511
|
<SpsDl wideTerms>
|
|
22488
|
-
<SpsDt
|
|
22512
|
+
<SpsDt errors="This field is required" help="Enter a description">
|
|
22513
|
+
<SpsLabel for={formMeta.fields.term1}>Term 1</SpsLabel>
|
|
22514
|
+
</SpsDt>
|
|
22489
22515
|
<SpsDd>
|
|
22490
22516
|
<SpsTextInput
|
|
22491
22517
|
value={formValue.term1}
|
|
@@ -22493,7 +22519,9 @@ const SpsDescriptionListExamples = {
|
|
|
22493
22519
|
placeholder="Description"
|
|
22494
22520
|
/>
|
|
22495
22521
|
</SpsDd>
|
|
22496
|
-
<SpsDt
|
|
22522
|
+
<SpsDt>
|
|
22523
|
+
<SpsLabel for={formMeta.fields.term2}>Term 2</SpsLabel>
|
|
22524
|
+
</SpsDt>
|
|
22497
22525
|
<SpsDd>
|
|
22498
22526
|
<SpsTextInput
|
|
22499
22527
|
value={formValue.term2}
|
|
@@ -22501,8 +22529,9 @@ const SpsDescriptionListExamples = {
|
|
|
22501
22529
|
placeholder="Description"
|
|
22502
22530
|
/>
|
|
22503
22531
|
</SpsDd>
|
|
22504
|
-
<SpsDt
|
|
22505
|
-
|
|
22532
|
+
<SpsDt help="Enter a description">
|
|
22533
|
+
<SpsLabel for={formMeta.fields.term3}>Term 3</SpsLabel>
|
|
22534
|
+
</SpsDt>
|
|
22506
22535
|
<SpsDd>
|
|
22507
22536
|
<SpsTextInput
|
|
22508
22537
|
value={formValue.term3}
|
|
@@ -22537,7 +22566,9 @@ const SpsDescriptionListExamples = {
|
|
|
22537
22566
|
return (
|
|
22538
22567
|
<SpsForm formMeta={formMeta}>
|
|
22539
22568
|
<SpsDl widerTerms>
|
|
22540
|
-
<SpsDt
|
|
22569
|
+
<SpsDt errors="This field is required" help="Enter a description">
|
|
22570
|
+
<SpsLabel for={formMeta.fields.term1}>Term 1</SpsLabel>
|
|
22571
|
+
</SpsDt>
|
|
22541
22572
|
<SpsDd>
|
|
22542
22573
|
<SpsTextInput
|
|
22543
22574
|
value={formValue.term1}
|
|
@@ -22545,7 +22576,9 @@ const SpsDescriptionListExamples = {
|
|
|
22545
22576
|
placeholder="Description"
|
|
22546
22577
|
/>
|
|
22547
22578
|
</SpsDd>
|
|
22548
|
-
<SpsDt
|
|
22579
|
+
<SpsDt>
|
|
22580
|
+
<SpsLabel for={formMeta.fields.term2}>Term 2</SpsLabel>
|
|
22581
|
+
</SpsDt>
|
|
22549
22582
|
<SpsDd>
|
|
22550
22583
|
<SpsTextInput
|
|
22551
22584
|
value={formValue.term2}
|
|
@@ -22553,7 +22586,9 @@ const SpsDescriptionListExamples = {
|
|
|
22553
22586
|
placeholder="Description"
|
|
22554
22587
|
/>
|
|
22555
22588
|
</SpsDd>
|
|
22556
|
-
<SpsDt
|
|
22589
|
+
<SpsDt help="Enter a description">
|
|
22590
|
+
<SpsLabel for={formMeta.fields.term3}>Term 3</SpsLabel>
|
|
22591
|
+
</SpsDt>
|
|
22557
22592
|
<SpsDd>
|
|
22558
22593
|
<SpsTextInput
|
|
22559
22594
|
value={formValue.term3}
|
|
@@ -22588,7 +22623,9 @@ const SpsDescriptionListExamples = {
|
|
|
22588
22623
|
return (
|
|
22589
22624
|
<SpsForm formMeta={formMeta}>
|
|
22590
22625
|
<SpsDl compact>
|
|
22591
|
-
<SpsDt
|
|
22626
|
+
<SpsDt errors="This field is required" help="Enter a description">
|
|
22627
|
+
<SpsLabel for={formMeta.fields.term1}>Term 1</SpsLabel>
|
|
22628
|
+
</SpsDt>
|
|
22592
22629
|
<SpsDd>
|
|
22593
22630
|
<SpsTextInput
|
|
22594
22631
|
value={formValue.term1}
|
|
@@ -22596,7 +22633,9 @@ const SpsDescriptionListExamples = {
|
|
|
22596
22633
|
placeholder="Description"
|
|
22597
22634
|
/>
|
|
22598
22635
|
</SpsDd>
|
|
22599
|
-
<SpsDt
|
|
22636
|
+
<SpsDt>
|
|
22637
|
+
<SpsLabel for={formMeta.fields.term2}>Term 2</SpsLabel>
|
|
22638
|
+
</SpsDt>
|
|
22600
22639
|
<SpsDd>
|
|
22601
22640
|
<SpsTextInput
|
|
22602
22641
|
value={formValue.term2}
|
|
@@ -22606,10 +22645,9 @@ const SpsDescriptionListExamples = {
|
|
|
22606
22645
|
</SpsDd>
|
|
22607
22646
|
<SpsDt
|
|
22608
22647
|
id="accomplishmentsLabel"
|
|
22609
|
-
labelFor={formMeta.fields.term3}
|
|
22610
22648
|
help="Enter a description"
|
|
22611
22649
|
>
|
|
22612
|
-
|
|
22650
|
+
<SpsLabel for={formMeta.fields.term3}>Term 3</SpsLabel>
|
|
22613
22651
|
</SpsDt>
|
|
22614
22652
|
<SpsDd>
|
|
22615
22653
|
<SpsTextInput
|
|
@@ -22645,7 +22683,9 @@ const SpsDescriptionListExamples = {
|
|
|
22645
22683
|
return (
|
|
22646
22684
|
<SpsForm formMeta={formMeta}>
|
|
22647
22685
|
<SpsDl wideTerms compact>
|
|
22648
|
-
<SpsDt
|
|
22686
|
+
<SpsDt errors="This field is required" help="Enter a description">
|
|
22687
|
+
<SpsLabel for={formMeta.fields.term1}>Term 1</SpsLabel>
|
|
22688
|
+
</SpsDt>
|
|
22649
22689
|
<SpsDd>
|
|
22650
22690
|
<SpsTextInput
|
|
22651
22691
|
value={formValue.term1}
|
|
@@ -22653,7 +22693,9 @@ const SpsDescriptionListExamples = {
|
|
|
22653
22693
|
placeholder="Description"
|
|
22654
22694
|
/>
|
|
22655
22695
|
</SpsDd>
|
|
22656
|
-
<SpsDt
|
|
22696
|
+
<SpsDt>
|
|
22697
|
+
<SpsLabel for={formMeta.fields.term2}>Term 2</SpsLabel>
|
|
22698
|
+
</SpsDt>
|
|
22657
22699
|
<SpsDd>
|
|
22658
22700
|
<SpsTextInput
|
|
22659
22701
|
value={formValue.term2}
|
|
@@ -22661,8 +22703,9 @@ const SpsDescriptionListExamples = {
|
|
|
22661
22703
|
placeholder="Description"
|
|
22662
22704
|
/>
|
|
22663
22705
|
</SpsDd>
|
|
22664
|
-
<SpsDt
|
|
22665
|
-
|
|
22706
|
+
<SpsDt help="Enter a description">
|
|
22707
|
+
<SpsLabel for={formMeta.fields.term3}>Term 3</SpsLabel>
|
|
22708
|
+
</SpsDt>
|
|
22666
22709
|
<SpsDd>
|
|
22667
22710
|
<SpsTextInput
|
|
22668
22711
|
value={formValue.term3}
|
|
@@ -22697,7 +22740,9 @@ const SpsDescriptionListExamples = {
|
|
|
22697
22740
|
return (
|
|
22698
22741
|
<SpsForm formMeta={formMeta}>
|
|
22699
22742
|
<SpsDl widerTerms compact>
|
|
22700
|
-
<SpsDt
|
|
22743
|
+
<SpsDt errors="This field is required" help="Enter a description">
|
|
22744
|
+
<SpsLabel for={formMeta.fields.term1}>Term 1</SpsLabel>
|
|
22745
|
+
</SpsDt>
|
|
22701
22746
|
<SpsDd>
|
|
22702
22747
|
<SpsTextInput
|
|
22703
22748
|
value={formValue.term1}
|
|
@@ -22705,7 +22750,9 @@ const SpsDescriptionListExamples = {
|
|
|
22705
22750
|
placeholder="Description"
|
|
22706
22751
|
/>
|
|
22707
22752
|
</SpsDd>
|
|
22708
|
-
<SpsDt
|
|
22753
|
+
<SpsDt>
|
|
22754
|
+
<SpsLabel for={formMeta.fields.term2}>Term 2</SpsLabel>
|
|
22755
|
+
</SpsDt>
|
|
22709
22756
|
<SpsDd>
|
|
22710
22757
|
<SpsTextInput
|
|
22711
22758
|
value={formValue.term2}
|
|
@@ -22713,7 +22760,9 @@ const SpsDescriptionListExamples = {
|
|
|
22713
22760
|
placeholder="Description"
|
|
22714
22761
|
/>
|
|
22715
22762
|
</SpsDd>
|
|
22716
|
-
<SpsDt
|
|
22763
|
+
<SpsDt help="Enter a description">
|
|
22764
|
+
<SpsLabel for={formMeta.fields.term3}>Term 3</SpsLabel>
|
|
22765
|
+
</SpsDt>
|
|
22717
22766
|
<SpsDd>
|
|
22718
22767
|
<SpsTextInput
|
|
22719
22768
|
value={formValue.term3}
|
|
@@ -33508,11 +33557,15 @@ const SpsSelectExamples = {
|
|
|
33508
33557
|
function DemoComponent() {
|
|
33509
33558
|
const colors = ["red", "blue", "green"];
|
|
33510
33559
|
|
|
33560
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33561
|
+
color: ""
|
|
33562
|
+
});
|
|
33563
|
+
|
|
33511
33564
|
return (
|
|
33512
33565
|
<div className="sfg-row">
|
|
33513
33566
|
<div className="sfg-col-4">
|
|
33514
|
-
<SpsLabel>Color</SpsLabel>
|
|
33515
|
-
<SpsSelect options={colors} />
|
|
33567
|
+
<SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
|
|
33568
|
+
<SpsSelect options={colors} formMeta={formMeta.fields.color}/>
|
|
33516
33569
|
</div>
|
|
33517
33570
|
</div>
|
|
33518
33571
|
)
|
|
@@ -33525,11 +33578,19 @@ const SpsSelectExamples = {
|
|
|
33525
33578
|
function DemoComponent() {
|
|
33526
33579
|
const colors = ["red", "blue", "green"];
|
|
33527
33580
|
|
|
33581
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33582
|
+
color: ""
|
|
33583
|
+
});
|
|
33584
|
+
|
|
33528
33585
|
return (
|
|
33529
33586
|
<div className="sfg-row">
|
|
33530
33587
|
<div className="sfg-col-4">
|
|
33531
|
-
<SpsLabel>Color</SpsLabel>
|
|
33532
|
-
<SpsSelect
|
|
33588
|
+
<SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
|
|
33589
|
+
<SpsSelect
|
|
33590
|
+
options={colors}
|
|
33591
|
+
placeholder="Select a color..."
|
|
33592
|
+
formMeta={formMeta.fields.color}
|
|
33593
|
+
/>
|
|
33533
33594
|
</div>
|
|
33534
33595
|
</div>
|
|
33535
33596
|
)
|
|
@@ -33542,11 +33603,19 @@ const SpsSelectExamples = {
|
|
|
33542
33603
|
function DemoComponent() {
|
|
33543
33604
|
const colors = ["Small", "Medium", "Large"];
|
|
33544
33605
|
|
|
33606
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33607
|
+
color: ""
|
|
33608
|
+
});
|
|
33609
|
+
|
|
33545
33610
|
return (
|
|
33546
33611
|
<div className="sfg-row">
|
|
33547
33612
|
<div className="sfg-col-4">
|
|
33548
|
-
<SpsLabel>Size</SpsLabel>
|
|
33549
|
-
<SpsSelect
|
|
33613
|
+
<SpsLabel for={formMeta.fields.color}>Size</SpsLabel>
|
|
33614
|
+
<SpsSelect
|
|
33615
|
+
options={colors}
|
|
33616
|
+
value="Small" notClearable
|
|
33617
|
+
formMeta={formMeta.fields.color}
|
|
33618
|
+
/>
|
|
33550
33619
|
</div>
|
|
33551
33620
|
</div>
|
|
33552
33621
|
)
|
|
@@ -33558,11 +33627,19 @@ const SpsSelectExamples = {
|
|
|
33558
33627
|
react: code`
|
|
33559
33628
|
function DemoComponent() {
|
|
33560
33629
|
|
|
33630
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33631
|
+
color: ""
|
|
33632
|
+
});
|
|
33633
|
+
|
|
33561
33634
|
return (
|
|
33562
33635
|
<div className="sfg-row">
|
|
33563
33636
|
<div className="sfg-col-4">
|
|
33564
|
-
<SpsLabel>Company</SpsLabel>
|
|
33565
|
-
<SpsSelect
|
|
33637
|
+
<SpsLabel for={formMeta.fields.color}>Company</SpsLabel>
|
|
33638
|
+
<SpsSelect
|
|
33639
|
+
options={[]}
|
|
33640
|
+
zeroState="We're sorry, there are no options to choose from at this time."
|
|
33641
|
+
formMeta={formMeta.fields.color}
|
|
33642
|
+
/>
|
|
33566
33643
|
</div>
|
|
33567
33644
|
</div>
|
|
33568
33645
|
)
|
|
@@ -33584,7 +33661,11 @@ const SpsSelectExamples = {
|
|
|
33584
33661
|
<div className="sfg-row">
|
|
33585
33662
|
<div className="sfg-col-4">
|
|
33586
33663
|
<SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
|
|
33587
|
-
<SpsSelect
|
|
33664
|
+
<SpsSelect
|
|
33665
|
+
options={colors}
|
|
33666
|
+
formMeta={formMeta.fields.color}
|
|
33667
|
+
value={formValue.color}
|
|
33668
|
+
/>
|
|
33588
33669
|
</div>
|
|
33589
33670
|
</div>
|
|
33590
33671
|
)
|
|
@@ -33604,11 +33685,18 @@ const SpsSelectExamples = {
|
|
|
33604
33685
|
return ["red", "orange", "yellow", "green", "blue", "indigo", "violet"].filter(s => (new RegExp(search, "i")).test(s));
|
|
33605
33686
|
}
|
|
33606
33687
|
|
|
33688
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33689
|
+
color: ""
|
|
33690
|
+
});
|
|
33691
|
+
|
|
33607
33692
|
return (
|
|
33608
33693
|
<div className="sfg-row">
|
|
33609
33694
|
<div className="sfg-col-4">
|
|
33610
|
-
<SpsLabel>Color</SpsLabel>
|
|
33611
|
-
<SpsSelect
|
|
33695
|
+
<SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
|
|
33696
|
+
<SpsSelect
|
|
33697
|
+
options={colorSearch}
|
|
33698
|
+
zeroState="While I'm sure that's a lovely color, it's not an option we support."
|
|
33699
|
+
formMeta={formMeta.fields.color}/>
|
|
33612
33700
|
</div>
|
|
33613
33701
|
</div>
|
|
33614
33702
|
)
|
|
@@ -33626,11 +33714,15 @@ const SpsSelectExamples = {
|
|
|
33626
33714
|
});
|
|
33627
33715
|
}
|
|
33628
33716
|
|
|
33717
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33718
|
+
color: ""
|
|
33719
|
+
});
|
|
33720
|
+
|
|
33629
33721
|
return (
|
|
33630
33722
|
<div className="sfg-row">
|
|
33631
33723
|
<div className="sfg-col-4">
|
|
33632
|
-
<SpsLabel>Color</SpsLabel>
|
|
33633
|
-
<SpsSelect options={colorSearch} />
|
|
33724
|
+
<SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
|
|
33725
|
+
<SpsSelect options={colorSearch} formMeta={formMeta.fields.color}/>
|
|
33634
33726
|
</div>
|
|
33635
33727
|
</div>
|
|
33636
33728
|
)
|
|
@@ -33645,11 +33737,19 @@ const SpsSelectExamples = {
|
|
|
33645
33737
|
return ["red", "orange", "yellow", "green", "blue", "indigo", "violet"].filter(s => new RegExp(search, "i").test(s));
|
|
33646
33738
|
}
|
|
33647
33739
|
|
|
33740
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33741
|
+
color: ""
|
|
33742
|
+
});
|
|
33743
|
+
|
|
33648
33744
|
return (
|
|
33649
33745
|
<div className="sfg-row">
|
|
33650
33746
|
<div className="sfg-col-4">
|
|
33651
|
-
<SpsLabel>Color</SpsLabel>
|
|
33652
|
-
<SpsSelect
|
|
33747
|
+
<SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
|
|
33748
|
+
<SpsSelect
|
|
33749
|
+
options={colorSearch}
|
|
33750
|
+
searchDebounce={2000}
|
|
33751
|
+
formMeta={formMeta.fields.color}
|
|
33752
|
+
/>
|
|
33653
33753
|
</div>
|
|
33654
33754
|
</div>
|
|
33655
33755
|
)
|
|
@@ -33671,11 +33771,19 @@ const SpsSelectExamples = {
|
|
|
33671
33771
|
{ size: "L", price: "14.99" },
|
|
33672
33772
|
]
|
|
33673
33773
|
|
|
33774
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33775
|
+
color: ""
|
|
33776
|
+
});
|
|
33777
|
+
|
|
33674
33778
|
return (
|
|
33675
33779
|
<div className="sfg-row">
|
|
33676
33780
|
<div className="sfg-col-4">
|
|
33677
|
-
<SpsLabel>Size</SpsLabel>
|
|
33678
|
-
<SpsSelect
|
|
33781
|
+
<SpsLabel for={formMeta.fields.color}>Size</SpsLabel>
|
|
33782
|
+
<SpsSelect
|
|
33783
|
+
options={sizes}
|
|
33784
|
+
textKey="size"
|
|
33785
|
+
formMeta={formMeta.fields.color}
|
|
33786
|
+
/>
|
|
33679
33787
|
</div>
|
|
33680
33788
|
</div>
|
|
33681
33789
|
)
|
|
@@ -33691,11 +33799,21 @@ const SpsSelectExamples = {
|
|
|
33691
33799
|
{ size: "M", price: "12.99" },
|
|
33692
33800
|
{ size: "L", price: "14.99" },
|
|
33693
33801
|
]
|
|
33802
|
+
|
|
33803
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33804
|
+
color: ""
|
|
33805
|
+
});
|
|
33806
|
+
|
|
33694
33807
|
return (
|
|
33695
33808
|
<div className="sfg-row">
|
|
33696
33809
|
<div className="sfg-col-4">
|
|
33697
|
-
<SpsLabel>Size</SpsLabel>
|
|
33698
|
-
<SpsSelect
|
|
33810
|
+
<SpsLabel for={formMeta.fields.color}>Size</SpsLabel>
|
|
33811
|
+
<SpsSelect
|
|
33812
|
+
options={sizes}
|
|
33813
|
+
textKey="size"
|
|
33814
|
+
captionKey="price"
|
|
33815
|
+
formMeta={formMeta.fields.color}
|
|
33816
|
+
/>
|
|
33699
33817
|
</div>
|
|
33700
33818
|
</div>
|
|
33701
33819
|
)
|
|
@@ -33747,11 +33865,15 @@ const SpsSelectExamples = {
|
|
|
33747
33865
|
function DemoComponent() {
|
|
33748
33866
|
const colors = ["red", "blue", "green"];
|
|
33749
33867
|
|
|
33868
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
33869
|
+
color: ""
|
|
33870
|
+
});
|
|
33871
|
+
|
|
33750
33872
|
return (
|
|
33751
33873
|
<div className="sfg-row">
|
|
33752
33874
|
<div className="sfg-col-4">
|
|
33753
|
-
<SpsLabel>Color</SpsLabel>
|
|
33754
|
-
<SpsSelect options={colors} disabled />
|
|
33875
|
+
<SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
|
|
33876
|
+
<SpsSelect options={colors} disabled formMeta={formMeta.fields.color}/>
|
|
33755
33877
|
</div>
|
|
33756
33878
|
</div>
|
|
33757
33879
|
)
|
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.36.
|
|
4
|
+
"version": "6.36.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.36.
|
|
32
|
-
"@spscommerce/ds-illustrations": "6.36.
|
|
33
|
-
"@spscommerce/ds-shared": "6.36.
|
|
34
|
-
"@spscommerce/positioning": "6.36.
|
|
31
|
+
"@spscommerce/ds-colors": "6.36.3",
|
|
32
|
+
"@spscommerce/ds-illustrations": "6.36.3",
|
|
33
|
+
"@spscommerce/ds-shared": "6.36.3",
|
|
34
|
+
"@spscommerce/positioning": "6.36.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.36.
|
|
44
|
-
"@spscommerce/ds-illustrations": "6.36.
|
|
45
|
-
"@spscommerce/ds-shared": "6.36.
|
|
46
|
-
"@spscommerce/positioning": "6.36.
|
|
43
|
+
"@spscommerce/ds-colors": "6.36.3",
|
|
44
|
+
"@spscommerce/ds-illustrations": "6.36.3",
|
|
45
|
+
"@spscommerce/ds-shared": "6.36.3",
|
|
46
|
+
"@spscommerce/positioning": "6.36.3",
|
|
47
47
|
"@spscommerce/utils": "^6.11.3",
|
|
48
48
|
"@testing-library/react": "^10.4.0",
|
|
49
49
|
"@types/prop-types": "^15.7.1",
|