@spscommerce/ds-react 8.16.1 → 8.17.0

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 +23 -11
  2. package/lib/index.es.js +23 -11
  3. package/package.json +12 -12
package/lib/index.cjs.js CHANGED
@@ -8784,24 +8784,36 @@ ${t.join("").replace("]","\\]").replace(" ","\\s")}]+`);return e.split(n).filter
8784
8784
  )
8785
8785
  }
8786
8786
  `},singleLine:{description:"Single Line",react:v.code`
8787
- import { SpsMultiValueTextInput, SpsLabel, useSpsForm } from "@spscommerce/ds-react";
8787
+ import {
8788
+ SpsMultiValueTextInput,
8789
+ SpsLabel,
8790
+ useSpsForm,
8791
+ } from "@spscommerce/ds-react";
8788
8792
  function DemoComponent() {
8789
8793
  const { formValue, formMeta, updateForm } = useSpsForm({
8790
- items: ["foo"]
8794
+ items: ["foo"],
8791
8795
  });
8792
-
8796
+ const target = React.useRef(null);
8797
+
8793
8798
  return (
8794
8799
  <>
8795
8800
  <SpsLabel for={formMeta.fields.items}>Items</SpsLabel>
8796
- <SpsMultiValueTextInput
8797
- value={formValue.items}
8798
- formMeta={formMeta.fields.items}
8799
- isSingleLine={true}
8800
- />
8801
+ <div ref={target}>
8802
+ <SpsMultiValueTextInput
8803
+ value={formValue.items}
8804
+ formMeta={formMeta.fields.items}
8805
+ isSingleLine={true}
8806
+ />
8807
+ </div>
8808
+ {formValue.items.length > 3 ? (
8809
+ <SpsTooltip for={target} kind={TooltipKind.HELP}>
8810
+ There are {formValue.items.length} items in the Search Bar
8811
+ </SpsTooltip>
8812
+ ) : null}
8801
8813
  </>
8802
- )
8814
+ );
8803
8815
  }
8804
- `},placeholder:{description:"Placeholder",react:v.code`
8816
+ `},placeholder:{description:"Placeholder",react:v.code`
8805
8817
  import { SpsMultiValueTextInput, SpsLabel, useSpsForm } from "@spscommerce/ds-react";
8806
8818
  function DemoComponent() {
8807
8819
  const { formValue, formMeta, updateForm } = useSpsForm({
@@ -8844,7 +8856,7 @@ ${t.join("").replace("]","\\]").replace(" ","\\s")}]+`);return e.split(n).filter
8844
8856
  const { formValue, formMeta, updateForm } = useSpsForm({
8845
8857
  items: ["Item with spaces"]
8846
8858
  });
8847
-
8859
+
8848
8860
  return (
8849
8861
  <>
8850
8862
  <SpsLabel for={formMeta.fields.items}>Placeholder</SpsLabel>
package/lib/index.es.js CHANGED
@@ -28387,24 +28387,36 @@ const kx = {
28387
28387
  singleLine: {
28388
28388
  description: "Single Line",
28389
28389
  react: y`
28390
- import { SpsMultiValueTextInput, SpsLabel, useSpsForm } from "@spscommerce/ds-react";
28390
+ import {
28391
+ SpsMultiValueTextInput,
28392
+ SpsLabel,
28393
+ useSpsForm,
28394
+ } from "@spscommerce/ds-react";
28391
28395
  function DemoComponent() {
28392
28396
  const { formValue, formMeta, updateForm } = useSpsForm({
28393
- items: ["foo"]
28397
+ items: ["foo"],
28394
28398
  });
28395
-
28399
+ const target = React.useRef(null);
28400
+
28396
28401
  return (
28397
28402
  <>
28398
28403
  <SpsLabel for={formMeta.fields.items}>Items</SpsLabel>
28399
- <SpsMultiValueTextInput
28400
- value={formValue.items}
28401
- formMeta={formMeta.fields.items}
28402
- isSingleLine={true}
28403
- />
28404
+ <div ref={target}>
28405
+ <SpsMultiValueTextInput
28406
+ value={formValue.items}
28407
+ formMeta={formMeta.fields.items}
28408
+ isSingleLine={true}
28409
+ />
28410
+ </div>
28411
+ {formValue.items.length > 3 ? (
28412
+ <SpsTooltip for={target} kind={TooltipKind.HELP}>
28413
+ There are {formValue.items.length} items in the Search Bar
28414
+ </SpsTooltip>
28415
+ ) : null}
28404
28416
  </>
28405
- )
28417
+ );
28406
28418
  }
28407
- `
28419
+ `
28408
28420
  },
28409
28421
  placeholder: {
28410
28422
  description: "Placeholder",
@@ -28464,7 +28476,7 @@ const kx = {
28464
28476
  const { formValue, formMeta, updateForm } = useSpsForm({
28465
28477
  items: ["Item with spaces"]
28466
28478
  });
28467
-
28479
+
28468
28480
  return (
28469
28481
  <>
28470
28482
  <SpsLabel for={formMeta.fields.items}>Placeholder</SpsLabel>
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.16.1",
4
+ "version": "8.17.0",
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.16.1",
50
- "@sps-woodland/tabs": "8.16.1",
51
- "@spscommerce/ds-colors": "8.16.1",
52
- "@spscommerce/ds-shared": "8.16.1",
53
- "@spscommerce/positioning": "8.16.1"
49
+ "@sps-woodland/illustrations": "8.17.0",
50
+ "@sps-woodland/tabs": "8.17.0",
51
+ "@spscommerce/ds-colors": "8.17.0",
52
+ "@spscommerce/ds-shared": "8.17.0",
53
+ "@spscommerce/positioning": "8.17.0"
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.16.1",
76
- "@sps-woodland/tabs": "8.16.1",
77
- "@spscommerce/ds-colors": "8.16.1",
78
- "@spscommerce/ds-shared": "8.16.1",
79
- "@spscommerce/positioning": "8.16.1",
80
- "test": "8.16.1"
75
+ "@sps-woodland/illustrations": "8.17.0",
76
+ "@sps-woodland/tabs": "8.17.0",
77
+ "@spscommerce/ds-colors": "8.17.0",
78
+ "@spscommerce/ds-shared": "8.17.0",
79
+ "@spscommerce/positioning": "8.17.0",
80
+ "test": "8.17.0"
81
81
  },
82
82
  "scripts": {
83
83
  "build": "pnpm run build:js && pnpm run build:types",