smartsell-ui-kit 0.1.6 → 0.1.7

package/dist/index.d.cts

@@ -320,6 +320,11 @@ interface SharedTableProps<TItem> {
     actions?: TableActionSource<TItem>;
     stickyActionsColumn?: boolean;
     maxInlineActions?: number;
+    /**
+     * Viewport width (in px) below which the table switches from the desktop
+     * table layout to the stacked mobile card layout. Defaults to 768 so the
+     * table collapses in sync with the host app's mobile breakpoint.
+     */
     collapseBelow?: number;
     searchable?: boolean;
     showSearch?: boolean;

package/dist/index.d.ts

@@ -320,6 +320,11 @@ interface SharedTableProps<TItem> {
     actions?: TableActionSource<TItem>;
     stickyActionsColumn?: boolean;
     maxInlineActions?: number;
+    /**
+     * Viewport width (in px) below which the table switches from the desktop
+     * table layout to the stacked mobile card layout. Defaults to 768 so the
+     * table collapses in sync with the host app's mobile breakpoint.
+     */
     collapseBelow?: number;
     searchable?: boolean;
     showSearch?: boolean;

package/dist/index.js

@@ -3804,7 +3804,7 @@ import { useEffect as useEffect8, useId as useId4, useRef as useRef6, useState a
 
 // src/componentsBase/table/utils.ts
 import { isValidElement as isValidElement3 } from "react";
-var DEFAULT_COLLAPSE_BELOW = 420;
+var DEFAULT_COLLAPSE_BELOW = 768;
 var DEFAULT_MAX_INLINE_ACTIONS = 2;
 var DEFAULT_PAGE_SIZE = 10;
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50];
@@ -4327,7 +4327,7 @@ function TableBase({
   const alternateSurfaceColor = theme.colors.background;
   const scrollRegionId = useId4().replace(/:/g, "");
   const containerRef = useRef6(null);
-  const [containerWidth, setContainerWidth] = useState7(null);
+  const [viewportWidth, setViewportWidth] = useState7(null);
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState7(false);
   const resolvedLabels = mergeTableLabels({
     ...labels != null ? labels : {},
@@ -4335,8 +4335,8 @@ function TableBase({
   });
   const normalizedPage = clampPage(page, totalPages);
   const normalizedPageSizeOptions = sanitizePageSizeOptions(pageSizeOptions, pageSize);
-  const isCollapsed = containerWidth !== null ? containerWidth < collapseBelow : false;
-  const mobileGridColumnCount = containerWidth !== null && containerWidth < 520 ? 1 : 2;
+  const isCollapsed = viewportWidth !== null ? viewportWidth < collapseBelow : false;
+  const mobileGridColumnCount = viewportWidth !== null && viewportWidth < 520 ? 1 : 2;
   const canGoToPreviousPage = normalizedPage > 1;
   const canGoToNextPage = normalizedPage < Math.max(1, totalPages);
   const canGoToFirstPage = canGoToPreviousPage;
@@ -4371,31 +4371,16 @@ function TableBase({
     borderLeft: `1px solid ${softBorderColor}`
   });
   useEffect8(() => {
-    const element = containerRef.current;
-    if (!element) {
+    if (typeof window === "undefined") {
       return;
     }
-    const setWidthFromElement = (nextWidth) => {
-      const measuredWidth = nextWidth != null ? nextWidth : element.getBoundingClientRect().width;
-      setContainerWidth(measuredWidth > 0 ? measuredWidth : null);
+    const updateViewportWidth = () => {
+      setViewportWidth(window.innerWidth);
     };
-    setWidthFromElement();
-    if (typeof ResizeObserver === "undefined") {
-      const handleResize = () => {
-        setWidthFromElement(window.innerWidth);
-      };
-      window.addEventListener("resize", handleResize);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-      };
-    }
-    const observer = new ResizeObserver((entries) => {
-      const [entry] = entries;
-      setWidthFromElement(entry == null ? void 0 : entry.contentRect.width);
-    });
-    observer.observe(element);
+    updateViewportWidth();
+    window.addEventListener("resize", updateViewportWidth);
     return () => {
-      observer.disconnect();
+      window.removeEventListener("resize", updateViewportWidth);
     };
   }, []);
   const actionButtonBaseStyle = (tone, disabled, iconOnly) => ({
@@ -4652,7 +4637,7 @@ function TableBase({
         !hasRows && (!loading || error) ? renderEmptyState() : null,
         hasRows ? isCollapsed ? /* @__PURE__ */ jsx13("div", { role: "list", "aria-label": ariaLabel, className: "flex flex-col gap-3.5", children: items.map((item, rowIndex) => {
           const rowActions = renderActions(item, rowIndex);
-          const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : alternateSurfaceColor;
+          const rowBackgroundColor = theme.colors.surface;
           return /* @__PURE__ */ jsxs11(
             "article",
             {
@@ -4824,7 +4809,7 @@ function TableBase({
                           width: column.width,
                           minWidth: column.minWidth
                         },
-                        children: column.label
+                        children: !column.hideLabel ? column.label : null
                       },
                       getColumnKey(column, columnIndex)
                     );