@spscommerce/ds-react 5.33.11 → 5.33.13

package/lib/index.es.js

@@ -2401,6 +2401,13 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
   }, [isOpen]);
   const maxHeight = maxHeightPx ? maxHeightPx / 16 : maxHeightRem;
   const optionsInlineStyles = maxHeight ? { maxHeight: `${maxHeight}rem` } : {};
+  function highlightText(text, pattern2) {
+    return pattern2 ? /* @__PURE__ */ React.createElement(React.Fragment, null, text.split(pattern2).map((part, partIdx) => pattern2.test(part) ? /* @__PURE__ */ React.createElement("u", {
+      key: partIdx
+    }, part) : /* @__PURE__ */ React.createElement(React.Fragment, {
+      key: partIdx
+    }, part))) : /* @__PURE__ */ React.createElement(React.Fragment, null, text);
+  }
   return portal(/* @__PURE__ */ React.createElement("div", __spreadValues({
     className: classes,
     id: id2,
@@ -2439,17 +2446,9 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
       className: clsx("sps-icon", "sps-option-list__option-icon", `sps-icon-${String(option.value.icon)}`)
     }), (!option.value || !option.value.icon && anyOptionHasIcon) && /* @__PURE__ */ React.createElement("span", {
       className: "sps-option-list__option-icon-spacer"
-    }), /* @__PURE__ */ React.createElement("span", {
-      dangerouslySetInnerHTML: {
-        __html: option.getHtml(searchState.replacementPattern)
-      }
-    }), option.caption && /* @__PURE__ */ React.createElement("div", {
+    }), /* @__PURE__ */ React.createElement("span", null, highlightText(option.text, searchState.replacementPattern)), option.caption && /* @__PURE__ */ React.createElement("div", {
       className: "sps-option-list__option-caption"
-    }, /* @__PURE__ */ React.createElement("span", {
-      dangerouslySetInnerHTML: {
-        __html: option.caption.replace(searchState.replacementPattern, "<u>$&</u>")
-      }
-    })));
+    }, /* @__PURE__ */ React.createElement("span", null, highlightText(option.caption, searchState.replacementPattern))));
   })), specialActionOption && specialAction.label && /* @__PURE__ */ React.createElement("a", {
     className: clsx("sps-option-list__option", "sps-option-list__special-action", highlightedOptionIndex === optionList.length && "sps-option-list__option--highlighted", specialAction.disabled && "sps-option-list__special-action--disabled"),
     href: specialActionOption.href,
@@ -31071,13 +31070,15 @@ const propsDoc$L = {
   page: "number",
   numPages: "number",
   onPageChange: "(number) => void",
-  disabled: "boolean"
+  disabled: "boolean",
+  unknownPageCount: "boolean"
 };
 const propTypes$N = __spreadValues({
   numPages: propTypes$1O.exports.number,
   onPageChange: fun(),
   page: propTypes$1O.exports.number,
-  disabled: propTypes$1O.exports.bool
+  disabled: propTypes$1O.exports.bool,
+  unknownPageCount: propTypes$1O.exports.bool
 }, spsGlobalPropTypes);
 function SpsPageSelector(props2) {
   const _a = props2, {
@@ -31087,7 +31088,8 @@ function SpsPageSelector(props2) {
     unsafelyReplaceClassName,
     className,
     "data-testid": testId,
-    disabled = false
+    disabled = false,
+    unknownPageCount = false
   } = _a, rest = __objRest(_a, [
     "numPages",
     "onPageChange",
@@ -31095,7 +31097,8 @@ function SpsPageSelector(props2) {
     "unsafelyReplaceClassName",
     "className",
     "data-testid",
-    "disabled"
+    "disabled",
+    "unknownPageCount"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
   const [inputPage, setInputPage] = React.useState(pageProp);
@@ -31122,7 +31125,7 @@ function SpsPageSelector(props2) {
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: classes,
     "data-testid": testId
-  }, rest), /* @__PURE__ */ React.createElement("div", {
+  }, rest), !unknownPageCount && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     className: "sps-pagination__input-wrapper",
     "data-testid": `${testId}__input`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -31145,7 +31148,7 @@ function SpsPageSelector(props2) {
   }))), /* @__PURE__ */ React.createElement("span", {
     className: "sps-page-selector__total-pages",
     "data-testid": `${testId}_page-count`
-  }, Number.isNaN(numPages) ? t2("design-system:pagination.ofMany") : t2("design-system:pagination.ofPageCount", { pageCount: numPages })), /* @__PURE__ */ React.createElement("div", {
+  }, Number.isNaN(numPages) ? t2("design-system:pagination.ofMany") : t2("design-system:pagination.ofPageCount", { pageCount: numPages }))), /* @__PURE__ */ React.createElement("div", {
     className: "sps-icon-button-panel",
     "data-testid": `${testId}__buttons`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -31181,7 +31184,8 @@ const propsDoc$K = {
   pageSizeOptions: "Array<number>",
   totalResults: "number",
   onPageChange: "(page: number, pageSize: number, indices: [number, number]) => void",
-  disabled: "boolean"
+  disabled: "boolean",
+  unknownPageCount: "boolean"
 };
 const propTypes$M = __spreadValues({
   onPageChange: fun().isRequired,
@@ -31189,7 +31193,8 @@ const propTypes$M = __spreadValues({
   pageSize: propTypes$1O.exports.number,
   pageSizeOptions: propTypes$1O.exports.arrayOf(propTypes$1O.exports.number),
   totalResults: propTypes$1O.exports.number,
-  disabled: propTypes$1O.exports.bool
+  disabled: propTypes$1O.exports.bool,
+  unknownPageCount: propTypes$1O.exports.bool
 }, spsGlobalPropTypes);
 function SpsPagination(props2) {
   const _a = props2, {
@@ -31201,7 +31206,8 @@ function SpsPagination(props2) {
     "data-testid": testId,
     totalResults,
     unsafelyReplaceClassName,
-    disabled = false
+    disabled = false,
+    unknownPageCount = false
   } = _a, rest = __objRest(_a, [
     "className",
     "onPageChange",
@@ -31211,7 +31217,8 @@ function SpsPagination(props2) {
     "data-testid",
     "totalResults",
     "unsafelyReplaceClassName",
-    "disabled"
+    "disabled",
+    "unknownPageCount"
   ]);
   const [state, patchState] = usePatchReducer({
     page: pageProp,
@@ -31289,13 +31296,16 @@ function SpsPagination(props2) {
     value: state.pageSize,
     className: "ml-1 mr-1",
     disabled
-  }), "Per Page"), /* @__PURE__ */ React.createElement("div", {
+  }), "Per Page"), unknownPageCount ? /* @__PURE__ */ React.createElement("div", {
+    className: "sps-pagination__details"
+  }, `Viewing ${state.indices[0]} - ${state.indices[1]}`) : /* @__PURE__ */ React.createElement("div", {
     className: "sps-pagination__details"
   }, `Viewing ${state.indices[0]} - ${state.indices[1]} of ${totalResultsString()}`), /* @__PURE__ */ React.createElement(SpsPageSelector, {
     numPages: state.numPages,
     page: state.page,
     onPageChange: handlePageChange,
-    disabled
+    disabled,
+    unknownPageCount
   }));
 }
 Object.assign(SpsPagination, {
@@ -31350,6 +31360,35 @@ const SpsPaginationExamples = {
                     }
                 `
       },
+      situational: {
+        description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Unknown Page Count"), /* @__PURE__ */ React.createElement("p", null, "In cases where the exact page count of results is not able to be determined, a variation of the Pagination component with limited features can be utilized.")),
+        react: code`
+                    function Component() {
+                        const [page, setPage] = React.useState(2);
+                        const [pageSize, setPageSize] = React.useState(25);
+
+                        function handlePageChange(newPage, newPageSize) {
+                          console.log("change", newPage, newPageSize);
+                          setPage(newPage);
+                          setPageSize(newPageSize);
+                        }
+
+                        return (
+                          <React.Fragment>
+                            <SpsPagination id="basic"
+                              totalResults={123}
+                              page={page}
+                              pageSize={pageSize}
+                              onPageChange={handlePageChange}
+                              unknownPageCount
+                            />
+                            <span className="mr-2">page: {page}</span>
+                            <span>pageSize: {pageSize}</span>
+                          </React.Fragment>
+                        );
+                    }
+                `
+      },
       disabled: {
         description: "Disabled state",
         react: code`

package/lib/pagination/SpsPageSelector.d.ts

@@ -8,6 +8,7 @@ declare const propTypes: {
     onPageChange: PropTypes.Requireable<(number: any) => void>;
     page: PropTypes.Requireable<number>;
     disabled: PropTypes.Requireable<boolean>;
+    unknownPageCount: PropTypes.Requireable<boolean>;
 };
 export declare type SpsPageSelectorProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
 export declare function SpsPageSelector(props: SpsPageSelectorProps): JSX.Element;

package/lib/pagination/SpsPagination.d.ts

@@ -10,6 +10,7 @@ declare const propTypes: {
     pageSizeOptions: PropTypes.Requireable<number[]>;
     totalResults: PropTypes.Requireable<number>;
     disabled: PropTypes.Requireable<boolean>;
+    unknownPageCount: PropTypes.Requireable<boolean>;
 };
 export declare type SpsPaginationProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
 export declare function SpsPagination(props: SpsPaginationProps): JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.33.11",
+  "version": "5.33.13",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,11 +28,11 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.33.11",
-    "@spscommerce/ds-illustrations": "5.33.11",
-    "@spscommerce/ds-shared": "5.33.11",
-    "@spscommerce/positioning": "5.33.11",
-    "@spscommerce/utils": "5.33.11",
+    "@spscommerce/ds-colors": "5.33.13",
+    "@spscommerce/ds-illustrations": "5.33.13",
+    "@spscommerce/ds-shared": "5.33.13",
+    "@spscommerce/positioning": "5.33.13",
+    "@spscommerce/utils": "5.33.13",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -40,11 +40,11 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.33.11",
-    "@spscommerce/ds-illustrations": "5.33.11",
-    "@spscommerce/ds-shared": "5.33.11",
-    "@spscommerce/positioning": "5.33.11",
-    "@spscommerce/utils": "5.33.11",
+    "@spscommerce/ds-colors": "5.33.13",
+    "@spscommerce/ds-illustrations": "5.33.13",
+    "@spscommerce/ds-shared": "5.33.13",
+    "@spscommerce/positioning": "5.33.13",
+    "@spscommerce/utils": "5.33.13",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",
@@ -64,6 +64,5 @@
     "watch": "vite build --watch",
     "clean": "git clean -fdX",
     "pub": "pnpm pack && node ../../scripts/publish-package.js"
-  },
-  "readme": "[//]: # \"START_AUTOGENERATED\"\n\n## [@spscommerce/ds-react](https://github.com/spscommerce/ui-angular/tree/master/packages/@spscommerce/ds-react#readme)\n\n![release: 1.1.0](https://img.shields.io/badge/release-1.1.0-blue.svg?style=flat-square)\n![build: passing](https://img.shields.io/badge/build-passing-green.svg?style=flat-square)\n![tests: failing](https://img.shields.io/badge/tests-failing-red.svg?style=flat-square)\n\nSPS Design System React components \n \n ### Installation \n \n ```shell\nnpm install --save @spscommerce/ds-react\n```\n\n#### Peer Dependencies\n\n<div class=\"row\">\n    <div class=\"col-5\"> \n    <table class=\"sps-table\">\n        <thead class=\"sps-table__head\">\n            <tr class=\"sps-table__row\">\n                <th class=\"sps-table__header\">\n                    <span class=\"sps-table__header-cell-body\">    \n                        Package\n                    </span>\n                </th>\n                <th class=\"sps-table__header text-right\">\n                    <span class=\"sps-table__header-cell-body\">    \n                        Version\n                    </span>\n                </th>\n            </tr>\n        </thead>\n        <tbody class=\"sps-table__body\">\n            <tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-shared#readme\">@spscommerce/ds-shared</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/positioning#readme\">@spscommerce/positioning</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/utils#readme\">@spscommerce/utils</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"lukeed/clsx\">clsx</a></td><td class=\"sps-table__cell text-right\">^1.0.3</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://momentjs.com\">moment</a></td><td class=\"sps-table__cell text-right\">^2.25.3</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"http://momentjs.com/timezone/\">moment-timezone</a></td><td class=\"sps-table__cell text-right\">^0.5.28</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"ai/nanoid\">nanoid</a></td><td class=\"sps-table__cell text-right\">^2.1.6</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://facebook.github.io/react/\">prop-types</a></td><td class=\"sps-table__cell text-right\">^15.7.2</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://reactjs.org/\">react</a></td><td class=\"sps-table__cell text-right\">^16.9.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://reactjs.org/\">react-dom</a></td><td class=\"sps-table__cell text-right\">^16.9.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://scroll-into-view-if-needed.netlify.com\">scroll-into-view-if-needed</a></td><td class=\"sps-table__cell text-right\">^2.2.20</td></tr>\n        </tbody>\n    </table>\n    </div>\n    <div class=\"col-7\">\n        &nbsp;\n    </div>\n</div>\n\n[//]: # \"END_AUTOGENERATED\"\n"
+  }
 }