@spscommerce/ds-react 6.17.1 → 6.18.1

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 +698 -642
  2. package/lib/index.es.js +410 -285
  3. package/package.json +9 -9
package/lib/index.es.js CHANGED
@@ -2221,11 +2221,33 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
2221
2221
  const portal = usePortal("sps-option-list-portal");
2222
2222
  const portalContext = React.useContext(PortalContext);
2223
2223
  const [primePosition, altPosition] = positionOverride || [Position.BOTTOM_LEFT, Position.TOP_LEFT];
2224
- const [posStyle, openingUpward] = isOpen ? getPosition(rootRef, attachTo, primePosition, __spreadValues({
2225
- altPosition,
2226
- setMinWidth: !ignoreWidthStyles,
2227
- setWidth: !ignoreWidthStyles && conformWidth
2228
- }, portalContext)) : [{}, false];
2224
+ const [[posStyle, openingUpward], setPositionData] = React.useState([{}, false]);
2225
+ React.useEffect(() => {
2226
+ if (isOpen) {
2227
+ setPositionData(getPosition(rootRef, attachTo, primePosition, __spreadValues({
2228
+ altPosition,
2229
+ setMinWidth: !ignoreWidthStyles,
2230
+ setWidth: !ignoreWidthStyles && conformWidth
2231
+ }, portalContext)));
2232
+ } else {
2233
+ setPositionData([{}, false]);
2234
+ }
2235
+ }, [isOpen, primePosition, altPosition]);
2236
+ React.useEffect(() => {
2237
+ const onScroll = () => {
2238
+ if (isOpen) {
2239
+ setPositionData(getPosition(rootRef, attachTo, primePosition, __spreadValues({
2240
+ altPosition,
2241
+ setMinWidth: !ignoreWidthStyles,
2242
+ setWidth: !ignoreWidthStyles && conformWidth
2243
+ }, portalContext)));
2244
+ }
2245
+ };
2246
+ document.addEventListener("scroll", onScroll);
2247
+ return () => {
2248
+ document.removeEventListener("scroll", onScroll);
2249
+ };
2250
+ }, [isOpen]);
2229
2251
  const searchInputRef = React.useRef(null);
2230
2252
  const [
2231
2253
  searchElement,
@@ -21615,6 +21637,21 @@ function SpsTooltip({
21615
21637
  setPositionData([{}, false]);
21616
21638
  }
21617
21639
  }, [shown, position3, altPosition, offsets[0], offsets[1], children]);
21640
+ React.useEffect(() => {
21641
+ const onScroll = () => {
21642
+ if (shown) {
21643
+ setPositionData(getPosition(rootElement, forElementRef, position3, __spreadValues({
21644
+ altPosition,
21645
+ setMinWidth: false,
21646
+ offsets: [offsets[0] - CARET_SPACING_PX, offsets[1] + getSecondaryOffset(position3)]
21647
+ }, portalContext)));
21648
+ }
21649
+ };
21650
+ document.addEventListener("scroll", onScroll);
21651
+ return () => {
21652
+ document.removeEventListener("scroll", onScroll);
21653
+ };
21654
+ }, [shown]);
21618
21655
  const classes = clsx(unsafelyReplaceClassName || "sps-tooltip", "z-stratum-tip", `sps-tooltip--${kind}`, `sps-tooltip--pos-${(altPositionUsed ? altPosition : position3).replace(" ", "-")}`, shown && "sps-tooltip--shown", className);
