@spscommerce/ds-react 6.16.0 → 6.17.2

package/lib/index.es.js

@@ -2221,11 +2221,33 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
   const portal = usePortal("sps-option-list-portal");
   const portalContext = React.useContext(PortalContext);
   const [primePosition, altPosition] = positionOverride || [Position.BOTTOM_LEFT, Position.TOP_LEFT];
-  const [posStyle, openingUpward] = isOpen ? getPosition(rootRef, attachTo, primePosition, __spreadValues({
-    altPosition,
-    setMinWidth: !ignoreWidthStyles,
-    setWidth: !ignoreWidthStyles && conformWidth
-  }, portalContext)) : [{}, false];
+  const [[posStyle, openingUpward], setPositionData] = React.useState([{}, false]);
+  React.useEffect(() => {
+    if (isOpen) {
+      setPositionData(getPosition(rootRef, attachTo, primePosition, __spreadValues({
+        altPosition,
+        setMinWidth: !ignoreWidthStyles,
+        setWidth: !ignoreWidthStyles && conformWidth
+      }, portalContext)));
+    } else {
+      setPositionData([{}, false]);
+    }
+  }, [isOpen, primePosition, altPosition]);
+  React.useEffect(() => {
+    const onScroll = () => {
+      if (isOpen) {
+        setPositionData(getPosition(rootRef, attachTo, primePosition, __spreadValues({
+          altPosition,
+          setMinWidth: !ignoreWidthStyles,
+          setWidth: !ignoreWidthStyles && conformWidth
+        }, portalContext)));
+      }
+    };
+    document.addEventListener("scroll", onScroll);
+    return () => {
+      document.removeEventListener("scroll", onScroll);
+    };
+  }, [isOpen]);
   const searchInputRef = React.useRef(null);
   const [
     searchElement,
@@ -21615,6 +21637,21 @@ function SpsTooltip({
       setPositionData([{}, false]);
     }
   }, [shown, position3, altPosition, offsets[0], offsets[1], children]);
+  React.useEffect(() => {
+    const onScroll = () => {
+      if (shown) {
+        setPositionData(getPosition(rootElement, forElementRef, position3, __spreadValues({
+          altPosition,
+          setMinWidth: false,
+          offsets: [offsets[0] - CARET_SPACING_PX, offsets[1] + getSecondaryOffset(position3)]
+        }, portalContext)));
+      }
+    };
+    document.addEventListener("scroll", onScroll);
+    return () => {
+      document.removeEventListener("scroll", onScroll);
+    };
+  }, [shown]);
   const classes = clsx(unsafelyReplaceClassName || "sps-tooltip", "z-stratum-tip", `sps-tooltip--${kind}`, `sps-tooltip--pos-${(altPositionUsed ? altPosition : position3).replace(" ", "-")}`, shown && "sps-tooltip--shown", className);
   return portal(/* @__PURE__ */ React.createElement("div", {
     role: "tooltip",
@@ -24713,41 +24750,186 @@ Object.assign(SpsKeyValueListItem, {
   displayName: "SpsKeyValueListItem"
 });
 const SpsKeyValueListExamples = {
-  stacked: {
-    label: "Stacked",
+  vertical: {
+    label: "Vertical Key Value Sets",
+    description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h5", null, "Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Vertical containers such as a side bar or general card")), /* @__PURE__ */ React__default.createElement("h5", null, "Do Not Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "In Table cells or Description Lists")), /* @__PURE__ */ React__default.createElement("h5", null, "Usage Rules"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Titles must be written in Title Case"), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Values can be written in Sentence Case or Title Case as best suits the content"), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Titles or Values can include hyperlinks and/or icons", /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Icons should always appear on the left before any text content"))), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Values can include tags"), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Can include multiple values on additional lines"))),
     examples: {
-      stacked: {
-        jsx: code`
-                    <SpsKeyValueList>
-                        <SpsKeyValueListItem itemKey="Buying From">
-                            75 Companies
-                            <span className="font-weight-light d-block">38 of 75 Operational</span>
-                        </SpsKeyValueListItem>
-                        <SpsKeyValueListItem itemKey="Some Other Key">Its Value</SpsKeyValueListItem>
-                    </SpsKeyValueList>
-                `
+      standard: {
+        description: () => /* @__PURE__ */ React__default.createElement("h4", null, "Standard"),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList>
+                <SpsKeyValueListItem itemKey="Company">
+                  SPS Commerce
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
+      },
+      multipleValues: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Multiple Values"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " There is no limit to the number of values that can be listed, but extensive lists should be avoided.")),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList>
+                <SpsKeyValueListItem itemKey="Program Requirements">
+                  Electronic Order
+                  <br />
+                  Fulfillment
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
+      },
+      secondaryValues: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h5", null, "Secondary Values"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " When using a secondary value (styled in lighter grey text) the number of values listed should be limited to two (2).")),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList>
+                <SpsKeyValueListItem itemKey="Company">
+                  SPS Commerce
+                  <span className="font-weight-light d-block">Minneapolis, MN</span>
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
+      },
+      tags: {
+        description: ({ NavigateTo }) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Tags"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " Tags can appear inline or on individual lines as the length of content requires. Reference the ", /* @__PURE__ */ React__default.createElement(NavigateTo, {
+          to: "tags"
+        }, "Tag"), " component for spacing rules.")),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList>
+                <SpsKeyValueListItem itemKey="Accepted Documents">
+                  <SpsTag className="mr-1 mb-1">850</SpsTag>
+                  <SpsTag className="mr-1 mb-1">855</SpsTag>
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
+      },
+      hyperlinksAndIcons: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Hyperlinks & Icons"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " Icons and Hyperlinks can be used independently of one another.")),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList>
+                <SpsKeyValueListItem itemKey="Company">
+                  <a href="#" target="_blank">SPS Commerce</a>
+                  <span className="font-weight-light d-block">Minneapolis, MN</span>
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
       }
     }
   },
