@spscommerce/ds-react 6.11.4 → 6.13.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 +656 -482
  2. package/lib/index.es.js +351 -182
  3. package/package.json +9 -9
package/lib/index.es.js CHANGED
@@ -21853,183 +21853,361 @@ Object.assign(SpsDt, {
21853
21853
  displayName: "SpsDescriptionListTerm / SpsDt"
21854
21854
  });
21855
21855
  const SpsDescriptionListExamples = {
21856
+ general: {
21857
+ label: "General Usage",
21858
+ 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", {
21859
+ className: "mb-2"
21860
+ }, "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", {
21861
+ className: "mb-2"
21862
+ }, "To display a single term"), /* @__PURE__ */ React__default.createElement("li", {
21863
+ className: "mb-2"
21864
+ }, "If the listed terms do not have descriptions")))
21865
+ },
21856
21866
  basic: {
21857
- label: "Basic Description List",
21867
+ label: "Basic Description Lists",
21868
+ 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."),
21858
21869
  examples: {
21859
- basic: {
21860
- jsx: code`
21870
+ standard: {
21871
+ description: "Standard Size Description Lists",
21872
+ react: code`
21873
+ function DemoComponent() {
21874
+ return (
21875
+ <SpsCardV2>
21876
+ <SpsTabsV2>
21877
+ <Item key="1-to-3" title="1-to-3">
21861
21878
  <SpsDl>
21862
- <SpsDt>Term 1</SpsDt>
21863
- <SpsDd>Definition</SpsDd>
21864
- <SpsDt>Term</SpsDt>
21865
- <SpsDd>Definition</SpsDd>
21866
- <SpsDt>
21867
- Term that wraps to the next line cause it's got so dang much text in it.
21868
- </SpsDt>
21869
- <SpsDd>Definition</SpsDd>
21870
- <SpsDt>Term</SpsDt>
21871
- <SpsDd>
21872
- Definition that has a LOOOOOOOOOOT of text in it.
21873
- Definition that has a LOOOOOOOOOOT of text in it.
21874
- </SpsDd>
21879
+ <SpsDt>Term 1</SpsDt>
21880
+ <SpsDd>Description 1</SpsDd>
21881
+ <SpsDt>Term 2</SpsDt>
21882
+ <SpsDd>Description 2</SpsDd>
21883
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21884
+ <SpsDd>Description 3</SpsDd>
21875
21885
  </SpsDl>
21876
- `
21886
+ </Item>
21887
+ <Item key="1-to-2" title="1-to-2">
21888
+ <SpsDl wideTerms>
21889
+ <SpsDt>Term 1</SpsDt>
21890
+ <SpsDd>Description 1</SpsDd>
21891
+ <SpsDt>Term 2</SpsDt>
21892
+ <SpsDd>Description 2</SpsDd>
21893
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21894
+ <SpsDd>Description 3</SpsDd>
21895
+ </SpsDl>
21896
+ </Item>
21897
+ <Item key="1-to-1" title="1-to-1">
21898
+ <SpsDl widerTerms>
21899
+ <SpsDt>Term 1</SpsDt>
21900
+ <SpsDd>Description 1</SpsDd>
21901
+ <SpsDt>Term 2</SpsDt>
21902
+ <SpsDd>Description 2</SpsDd>
21903
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21904
+ <SpsDd>Description 3</SpsDd>
21905
+ </SpsDl>
21906
+ </Item>
21907
+ </SpsTabsV2>
21908
+ </SpsCardV2>
21909
+ )
21910
+ }
21911
+ `
21877
21912
  },
21878
- dynamic: {
21879
- react: code`
21880
- function DemoComponent() {
21881
- const list = [
21882
- { term: "Term 1", definition: "Definition 1" },
21883
- { term: "Term 2", definition: "Definition 2" },
21884
- { term: "Term 3", definition: "Definition 3" },
21885
- ];
21886
-
21887
- return (
21888
- <SpsDl>
21889
- {list.map((item, i) => (
21890
- <React.Fragment>
21891
- <SpsDt>{item.term}</SpsDt>
21892
- <SpsDd>{item.definition}</SpsDd>
21893
- </React.Fragment>
21894
- ))}
21895
- </SpsDl>
21896
- );
21897
- }
21898
- `
21899
- }
21900
- }
21901
- },
21902
- b_advanced: {
21903
- label: "Advanced Description List",
21904
- examples: {
21905
- advanced: {
21906
- react: code`
21907
- function DemoComponent() {
21908
- const { formValue, formMeta, updateForm } = useSpsForm({
21909
- firstName: "",
21910
- lastName: "",
21911
- title: "",
21912
- accomplishments: ""
21913
- }, {
21914
- "lastName": [SpsValidators.required]
21915
- })
21916
-
21917
- React.useEffect(() => {
21918
- // Make the error state visible for this demo
21919
- formMeta.fields.lastName.markAsDirty()
21920
- }, [])
21921
-
21922
- return (
21923
- <SpsCard>
21924
- <SpsForm formMeta={formMeta}>
21925
- <SpsDl>
21926
- <SpsDt id="firstNameLabel" labelFor={formMeta.fields.firstName}>
21927
- First Name
21928
- </SpsDt>
21929
- <SpsDd>
21930
- <SpsTextInput
21931
- aria-labelledby="firstNameLabel"
21932
- value={formValue.firstName}
21933
- formMeta={formMeta.fields.firstName}
21934
- />
21935
- </SpsDd>
21936
- <SpsDt
21937
- id="lastNameLabel"
21938
- labelFor={formMeta.fields.lastName}
21939
- errors={() =>
21940
- formMeta.fields.lastName.hasError("required") &&
21941
- "Please enter a last name."
21942
- }
21943
- >
21944
- Last Name
21945
- </SpsDt>
21946
- <SpsDd>
21947
- <SpsTextInput
21948
- aria-labelledby="lastNameLabel"
21949
- value={formValue.lastName}
21950
- formMeta={formMeta.fields.lastName}
21951
- />
21952
- </SpsDd>
21953
- <SpsDt id="titleLabel" labelFor={formMeta.fields.title}>
21954
- Title
21955
- </SpsDt>
21956
- <SpsDd>
21957
- <SpsTextInput
21958
- aria-labelledby="titleLabel"
21959
- value={formValue.title}
21960
- formMeta={formMeta.fields.title}
21961
- />
21962
- </SpsDd>
21963
- <SpsDt
21964
- id="accomplishmentsLabel"
21965
- labelFor={formMeta.fields.accomplishments}
21966
- help="If they haven't achieved anything, make stuff up."
21967
- >
21968
- Top 5 Greatest Accomplishments
21969
- </SpsDt>
21970
- <SpsDd>
21971
- <SpsTextarea
21972
- rows={3}
21973
- value={formValue.accomplishments}
21974
- formMeta={formMeta.fields.accomplishments}
21975
- aria-labelledby="accomplishmentsLabel"
21976
- />
21977
- </SpsDd>
21978
- </SpsDl>
21979
- </SpsForm>
21980
- </SpsCard>
21981
- )
21982
- }
21983
- `
21984
- }
21985
- }
21986
- },
21987
- c_compact: {
21988
- label: "Compact Description List",
21989
- examples: {
21990
21913
  compact: {
21991
- jsx: code`
21914
+ description: "Compact Description Lists",
21915
+ react: code`
21916
+ function DemoComponent() {
21917
+ return (
21918
+ <SpsCardV2>
21919
+ <SpsTabsV2>
21920
+ <Item key="1-to-3" title="1-to-3">
21992
21921
  <SpsDl compact>
21993
21922
  <SpsDt>Term 1</SpsDt>
21994
- <SpsDd>Definition</SpsDd>
21995
- <SpsDt>Term</SpsDt>
21996
- <SpsDd>Definition</SpsDd>
21997
- <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>
21998
- <SpsDd>Definition</SpsDd>
21999
- <SpsDt>Term</SpsDt>
22000
- <SpsDd>Definition that has a LOOOOOOOOOOT of text in it. Definition that has a LOOOOOOOOOOT of text in it.
22001
- </SpsDd>
21923
+ <SpsDd>Description 1</SpsDd>
21924
+ <SpsDt>Term 2</SpsDt>
21925
+ <SpsDd>Description 2</SpsDd>
21926
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21927
+ <SpsDd>Description 3</SpsDd>
22002
21928
  </SpsDl>
22003
- `
21929
+ </Item>
21930
+ <Item key="1-to-2" title="1-to-2">
21931
+ <SpsDl compact wideTerms>
21932
+ <SpsDt>Term 1</SpsDt>
21933
+ <SpsDd>Description 1</SpsDd>
21934
+ <SpsDt>Term 2</SpsDt>
21935
+ <SpsDd>Description 2</SpsDd>
21936
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21937
+ <SpsDd>Description 3</SpsDd>
21938
+ </SpsDl>
21939
+ </Item>
21940
+ <Item key="1-to-1" title="1-to-1">
21941
+ <SpsDl compact widerTerms>
21942
+ <SpsDt>Term 1</SpsDt>
21943
+ <SpsDd>Description 1</SpsDd>
21944
+ <SpsDt>Term 2</SpsDt>
21945
+ <SpsDd>Description 2</SpsDd>
21946
+ <SpsDt help="This is the third term">Term 3</SpsDt>
21947
+ <SpsDd>Description 3</SpsDd>
21948
+ </SpsDl>
21949
+ </Item>
21950
+ </SpsTabsV2>
21951
+ </SpsCardV2>
21952
+ )
21953
+ }
21954
+ `
22004
21955
  }
22005
21956
  }
22006
21957
  },
22007
- d_columnWidths: {
22008
- label: "Alternate Column Widths",
21958
+ inputFields: {
21959
+ label: "Description Lists with Input Fields",
21960
+ description: ({ NavigateTo }) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", null, "Description Lists can be used to support form fields. In these instances, the left hand column is used for the label and the right hand column used for the corresponding input field."), /* @__PURE__ */ React__default.createElement("p", null, "Description Lists with Input Fields can appear in Standard or Compact sizes in either 1-to-3, 1-to-2 or 1-to-1 layouts."), /* @__PURE__ */ React__default.createElement("p", null, "Input Fields inside of Description Lists should follow standard Form rules. Visit the", " ", /* @__PURE__ */ React__default.createElement(NavigateTo, {
21961
+ to: "form"
21962
+ }, "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."))),
22009
21963
  examples: {
22010
- wideTerms: {
22011
- jsx: code`
22012
- <SpsDl wideTerms>
22013
- <SpsDt>Term 1</SpsDt>
22014
- <SpsDd>Definition</SpsDd>
22015
- <SpsDt>Term</SpsDt>
22016
- <SpsDd>Definition</SpsDd>
22017
- <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>
22018
- <SpsDd>Definition</SpsDd>
22019
- </SpsDl>
22020
- `
21964
+ standard: {
21965
+ description: "Standard Size Description Lists with Input Fields",
21966
+ react: code`
21967
+ function DemoComponent() {
21968
+ const { formValue, formMeta, updateForm } = useSpsForm({
21969
+ term1: "",
21970
+ term2: "",
21971
+ term3: "",
21972
+ }, {
21973
+ "term1": [SpsValidators.required],
21974
+ "term2": [SpsValidators.minLength(1)],
21975
+ })
21976
+
21977
+ React.useEffect(() => {
21978
+ // Make the error state visible for this demo
21979
+ formMeta.fields.term2.markAsDirty();
21980
+ }, []);
21981
+
21982
+ return (
21983
+ <SpsCardV2>
21984
+ <SpsTabsV2>
21985
+ <Item key="1-to-3" title="1-to-3">
21986
+ <SpsForm formMeta={formMeta}>
21987
+ <SpsDl>
21988
+ <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
21989
+ <SpsDd>
21990
+ <SpsTextInput
21991
+ value={formValue.term1}
21992
+ formMeta={formMeta.fields.term1}
21993
+ placeholder="Description"
21994
+ />
21995
+ </SpsDd>
21996
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
21997
+ <SpsDd>
21998
+ <SpsTextInput
21999
+ value={formValue.term2}
22000
+ formMeta={formMeta.fields.term2}
22001
+ placeholder="Description"
22002
+ />
22003
+ </SpsDd>
22004
+ <SpsDt
22005
+ id="accomplishmentsLabel"
22006
+ labelFor={formMeta.fields.term3}
22007
+ help="Enter a description"
22008
+ >
22009
+ Term3
22010
+ </SpsDt>
22011
+ <SpsDd>
22012
+ <SpsTextInput
22013
+ value={formValue.term3}
22014
+ formMeta={formMeta.fields.term3}
22015
+ placeholder="Description"
22016
+ />
22017
+ </SpsDd>
22018
+ </SpsDl>
22019
+ </SpsForm>
22020
+ </Item>
22021
+ <Item key="1-to-2" title="1-to-2">
22022
+ <SpsForm formMeta={formMeta}>
22023
+ <SpsDl wideTerms>
22024
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22025
+ <SpsDd>
22026
+ <SpsTextInput
22027
+ value={formValue.term1}
22028
+ formMeta={formMeta.fields.term1}
22029
+ placeholder="Description"
22030
+ />
22031
+ </SpsDd>
22032
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22033
+ <SpsDd>
22034
+ <SpsTextInput
22035
+ value={formValue.term2}
22036
+ formMeta={formMeta.fields.term2}
22037
+ placeholder="Description"
22038
+ />
22039
+ </SpsDd>
22040
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
22041
+ >Term 3</SpsDt>
22042
+ <SpsDd>
22043
+ <SpsTextInput
22044
+ value={formValue.term3}
22045
+ formMeta={formMeta.fields.term3}
22046
+ placeholder="Description"
22047
+ />
22048
+ </SpsDd>
22049
+ </SpsDl>
22050
+ </SpsForm>
22051
+ </Item>
22052
+ <Item key="1-to-1" title="1-to-1">
22053
+ <SpsForm formMeta={formMeta}>
22054
+ <SpsDl widerTerms>
22055
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22056
+ <SpsDd>
22057
+ <SpsTextInput
22058
+ value={formValue.term1}
22059
+ formMeta={formMeta.fields.term1}
22060
+ placeholder="Description"
22061
+ />
22062
+ </SpsDd>
22063
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22064
+ <SpsDd>
22065
+ <SpsTextInput
22066
+ value={formValue.term2}
22067
+ formMeta={formMeta.fields.term2}
22068
+ placeholder="Description"
22069
+ />
22070
+ </SpsDd>
22071
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
22072
+ <SpsDd>
22073
+ <SpsTextInput
22074
+ value={formValue.term3}
22075
+ formMeta={formMeta.fields.term3}
22076
+ placeholder="Description"
22077
+ />
22078
+ </SpsDd>
22079
+ </SpsDl>
22080
+ </SpsForm>
22081
+ </Item>
22082
+ </SpsTabsV2>
22083
+ </SpsCardV2>
22084
+ )
22085
+ }
22086
+ `
22021
22087
  },
22022
- widerTerms: {
22023
- jsx: code`
22024
- <SpsDl widerTerms>
22025
- <SpsDt>Term 1</SpsDt>
22026
- <SpsDd>Definition</SpsDd>
22027
- <SpsDt>Term</SpsDt>
22028
- <SpsDd>Definition</SpsDd>
22029
- <SpsDt>Term that wraps to the next line cause it's got so dang much text in it.</SpsDt>
22030
- <SpsDd>Definition</SpsDd>
22031
- </SpsDl>
22032
- `
22088
+ compact: {
22089
+ description: "Compact Description Lists with Input Fields",
22090
+ react: code`
22091
+ function DemoComponent() {
22092
+ const { formValue, formMeta, updateForm } = useSpsForm({
22093
+ term1: "",
22094
+ term2: "",
22095
+ term3: "",
22096
+ }, {
22097
+ "term1": [SpsValidators.required],
22098
+ "term2": [SpsValidators.minLength(1)],
22099
+ })
22100
+
22101
+ React.useEffect(() => {
22102
+ // Make the error state visible for this demo
22103
+ formMeta.fields.term2.markAsDirty();
22104
+ }, []);
22105
+
22106
+ return (
22107
+ <SpsCardV2>
22108
+ <SpsTabsV2>
22109
+ <Item key="1-to-3" title="1-to-3">
22110
+ <SpsForm formMeta={formMeta}>
22111
+ <SpsDl compact>
22112
+ <SpsDt labelFor={formMeta.fields.term1} required>Term 1</SpsDt>
22113
+ <SpsDd>
22114
+ <SpsTextInput
22115
+ value={formValue.term1}
22116
+ formMeta={formMeta.fields.term1}
22117
+ placeholder="Description"
22118
+ />
22119
+ </SpsDd>
22120
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22121
+ <SpsDd>
22122
+ <SpsTextInput
22123
+ value={formValue.term2}
22124
+ formMeta={formMeta.fields.term2}
22125
+ placeholder="Description"
22126
+ />
22127
+ </SpsDd>
22128
+ <SpsDt
22129
+ id="accomplishmentsLabel"
22130
+ labelFor={formMeta.fields.term3}
22131
+ help="Enter a description"
22132
+ >
22133
+ Term3
22134
+ </SpsDt>
22135
+ <SpsDd>
22136
+ <SpsTextInput
22137
+ value={formValue.term3}
22138
+ formMeta={formMeta.fields.term3}
22139
+ placeholder="Description"
22140
+ />
22141
+ </SpsDd>
22142
+ </SpsDl>
22143
+ </SpsForm>
22144
+ </Item>
22145
+ <Item key="1-to-2" title="1-to-2">
22146
+ <SpsForm formMeta={formMeta}>
22147
+ <SpsDl wideTerms compact>
22148
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22149
+ <SpsDd>
22150
+ <SpsTextInput
22151
+ value={formValue.term1}
22152
+ formMeta={formMeta.fields.term1}
22153
+ placeholder="Description"
22154
+ />
22155
+ </SpsDd>
22156
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22157
+ <SpsDd>
22158
+ <SpsTextInput
22159
+ value={formValue.term2}
22160
+ formMeta={formMeta.fields.term2}
22161
+ placeholder="Description"
22162
+ />
22163
+ </SpsDd>
22164
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description"
22165
+ >Term 3</SpsDt>
22166
+ <SpsDd>
22167
+ <SpsTextInput
22168
+ value={formValue.term3}
22169
+ formMeta={formMeta.fields.term3}
22170
+ placeholder="Description"
22171
+ />
22172
+ </SpsDd>
22173
+ </SpsDl>
22174
+ </SpsForm>
22175
+ </Item>
22176
+ <Item key="1-to-1" title="1-to-1">
22177
+ <SpsForm formMeta={formMeta}>
22178
+ <SpsDl widerTerms compact>
22179
+ <SpsDt labelFor={formMeta.fields.term1}>Term 1</SpsDt>
22180
+ <SpsDd>
22181
+ <SpsTextInput
22182
+ value={formValue.term1}
22183
+ formMeta={formMeta.fields.term1}
22184
+ placeholder="Description"
22185
+ />
22186
+ </SpsDd>
22187
+ <SpsDt labelFor={formMeta.fields.term2}>Term 2</SpsDt>
22188
+ <SpsDd>
22189
+ <SpsTextInput
22190
+ value={formValue.term2}
22191
+ formMeta={formMeta.fields.term2}
22192
+ placeholder="Description"
22193
+ />
22194
+ </SpsDd>
22195
+ <SpsDt labelFor={formMeta.fields.term3} help="Enter a description">Term 3</SpsDt>
22196
+ <SpsDd>
22197
+ <SpsTextInput
22198
+ value={formValue.term3}
22199
+ formMeta={formMeta.fields.term3}
22200
+ placeholder="Description"
22201
+ />
22202
+ </SpsDd>
22203
+ </SpsDl>
22204
+ </SpsForm>
22205
+ </Item>
22206
+ </SpsTabsV2>
22207
+ </SpsCardV2>
22208
+ )
22209
+ }
22210
+ `
22033
22211
  }
22034
22212
  }
22035
22213
  }
@@ -24803,7 +24981,8 @@ function SpsLabel(_y) {
24803
24981
  const [, setShowPriorityTooltip] = getPriorityTooltip();
24804
24982
  setShowPriorityTooltip(TooltipVisibility.VISIBLE);
24805
24983
  }
24806
- function handleHelpClick() {
24984
+ function handleHelpClick(e2) {
24985
+ e2.preventDefault();
24807
24986
  hideTooltips();
24808
24987
  setShowHelpTip(toggleTooltipState(showHelpTip));
24809
24988
  }
@@ -24862,17 +25041,12 @@ function SpsLabel(_y) {
24862
25041
  "data-testid": `${testId}__suggested-icon`,
24863
25042
  className: clsx("sps-icon", "sps-icon-exclamation-triangle", "orange200", "sps-form-group__label-suggested-icon", !stronglySuggested && "d-none"),
24864
25043
  onClick: handleSuggestedIconClick,
24865
- onMouseEnter: () => {
24866
- hideTooltips();
24867
- setShowSuggestedTip(TooltipVisibility.VISIBLE);
24868
- },
24869
25044
  onMouseLeave: delayedHideTooltips
24870
25045
  }), /* @__PURE__ */ React.createElement("i", {
24871
25046
  ref: errorIcon,
24872
25047
  "data-testid": `${testId}__error-icon`,
24873
25048
  className: clsx("sps-icon", "sps-icon-exclamation-circle", "sps-form-group__label--error-icon"),
24874
25049
  onClick: handleLabelClick,
24875
- onMouseEnter: doShowPriorityTooltip,
24876
25050
  onMouseLeave: delayedHideTooltips
24877
25051
  }), /* @__PURE__ */ React.createElement("span", {
24878
25052
  ref: labelRef,
@@ -24882,10 +25056,6 @@ function SpsLabel(_y) {
24882
25056
  "data-testid": `${testId}__help-icon`,
24883
25057
  className: clsx("sps-icon", `sps-icon-${helpIcon}`, helpIconColor, !help && "d-none"),
24884
25058
  onClick: handleHelpClick,
24885
- onMouseEnter: () => {
24886
- hideTooltips();
24887
- setShowHelpTip(TooltipVisibility.VISIBLE);
24888
- },
24889
25059
  onMouseLeave: delayedHideTooltips
24890
25060
  })), /* @__PURE__ */ React.createElement(SpsTooltip, {
24891
25061
  kind: TooltipKind.DEFAULT,
@@ -32995,7 +33165,7 @@ const SpsSelectExamples = {
32995
33165
  const sizes = [
32996
33166
  { size: "S", price: "10.99" },
32997
33167
  { size: "M", price: "12.99" },
32998
- { size: "S", price: "10.99" },
33168
+ { size: "L", price: "14.99" },
32999
33169
  ]
33000
33170
 
33001
33171
  return (
@@ -33014,9 +33184,9 @@ const SpsSelectExamples = {
33014
33184
  react: code`
33015
33185
  function DemoComponent() {
33016
33186
  const sizes = [
33017
- { size: "S", price: "$10.99" },
33018
- { size: "M", price: "$12.99" },
33019
- { size: "S", price: "$10.99" },
33187
+ { size: "S", price: "10.99" },
33188
+ { size: "M", price: "12.99" },
33189
+ { size: "L", price: "14.99" },
33020
33190
  ]
33021
33191
  return (
33022
33192
  <div className="sfg-row">
@@ -33041,12 +33211,10 @@ const SpsSelectExamples = {
33041
33211
  const colors = ["red", "blue", "green"];
33042
33212
  const [action, updateAction] = useSpsAction(
33043
33213
  {
33044
- label: "Go to Overview",
33045
- icon: "dashboard",
33046
- href: "#/overview",
33047
- newTab: true
33214
+ label: "Add Option",
33215
+ icon: "plus-sign",
33048
33216
  },
33049
- () => console.log("Action")
33217
+ () => alert("Add an option!")
33050
33218
  );
33051
33219
 
33052
33220
  function handleChange(event) {
@@ -37772,6 +37940,7 @@ const MANIFEST = {
37772
37940
  examples: SpsDatetimeExamples
37773
37941
  },
37774
37942
  "Description Lists": {
37943
+ description: () => /* @__PURE__ */ React.createElement("p", null, "Description Lists display a series of terms with accompanying descriptions such as a glossary of terms."),
37775
37944
  components: [SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListTerm],
37776
37945
  examples: SpsDescriptionListExamples
37777
37946
  },
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.11.4",
4
+ "version": "6.13.0",
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.11.4",
32
- "@spscommerce/ds-illustrations": "6.11.4",
33
- "@spscommerce/ds-shared": "6.11.4",
34
- "@spscommerce/positioning": "6.11.4",
31
+ "@spscommerce/ds-colors": "6.13.0",
32
+ "@spscommerce/ds-illustrations": "6.13.0",
33
+ "@spscommerce/ds-shared": "6.13.0",
34
+ "@spscommerce/positioning": "6.13.0",
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.11.4",
44
- "@spscommerce/ds-illustrations": "6.11.4",
45
- "@spscommerce/ds-shared": "6.11.4",
46
- "@spscommerce/positioning": "6.11.4",
43
+ "@spscommerce/ds-colors": "6.13.0",
44
+ "@spscommerce/ds-illustrations": "6.13.0",
45
+ "@spscommerce/ds-shared": "6.13.0",
46
+ "@spscommerce/positioning": "6.13.0",
47
47
  "@spscommerce/utils": "^6.11.3",
48
48
  "@testing-library/react": "^9.3.2",
49
49
  "@types/prop-types": "^15.7.1",