21619
21656
  return portal(/* @__PURE__ */ React.createElement("div", {
21620
21657
  role: "tooltip",
@@ -21724,9 +21761,9 @@ Object.assign(SpsDt, {
21724
21761
  const SpsDescriptionListExamples = {
21725
21762
  general: {
21726
21763
  label: "General Usage",
21727
- description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", null, "Description Lists should be used to group a series of related terms (and their accompanying descriptions) together in a tabular-like format."), /* @__PURE__ */ React__default.createElement("p", null, "Note: Description Lists are not the required pattern for listing terms and descriptions, but should be used when it benefits the legibility of the content over other typographic formats such as unordered lists or tables."), /* @__PURE__ */ React__default.createElement("h4", null, "Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
21764
+ description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", null, "Description Lists should be used to group a series of related terms (and their accompanying descriptions) together in a tabular-like format."), /* @__PURE__ */ React__default.createElement("p", null, "Note: Description Lists are not the required pattern for listing terms and descriptions, but should be used when it benefits the legibility of the content over other typographic formats such as unordered lists or tables."), /* @__PURE__ */ React__default.createElement("h5", null, "Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
21728
21765
  className: "mb-2"
21729
- }, "To display two or more terms that have accompanying descriptions or values.")), /* @__PURE__ */ React__default.createElement("h4", null, "Do Not Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
21766
+ }, "To display two or more terms that have accompanying descriptions or values.")), /* @__PURE__ */ React__default.createElement("h5", null, "Do Not Use a Description List"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
21730
21767
  className: "mb-2"
21731
21768
  }, "To display a single term"), /* @__PURE__ */ React__default.createElement("li", {
21732
21769
  className: "mb-2"
@@ -21736,88 +21773,104 @@ const SpsDescriptionListExamples = {
21736
21773
  label: "Basic Description Lists",
21737
21774
  description: () => /* @__PURE__ */ React__default.createElement("p", null, "Description Lists are available in two sizes. Additionally, the left column can be set to one of three different width options to best accomodate the content in each specific use case."),
21738
21775
  examples: {
21739
- standard: {
21740
- description: "Standard Size Description Lists",
21776
+ oneToThree: {
21777
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-3"),
21741
21778
  react: code`
21742
21779
  function DemoComponent() {
21743
21780
  return (
21744
- <SpsCardV2>
21745
- <SpsTabsV2>
21746
- <Item key="1-to-3" title="1-to-3">
21747
- <SpsDl>
21748
- <SpsDt>Term 1</SpsDt>
21749
- <SpsDd>Description 1</SpsDd>
21750
- <SpsDt>Term 2</SpsDt>
21751
- <SpsDd>Description 2</SpsDd>
21752
- <SpsDt help="This is the third term">Term 3</SpsDt>
21753
- <SpsDd>Description 3</SpsDd>
21754
- </SpsDl>
21755
- </Item>
21756
- <Item key="1-to-2" title="1-to-2">
21757
- <SpsDl wideTerms>
21758
- <SpsDt>Term 1</SpsDt>
21759
- <SpsDd>Description 1</SpsDd>
21760
- <SpsDt>Term 2</SpsDt>
21761
- <SpsDd>Description 2</SpsDd>
21762
- <SpsDt help="This is the third term">Term 3</SpsDt>
21763
- <SpsDd>Description 3</SpsDd>
21764
- </SpsDl>
21765
- </Item>
21766
- <Item key="1-to-1" title="1-to-1">
21767
- <SpsDl widerTerms>
21768
- <SpsDt>Term 1</SpsDt>
21769
- <SpsDd>Description 1</SpsDd>
21770
- <SpsDt>Term 2</SpsDt>
21771
- <SpsDd>Description 2</SpsDd>
21772
- <SpsDt help="This is the third term">Term 3</SpsDt>
21773
- <SpsDd>Description 3</SpsDd>
21774
- </SpsDl>
21775
- </Item>
21776
- </SpsTabsV2>
21777
- </SpsCardV2>
21781
+ <SpsDl>
21782
+ <SpsDt>Term 1</SpsDt>
21783
+ <SpsDd>Description 1</SpsDd>
21784
+ <SpsDt>Term 2</SpsDt>
21785
+ <SpsDd>Description 2</SpsDd>
21786
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21787
+ <SpsDd>Description 3</SpsDd>
21788
+ </SpsDl>
21778
21789
  )
21779
21790
  }
21780
21791
  `
21781
21792
  },
21782
- compact: {
21783
- description: "Compact Description Lists",
21793
+ oneToTwo: {
21794
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-2"),
21784
21795
  react: code`
21785
21796
  function DemoComponent() {
21786
21797
  return (
21787
- <SpsCardV2>
21788
- <SpsTabsV2>
21789
- <Item key="1-to-3" title="1-to-3">
21790
- <SpsDl compact>
21791
- <SpsDt>Term 1</SpsDt>
21792
- <SpsDd>Description 1</SpsDd>
21793
- <SpsDt>Term 2</SpsDt>
21794
- <SpsDd>Description 2</SpsDd>
21795
- <SpsDt help="This is the third term">Term 3</SpsDt>
21796
- <SpsDd>Description 3</SpsDd>
21797
- </SpsDl>
21798
- </Item>
21799
- <Item key="1-to-2" title="1-to-2">
21800
- <SpsDl compact wideTerms>
21801
- <SpsDt>Term 1</SpsDt>
21802
- <SpsDd>Description 1</SpsDd>
21803
- <SpsDt>Term 2</SpsDt>
21804
- <SpsDd>Description 2</SpsDd>
21805
- <SpsDt help="This is the third term">Term 3</SpsDt>
21806
- <SpsDd>Description 3</SpsDd>
21807
- </SpsDl>
21808
- </Item>
21809
- <Item key="1-to-1" title="1-to-1">
21810
- <SpsDl compact widerTerms>
21811
- <SpsDt>Term 1</SpsDt>
21812
- <SpsDd>Description 1</SpsDd>
21813
- <SpsDt>Term 2</SpsDt>
21814
- <SpsDd>Description 2</SpsDd>
21815
- <SpsDt help="This is the third term">Term 3</SpsDt>
21816
- <SpsDd>Description 3</SpsDd>
21817
- </SpsDl>
21818
- </Item>
21819
- </SpsTabsV2>
21820
- </SpsCardV2>
21798
+ <SpsDl wideTerms>
21799
+ <SpsDt>Term 1</SpsDt>
21800
+ <SpsDd>Description 1</SpsDd>
21801
+ <SpsDt>Term 2</SpsDt>
21802
+ <SpsDd>Description 2</SpsDd>
21803
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21804
+ <SpsDd>Description 3</SpsDd>
21805
+ </SpsDl>
21806
+ )
21807
+ }
21808
+ `
21809
+ },
21810
+ oneToOne: {
21811
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-1"),
21812
+ react: code`
21813
+ function DemoComponent() {
21814
+ return (
21815
+ <SpsDl widerTerms>
21816
+ <SpsDt>Term 1</SpsDt>
21817
+ <SpsDd>Description 1</SpsDd>
21818
+ <SpsDt>Term 2</SpsDt>
21819
+ <SpsDd>Description 2</SpsDd>
21820
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21821
+ <SpsDd>Description 3</SpsDd>
21822
+ </SpsDl>
21823
+ )
21824
+ }
21825
+ `
21826
+ },
21827
+ compactOneToThree: {
21828
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-3"),
21829
+ react: code`
21830
+ function DemoComponent() {
21831
+ return (
21832
+ <SpsDl compact>
21833
+ <SpsDt>Term 1</SpsDt>
21834
+ <SpsDd>Description 1</SpsDd>
21835
+ <SpsDt>Term 2</SpsDt>
21836
+ <SpsDd>Description 2</SpsDd>
21837
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21838
+ <SpsDd>Description 3</SpsDd>
21839
+ </SpsDl>
21840
+ )
21841
+ }
21842
+ `
21843
+ },
21844
+ compactOneToTwo: {
21845
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-2"),
21846
+ react: code`
21847
+ function DemoComponent() {
21848
+ return (
21849
+ <SpsDl compact wideTerms>
21850
+ <SpsDt>Term 1</SpsDt>
21851
+ <SpsDd>Description 1</SpsDd>
21852
+ <SpsDt>Term 2</SpsDt>
21853
+ <SpsDd>Description 2</SpsDd>
21854
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21855
+ <SpsDd>Description 3</SpsDd>
21856
+ </SpsDl>
21857
+ )
21858
+ }
21859
+ `
21860
+ },
21861
+ compactOneToOne: {
21862
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-1"),
21863
+ react: code`
21864
+ function DemoComponent() {
21865
+ return (
21866
+ <SpsDl compact widerTerms>
21867
+ <SpsDt>Term 1</SpsDt>
21868
+ <SpsDd>Description 1</SpsDd>
21869
+ <SpsDt>Term 2</SpsDt>
21870
+ <SpsDd>Description 2</SpsDd>
21871
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21872
+ <SpsDd>Description 3</SpsDd>
21873
+ </SpsDl>
21821
21874
  )
21822
21875
  }
21823
21876
  `
@@ -21830,8 +21883,8 @@ const SpsDescriptionListExamples = {
21830
21883
  to: "form"
21831
21884
  }, "Forms"), " page for more information regarding Form rules."), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("i", null, "Note: Description Lists with Input Fields should only be utilized when it benefits the usability of a form, and should not be used adjacent to forms that are not in Description Lists."))),
21832
21885
  examples: {
21833
- standard: {
21834
- description: "Standard Size Description Lists with Input Fields",
21886
+ oneToThree: {
21887
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-3"),
21835
21888
  react: code`
21836
21889
  function DemoComponent() {
21837
21890
  const { formValue, formMeta, updateForm } = useSpsForm({
@@ -21849,113 +21902,46 @@ const SpsDescriptionListExamples = {
21849
21902
  }, []);
21850
21903
 
21851
21904
  return (
21852
- <SpsCardV2>
21853
- <SpsTabsV2>
21854
- <Item key="1-to-3" title="1-to-3">
21855
- <SpsForm formMeta={formMeta}>
21856
- <SpsDl>
21857
- <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
21858
- <SpsDd>
21859
- <SpsTextInput
21860
- value={formValue.term1}
21861
- formMeta={formMeta.fields.term1}
21862
- placeholder="Description"
21863
- />
21864
- </SpsDd>
21865
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21866
- <SpsDd>
21867
- <SpsTextInput
21868
- value={formValue.term2}
21869
- formMeta={formMeta.fields.term2}
21870
- placeholder="Description"
21871
- />
21872
- </SpsDd>
21873
- <SpsDt
21874
- id="accomplishmentsLabel"
21875
- labelFor={formMeta.fields.term3}
21876
- help="Enter a description"
21877
- >
21878
- Term3
21879
- </SpsDt>
21880
- <SpsDd>
21881
- <SpsTextInput
21882
- value={formValue.term3}
21883
- formMeta={formMeta.fields.term3}
21884
- placeholder="Description"
21885
- />
21886
- </SpsDd>
21887
- </SpsDl>
21888
- </SpsForm>
21889
- </Item>
21890
- <Item key="1-to-2" title="1-to-2">
21891
- <SpsForm formMeta={formMeta}>
21892
- <SpsDl wideTerms>
21893
- <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
21894
- <SpsDd>
21895
- <SpsTextInput
21896
- value={formValue.term1}
21897
- formMeta={formMeta.fields.term1}
21898
- placeholder="Description"
21899
- />
21900
- </SpsDd>
21901
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21902
- <SpsDd>
21903
- <SpsTextInput
21904
- value={formValue.term2}
21905
- formMeta={formMeta.fields.term2}
21906
- placeholder="Description"
21907
- />
21908
- </SpsDd>
21909
- <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
21910
- >Term 3</SpsDt>
21911
- <SpsDd>
21912
- <SpsTextInput
21913
- value={formValue.term3}
21914
- formMeta={formMeta.fields.term3}
21915
- placeholder="Description"
21916
- />
21917
- </SpsDd>
21918
- </SpsDl>
21919
- </SpsForm>
21920
- </Item>
21921
- <Item key="1-to-1" title="1-to-1">
21922
- <SpsForm formMeta={formMeta}>
21923
- <SpsDl widerTerms>
21924
- <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
21925
- <SpsDd>
21926
- <SpsTextInput
21927
- value={formValue.term1}
21928
- formMeta={formMeta.fields.term1}
21929
- placeholder="Description"
21930
- />
21931
- </SpsDd>
21932
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21933
- <SpsDd>
21934
- <SpsTextInput
21935
- value={formValue.term2}
21936
- formMeta={formMeta.fields.term2}
21937
- placeholder="Description"
21938
- />
21939
- </SpsDd>
21940
- <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
21941
- <SpsDd>
21942
- <SpsTextInput
21943
- value={formValue.term3}
21944
- formMeta={formMeta.fields.term3}
21945
- placeholder="Description"
21946
- />
21947
- </SpsDd>
21948
- </SpsDl>
21949
- </SpsForm>
21950
- </Item>
21951
- </SpsTabsV2>
21952
- </SpsCardV2>
21905
+ <SpsForm formMeta={formMeta}>
21906
+ <SpsDl>
21907
+ <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
21908
+ <SpsDd>
21909
+ <SpsTextInput
21910
+ value={formValue.term1}
21911
+ formMeta={formMeta.fields.term1}
21912
+ placeholder="Description"
21913
+ />
21914
+ </SpsDd>
21915
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21916
+ <SpsDd>
21917
+ <SpsTextInput
21918
+ value={formValue.term2}
21919
+ formMeta={formMeta.fields.term2}
21920
+ placeholder="Description"
21921
+ />
21922
+ </SpsDd>
21923
+ <SpsDt
21924
+ id="accomplishmentsLabel"
21925
+ labelFor={formMeta.fields.term3}
21926
+ help="Enter a description"
21927
+ >
21928
+ Term3
21929
+ </SpsDt>
21930
+ <SpsDd>
21931
+ <SpsTextInput
21932
+ value={formValue.term3}
21933
+ formMeta={formMeta.fields.term3}
21934
+ placeholder="Description"
21935
+ />
21936
+ </SpsDd>
21937
+ </SpsDl>
21938
+ </SpsForm>
21953
21939
  )
21954
21940
  }
21955
21941
  `
21956
21942
  },
21957
- compact: {
21958
- description: "Compact Description Lists with Input Fields",
21943
+ oneToTwo: {
21944
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-2"),
21959
21945
  react: code`
21960
21946
  function DemoComponent() {
21961
21947
  const { formValue, formMeta, updateForm } = useSpsForm({
@@ -21973,107 +21959,246 @@ const SpsDescriptionListExamples = {
21973
21959
  }, []);
21974
21960
 
21975
21961
  return (
21976
- <SpsCardV2>
21977
- <SpsTabsV2>
21978
- <Item key="1-to-3" title="1-to-3">
21979
- <SpsForm formMeta={formMeta}>
21980
- <SpsDl compact>
21981
- <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
21982
- <SpsDd>
21983
- <SpsTextInput
21984
- value={formValue.term1}
21985
- formMeta={formMeta.fields.term1}
21986
- placeholder="Description"
21987
- />
21988
- </SpsDd>
21989
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21990
- <SpsDd>
21991
- <SpsTextInput
21992
- value={formValue.term2}
21993
- formMeta={formMeta.fields.term2}
21994
- placeholder="Description"
21995
- />
21996
- </SpsDd>
21997
- <SpsDt
21998
- id="accomplishmentsLabel"
21999
- labelFor={formMeta.fields.term3}
22000
- help="Enter a description"
22001
- >
22002
- Term3
22003
- </SpsDt>
22004
- <SpsDd>
22005
- <SpsTextInput
22006
- value={formValue.term3}
22007
- formMeta={formMeta.fields.term3}
22008
- placeholder="Description"
22009
- />
22010
- </SpsDd>
22011
- </SpsDl>
22012
- </SpsForm>
22013
- </Item>
22014
- <Item key="1-to-2" title="1-to-2">
22015
- <SpsForm formMeta={formMeta}>
22016
- <SpsDl wideTerms compact>
22017
- <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22018
- <SpsDd>
22019
- <SpsTextInput
22020
- value={formValue.term1}
22021
- formMeta={formMeta.fields.term1}
22022
- placeholder="Description"
22023
- />
22024
- </SpsDd>
22025
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22026
- <SpsDd>
22027
- <SpsTextInput
22028
- value={formValue.term2}
22029
- formMeta={formMeta.fields.term2}
22030
- placeholder="Description"
22031
- />
22032
- </SpsDd>
22033
- <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
22034
- >Term 3</SpsDt>
22035
- <SpsDd>
22036
- <SpsTextInput
22037
- value={formValue.term3}
22038
- formMeta={formMeta.fields.term3}
22039
- placeholder="Description"
22040
- />
22041
- </SpsDd>
22042
- </SpsDl>
22043
- </SpsForm>
22044
- </Item>
22045
- <Item key="1-to-1" title="1-to-1">
22046
- <SpsForm formMeta={formMeta}>
22047
- <SpsDl widerTerms compact>
22048
- <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22049
- <SpsDd>
22050
- <SpsTextInput
22051
- value={formValue.term1}
22052
- formMeta={formMeta.fields.term1}
22053
- placeholder="Description"
22054
- />
22055
- </SpsDd>
22056
- <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22057
- <SpsDd>
22058
- <SpsTextInput
22059
- value={formValue.term2}
22060
- formMeta={formMeta.fields.term2}
22061
- placeholder="Description"
22062
- />
22063
- </SpsDd>
22064
- <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
22065
- <SpsDd>
22066
- <SpsTextInput
22067
- value={formValue.term3}
22068
- formMeta={formMeta.fields.term3}
22069
- placeholder="Description"
22070
- />
22071
- </SpsDd>
22072
- </SpsDl>
22073
- </SpsForm>
22074
- </Item>
22075
- </SpsTabsV2>
22076
- </SpsCardV2>
21962
+ <SpsForm formMeta={formMeta}>
21963
+ <SpsDl wideTerms>
21964
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
21965
+ <SpsDd>
21966
+ <SpsTextInput
21967
+ value={formValue.term1}
21968
+ formMeta={formMeta.fields.term1}
21969
+ placeholder="Description"
21970
+ />
21971
+ </SpsDd>
21972
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21973
+ <SpsDd>
21974
+ <SpsTextInput
21975
+ value={formValue.term2}
21976
+ formMeta={formMeta.fields.term2}
21977
+ placeholder="Description"
21978
+ />
21979
+ </SpsDd>
21980
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
21981
+ >Term 3</SpsDt>
21982
+ <SpsDd>
21983
+ <SpsTextInput
21984
+ value={formValue.term3}
21985
+ formMeta={formMeta.fields.term3}
21986
+ placeholder="Description"
21987
+ />
21988
+ </SpsDd>
21989
+ </SpsDl>
21990
+ </SpsForm>
21991
+ )
21992
+ }
21993
+ `
21994
+ },
21995
+ oneToOne: {
21996
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "1-to-1"),
21997
+ react: code`
21998
+ function DemoComponent() {
21999
+ const { formValue, formMeta, updateForm } = useSpsForm({
22000
+ term1: "",
22001
+ term2: "",
22002
+ term3: "",
22003
+ }, {
22004
+ "term1": [SpsValidators.required],
22005
+ "term2": [SpsValidators.minLength(1)],
22006
+ })
22007
+
22008
+ React.useEffect(() => {
22009
+ // Make the error state visible for this demo
22010
+ formMeta.fields.term2.markAsDirty();
22011
+ }, []);
22012
+
22013
+ return (
22014
+ <SpsForm formMeta={formMeta}>
22015
+ <SpsDl widerTerms>
22016
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22017
+ <SpsDd>
22018
+ <SpsTextInput
22019
+ value={formValue.term1}
22020
+ formMeta={formMeta.fields.term1}
22021
+ placeholder="Description"
22022
+ />
22023
+ </SpsDd>
22024
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22025
+ <SpsDd>
22026
+ <SpsTextInput
22027
+ value={formValue.term2}
22028
+ formMeta={formMeta.fields.term2}
22029
+ placeholder="Description"
22030
+ />
22031
+ </SpsDd>
22032
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
22033
+ <SpsDd>
22034
+ <SpsTextInput
22035
+ value={formValue.term3}
22036
+ formMeta={formMeta.fields.term3}
22037
+ placeholder="Description"
22038
+ />
22039
+ </SpsDd>
22040
+ </SpsDl>
22041
+ </SpsForm>
22042
+ )
22043
+ }
22044
+ `
22045
+ },
22046
+ compactOneToThree: {
22047
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-3"),
22048
+ react: code`
22049
+ function DemoComponent() {
22050
+ const { formValue, formMeta, updateForm } = useSpsForm({
22051
+ term1: "",
22052
+ term2: "",
22053
+ term3: "",
22054
+ }, {
22055
+ "term1": [SpsValidators.required],
22056
+ "term2": [SpsValidators.minLength(1)],
22057
+ })
22058
+
22059
+ React.useEffect(() => {
22060
+ // Make the error state visible for this demo
22061
+ formMeta.fields.term2.markAsDirty();
22062
+ }, []);
22063
+
22064
+ return (
22065
+ <SpsForm formMeta={formMeta}>
22066
+ <SpsDl compact>
22067
+ <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
22068
+ <SpsDd>
22069
+ <SpsTextInput
22070
+ value={formValue.term1}
22071
+ formMeta={formMeta.fields.term1}
22072
+ placeholder="Description"
22073
+ />
22074
+ </SpsDd>
22075
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22076
+ <SpsDd>
22077
+ <SpsTextInput
22078
+ value={formValue.term2}
22079
+ formMeta={formMeta.fields.term2}
22080
+ placeholder="Description"
22081
+ />
22082
+ </SpsDd>
22083
+ <SpsDt
22084
+ id="accomplishmentsLabel"
22085
+ labelFor={formMeta.fields.term3}
22086
+ help="Enter a description"
22087
+ >
22088
+ Term3
22089
+ </SpsDt>
22090
+ <SpsDd>
22091
+ <SpsTextInput
22092
+ value={formValue.term3}
22093
+ formMeta={formMeta.fields.term3}
22094
+ placeholder="Description"
22095
+ />
22096
+ </SpsDd>
22097
+ </SpsDl>
22098
+ </SpsForm>
22099
+ )
22100
+ }
22101
+ `
22102
+ },
22103
+ compactOneToTwo: {
22104
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-2"),
22105
+ react: code`
22106
+ function DemoComponent() {
22107
+ const { formValue, formMeta, updateForm } = useSpsForm({
22108
+ term1: "",
22109
+ term2: "",
22110
+ term3: "",
22111
+ }, {
22112
+ "term1": [SpsValidators.required],
22113
+ "term2": [SpsValidators.minLength(1)],
22114
+ })
22115
+
22116
+ React.useEffect(() => {
22117
+ // Make the error state visible for this demo
22118
+ formMeta.fields.term2.markAsDirty();
22119
+ }, []);
22120
+
22121
+ return (
22122
+ <SpsForm formMeta={formMeta}>
22123
+ <SpsDl wideTerms compact>
22124
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22125
+ <SpsDd>
22126
+ <SpsTextInput
22127
+ value={formValue.term1}
22128
+ formMeta={formMeta.fields.term1}
22129
+ placeholder="Description"
22130
+ />
22131
+ </SpsDd>
22132
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22133
+ <SpsDd>
22134
+ <SpsTextInput
22135
+ value={formValue.term2}
22136
+ formMeta={formMeta.fields.term2}
22137
+ placeholder="Description"
22138
+ />
22139
+ </SpsDd>
22140
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
22141
+ >Term 3</SpsDt>
22142
+ <SpsDd>
22143
+ <SpsTextInput
22144
+ value={formValue.term3}
22145
+ formMeta={formMeta.fields.term3}
22146
+ placeholder="Description"
22147
+ />
22148
+ </SpsDd>
22149
+ </SpsDl>
22150
+ </SpsForm>
22151
+ )
22152
+ }
22153
+ `
22154
+ },
22155
+ compactOneToOne: {
22156
+ description: () => /* @__PURE__ */ React__default.createElement("h5", null, "Compact 1-to-1"),
22157
+ react: code`
22158
+ function DemoComponent() {
22159
+ const { formValue, formMeta, updateForm } = useSpsForm({
22160
+ term1: "",
22161
+ term2: "",
22162
+ term3: "",
22163
+ }, {
22164
+ "term1": [SpsValidators.required],
22165
+ "term2": [SpsValidators.minLength(1)],
22166
+ })
22167
+
22168
+ React.useEffect(() => {
22169
+ // Make the error state visible for this demo
22170
+ formMeta.fields.term2.markAsDirty();
22171
+ }, []);
22172
+
22173
+ return (
22174
+ <SpsForm formMeta={formMeta}>
22175
+ <SpsDl widerTerms compact>
22176
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22177
+ <SpsDd>
22178
+ <SpsTextInput
22179
+ value={formValue.term1}
22180
+ formMeta={formMeta.fields.term1}
22181
+ placeholder="Description"
22182
+ />
22183
+ </SpsDd>
22184
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22185
+ <SpsDd>
22186
+ <SpsTextInput
22187
+ value={formValue.term2}
22188
+ formMeta={formMeta.fields.term2}
22189
+ placeholder="Description"
22190
+ />
22191
+ </SpsDd>
22192
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
22193
+ <SpsDd>
22194
+ <SpsTextInput
22195
+ value={formValue.term3}
22196
+ formMeta={formMeta.fields.term3}
22197
+ placeholder="Description"
22198
+ />
22199
+ </SpsDd>
22200
+ </SpsDl>
22201
+ </SpsForm>
22077
22202
  )
22078
22203
  }
22079
22204
  `