@spscommerce/ds-react 5.22.0 → 5.23.0

package/lib/index.es.js

@@ -26166,6 +26166,8 @@ const usePinnedTableBackgroundStyle = (containerRef) => {
   React.useLayoutEffect(() => {
     if (containerRef.current) {
       const pinnedThs = containerRef.current.querySelectorAll("table > thead > tr:first-child > .sps-table__cell--pinned");
+      const verticalScrollbarWidth = containerRef.current.offsetWidth - containerRef.current.clientWidth;
+      const horizontalScrollbarHeight = containerRef.current.offsetHeight - containerRef.current.clientHeight;
       if (pinnedThs.length > 0) {
         const leftPinnedThs = [];
         const rightPinnedThs = [];
@@ -26187,12 +26189,18 @@ const usePinnedTableBackgroundStyle = (containerRef) => {
         });
         const leftPinnedWidth = leftPinnedThs.reduce((acc, th) => acc + th.clientWidth, 0);
         const rightPinnedWidth = rightPinnedThs.reduce((acc, th) => acc + th.clientWidth, 0);
-        containerRef.current.style.backgroundPosition = `${leftPinnedWidth}px 0, calc(100% - ${rightPinnedWidth}px) 0, ${leftPinnedWidth}px 0, calc(100% - ${rightPinnedWidth}px) 0`;
+        containerRef.current.style.backgroundPosition = `${leftPinnedWidth}px 0,
+          calc(100% - ${rightPinnedWidth}px) 0, 
+          ${leftPinnedWidth}px ${-horizontalScrollbarHeight}px,
+          calc(100% - ${rightPinnedWidth + verticalScrollbarWidth}px) ${-horizontalScrollbarHeight}px`;
+      } else {
+        containerRef.current.style.backgroundPosition = `0 0, 100% 0, 0 ${-horizontalScrollbarHeight}px, 
+          calc(100% - ${verticalScrollbarWidth}px) ${-horizontalScrollbarHeight}px`;
       }
     }
   });
 };
