@spscommerce/ds-react 6.36.2 → 6.36.4

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 +180 -94
  2. package/lib/index.es.js +141 -26
  3. 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 labelFor={formMeta.fields.term1} required>Term 1</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 labelFor={formMeta.fields.term2}>Term 2</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
- Term3
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 labelFor={formMeta.fields.term1}>Term 1</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 labelFor={formMeta.fields.term2}>Term 2</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 labelFor={formMeta.fields.term3} help="Enter a description"
22505
- >Term 3</SpsDt>
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 labelFor={formMeta.fields.term1}>Term 1</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 labelFor={formMeta.fields.term2}>Term 2</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 labelFor={formMeta.fields.term3} help="Enter a description">Term 3</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 labelFor={formMeta.fields.term1} required>Term 1</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 labelFor={formMeta.fields.term2}>Term 2</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
- Term3
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 labelFor={formMeta.fields.term1}>Term 1</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 labelFor={formMeta.fields.term2}>Term 2</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 labelFor={formMeta.fields.term3} help="Enter a description"
22665
- >Term 3</SpsDt>
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 labelFor={formMeta.fields.term1}>Term 1</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 labelFor={formMeta.fields.term2}>Term 2</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 labelFor={formMeta.fields.term3} help="Enter a description">Term 3</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}
@@ -23282,7 +23331,7 @@ function SpsFieldset({
23282
23331
  onClick: toggleTooltip
23283
23332
  }, optional && /* @__PURE__ */ React.createElement(SpsCheckbox, {
23284
23333
  checked: isChecked,
23285
- className: "d-inline-flex",
23334
+ className: "d-inline-flex pr-1",
23286
23335
  onChange: () => {
23287
23336
  setIsChecked(!isChecked);
23288
23337
  },
@@ -27584,6 +27633,72 @@ const SpsTagExamples = {
27584
27633
  `
27585
27634
  }
27586
27635
  }
27636
+ },
27637
+ keyValueTag: {
27638
+ label: "Key Value Tag",
27639
+ examples: {
27640
+ basic: {
27641
+ react: code`
27642
+ import { SpsKeyValueTag } from "@spscommerce/ds-react";
27643
+ import { TagKind, SpsIcon } from "@spscommerce/ds-shared";
27644
+ function Component() {
27645
+ return (
27646
+ <>
27647
+ <SpsKeyValueTag
27648
+ icon={SpsIcon.INFO_CIRCLE}
27649
+ color={TagKind.DEFAULT}
27650
+ tagKey="Baz"
27651
+ value="1234"
27652
+ className="mr-1 mb-1"
27653
+ />
27654
+ <SpsKeyValueTag
27655
+ icon={SpsIcon.CHECKMARK}
27656
+ color={TagKind.KEY}
27657
+ tagKey="Baz"
27658
+ value="1234"
27659
+ className="mr-1 mb-1"
27660
+ />
27661
+ <SpsKeyValueTag
27662
+ icon={SpsIcon.EXCLAMATION_TRIANGLE}
27663
+ color={TagKind.WARNING}
27664
+ tagKey="Baz"
27665
+ value="1234"
27666
+ className="mr-1 mb-1"
27667
+ />
27668
+ <SpsKeyValueTag
27669
+ icon={SpsIcon.EXCLAMATION_CIRCLE}
27670
+ color={TagKind.ERROR}
27671
+ tagKey="Baz"
27672
+ value="1234"
27673
+ className="mr-1 mb-1"
27674
+ />
27675
+ <SpsKeyValueTag
27676
+ icon={SpsIcon.ELLIPSES}
27677
+ color={TagKind.PENDING}
27678
+ tagKey="Baz"
27679
+ value="1234"
27680
+ className="mr-1 mb-1"
27681
+ />
27682
+ <SpsKeyValueTag
27683
+ icon={SpsIcon.CHECKMARK}
27684
+ color={TagKind.SUCCESS}
27685
+ tagKey="Baz"
27686
+ value="1234"
27687
+ className="mr-1 mb-1"
27688
+ />
27689
+ <SpsKeyValueTag
27690
+ icon={SpsIcon.INFO_CIRCLE}
27691
+ color={TagKind.INFO}
27692
+ tagKey="Baz"
27693
+ value="1234"
27694
+ className="mr-1 mb-1"
27695
+ />
27696
+ </>
27697
+ )
27698
+ }
27699
+ `
27700
+ }
27701
+ }
27587
27702
  }
27588
27703
  };
27589
27704
  const SpsListActionBarExamples = {
@@ -39404,7 +39519,7 @@ function SpsKeyValueTag(props2) {
39404
39519
  kind: color,
39405
39520
  className: "sps-key-value-tag--key"
39406
39521
  }, tagKey), /* @__PURE__ */ React.createElement(SpsTag, {
39407
- className: "sps-key-value-tag--value"
39522
+ className: `sps-key-value-tag--value ${color}`
39408
39523
  }, href && /* @__PURE__ */ React.createElement("a", {
39409
39524
  href
39410
39525
  }, value), !href && 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.36.2",
4
+ "version": "6.36.4",
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.2",
32
- "@spscommerce/ds-illustrations": "6.36.2",
33
- "@spscommerce/ds-shared": "6.36.2",
34
- "@spscommerce/positioning": "6.36.2",
31
+ "@spscommerce/ds-colors": "6.36.4",
32
+ "@spscommerce/ds-illustrations": "6.36.4",
33
+ "@spscommerce/ds-shared": "6.36.4",
34
+ "@spscommerce/positioning": "6.36.4",
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.2",
44
- "@spscommerce/ds-illustrations": "6.36.2",
45
- "@spscommerce/ds-shared": "6.36.2",
46
- "@spscommerce/positioning": "6.36.2",
43
+ "@spscommerce/ds-colors": "6.36.4",
44
+ "@spscommerce/ds-illustrations": "6.36.4",
45
+ "@spscommerce/ds-shared": "6.36.4",
46
+ "@spscommerce/positioning": "6.36.4",
47
47
  "@spscommerce/utils": "^6.11.3",
48
48
  "@testing-library/react": "^10.4.0",
49
49
  "@types/prop-types": "^15.7.1",