@spscommerce/ds-react 5.23.0 → 5.24.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 (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 +109 -105
  4. package/lib/index.es.js +67 -66
  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()
@@ -1818,6 +1815,7 @@ const propTypes$1K = __spreadProps(__spreadValues(__spreadValues(__spreadValues(
1818
1815
  async function updateOptions(props2, searchState, searchStatePatch, setOptionList, setAnyOptionHasIcon, promiseRef) {
1819
1816
  const options = typeof props2.options === "function" ? props2.options(searchState.value) : props2.options || [];
1820
1817
  const areOptionsPromise = options instanceof Promise;
1818
+ const removeSpecialSymbols = (value) => value.replace(/([.?*+^$[\]\\(){}|-])/g, "");
1821
1819
  searchStatePatch({ pending: areOptionsPromise });
1822
1820
  promiseRef.current = areOptionsPromise ? options : null;
1823
1821
  const result = areOptionsPromise ? await options || [] : options || [];
@@ -1835,13 +1833,15 @@ async function updateOptions(props2, searchState, searchStatePatch, setOptionLis
1835
1833
  newOpts.unshift(new SpsOptionListOption(null, { text: props2.nullOption }));
1836
1834
  }
1837
1835
  if (searchState.value) {
1838
- searchStatePatch({ replacementPattern: new RegExp(searchState.value, "ig") });
1836
+ const searchValue = removeSpecialSymbols(searchState.value);
1837
+ searchStatePatch({ replacementPattern: new RegExp(searchValue, "ig") });
1839
1838
  newOpts = newOpts.filter((o) => {
1840
- const regEx = new RegExp(searchState.value, "i");
1839
+ const regEx = new RegExp(searchValue, "i");
1840
+ const optionText = removeSpecialSymbols(o.text);
1841
1841
  if (props2.filterByTextAndCaptionKey) {
1842
- return regEx.test(o.text) || regEx.test(o.caption);
1842
+ return regEx.test(optionText) || regEx.test(removeSpecialSymbols(o.caption));
1843
1843
  }
1844
- return regEx.test(o.text);
1844
+ return regEx.test(optionText);
1845
1845
  });
1846
1846
  } else {
1847
1847
  searchStatePatch({ replacementPattern: null });
@@ -25337,36 +25337,36 @@ const SpsInsightTileExamples = {
25337
25337
  kind={SpsInsightTileKind.GENERAL}
25338
25338
  metric="1234"
25339
25339
  title="Insight Tile Title"
25340
- partnerCount="250"
25341
- totalPartners="250"
25340
+ partnerCount={250}
25341
+ totalPartners={250}
25342
25342
  />
25343
25343
  <SpsInsightTile
25344
25344
  kind={SpsInsightTileKind.PROCESSING}
25345
25345
  metric="1234"
25346
25346
  title="Insight Tile Title"
25347
- partnerCount="122"
25348
- totalPartners="250"
25347
+ partnerCount={122}
25348
+ totalPartners={250}
25349
25349
  />
25350
25350
  <SpsInsightTile
25351
25351
  kind={SpsInsightTileKind.SUCCESS}
25352
25352
  metric="1234"
25353
25353
  title="Insight Tile Title"
25354
- partnerCount="207"
25355
- totalPartners="250"
25354
+ partnerCount={207}
25355
+ totalPartners={250}
25356
25356
  />
25357
25357
  <SpsInsightTile
25358
25358
  kind={SpsInsightTileKind.WARNING}
25359
25359
  metric="1234"
25360
25360
  title="Insight Tile Title"
25361
- partnerCount="12"
25362
- totalPartners="250"
25361
+ partnerCount={12}
25362
+ totalPartners={250}
25363
25363
  />
25364
25364
  <SpsInsightTile
25365
25365
  kind={SpsInsightTileKind.ERROR}
25366
25366
  metric="1234"
25367
25367
  title="Insight Tile Title"
25368
- partnerCount="94"
25369
- totalPartners="250"
25368
+ partnerCount={94}
25369
+ totalPartners={250}
25370
25370
  />
25371
25371
  </SpsInsights>
25372
25372
  `
@@ -25453,8 +25453,8 @@ const SpsInsightTileExamples = {
25453
25453
  kind={SpsInsightTileKind.GENERAL}
25454
25454
  metric="1234"
25455
25455
  title="Insight Tile Title"
25456
- partnerCount="100"
25457
- totalPartners="200"
25456
+ partnerCount={100}
25457
+ totalPartners={200}
25458
25458
  horizontal
25459
25459
  >
25460
25460
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
@@ -25463,16 +25463,16 @@ const SpsInsightTileExamples = {
25463
25463
  kind={SpsInsightTileKind.PROCESSING}
25464
25464
  metric="1234"
25465
25465
  title="Insight Tile Title"
25466
- partnerCount="100"
25467
- totalPartners="200"
25466
+ partnerCount={100}
25467
+ totalPartners={200}
25468
25468
  horizontal
25469
25469
  />
25470
25470
  <SpsInsightTile
25471
25471
  kind={SpsInsightTileKind.SUCCESS}
25472
25472
  metric="1234"
25473
25473
  title="Insight Tile Title"
25474
- partnerCount="100"
25475
- totalPartners="200"
25474
+ partnerCount={100}
25475
+ totalPartners={200}
25476
25476
  horizontal
25477
25477
  >
25478
25478
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
@@ -25481,16 +25481,16 @@ const SpsInsightTileExamples = {
25481
25481
  kind={SpsInsightTileKind.WARNING}
25482
25482
  metric="1234"
25483
25483
  title="Insight Tile Title"
25484
- partnerCount="100"
25485
- totalPartners="200"
25484
+ partnerCount={100}
25485
+ totalPartners={200}
25486
25486
  horizontal
25487
25487
  />
25488
25488
  <SpsInsightTile
25489
25489
  kind={SpsInsightTileKind.ERROR}
25490
25490
  metric="1234"
25491
25491
  title="Insight Tile Title"
25492
- partnerCount="100"
25493
- totalPartners="200"
25492
+ partnerCount={100}
25493
+ totalPartners={200}
25494
25494
  horizontal
25495
25495
  >
25496
25496
  <span className="gray600 font-weight-bold">Detail:</span> 792 units
@@ -27349,10 +27349,10 @@ const SpsTableExamples = {
27349
27349
  <SpsTable>
27350
27350
  <SpsTableHead>
27351
27351
  <SpsTableRow>
27352
- <SpsTableHeader ></SpsTableHeader>
27353
- <SpsTableHeader >Title</SpsTableHeader>
27352
+ <SpsTableHeader controlCell></SpsTableHeader>
27353
+ <SpsTableHeader>Title</SpsTableHeader>
27354
27354
  <SpsTableHeader>Year</SpsTableHeader>
27355
- <SpsTableHeader >Director</SpsTableHeader>
27355
+ <SpsTableHeader>Director</SpsTableHeader>
27356
27356
  <SpsTableHeader>Countries</SpsTableHeader>
27357
27357
  </SpsTableRow>
27358
27358
  </SpsTableHead>
@@ -27360,7 +27360,7 @@ const SpsTableExamples = {
27360
27360
  {items.map((row, index) => {
27361
27361
  return (
27362
27362
  <SpsTableRow key={index}>
27363
- <SpsTableCell><SpsCheckbox/></SpsTableCell>
27363
+ <SpsTableCell controlCell><SpsCheckbox/></SpsTableCell>
27364
27364
  <SpsTableCell>{row["title"]}</SpsTableCell>
27365
27365
  <SpsTableCell>{row["year"]}</SpsTableCell>
27366
27366
  <SpsTableCell>{row["director"]}</SpsTableCell>
@@ -27449,7 +27449,7 @@ const SpsTableExamples = {
27449
27449
  <SpsTableCell>{row["year"]}</SpsTableCell>
27450
27450
  <SpsTableCell>{row["director"]}</SpsTableCell>
27451
27451
  <SpsTableCell className="text-right" buttonCell>
27452
- <SpsButton kind="icon" icon="ellipses" />
27452
+ <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.ELLIPSES} />
27453
27453
  </SpsTableCell>
27454
27454
  </SpsTableRow>
27455
27455
  );
@@ -27604,7 +27604,7 @@ const SpsTableExamples = {
27604
27604
  <SpsTableCell>{row["aspect_ratio"]}</SpsTableCell>
27605
27605
  <SpsTableCell>\${row["price"]}</SpsTableCell>
27606
27606
  <SpsTableCell className="text-right" buttonCell pinned>
27607
- <SpsButton kind="icon" icon="ellipses" />
27607
+ <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.ELLIPSES} />
27608
27608
  </SpsTableCell>
27609
27609
  </SpsTableRow>
27610
27610
  )
@@ -33282,6 +33282,7 @@ const SpsSideNavExamples = {
33282
33282
  titleIcon={SpsIcon.STATUS_OK}
33283
33283
  navOptions={items}
33284
33284
  onNavChange={onChange}
33285
+ activeNavItem="Navigation Item 2"
33285
33286
  />
33286
33287
  </div>
33287
33288
  </div>
@@ -33635,28 +33636,33 @@ const SpsSpinnerExamples = {
33635
33636
  basic: {
33636
33637
  examples: {
33637
33638
  small: {
33638
- jsx: code`
33639
- <React.Fragment>
33640
- <SpsSpinner size="small"/>
33641
- <SpsSpinner size={SpinnerSize.SMALL}/>
33642
- </React.Fragment>
33639
+ react: code`
33640
+ function Component() {
33641
+ return (
33642
+ <SpsSpinner size={SpinnerSize.SMALL} title="Please wait…" />
33643
+ );
33644
+ }
33643
33645
  `
33644
33646
  },
33645
33647
  medium: {
33646
- jsx: code`
33647
- <React.Fragment>
33648
- <SpsSpinner />
33649
- <SpsSpinner size="medium" title="Please wait…"/>
33650
- <SpsSpinner size={SpinnerSize.MEDIUM}/>
33651
- </React.Fragment>
33648
+ react: code`
33649
+ function Component() {
33650
+ return (
33651
+ <>
33652
+ <SpsSpinner />
33653
+ <SpsSpinner size={SpinnerSize.MEDIUM} title="Please wait…" />
33654
+ </>
33655
+ );
33656
+ }
33652
33657
  `
33653
33658
  },
33654
33659
  large: {
33655
- jsx: code`
33656
- <React.Fragment>
33657
- <SpsSpinner size="large"/>
33658
- <SpsSpinner size={SpinnerSize.LARGE} alt="Loading content…"/>
33659
- </React.Fragment>
33660
+ react: code`
33661
+ function Component() {
33662
+ return (
33663
+ <SpsSpinner size={SpinnerSize.LARGE} alt="Loading content…" />
33664
+ );
33665
+ }
33660
33666
  `
33661
33667
  }
33662
33668
  }
@@ -34515,7 +34521,7 @@ function SpsTaskQueue(_E) {
34515
34521
  kind: tooltipKind,
34516
34522
  showOn: hasTasks ? TooltipShowTrigger.MANUAL : TooltipShowTrigger.MOUSEOVER,
34517
34523
  isShown: showNotification && !isOpen ? TooltipVisibility.VISIBLE : TooltipVisibility.HIDDEN,
34518
- hideDelay: TASK_QUEUE_NOTIFICATION_DURATION_MS
34524
+ hideDelay: Number(hasTasks) && TASK_QUEUE_NOTIFICATION_DURATION_MS
34519
34525
  }, !suppressTooltips && showNotification && (notificationText || t2("design-system:taskQueue.newTask")), !suppressTooltips && !showNotification && !hasTasks && t2("design-system:taskQueue.noTasks")), portal(/* @__PURE__ */ React.createElement("div", {
34520
34526
  ref: taskQueueDropdownRef,
34521
34527
  className: clsx("sps-task-queue__task-list", isOpen && "sps-task-queue__task-list--open", "z-stratum-dropdown"),
@@ -34811,11 +34817,9 @@ const SpsTaskQueueExamples = {
34811
34817
  }
34812
34818
  ]);
34813
34819
 
34814
- const form = useForm(
34815
- formGroup({
34816
- blueTooltip: formControl(false)
34817
- })
34818
- );
34820
+ const { formValue, formMeta } = useSpsForm({
34821
+ blueTooltip: false
34822
+ });
34819
34823
 
34820
34824
  function handleAddTask() {
34821
34825
  const newTaskId = generateTaskId();
@@ -34842,7 +34846,7 @@ const SpsTaskQueueExamples = {
34842
34846
  setTasks(currentTasks => currentTasks.map(task => ({ ...task, unread: false })));
34843
34847
  }
34844
34848
 
34845
- const isTooltipBlue = form.get("blueTooltip").getValue();
34849
+ const isTooltipBlue = formValue.blueTooltip;
34846
34850
  const tooltipKind = isTooltipBlue ? TooltipKind.HELP : TooltipKind.DEFAULT;
34847
34851
  const notificationText = isTooltipBlue
34848
34852
  ? "There is a new task in your queue. Also the tooltip is blue now :O"
@@ -34851,7 +34855,7 @@ const SpsTaskQueueExamples = {
34851
34855
  return (
34852
34856
  <div style={{ display: "flex", justifyContent: "space-between" }}>
34853
34857
  <div>
34854
- <SpsCheckbox label="Blue Tooltip" formControl={form.get("blueTooltip")} />
34858
+ <SpsCheckbox label="Blue Tooltip" formMeta={formMeta.fields.blueTooltip} />
34855
34859
  <SpsButton onClick={handleAddTask}>Add a new task to the queue</SpsButton>
34856
34860
  </div>
34857
34861
 
@@ -35609,9 +35613,9 @@ const SpsTileListExamples = {
35609
35613
 
35610
35614
  // custom sort by status
35611
35615
  if (key === 'status') {
35612
- if (a.error + a.warning < b.error + b.warning) {
35616
+ if (+a.error + +a.warning < +b.error + +b.warning) {
35613
35617
  return direction === SortDirection.ASCENDING ? -1 : 1;
35614
- } else if (a.error + a.warning > b.error + b.warning) {
35618
+ } else if (+a.error + +a.warning > +b.error + +b.warning) {
35615
35619
  return direction === SortDirection.ASCENDING ? 1 : -1;
35616
35620
  }
35617
35621
  }
@@ -37189,16 +37193,13 @@ const SpsFilterPanelExamples = {
37189
37193
  const propsDoc$c = {
37190
37194
  value: "string",
37191
37195
  placeholder: "string",
37192
- formMeta: "SpsFormArrayMeta<any> | SpsFormGroupMeta<any>",
37196
+ formMeta: "SpsFormFieldMeta<string>",
37193
37197
  onFilterChange: "ChangeEventHandler<HTMLInputElement>"
37194
37198
  };
37195
37199
  const propTypes$e = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
37196
37200
  value: propTypes$1O.exports.string,
37197
37201
  placeholder: propTypes$1O.exports.string,
37198
- formMeta: propTypes$1O.exports.oneOfType([
37199
- impl(),
37200
- impl()
37201
- ]),
37202
+ formMeta: impl(),
37202
37203
  onFilterChange: fun()
37203
37204
  });
37204
37205
  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.24.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,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.24.0",
32
+ "@spscommerce/ds-illustrations": "5.24.0",
33
+ "@spscommerce/ds-shared": "5.24.0",
34
+ "@spscommerce/positioning": "5.24.0",
35
+ "@spscommerce/utils": "5.24.0",
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.24.0",
44
+ "@spscommerce/ds-illustrations": "5.24.0",
45
+ "@spscommerce/ds-shared": "5.24.0",
46
+ "@spscommerce/positioning": "5.24.0",
47
+ "@spscommerce/utils": "5.24.0",
48
48
  "@testing-library/react": "^9.3.2",
49
49
  "@types/prop-types": "^15.7.1",
50
50
  "@types/react": "^16.9.0",