@spscommerce/ds-react 6.21.0 → 6.22.0

package/lib/index.es.js

@@ -25884,10 +25884,42 @@ const useColumnResizer = ({
   const isResizeable = !!resizeable && !!resizeKey;
   const initialColumnWidth = isResizeable ? resizeState == null ? void 0 : resizeState[resizeKey] : void 0;
   React.useLayoutEffect(() => {
+    var _a, _b;
     let start = null;
     let currentColumnWidth = initialColumnWidth;
+    let resizerPosition = 0;
     const table = findTableElementParent(tableHeaderRef.current);
-    function applyResize() {
+    const resizer = (_a = tableHeaderRef.current) == null ? void 0 : _a.querySelector(".sps-table__column-resizer");
+    const resizerGuide = (_b = tableHeaderRef.current) == null ? void 0 : _b.querySelector(".sps-table__column-resizer-guide");
+    function handleDragStart() {
+      if (tableHeaderRef.current && start) {
+        if (resizer) {
+          resizer.style.backgroundColor = colors.blue200;
+        }
+        if (resizerGuide && table) {
+          resizerGuide.style.height = `${table.getBoundingClientRect().height}px`;
+          resizerGuide.style.display = "block";
+        }
+        if (table) {
+          const tableHeaders = table.querySelectorAll("thead > tr > th");
+          for (let i = 0; i < tableHeaders.length; i += 1) {
+            const tableHeaderResizer = tableHeaders[i].querySelector(".sps-table__column-resizer");
+            tableHeaders[i].style.cursor = "col-resize";
+            if (tableHeaders[i] !== tableHeaderRef.current && tableHeaderResizer) {
+              tableHeaders[i].classList.remove("sps-table__header--resizeable");
+              tableHeaderResizer.style.display = "none";
+            }
+          }
+        }
+      }
+    }
+    function handleDragging() {
+      if (tableHeaderRef.current && start && resizer && resizerGuide) {
+        resizer.style.right = `${resizerPosition}px`;
+        resizerGuide.style.right = `${resizerPosition}px`;
+      }
+    }
+    function handleDragEnd() {
       if (tableHeaderRef.current) {
         const width = currentColumnWidth ? `${currentColumnWidth}px` : null;
         tableHeaderRef.current.style.width = width;
@@ -25898,11 +25930,11 @@ const useColumnResizer = ({
           tableHeaderBody.style.overflow = width ? "hidden" : null;
           tableHeaderBody.style.textOverflow = width ? "ellipsis" : null;
         }
-        if (start) {
-          const resizer = tableHeaderRef.current.querySelector(".sps-table__column-resizer");
-          if (resizer) {
-            resizer.style.backgroundColor = colors.blue200;
-          }
+        if (resizer && resizerGuide) {
+          resizer.style.right = "0";
+          resizer.style.backgroundColor = null;
+          resizerGuide.style.right = "0";
+          resizerGuide.style.display = "none";
         }
         if (!tableHeaderRef.current.classList.contains("sps-table__cell--pinned")) {
           tableHeaderRef.current.style.position = "relative";
@@ -25911,6 +25943,12 @@ const useColumnResizer = ({
           const tableHeaders = table.querySelectorAll("thead > tr > th");
           for (let i = 0; i < tableHeaders.length; i += 1) {
             const tableHeaderBody2 = tableHeaders[i].querySelector(".sps-table__header-cell-body");
+            const tableHeaderResizer = tableHeaders[i].querySelector(".sps-table__column-resizer");
+            tableHeaders[i].style.cursor = "default";
+            if (tableHeaders[i] !== tableHeaderRef.current && tableHeaderResizer) {
+              tableHeaders[i].classList.add("sps-table__header--resizeable");
+              tableHeaderResizer.style.display = "block";
+            }
             if (tableHeaderBody2 && !tableHeaderBody2.title) {
               tableHeaderBody2.title = tableHeaderBody2.textContent;
             }
@@ -25933,19 +25971,21 @@ const useColumnResizer = ({
       if (!tableHeaderRef.current) {
         return;
       }
+      event.preventDefault();
       start = event.clientX;
       currentColumnWidth = tableHeaderRef.current.clientWidth;
-      applyResize();
+      handleDragStart();
     };
     const dragListener = (event) => {
       if (!start || !tableHeaderRef.current) {
         return;
       }
-      const delta = Math.max(Math.min(start - event.clientX, 5), -5);
+      const delta = Math.max(Math.min(start - event.clientX, 40), -40);
       if (delta !== 0) {
         start = event.clientX;
-        currentColumnWidth = Math.max(tableHeaderRef.current.clientWidth - delta, 40);
-        applyResize();
+        resizerPosition += delta;
+        currentColumnWidth = Math.max(currentColumnWidth - delta, 40);
+        handleDragging();
       }
     };
     const dragEndListener = () => {
@@ -25953,16 +25993,13 @@ const useColumnResizer = ({
         return;
       }
       start = null;
-      applyResize();
+      resizerPosition = 0;
+      handleDragEnd();
       setSingleResizeState(resizeKey, currentColumnWidth);
-      const resizer = tableHeaderRef.current.querySelector(".sps-table__column-resizer");
-      if (resizer) {
-        resizer.style.backgroundColor = null;
-      }
     };
     const doubleClickListener = () => {
       currentColumnWidth = null;
-      applyResize();
+      handleDragEnd();
       setSingleResizeState(resizeKey, currentColumnWidth);
     };
     if (isResizeable && resizerRef.current) {
@@ -25972,7 +26009,7 @@ const useColumnResizer = ({
       window.addEventListener("mousemove", dragListener);
       window.addEventListener("dragend", dragEndListener);
       window.addEventListener("mouseup", dragEndListener);
-      applyResize();
+      handleDragEnd();
     }
     return () => {
       if (resizerRef.current) {
@@ -26055,10 +26092,12 @@ function SpsTableHeader(_C) {
     onClick: flipSort,
     tabIndex: sortKey ? 0 : null,
     onKeyDown: handleKeyEvent
-  }, children), isResizeable && /* @__PURE__ */ React.createElement("span", {
+  }, children), isResizeable && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
     ref: resizerRef,
     className: clsx("sps-table__column-resizer")
-  }));
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: clsx("sps-table__column-resizer-guide")
+  })));
 }
 Object.assign(SpsTableHeader, {
   props: propsDoc$X,
@@ -38839,7 +38878,7 @@ function SpsMultiValueTextInput(_ma) {
     "data-testid": `${testId}__multi-value-text-input`,
     value: state.searchText,
     className: "sps-text-input__input",
-    placeholder: state.searchText.length === 0 ? placeholder : void 0,
+    placeholder: state.searchText.length === 0 && value.length === 0 ? placeholder : void 0,
     id: controlId,
     onChange: handleChange,
     onKeyDown: handleKeyDown,

package/package.json

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