@spscommerce/ds-react 4.33.0 → 4.34.2

package/lib/index.es.js

@@ -1027,12 +1027,12 @@ const propTypes$1H = __spreadProps(__spreadValues(__spreadValues(__spreadValues(
   loading: propTypes$1L.exports.bool
 });
 async function updateOptions(props2, searchState, searchStatePatch, setOptionList, setAnyOptionHasIcon, promiseRef) {
-  searchStatePatch({ pending: true });
-  const fetchedOptions = typeof props2.options === "function" ? props2.options(searchState.value) : props2.options || [];
-  const resultPromise = fetchedOptions instanceof Promise ? fetchedOptions : Promise.resolve(fetchedOptions);
-  promiseRef.current = resultPromise;
-  const result = await resultPromise || [];
-  if (promiseRef.current !== resultPromise) {
+  const options = typeof props2.options === "function" ? props2.options(searchState.value) : props2.options || [];
+  const areOptionsPromise = options instanceof Promise;
+  searchStatePatch({ pending: areOptionsPromise });
+  promiseRef.current = areOptionsPromise ? options : null;
+  const result = areOptionsPromise ? await options || [] : options || [];
+  if (areOptionsPromise && promiseRef.current !== options) {
     return;
   }
   let newOpts = Array.from(result).filter(Boolean).map((thing) => new SpsOptionListOption(thing, typeof thing === "function" ? {
@@ -29886,11 +29886,26 @@ Object.assign(SpsPagination, {
   displayName: "SpsPagination"
 });
 const SpsPaginationExamples = {
+  general: {
+    label: "General Usage",
+    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "Use the Standard Pagination Bar on a list page (comprised of a Table, Content Rows, or Content Tiles). It should always appear at the bottom of the listed records."), /* @__PURE__ */ React.createElement("p", null, "Use the Mini Pagination component when a paginated list of results exists inside a smaller Card."))
+  },
   pagination: {
-    label: "Pagination",
-    description: "info about pagination",
+    label: "Standard Pagination Bar",
+    description: ({ Link }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "The Standard Pagination Bar is comprised of three main sections. The middle section is hidden from view when the width of its container is at the responsive breakpoint of 767 pixels."), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("span", {
+      className: "sps-text-semibold"
+    }, "Results-per-page Select"), " ", "(left): allows the user to adjust the number of records being displayed per page.*")), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("span", {
+      className: "sps-text-semibold"
+    }, "Viewing details"), " (middle): describes which results are being displayed on the current page.")), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("span", {
+      className: "sps-text-semibold"
+    }, "Page Navigator"), " (right): allows the user to navigate between pages of results"))), /* @__PURE__ */ React.createElement("i", null, "*Note: For Tables and Content Rows, per-page options should be 25, 50, and 100. For Content Tiles, per-page options should be 24, 48, and 100."), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("p", {
+      className: "mt-2"
+    }, "To see an example of the Standard Pagination Bar in context with a Table, view the Table Lists section on the", " ", /* @__PURE__ */ React.createElement(Link, {
+      to: "/style-and-layout/page-types"
+    }, "Page Types"), " page.")),
     examples: {
       basic: {
+        description: () => /* @__PURE__ */ React.createElement("h4", null, "Building the Standard Pagination Bar"),
         react: code`
                     function Component() {
                         const [page, setPage] = React.useState(2);
@@ -29936,10 +29951,13 @@ const SpsPaginationExamples = {
     }
   },
   pageSelector: {
-    label: "Page selector",
-    description: "info about page selector",
+    label: "Page Navigator",
+    description: ({ Link }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "When navigating through a series of paginated results inside of a container such as a sidebar, a miniature version of the pagination bar can be used. This version utilizes only the page navigation component. Use Mini Pagination inside of a Card Header that also includes a title describing the content contained in the card below."), /* @__PURE__ */ React.createElement("p", null, "To see an example of the Page Navigator in context within a Card Header, view the General Content section on the", " ", /* @__PURE__ */ React.createElement(Link, {
+      to: "/style-and-layout/page-types"
+    }, "Page Types"), " page.")),
     examples: {
       basic: {
+        description: () => /* @__PURE__ */ React.createElement("h4", null, "Building the Page Navigator"),
         react: code`
                     function Component() {
                         const pageChanged = val => {
@@ -30873,7 +30891,7 @@ const SpsTooltipExamples = {
                               <SpsTooltipTitle icon={SpsIcon.CALENDAR_BLANK}>Started</SpsTooltipTitle>
                               <div className="mb-3">Tuesday, April 15</div>
                               <SpsTooltipTitle icon={SpsIcon.CHECKMARK}>Completed</SpsTooltipTitle>
-                              <div className="mb-3">Thursday, April 24</div>
+                              <div>Thursday, April 24</div>
                             </SpsTooltip>
                           </React.Fragment>
                         );
@@ -36223,6 +36241,7 @@ const MANIFEST = {
     examples: SpsPageTitleExamples
   },
   Pagination: {
+    description: () => /* @__PURE__ */ React.createElement("p", null, "The Pagination component allows users to navigate lists of records and control the number of records displayed on each page. The records can span across multiple pages, or within sections of a page."),
     components: [SpsPagination, SpsPageSelector],
     examples: SpsPaginationExamples
   },

package/lib/pagination/SpsPagination.examples.d.ts

@@ -1,2 +1,2 @@
-import type { DSReactExamples } from "@spscommerce/ds-shared";
+import { DSReactExamples } from '@spscommerce/ds-shared';
 export declare const SpsPaginationExamples: DSReactExamples;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "4.33.0",
+  "version": "4.34.2",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,10 +28,10 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "4.33.0",
-    "@spscommerce/ds-shared": "4.33.0",
-    "@spscommerce/positioning": "4.33.0",
-    "@spscommerce/utils": "4.33.0",
+    "@spscommerce/ds-colors": "4.34.2",
+    "@spscommerce/ds-shared": "4.34.2",
+    "@spscommerce/positioning": "4.34.2",
+    "@spscommerce/utils": "4.34.2",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -39,10 +39,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "4.33.0",
-    "@spscommerce/ds-shared": "4.33.0",
-    "@spscommerce/positioning": "4.33.0",
-    "@spscommerce/utils": "4.33.0",
+    "@spscommerce/ds-colors": "4.34.2",
+    "@spscommerce/ds-shared": "4.34.2",
+    "@spscommerce/positioning": "4.34.2",
+    "@spscommerce/utils": "4.34.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",