@spscommerce/ds-react 5.23.0 → 5.23.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 (5) hide show
  1. package/lib/advanced-search/SpsAdvancedSearch.d.ts +2 -2
  2. package/lib/filter-panel/SpsFilterPanelFilterBox.d.ts +2 -2
  3. package/lib/index.cjs.js +105 -101
  4. package/lib/index.es.js +59 -61
  5. package/package.json +11 -11
package/lib/index.es.js CHANGED
@@ -277,7 +277,7 @@ function contentOf(nodeOrRenderFn2) {
277
277
  const propsDoc$1I = __spreadProps(__spreadValues({}, spsFormProps), {
278
278
  controlsDisabled: "boolean",
279
279
  footerLinks: "ReactNodeOrRenderFn",
280
- formMeta: "SpsFormArrayMeta<any> | SpsFormGroupMeta<any>",
280
+ formMeta: "SpsFormSetMeta<any>",
281
281
  isOpen: "boolean",
282
282
  onClear: "() => void",
283
283
  onSubmit: "React.FormEventHandler"
@@ -287,10 +287,7 @@ const propTypes$1M = __spreadProps(__spreadValues(__spreadValues({}, spsGlobalPr
287
287
  footerLinks: nodeOrRenderFn,
288
288
  formArray: impl(),
289
289
  formGroup: impl(),
290
- formMeta: propTypes$1O.exports.oneOfType([
291
- impl(),
292
- impl()
293
- ]),
290
+ formMeta: impl(),
294
291
  isOpen: propTypes$1O.exports.bool,
295
292
  onClear: fun(),
296
293
  onSubmit: fun()
@@ -25337,36 +25334,36 @@ const SpsInsightTileExamples = {
25337
25334
  kind={SpsInsightTileKind.GENERAL}
25338
25335
  metric="1234"
25339
25336
  title="Insight Tile Title"
25340
- partnerCount="250"
25341
- totalPartners="250"
25337
+ partnerCount={250}
25338
+ totalPartners={250}
25342
25339
  />
25343
25340
  <SpsInsightTile
25344
25341
  kind={SpsInsightTileKind.PROCESSING}
25345
25342
  metric="1234"
25346
25343
  title="Insight Tile Title"
25347
- partnerCount="122"
25348
- totalPartners="250"
25344
+ partnerCount={122}
25345
+ totalPartners={250}
25349
25346
  />
25350
25347
  <SpsInsightTile
25351
25348
  kind={SpsInsightTileKind.SUCCESS}
25352
25349
  metric="1234"
25353
25350
  title="Insight Tile Title"
25354
- partnerCount="207"
25355
- totalPartners="250"
25351
+ partnerCount={207}
25352
+ totalPartners={250}
25356
25353
  />
25357
25354
  <SpsInsightTile
25358
25355
  kind={SpsInsightTileKind.WARNING}
25359
25356
  metric="1234"
25360
25357
  title="Insight Tile Title"
25361
- partnerCount="12"
25362
- totalPartners="250"
25358
+ partnerCount={12}
25359
+ totalPartners={250}
25363
25360
  />
25364
25361
  <SpsInsightTile
25365
25362
  kind={SpsInsightTileKind.ERROR}
25366
25363
  metric="1234"
25367
25364
  title="Insight Tile Title"
25368
- partnerCount="94"
25369
- totalPartners="250"
25365
+ partnerCount={94}
25366
+ totalPartners={250}
25370
25367
  />
25371
25368
  </SpsInsights>
25372
25369
  `
@@ -25453,8 +25450,8 @@ const SpsInsightTileExamples = {
25453
25450
  kind={SpsInsightTileKind.GENERAL}
25454
25451
  metric="1234"
25455
25452
  title="Insight Tile Title"
25456
- partnerCount="100"
25457
- totalPartners="200"
25453
+ partnerCount={100}
25454
+ totalPartners={200}
25458
25455
  horizontal
25459
25456
  >
25460
25457
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
@@ -25463,16 +25460,16 @@ const SpsInsightTileExamples = {
25463
25460
  kind={SpsInsightTileKind.PROCESSING}
25464
25461
  metric="1234"
25465
25462
  title="Insight Tile Title"
25466
- partnerCount="100"
25467
- totalPartners="200"
25463
+ partnerCount={100}
25464
+ totalPartners={200}
25468
25465
  horizontal
25469
25466
  />
25470
25467
  <SpsInsightTile
25471
25468
  kind={SpsInsightTileKind.SUCCESS}
25472
25469
  metric="1234"
25473
25470
  title="Insight Tile Title"
25474
- partnerCount="100"
25475
- totalPartners="200"
25471
+ partnerCount={100}
25472
+ totalPartners={200}
25476
25473
  horizontal
25477
25474
  >
25478
25475
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
@@ -25481,16 +25478,16 @@ const SpsInsightTileExamples = {
25481
25478
  kind={SpsInsightTileKind.WARNING}
25482
25479
  metric="1234"
25483
25480
  title="Insight Tile Title"
25484
- partnerCount="100"
25485
- totalPartners="200"
25481
+ partnerCount={100}
25482
+ totalPartners={200}
25486
25483
  horizontal
25487
25484
  />
25488
25485
  <SpsInsightTile
25489
25486
  kind={SpsInsightTileKind.ERROR}
25490
25487
  metric="1234"
25491
25488
  title="Insight Tile Title"
25492
- partnerCount="100"
25493
- totalPartners="200"
25489
+ partnerCount={100}
25490
+ totalPartners={200}
25494
25491
  horizontal
25495
25492
  >
25496
25493
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
@@ -27349,10 +27346,10 @@ const SpsTableExamples = {
27349
27346
  <SpsTable>
27350
27347
  <SpsTableHead>
27351
27348
  <SpsTableRow>
27352
- <SpsTableHeader ></SpsTableHeader>
27353
- <SpsTableHeader >Title</SpsTableHeader>
27349
+ <SpsTableHeader controlCell></SpsTableHeader>
27350
+ <SpsTableHeader>Title</SpsTableHeader>
27354
27351
  <SpsTableHeader>Year</SpsTableHeader>
27355
- <SpsTableHeader >Director</SpsTableHeader>
27352
+ <SpsTableHeader>Director</SpsTableHeader>
27356
27353
  <SpsTableHeader>Countries</SpsTableHeader>
27357
27354
  </SpsTableRow>
27358
27355
  </SpsTableHead>
@@ -27360,7 +27357,7 @@ const SpsTableExamples = {
27360
27357
  {items.map((row, index) => {
27361
27358
  return (
27362
27359
  <SpsTableRow key={index}>
27363
- <SpsTableCell><SpsCheckbox/></SpsTableCell>
27360
+ <SpsTableCell controlCell><SpsCheckbox/></SpsTableCell>
27364
27361
  <SpsTableCell>{row["title"]}</SpsTableCell>
27365
27362
  <SpsTableCell>{row["year"]}</SpsTableCell>
27366
27363
  <SpsTableCell>{row["director"]}</SpsTableCell>
@@ -27449,7 +27446,7 @@ const SpsTableExamples = {
27449
27446
  <SpsTableCell>{row["year"]}</SpsTableCell>
27450
27447
  <SpsTableCell>{row["director"]}</SpsTableCell>
27451
27448
  <SpsTableCell className="text-right" buttonCell>
27452
- <SpsButton kind="icon" icon="ellipses" />
27449
+ <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.ELLIPSES} />
27453
27450
  </SpsTableCell>
27454
27451
  </SpsTableRow>
27455
27452
  );
@@ -27604,7 +27601,7 @@ const SpsTableExamples = {
27604
27601
  <SpsTableCell>{row["aspect_ratio"]}</SpsTableCell>
27605
27602
  <SpsTableCell>\${row["price"]}</SpsTableCell>
27606
27603
  <SpsTableCell className="text-right" buttonCell pinned>
27607
- <SpsButton kind="icon" icon="ellipses" />
27604
+ <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.ELLIPSES} />
27608
27605
  </SpsTableCell>
27609
27606
  </SpsTableRow>
27610
27607
  )
@@ -33282,6 +33279,7 @@ const SpsSideNavExamples = {
33282
33279
  titleIcon={SpsIcon.STATUS_OK}
33283
33280
  navOptions={items}
33284
33281
  onNavChange={onChange}
33282
+ activeNavItem="Navigation Item 2"
33285
33283
  />
33286
33284
  </div>
33287
33285
  </div>
@@ -33635,28 +33633,33 @@ const SpsSpinnerExamples = {
33635
33633
  basic: {
33636
33634
  examples: {
33637
33635
  small: {
33638
- jsx: code`
33639
- <React.Fragment>
33640
- <SpsSpinner size="small"/>
33641
- <SpsSpinner size={SpinnerSize.SMALL}/>
33642
- </React.Fragment>
33636
+ react: code`
33637
+ function Component() {
33638
+ return (
33639
+ <SpsSpinner size={SpinnerSize.SMALL} title="Please wait…" />
33640
+ );
33641
+ }
33643
33642
  `
33644
33643
  },
33645
33644
  medium: {
33646
- jsx: code`
33647
- <React.Fragment>
33648
- <SpsSpinner />
33649
- <SpsSpinner size="medium" title="Please wait…"/>
33650
- <SpsSpinner size={SpinnerSize.MEDIUM}/>
33651
- </React.Fragment>
33645
+ react: code`
33646
+ function Component() {
33647
+ return (
33648
+ <>
33649
+ <SpsSpinner />
33650
+ <SpsSpinner size={SpinnerSize.MEDIUM} title="Please wait…" />
33651
+ </>
33652
+ );
33653
+ }
33652
33654
  `
33653
33655
  },
33654
33656
  large: {
33655
- jsx: code`
33656
- <React.Fragment>
33657
- <SpsSpinner size="large"/>
33658
- <SpsSpinner size={SpinnerSize.LARGE} alt="Loading content…"/>
33659
- </React.Fragment>
33657
+ react: code`
33658
+ function Component() {
33659
+ return (
33660
+ <SpsSpinner size={SpinnerSize.LARGE} alt="Loading content…" />
33661
+ );
33662
+ }
33660
33663
  `
33661
33664
  }
33662
33665
  }
@@ -34811,11 +34814,9 @@ const SpsTaskQueueExamples = {
34811
34814
  }
34812
34815
  ]);
34813
34816
 
34814
- const form = useForm(
34815
- formGroup({
34816
- blueTooltip: formControl(false)
34817
- })
34818
- );
34817
+ const { formValue, formMeta } = useSpsForm({
34818
+ blueTooltip: false
34819
+ });
34819
34820
 
34820
34821
  function handleAddTask() {
34821
34822
  const newTaskId = generateTaskId();
@@ -34842,7 +34843,7 @@ const SpsTaskQueueExamples = {
34842
34843
  setTasks(currentTasks => currentTasks.map(task => ({ ...task, unread: false })));
34843
34844
  }
34844
34845
 
34845
- const isTooltipBlue = form.get("blueTooltip").getValue();
34846
+ const isTooltipBlue = formValue.blueTooltip;
34846
34847
  const tooltipKind = isTooltipBlue ? TooltipKind.HELP : TooltipKind.DEFAULT;
34847
34848
  const notificationText = isTooltipBlue
34848
34849
  ? "There is a new task in your queue. Also the tooltip is blue now :O"
@@ -34851,7 +34852,7 @@ const SpsTaskQueueExamples = {
34851
34852
  return (
34852
34853
  <div style={{ display: "flex", justifyContent: "space-between" }}>
34853
34854
  <div>
34854
- <SpsCheckbox label="Blue Tooltip" formControl={form.get("blueTooltip")} />
34855
+ <SpsCheckbox label="Blue Tooltip" formMeta={formMeta.fields.blueTooltip} />
34855
34856
  <SpsButton onClick={handleAddTask}>Add a new task to the queue</SpsButton>
34856
34857
  </div>
34857
34858
 
@@ -35609,9 +35610,9 @@ const SpsTileListExamples = {
35609
35610
 
35610
35611
  // custom sort by status
35611
35612
  if (key === 'status') {
35612
- if (a.error + a.warning < b.error + b.warning) {
35613
+ if (+a.error + +a.warning < +b.error + +b.warning) {
35613
35614
  return direction === SortDirection.ASCENDING ? -1 : 1;
35614
- } else if (a.error + a.warning > b.error + b.warning) {
35615
+ } else if (+a.error + +a.warning > +b.error + +b.warning) {
35615
35616
  return direction === SortDirection.ASCENDING ? 1 : -1;
35616
35617
  }
35617
35618
  }
@@ -37189,16 +37190,13 @@ const SpsFilterPanelExamples = {
37189
37190
  const propsDoc$c = {
37190
37191
  value: "string",
37191
37192
  placeholder: "string",
37192
- formMeta: "SpsFormArrayMeta<any> | SpsFormGroupMeta<any>",
37193
+ formMeta: "SpsFormFieldMeta<string>",
37193
37194
  onFilterChange: "ChangeEventHandler<HTMLInputElement>"
37194
37195
  };
37195
37196
  const propTypes$e = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
37196
37197
  value: propTypes$1O.exports.string,
37197
37198
  placeholder: propTypes$1O.exports.string,
37198
- formMeta: propTypes$1O.exports.oneOfType([
37199
- impl(),
37200
- impl()
37201
- ]),
37199
+ formMeta: impl(),
37202
37200
  onFilterChange: fun()
37203
37201
  });
37204
37202
  function SpsFilterPanelFilterBox(_Q) {
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": "5.23.0",
4
+ "version": "5.23.1",
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,11 +28,11 @@
28
28
  },
29
29
  "peerDependencies": {
30
30
  "@react-stately/collections": "^3.3.3",
31
- "@spscommerce/ds-colors": "5.23.0",
32
- "@spscommerce/ds-illustrations": "5.23.0",
33
- "@spscommerce/ds-shared": "5.23.0",
34
- "@spscommerce/positioning": "5.23.0",
35
- "@spscommerce/utils": "5.23.0",
31
+ "@spscommerce/ds-colors": "5.23.1",
32
+ "@spscommerce/ds-illustrations": "5.23.1",
33
+ "@spscommerce/ds-shared": "5.23.1",
34
+ "@spscommerce/positioning": "5.23.1",
35
+ "@spscommerce/utils": "5.23.1",
36
36
  "moment": "^2.25.3",
37
37
  "moment-timezone": "^0.5.28",
38
38
  "react": "^16.9.0",
@@ -40,11 +40,11 @@
40
40
  },
41
41
  "devDependencies": {
42
42
  "@react-stately/collections": "^3.3.3",
43
- "@spscommerce/ds-colors": "5.23.0",
44
- "@spscommerce/ds-illustrations": "5.23.0",
45
- "@spscommerce/ds-shared": "5.23.0",
46
- "@spscommerce/positioning": "5.23.0",
47
- "@spscommerce/utils": "5.23.0",
43
+ "@spscommerce/ds-colors": "5.23.1",
44
+ "@spscommerce/ds-illustrations": "5.23.1",
45
+ "@spscommerce/ds-shared": "5.23.1",
46
+ "@spscommerce/positioning": "5.23.1",
47
+ "@spscommerce/utils": "5.23.1",
48
48
  "@testing-library/react": "^9.3.2",
49
49
  "@types/prop-types": "^15.7.1",
50
50
  "@types/react": "^16.9.0",