@spscommerce/ds-react 6.36.1 → 6.36.2

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.
Files changed (3) hide show
  1. package/lib/index.cjs.js +159 -86
  2. package/lib/index.es.js +94 -21
  3. package/package.json +9 -9
package/lib/index.es.js CHANGED
@@ -33508,11 +33508,15 @@ const SpsSelectExamples = {
33508
33508
  function DemoComponent() {
33509
33509
  const colors = ["red", "blue", "green"];
33510
33510
 
33511
+ const { formValue, formMeta, updateForm } = useSpsForm({
33512
+ color: ""
33513
+ });
33514
+
33511
33515
  return (
33512
33516
  <div className="sfg-row">
33513
33517
  <div className="sfg-col-4">
33514
- <SpsLabel>Color</SpsLabel>
33515
- <SpsSelect options={colors} />
33518
+ <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
33519
+ <SpsSelect options={colors} formMeta={formMeta.fields.color}/>
33516
33520
  </div>
33517
33521
  </div>
33518
33522
  )
@@ -33525,11 +33529,19 @@ const SpsSelectExamples = {
33525
33529
  function DemoComponent() {
33526
33530
  const colors = ["red", "blue", "green"];
33527
33531
 
33532
+ const { formValue, formMeta, updateForm } = useSpsForm({
33533
+ color: ""
33534
+ });
33535
+
33528
33536
  return (
33529
33537
  <div className="sfg-row">
33530
33538
  <div className="sfg-col-4">
33531
- <SpsLabel>Color</SpsLabel>
33532
- <SpsSelect options={colors} placeholder="Select a color..." />
33539
+ <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
33540
+ <SpsSelect
33541
+ options={colors}
33542
+ placeholder="Select a color..."
33543
+ formMeta={formMeta.fields.color}
33544
+ />
33533
33545
  </div>
33534
33546
  </div>
33535
33547
  )
@@ -33542,11 +33554,19 @@ const SpsSelectExamples = {
33542
33554
  function DemoComponent() {
33543
33555
  const colors = ["Small", "Medium", "Large"];
33544
33556
 
33557
+ const { formValue, formMeta, updateForm } = useSpsForm({
33558
+ color: ""
33559
+ });
33560
+
33545
33561
  return (
33546
33562
  <div className="sfg-row">
33547
33563
  <div className="sfg-col-4">
33548
- <SpsLabel>Size</SpsLabel>
33549
- <SpsSelect options={colors} value="Small" notClearable />
33564
+ <SpsLabel for={formMeta.fields.color}>Size</SpsLabel>
33565
+ <SpsSelect
33566
+ options={colors}
33567
+ value="Small" notClearable
33568
+ formMeta={formMeta.fields.color}
33569
+ />
33550
33570
  </div>
33551
33571
  </div>
33552
33572
  )
@@ -33558,11 +33578,19 @@ const SpsSelectExamples = {
33558
33578
  react: code`
33559
33579
  function DemoComponent() {
33560
33580
 
33581
+ const { formValue, formMeta, updateForm } = useSpsForm({
33582
+ color: ""
33583
+ });
33584
+
33561
33585
  return (
33562
33586
  <div className="sfg-row">
33563
33587
  <div className="sfg-col-4">
33564
- <SpsLabel>Company</SpsLabel>
33565
- <SpsSelect options={[]} zeroState="We're sorry, there are no options to choose from at this time." />
33588
+ <SpsLabel for={formMeta.fields.color}>Company</SpsLabel>
33589
+ <SpsSelect
33590
+ options={[]}
33591
+ zeroState="We're sorry, there are no options to choose from at this time."
33592
+ formMeta={formMeta.fields.color}
33593
+ />
33566
33594
  </div>
33567
33595
  </div>
33568
33596
  )
@@ -33584,7 +33612,11 @@ const SpsSelectExamples = {
33584
33612
  <div className="sfg-row">
33585
33613
  <div className="sfg-col-4">
33586
33614
  <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
33587
- <SpsSelect options={colors} formMeta={formMeta.fields.color} formValue={formValue.color}/>
33615
+ <SpsSelect
33616
+ options={colors}
33617
+ formMeta={formMeta.fields.color}
33618
+ value={formValue.color}
33619
+ />
33588
33620
  </div>
33589
33621
  </div>
33590
33622
  )
@@ -33604,11 +33636,18 @@ const SpsSelectExamples = {
33604
33636
  return ["red", "orange", "yellow", "green", "blue", "indigo", "violet"].filter(s => (new RegExp(search, "i")).test(s));
33605
33637
  }
33606
33638
 
33639
+ const { formValue, formMeta, updateForm } = useSpsForm({
33640
+ color: ""
33641
+ });
33642
+
33607
33643
  return (
33608
33644
  <div className="sfg-row">
33609
33645
  <div className="sfg-col-4">
33610
- <SpsLabel>Color</SpsLabel>
33611
- <SpsSelect options={colorSearch} zeroState="While I'm sure that's a lovely color, it's not an option we support." />
33646
+ <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
33647
+ <SpsSelect
33648
+ options={colorSearch}
33649
+ zeroState="While I'm sure that's a lovely color, it's not an option we support."
33650
+ formMeta={formMeta.fields.color}/>
33612
33651
  </div>
33613
33652
  </div>
33614
33653
  )
@@ -33626,11 +33665,15 @@ const SpsSelectExamples = {
33626
33665
  });
33627
33666
  }
33628
33667
 
33668
+ const { formValue, formMeta, updateForm } = useSpsForm({
33669
+ color: ""
33670
+ });
33671
+
33629
33672
  return (
33630
33673
  <div className="sfg-row">
33631
33674
  <div className="sfg-col-4">
33632
- <SpsLabel>Color</SpsLabel>
33633
- <SpsSelect options={colorSearch} />
33675
+ <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
33676
+ <SpsSelect options={colorSearch} formMeta={formMeta.fields.color}/>
33634
33677
  </div>
33635
33678
  </div>
33636
33679
  )
@@ -33645,11 +33688,19 @@ const SpsSelectExamples = {
33645
33688
  return ["red", "orange", "yellow", "green", "blue", "indigo", "violet"].filter(s => new RegExp(search, "i").test(s));
33646
33689
  }
33647
33690
 
33691
+ const { formValue, formMeta, updateForm } = useSpsForm({
33692
+ color: ""
33693
+ });
33694
+
33648
33695
  return (
33649
33696
  <div className="sfg-row">
33650
33697
  <div className="sfg-col-4">
33651
- <SpsLabel>Color</SpsLabel>
33652
- <SpsSelect options={colorSearch} searchDebounce={2000} />
33698
+ <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
33699
+ <SpsSelect
33700
+ options={colorSearch}
33701
+ searchDebounce={2000}
33702
+ formMeta={formMeta.fields.color}
33703
+ />
33653
33704
  </div>
33654
33705
  </div>
33655
33706
  )
@@ -33671,11 +33722,19 @@ const SpsSelectExamples = {
33671
33722
  { size: "L", price: "14.99" },
33672
33723
  ]
33673
33724
 
33725
+ const { formValue, formMeta, updateForm } = useSpsForm({
33726
+ color: ""
33727
+ });
33728
+
33674
33729
  return (
33675
33730
  <div className="sfg-row">
33676
33731
  <div className="sfg-col-4">
33677
- <SpsLabel>Size</SpsLabel>
33678
- <SpsSelect options={sizes} textKey="size" />
33732
+ <SpsLabel for={formMeta.fields.color}>Size</SpsLabel>
33733
+ <SpsSelect
33734
+ options={sizes}
33735
+ textKey="size"
33736
+ formMeta={formMeta.fields.color}
33737
+ />
33679
33738
  </div>
33680
33739
  </div>
33681
33740
  )
@@ -33691,11 +33750,21 @@ const SpsSelectExamples = {
33691
33750
  { size: "M", price: "12.99" },
33692
33751
  { size: "L", price: "14.99" },
33693
33752
  ]
33753
+
33754
+ const { formValue, formMeta, updateForm } = useSpsForm({
33755
+ color: ""
33756
+ });
33757
+
33694
33758
  return (
33695
33759
  <div className="sfg-row">
33696
33760
  <div className="sfg-col-4">
33697
- <SpsLabel>Size</SpsLabel>
33698
- <SpsSelect options={sizes} textKey="size" captionKey="price" />
33761
+ <SpsLabel for={formMeta.fields.color}>Size</SpsLabel>
33762
+ <SpsSelect
33763
+ options={sizes}
33764
+ textKey="size"
33765
+ captionKey="price"
33766
+ formMeta={formMeta.fields.color}
33767
+ />
33699
33768
  </div>
33700
33769
  </div>
33701
33770
  )
@@ -33747,11 +33816,15 @@ const SpsSelectExamples = {
33747
33816
  function DemoComponent() {
33748
33817
  const colors = ["red", "blue", "green"];
33749
33818
 
33819
+ const { formValue, formMeta, updateForm } = useSpsForm({
33820
+ color: ""
33821
+ });
33822
+
33750
33823
  return (
33751
33824
  <div className="sfg-row">
33752
33825
  <div className="sfg-col-4">
33753
- <SpsLabel>Color</SpsLabel>
33754
- <SpsSelect options={colors} disabled />
33826
+ <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
33827
+ <SpsSelect options={colors} disabled formMeta={formMeta.fields.color}/>
33755
33828
  </div>
33756
33829
  </div>
33757
33830
  )
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.1",
4
+ "version": "6.36.2",
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.1",
32
- "@spscommerce/ds-illustrations": "6.36.1",
33
- "@spscommerce/ds-shared": "6.36.1",
34
- "@spscommerce/positioning": "6.36.1",
31
+ "@spscommerce/ds-colors": "6.36.2",
32
+ "@spscommerce/ds-illustrations": "6.36.2",
33
+ "@spscommerce/ds-shared": "6.36.2",
34
+ "@spscommerce/positioning": "6.36.2",
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.1",
44
- "@spscommerce/ds-illustrations": "6.36.1",
45
- "@spscommerce/ds-shared": "6.36.1",
46
- "@spscommerce/positioning": "6.36.1",
43
+ "@spscommerce/ds-colors": "6.36.2",
44
+ "@spscommerce/ds-illustrations": "6.36.2",
45
+ "@spscommerce/ds-shared": "6.36.2",
46
+ "@spscommerce/positioning": "6.36.2",
47
47
  "@spscommerce/utils": "^6.11.3",
48
48
  "@testing-library/react": "^10.4.0",
49
49
  "@types/prop-types": "^15.7.1",