-  inline: {
-    label: "Inline",
+  horizontal: {
+    label: "Horizontal Key Value Sets",
+    description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h5", null, "Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Horizontal containers such as a content row")), /* @__PURE__ */ React__default.createElement("h5", null, "Do Not Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "In Table cells or Description Lists")), /* @__PURE__ */ React__default.createElement("h5", null, "Usage Rules"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Titles must be written in Title Case"), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Values can be written in Sentence Case or Title Case as best suits the content"), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Titles or Values can include hyperlinks and/or icons", /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Icons should always appear on the left before any text content"))), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Can be used individually or stacked on top of one another", /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "When stacking, the value sets should share a common category or theme"))))),
     examples: {
-      inline: {
-        jsx: code`
-                    <SpsKeyValueList inline>
-                        <SpsKeyValueListItem itemKey="Title">Sub copy goes here</SpsKeyValueListItem>
-                        <SpsKeyValueListItem itemKey="Long Title">Sub copy</SpsKeyValueListItem>
-                        <SpsKeyValueListItem itemKey="Tags">
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">Tag</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">Another Tag</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">Taggart McTaggerson</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">Taggle Rock</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">A Tag On Titan</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">bröther may i have some tägs</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">Tag Me Up, Tag Me Down</SpsTag>
-                        </SpsKeyValueListItem>
-                    </SpsKeyValueList>
-                `
+      standard: {
+        description: () => /* @__PURE__ */ React__default.createElement("h4", null, "Standard"),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList inline>
+                <SpsKeyValueListItem itemKey="Company">
+                  SPS Commerce
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
+      },
+      stacked: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Stacked"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " There is no limit to the number of stacked listings, but more than three in a single container should be avoided."), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " Titles are right-aligned in the horizontal Key Value Sets to optimize scanability of the values.")),
+        react: code`
+          function DemoComponent() {
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-3">
+                  <SpsKeyValueList inline>
+                    <SpsKeyValueListItem itemKey="Title One">
+                      Value
+                    </SpsKeyValueListItem>
+                    <SpsKeyValueListItem itemKey="Title Two">
+                      Value that wraps to a second line
+                    </SpsKeyValueListItem>
+                    <SpsKeyValueListItem itemKey="Title Three">
+                      Value
+                    </SpsKeyValueListItem>
+                  </SpsKeyValueList>
+                </div>
+              </div>
+            )
+          }
+        `
+      },
+      withLinks: {
+        description: () => /* @__PURE__ */ React__default.createElement("h4", null, "With Links"),
+        react: code`
+          function DemoComponent() {
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-3">
+                  <SpsKeyValueList inline>
+                    <SpsKeyValueListItem itemKey="Title One">
+                      Value
+                    </SpsKeyValueListItem>
+                    <SpsKeyValueListItem itemKey="Title Two">
+                      Value that wraps to a <a href="#" target="_blank">second line</a>
+                    </SpsKeyValueListItem>
+                    <SpsKeyValueListItem itemKey="Title Three">
+                      Value
+                    </SpsKeyValueListItem>
+                  </SpsKeyValueList>
+                </div>
+              </div>
+            )
+          }
+        `
       }
     }
   }
@@ -37213,7 +37395,7 @@ function SpsFilterPanelCap(_ea) {
   }), /* @__PURE__ */ React.createElement("p", null, t2("design-system:filterPanel.title"))), /* @__PURE__ */ React.createElement(SpsButton, {
     kind: ButtonKind.LINK,
     onClick: onClear
-  }, t2("design-system:filterPanel.clear")));
+  }, t2("design-system:filterPanel.clear")), children);
 }
 Object.assign(SpsFilterPanelCap, {
   props: propsDoc$6,
@@ -37895,6 +38077,7 @@ const MANIFEST = {
     examples: SpsInsightTileExamples
   },
   "Key Value Lists": {
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Key Value Sets consist of a title and value, or values, paired together visually. They are ideal for displaying details (a value or values) that require additional context (title)."),
     components: [SpsKeyValueList, SpsKeyValueListItem],
     examples: SpsKeyValueListExamples
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.16.0",
+  "version": "6.17.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": "6.16.0",
-    "@spscommerce/ds-illustrations": "6.16.0",
-    "@spscommerce/ds-shared": "6.16.0",
-    "@spscommerce/positioning": "6.16.0",
+    "@spscommerce/ds-colors": "6.17.2",
+    "@spscommerce/ds-illustrations": "6.17.2",
+    "@spscommerce/ds-shared": "6.17.2",
+    "@spscommerce/positioning": "6.17.2",
     "@spscommerce/utils": "^6.11.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
@@ -40,10 +40,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "6.16.0",
-    "@spscommerce/ds-illustrations": "6.16.0",
-    "@spscommerce/ds-shared": "6.16.0",
-    "@spscommerce/positioning": "6.16.0",
+    "@spscommerce/ds-colors": "6.17.2",
+    "@spscommerce/ds-illustrations": "6.17.2",
+    "@spscommerce/ds-shared": "6.17.2",
+    "@spscommerce/positioning": "6.17.2",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",