-const usePinnedTableHeadStyle = (containerRef) => {
+const usePinnedTableHeadStyle = (containerRef, maxHeight) => {
   React.useLayoutEffect(() => {
     const container = containerRef.current;
     const headElement = container == null ? void 0 : container.querySelector("thead");
@@ -26205,8 +26213,8 @@ const usePinnedTableHeadStyle = (containerRef) => {
     let scrollableParent = null;
     const resetAppliedStyles = () => {
       if (headElement) {
-        headElement.style.position = null;
-        headElement.style.top = null;
+        headElement.style.position = maxHeight ? "sticky" : null;
+        headElement.style.top = maxHeight ? "0" : null;
         headElement.style.overflow = null;
         headElement.style.maxWidth = null;
         headElement.style.width = null;
@@ -26244,7 +26252,8 @@ const usePinnedTableHeadStyle = (containerRef) => {
         headElement.style.position = "fixed";
         headElement.style.top = `${topPosition}px`;
         headElement.style.overflow = "hidden";
-        const headElementWidth = `${containerRect.width}px`;
+        const verticalScrollbarWidth = containerRef.current.offsetWidth - containerRef.current.clientWidth;
+        const headElementWidth = `${containerRect.width - verticalScrollbarWidth}px`;
         headElement.style.maxWidth = headElementWidth;
         headElement.style.width = headElementWidth;
         headElement.style.minWidth = headElementWidth;
@@ -26299,6 +26308,52 @@ const usePinnedTableHeadStyle = (containerRef) => {
     };
   });
 };
+const useMaxHeightTableStyle = (containerRef, maxHeight) => {
+  const applyVerticalScrollShadow = () => {
+    const container = containerRef.current;
+    const tableHead = container == null ? void 0 : container.querySelector("table > thead");
+    const table = container == null ? void 0 : container.querySelector("table");
+    const shadowTop = container == null ? void 0 : container.querySelector(".shadow--top");
+    const shadowBottom = container == null ? void 0 : container.querySelector(".shadow--bottom");
+    if (tableHead && table && shadowTop && shadowBottom) {
+      shadowBottom.style.left = "0";
+      shadowBottom.style.bottom = "0";
+      shadowTop.style.left = "0";
+      const horizontalScrollbarHeight = container.offsetHeight - (container == null ? void 0 : container.clientHeight);
+      const tableHeight = table.getBoundingClientRect().height;
+      const tableHeadHeight = tableHead.getBoundingClientRect().height;
+      const containerScrollTop = container.scrollTop;
+      const containerScrollBottom = tableHeight + horizontalScrollbarHeight - container.getBoundingClientRect().height - container.scrollTop;
+      const containerScrollLeft = container.scrollLeft;
+      shadowBottom.style.bottom = `${-containerScrollTop}px`;
+      shadowBottom.style.left = `${containerScrollLeft}px`;
+      shadowBottom.style.opacity = containerScrollBottom > 0 ? "1" : "0";
+      shadowTop.style.top = `${containerScrollTop + tableHeadHeight}px`;
+      shadowTop.style.left = `${containerScrollLeft}px`;
+      shadowTop.style.opacity = containerScrollTop > 0 ? "1" : "0";
+    }
+  };
+  React.useLayoutEffect(() => {
+    if (containerRef.current && maxHeight) {
+      const tableHead = containerRef.current.querySelector("table > thead");
+      if (tableHead) {
+        tableHead.style.position = "sticky";
+        tableHead.style.top = "0";
+        tableHead.style.zIndex = "2";
+        tableHead.style.backgroundColor = "#fff";
+      }
+      containerRef.current.addEventListener("scroll", applyVerticalScrollShadow);
+      return () => {
+        containerRef.current.removeEventListener("scroll", applyVerticalScrollShadow);
+      };
+    }
+  }, []);
+  React.useLayoutEffect(() => {
+    if (containerRef.current && maxHeight) {
+      applyVerticalScrollShadow();
+    }
+  });
+};
 const propsDoc$13 = {
   controlCell: "boolean",
   currentSort: "Array<SortedColumn>",
@@ -26492,12 +26547,16 @@ Object.assign(SpsThead, {
 const propsDoc$10 = {
   sort: "SortedColumn",
   onSortChange: "SortChangeHandler",
-  selectable: "boolean"
+  selectable: "boolean",
+  maxHeightPx: "number",
+  maxHeightRem: "number"
 };
 const propTypes$13 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   onSortChange: fun(),
   sort: propTypes$1O.exports.arrayOf(impl()),
-  selectable: propTypes$1O.exports.bool
+  selectable: propTypes$1O.exports.bool,
+  maxHeightPx: propTypes$1O.exports.number,
+  maxHeightRem: propTypes$1O.exports.number
 });
 function SpsTable(props2) {
   const _a = props2, {
@@ -26506,14 +26565,18 @@ function SpsTable(props2) {
     onSortChange,
     sort,
     "data-testid": testId,
-    unsafelyReplaceClassName
+    unsafelyReplaceClassName,
+    maxHeightPx,
+    maxHeightRem
   } = _a, rest = __objRest(_a, [
     "children",
     "className",
     "onSortChange",
     "sort",
     "data-testid",
-    "unsafelyReplaceClassName"
+    "unsafelyReplaceClassName",
+    "maxHeightPx",
+    "maxHeightRem"
   ]);
   const [currentSort, setSort] = React.useState(sort);
   const updateSortingDisplay = (newSort) => {
@@ -26535,13 +26598,21 @@ function SpsTable(props2) {
     currentSort
   };
   const classes = clsx(unsafelyReplaceClassName || "sps-table-container", className);
+  const maxHeight = maxHeightPx ? maxHeightPx / 16 : maxHeightRem;
+  const tableContainerInlineStyles = maxHeight ? { maxHeight: `${maxHeight}rem` } : {};
   const containerRef = React.useRef(null);
+  useMaxHeightTableStyle(containerRef, maxHeight);
   usePinnedTableBackgroundStyle(containerRef);
-  usePinnedTableHeadStyle(containerRef);
+  usePinnedTableHeadStyle(containerRef, maxHeight);
   return /* @__PURE__ */ React.createElement("div", {
     ref: containerRef,
-    className: classes
-  }, /* @__PURE__ */ React.createElement("table", __spreadValues({
+    className: classes,
+    style: tableContainerInlineStyles
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "sps-table__shadow shadow--top"
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "sps-table__shadow shadow--bottom"
+  }), /* @__PURE__ */ React.createElement("table", __spreadValues({
     className: "sps-table",
     role: "table",
     "data-testid": `${testId}`

package/lib/table/SpsTable.d.ts

@@ -4,6 +4,8 @@ declare const propTypes: {
     onSortChange: PropTypes.Requireable<SortChangeHandler>;
     sort: PropTypes.Requireable<SortedColumn[]>;
     selectable: PropTypes.Requireable<boolean>;
+    maxHeightPx: PropTypes.Requireable<number>;
+    maxHeightRem: PropTypes.Requireable<number>;
     children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     className: PropTypes.Requireable<string>;
     "data-testid": PropTypes.Requireable<string>;

package/lib/table/usePinnedStyles.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
 export declare const usePinnedCellStyle: (isPinned: boolean, elementRef: React.MutableRefObject<HTMLTableHeaderCellElement | HTMLTableCellElement>) => void;
 export declare const usePinnedTableBackgroundStyle: (containerRef: React.MutableRefObject<HTMLDivElement>) => void;
-export declare const usePinnedTableHeadStyle: (containerRef: React.MutableRefObject<HTMLDivElement>) => void;
+export declare const usePinnedTableHeadStyle: (containerRef: React.MutableRefObject<HTMLDivElement>, maxHeight: number) => void;
+export declare const useMaxHeightTableStyle: (containerRef: React.MutableRefObject<HTMLDivElement>, maxHeight: number) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.22.0",
+  "version": "5.23.0",
   "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.22.0",
-    "@spscommerce/ds-illustrations": "5.22.0",
-    "@spscommerce/ds-shared": "5.22.0",
-    "@spscommerce/positioning": "5.22.0",
-    "@spscommerce/utils": "5.22.0",
+    "@spscommerce/ds-colors": "5.23.0",
+    "@spscommerce/ds-illustrations": "5.23.0",
+    "@spscommerce/ds-shared": "5.23.0",
+    "@spscommerce/positioning": "5.23.0",
+    "@spscommerce/utils": "5.23.0",
     "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.22.0",
-    "@spscommerce/ds-illustrations": "5.22.0",
-    "@spscommerce/ds-shared": "5.22.0",
-    "@spscommerce/positioning": "5.22.0",
-    "@spscommerce/utils": "5.22.0",
+    "@spscommerce/ds-colors": "5.23.0",
+    "@spscommerce/ds-illustrations": "5.23.0",
+    "@spscommerce/ds-shared": "5.23.0",
+    "@spscommerce/positioning": "5.23.0",
+    "@spscommerce/utils": "5.23.0",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",