@czi-sds/components 23.5.0 → 23.6.0

package/dist/index.cjs.js

@@ -445,12 +445,12 @@ const createAppThemeBorders = (colors, isDarkMode) => {
             default: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default"),
             focused: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default"),
             hover: createBorder("indigo", isDarkMode ? 700 : 600, "solid", "default"),
-            open: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default"),
+            open: createBorder("indigo", isDarkMode ? 800 : 700, "solid", "default"),
             pressed: createBorder("indigo", isDarkMode ? 800 : 700, "solid", "default"),
-            selected: createBorder("indigo", isDarkMode ? 600 : 500, "solid", "default")
+            selected: createBorder("indigo", isDarkMode ? 800 : 700, "solid", "default")
         },
         base: {
-            default: createBorder("gray", 500, "solid", "default"),
+            default: createBorder("gray", 600, "solid", "default"),
             disabled: createBorder("gray", 300, "solid", "default"),
             divider: createBorder("gray", 200, "solid", "default"),
             dividerOnDark: createBorder("gray", isDarkMode ? 200 : 700, "solid", "default"),
@@ -480,9 +480,9 @@ const createAppThemeBorders = (colors, isDarkMode) => {
             thick: createBorder("red", 600, "solid", "thick")
         },
         neutral: {
-            default: createBorder("gray", 500, "solid", "default"),
-            extraThick: createBorder("gray", 500, "solid", "extraThick"),
-            thick: createBorder("gray", 500, "solid", "thick")
+            default: createBorder("gray", 700, "solid", "default"),
+            extraThick: createBorder("gray", 700, "solid", "extraThick"),
+            thick: createBorder("gray", 700, "solid", "thick")
         },
         none: "none",
         notice: {
@@ -6474,7 +6474,7 @@ const useDetectUserTabbing = (ref) => {
  * @see https://mui.com/material-ui/react-text-field/
  */
 const InputSearch = React.forwardRef(function InputSearch(props, ref) {
-    const { label, id, placeholder, sdsStyle = "square", intent = "default", handleSubmit, onChange, disabled, classes = EMPTY_OBJECT, className, ...rest } = props;
+    const { label, id, placeholder, sdsStyle = "square", intent = "default", handleSubmit, onChange, disabled, classes = EMPTY_OBJECT, className, value: propValue, ...rest } = props;
     const { root: rootClassName, label: labelClassName, input: inputClassName, endAdornment: endAdornmentClassName, startAdornment: startAdornmentClassName, clearButton: clearButtonClassName, searchButton: searchButtonClassName, } = classes;
     /**
      * (masoudmanson): In case that the ref is not provided, we will create a new one.
@@ -6489,14 +6489,20 @@ const InputSearch = React.forwardRef(function InputSearch(props, ref) {
      * user is tabbing, we can apply different styles for :focus and :focus-visible states.
      */
     useDetectUserTabbing((ref ? ref : inputRef));
-    const [value, setValue] = React.useState("");
+    const [internalValue, setInternalValue] = React.useState("");
+    const isControlled = propValue !== undefined;
+    const value = isControlled ? String(propValue ?? "") : internalValue;
     const handleChange = (event) => {
-        setValue(event.target.value);
+        if (!isControlled) {
+            setInternalValue(event.target.value);
+        }
         if (onChange)
             onChange(event);
     };
     const clearInput = () => {
-        setValue("");
+        if (!isControlled) {
+            setInternalValue("");
+        }
         if (handleSubmit)
             handleSubmit("");
         /**
@@ -9380,18 +9386,31 @@ const TableRow = React.forwardRef((props, ref) => {
 
 const StyledTableHeader$1 = styled__default.default("thead") `
   ${(props) => {
+    const { hasFilterRow } = props;
     const semanticColors = getSemanticColors(props);
     return `
       border-bottom: solid 2px ${semanticColors?.base?.borderSecondary};
       margin: 0;
       padding: 0;
+
+      ${hasFilterRow
+        ? `
+        > tr:first-of-type {
+          border-bottom: none;
+
+          :after {
+            display: none !important;
+          }
+        }
+      `
+        : ""}
     `;
 }}
 `;
 
 const TableHeader = React.forwardRef((props, ref) => {
-    const { children } = props;
-    return (jsxRuntime.jsx(StyledTableHeader$1, __assign({ ref: ref }, props, { children: jsxRuntime.jsx(TableRow, { hover: false, shouldShowTooltipOnHover: false, children: children }) })));
+    const { children, filterRow } = props;
+    return (jsxRuntime.jsxs(StyledTableHeader$1, __assign({ ref: ref, hasFilterRow: !!filterRow }, props, { children: [jsxRuntime.jsx(TableRow, { hover: false, shouldShowTooltipOnHover: false, children: children }), filterRow] })));
 });
 
 const contentPositionMapping = {
@@ -9435,7 +9454,6 @@ const ShouldTruncate$1 = () => {
 };
 const StyledTableHeader = styled__default.default.div `
   ${fontHeaderS}
-  ${focusVisibleA11yStyle}
 
   ${(props) => {
     const { active = false, horizontalAlign = "left", hover = true } = props;
@@ -9448,6 +9466,7 @@ const StyledTableHeader = styled__default.default.div `
         ? semanticColors?.accent?.foregroundInteraction
         : semanticColors?.base?.textPrimary;
     return `
+      outline: none;
       color: ${defaultColor};
       padding: ${spaces?.m}px !important;
       text-align: ${horizontalAlign};
@@ -10018,12 +10037,12 @@ const InputCheckbox = (props) => {
 
 const StyledCellComponentData = styled__default.default.div `
   ${fontBodyS$1}
-  ${focusVisibleA11yStyle}
 
   ${(props) => {
     const spaces = getSpaces(props);
     const { horizontalAlign = "left", verticalAlign = "top" } = props;
     return `
+      outline: none;
       align-items: center;
       text-align: ${horizontalAlign};
       vertical-align: ${verticalAlign};
@@ -10135,6 +10154,104 @@ const StyledTableWrapper = styled__default.default.div `
           }
         }
       }
+
+      td,
+      th {
+        --pinned-gradient-base: transparent;
+        --pinned-gradient-bg: ${semanticColors?.base?.backgroundPrimary};
+        --pinned-gradient-overlay: transparent;
+      }
+
+      tbody tr:hover td,
+      tbody tr:hover th {
+        --pinned-gradient-overlay: ${semanticColors?.base
+        ?.fillPrimaryInteraction};
+      }
+
+      tbody tr[aria-selected="true"] td,
+      tbody tr[aria-selected="true"] th {
+        --pinned-gradient-bg: ${semanticColors?.accent?.surfaceSecondary};
+      }
+
+      ${sdsStyle === "striped" &&
+        `
+        tbody tr:nth-of-type(odd) td,
+        tbody tr:nth-of-type(odd) th {
+          --pinned-gradient-base: ${semanticColors?.base?.backgroundPrimary};
+          --pinned-gradient-bg: ${semanticColors?.base?.backgroundSecondary};
+        }
+
+        tbody tr:nth-of-type(odd):hover td,
+        tbody tr:nth-of-type(odd):hover th {
+          --pinned-gradient-base: transparent;
+          --pinned-gradient-bg: ${semanticColors?.base?.backgroundPrimary};
+        }
+
+        tbody tr[aria-selected="true"]:nth-of-type(odd) td,
+        tbody tr[aria-selected="true"]:nth-of-type(odd) th {
+          --pinned-gradient-base: transparent;
+          --pinned-gradient-bg: ${semanticColors?.accent?.surfaceSecondary};
+        }
+
+        tbody tr[aria-selected="true"]:nth-of-type(odd):hover td,
+        tbody tr[aria-selected="true"]:nth-of-type(odd):hover th {
+          --pinned-gradient-base: transparent;
+          --pinned-gradient-bg: ${semanticColors?.accent?.surfaceSecondary};
+        }
+      `}
+
+      [data-pinned-edge]::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 24px;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+
+      [data-pinned-edge="left"]::after {
+        right: 0;
+        transform: translateX(100%);
+        background:
+          linear-gradient(
+            var(--pinned-gradient-overlay),
+            var(--pinned-gradient-overlay)
+          ),
+          linear-gradient(var(--pinned-gradient-bg), var(--pinned-gradient-bg)),
+          linear-gradient(
+            var(--pinned-gradient-base),
+            var(--pinned-gradient-base)
+          );
+        -webkit-mask-image: linear-gradient(to right, black, transparent);
+        mask-image: linear-gradient(to right, black, transparent);
+      }
+
+      [data-pinned-edge="right"]::after {
+        left: 0;
+        transform: translateX(-100%);
+        background:
+          linear-gradient(
+            var(--pinned-gradient-overlay),
+            var(--pinned-gradient-overlay)
+          ),
+          linear-gradient(var(--pinned-gradient-bg), var(--pinned-gradient-bg)),
+          linear-gradient(
+            var(--pinned-gradient-base),
+            var(--pinned-gradient-base)
+          );
+        -webkit-mask-image: linear-gradient(to left, black, transparent);
+        mask-image: linear-gradient(to left, black, transparent);
+      }
+
+      &[data-scrolled-left="true"] [data-pinned-edge="left"]::after {
+        opacity: 1;
+      }
+
+      &[data-scrolled-right="true"] [data-pinned-edge="right"]::after {
+        opacity: 1;
+      }
     `;
 }}
 `;
@@ -10186,6 +10303,38 @@ const StyledPaginationWrapper = styled__default.default.div `
 const StyledSelectionCell = styled__default.default(CellComponent) `
   line-height: 22px !important;
 `;
+const StyledFilterRow = styled__default.default("tr") `
+  ${(props) => {
+    const semanticColors = getSemanticColors(props);
+    return `
+      background-color: ${semanticColors?.base?.backgroundPrimary};
+      border: none;
+      box-shadow: none;
+
+      td, th {
+        background-color: ${semanticColors?.base?.backgroundPrimary};
+      }
+
+      &:after {
+        display: none !important;
+      }
+
+      &:hover {
+        background-color: ${semanticColors?.base?.backgroundPrimary};
+      }
+    `;
+}}
+`;
+const StyledFilterCell = styled__default.default("th") `
+  ${(props) => {
+    const spaces = getSpaces(props);
+    return `
+      padding: 0 ${spaces?.s}px ${spaces?.s}px;
+      vertical-align: middle;
+      width: 100%;
+    `;
+}}
+`;
 
 const SELECT_COLUMN_ID = "SdsTableSelectColumn";
 function getSize(size = 100, max = Number.MAX_SAFE_INTEGER, min = 40) {
@@ -10281,11 +10430,78 @@ const getCommonPinningStyles = (column, table) => {
     };
 };
 
+/**
+ * Manages gradient vignettes on the inner edges of pinned columns.
+ *
+ * Identifies which columns sit at the boundary of left/right pinned groups
+ * and toggles scroll-aware data attributes on the wrapper so the CSS
+ * gradients in StyledTableWrapper only appear while content scrolls
+ * underneath the pinned columns.
+ */
+function usePinnedColumnGradient(table, columns) {
+    const tableWrapperRef = React.useRef(null);
+    const { lastLeftPinnedColumnId, firstRightPinnedColumnId } = React.useMemo(() => {
+        const allCols = table.getAllColumns();
+        const leftPinned = allCols.filter((col) => col.columnDef.meta?.pinning === "left");
+        const rightPinned = allCols.filter((col) => col.columnDef.meta?.pinning === "right");
+        return {
+            firstRightPinnedColumnId: rightPinned.length > 0 ? rightPinned[0].id : null,
+            lastLeftPinnedColumnId: leftPinned.length > 0 ? leftPinned[leftPinned.length - 1].id : null
+        };
+        // (masoudmanson): `columns` is included as a dependency even though only
+        // `table.getAllColumns()`is called inside the callback. The TanStack
+        // Table `table` object can be a stable reference that doesn't change
+        // identity when column definitions change, so `columns` acts as a
+        // reactivity signal to ensure this memo recomputes.
+        //
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [table, columns]);
+    const getPinnedEdge = React.useCallback((columnId) => {
+        if (columnId === lastLeftPinnedColumnId)
+            return "left";
+        if (columnId === firstRightPinnedColumnId)
+            return "right";
+        return undefined;
+    }, [lastLeftPinnedColumnId, firstRightPinnedColumnId]);
+    React.useEffect(() => {
+        const wrapper = tableWrapperRef.current;
+        if (!wrapper)
+            return;
+        if (!lastLeftPinnedColumnId && !firstRightPinnedColumnId)
+            return;
+        const updateScrollState = () => {
+            const { scrollLeft, scrollWidth, clientWidth } = wrapper;
+            const hasHorizontalScroll = scrollWidth > clientWidth;
+            if (scrollLeft > 0) {
+                wrapper.setAttribute("data-scrolled-left", "true");
+            }
+            else {
+                wrapper.removeAttribute("data-scrolled-left");
+            }
+            if (hasHorizontalScroll && scrollLeft < scrollWidth - clientWidth - 1) {
+                wrapper.setAttribute("data-scrolled-right", "true");
+            }
+            else {
+                wrapper.removeAttribute("data-scrolled-right");
+            }
+        };
+        updateScrollState();
+        wrapper.addEventListener("scroll", updateScrollState, { passive: true });
+        const resizeObserver = new ResizeObserver(() => updateScrollState());
+        resizeObserver.observe(wrapper);
+        return () => {
+            wrapper.removeEventListener("scroll", updateScrollState);
+            resizeObserver.disconnect();
+        };
+    }, [lastLeftPinnedColumnId, firstRightPinnedColumnId]);
+    return { getPinnedEdge, tableWrapperRef };
+}
+
 // Create context for row hover state
 const RowHoverContext = React.createContext({
     isRowHovered: false
 });
-const PreComposedTable = ({ data, columns, border = true, enableSorting = false, enableRowSelection = false, shouldPinSelectRowToLeft = true, enablePagination = false, enableColumnFiltering = false, enableGlobalFiltering = false, paginationConfig, className, style, tableWidth = "100%", onRowSelect, tableRowProps, sdsStyle = "lined", }) => {
+const PreComposedTableInner = ({ data, columns, border = true, enableSorting = false, enableRowSelection = false, shouldPinSelectRowToLeft = true, enablePagination = false, enableColumnFiltering = false, enableGlobalFiltering = false, paginationConfig, className, style, tableWidth = "100%", onRowSelect, tableRowProps, sdsStyle = "lined", tableOptions, }, ref) => {
     const [sorting, setSorting] = React.useState([]);
     const [rowSelection, setRowSelection] = React.useState({});
     const [columnVisibility, setColumnVisibility] = React.useState({});
@@ -10357,10 +10573,35 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
             ...columnsWithoutSelection,
         ];
     }, [columns, enableRowSelection, shouldPinSelectRowToLeft]);
+    const { onSortingChange: externalOnSortingChange, onRowSelectionChange: externalOnRowSelectionChange, onColumnVisibilityChange: externalOnColumnVisibilityChange, onColumnPinningChange: externalOnColumnPinningChange, onGlobalFilterChange: externalOnGlobalFilterChange, onPaginationChange: externalOnPaginationChange, } = tableOptions ?? {};
+    const handleSortingChange = React.useCallback((updater) => {
+        setSorting(updater);
+        externalOnSortingChange?.(updater);
+    }, [externalOnSortingChange]);
+    const handleRowSelectionChange = React.useCallback((updater) => {
+        setRowSelection(updater);
+        externalOnRowSelectionChange?.(updater);
+    }, [externalOnRowSelectionChange]);
+    const handleColumnVisibilityChange = React.useCallback((updater) => {
+        setColumnVisibility(updater);
+        externalOnColumnVisibilityChange?.(updater);
+    }, [externalOnColumnVisibilityChange]);
+    const handleColumnPinningChange = React.useCallback((updater) => {
+        setColumnPinning(updater);
+        externalOnColumnPinningChange?.(updater);
+    }, [externalOnColumnPinningChange]);
+    const handleGlobalFilterChange = React.useCallback((updater) => {
+        setGlobalFilter(updater);
+        externalOnGlobalFilterChange?.(updater);
+    }, [externalOnGlobalFilterChange]);
+    const handlePaginationChange = React.useCallback((updater) => {
+        setPagination(updater);
+        externalOnPaginationChange?.(updater);
+    }, [externalOnPaginationChange]);
     const table = reactTable.useReactTable({
+        ...tableOptions,
         columns: tableColumns,
         data,
-        debugTable: true,
         enableColumnFilters: enableColumnFiltering,
         enableGlobalFilter: enableGlobalFiltering,
         enableRowSelection: enableRowSelection,
@@ -10369,21 +10610,23 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
         getFilteredRowModel: reactTable.getFilteredRowModel(),
         getPaginationRowModel: reactTable.getPaginationRowModel(),
         getSortedRowModel: reactTable.getSortedRowModel(),
-        onColumnPinningChange: setColumnPinning,
-        onColumnVisibilityChange: setColumnVisibility,
-        onGlobalFilterChange: setGlobalFilter,
-        onPaginationChange: setPagination,
-        onRowSelectionChange: setRowSelection,
-        onSortingChange: setSorting,
+        onColumnPinningChange: handleColumnPinningChange,
+        onColumnVisibilityChange: handleColumnVisibilityChange,
+        onGlobalFilterChange: handleGlobalFilterChange,
+        onPaginationChange: handlePaginationChange,
+        onRowSelectionChange: handleRowSelectionChange,
+        onSortingChange: handleSortingChange,
         state: {
             columnPinning,
             columnVisibility,
             globalFilter,
             pagination,
             rowSelection,
-            sorting
+            sorting,
+            ...tableOptions?.state
         }
     });
+    React.useImperativeHandle(ref, () => ({ table }), [table]);
     const createInitialPinning = React.useCallback(() => {
         const initialPinning = {};
         tableColumns.forEach((column) => {
@@ -10436,6 +10679,7 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
             resizeObserver.disconnect();
         };
     }, [headers, table]);
+    const { tableWrapperRef, getPinnedEdge } = usePinnedColumnGradient(table, tableColumns);
     const renderCell = (cell, row) => {
         const isRowHovered = hoveredRowId === row.id;
         const isPinned = cell.column.columnDef.meta?.pinning;
@@ -10466,7 +10710,7 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
                     : cell.column.columnDef.meta?.verticalAlign }));
         }
         if (isPinned) {
-            return (jsxRuntime.jsx(RowHoverContext.Provider, { value: { isRowHovered }, children: jsxRuntime.jsx("td", { style: {
+            return (jsxRuntime.jsx(RowHoverContext.Provider, { value: { isRowHovered }, children: jsxRuntime.jsx("td", { "data-pinned-edge": getPinnedEdge(cell.column.id), style: {
                         ...pinnedStyle,
                         width: `${cell.column.getSize()}px`,
                         verticalAlign: cell.column.columnDef.meta?.verticalAlign
@@ -10477,16 +10721,41 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
                     width: `${cell.column.getSize()}px`
                 }, children: cellContent }) }, cell.id));
     };
+    const renderFilterCell = (header) => {
+        const column = header.column;
+        const isPinned = column.columnDef.meta?.pinning;
+        const pinnedStyle = getCommonPinningStyles(column, table);
+        const isSelectionColumn = column.id === SELECT_COLUMN_ID;
+        const cellStyle = {
+            ...(isPinned ? pinnedStyle : {}),
+            width: `${column.getSize()}px`
+        };
+        const pinnedEdge = isPinned ? getPinnedEdge(column.id) : undefined;
+        const customFilter = column.columnDef.meta?.filterComponent;
+        if (customFilter && !isSelectionColumn) {
+            return (jsxRuntime.jsx(StyledFilterCell, { "data-pinned-edge": pinnedEdge, style: cellStyle, children: customFilter({ column, table }) }, `filter-${header.id}`));
+        }
+        const canFilter = column.getCanFilter() && !isSelectionColumn;
+        if (!canFilter) {
+            return (jsxRuntime.jsx(StyledFilterCell, { "data-pinned-edge": pinnedEdge, style: cellStyle }, `filter-${header.id}`));
+        }
+        return (jsxRuntime.jsx(StyledFilterCell, { "data-pinned-edge": pinnedEdge, style: cellStyle, children: jsxRuntime.jsx(InputSearch, { id: `filter-${column.id}`, label: `Filter ${typeof column.columnDef.header === "string" ? column.columnDef.header : column.id}`, placeholder: "Search", sdsStyle: "square", value: column.getFilterValue() ?? "", onChange: (e) => column.setFilterValue(e.target.value || undefined) }) }, `filter-${header.id}`));
+    };
+    const renderFilterRow = () => {
+        const flatHeaders = table.getFlatHeaders();
+        return (jsxRuntime.jsx(StyledFilterRow, { children: flatHeaders.map((header) => renderFilterCell(header)) }));
+    };
     const renderHeader = (header) => {
         const isSortable = enableSorting && header.column.getCanSort();
         const isSorted = header.column.getIsSorted();
         const sortDirection = header.column.getIsSorted();
         const isPinned = header.column.columnDef.meta?.pinning;
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { ref, ...headerCellProps } = header.column.columnDef.meta?.headerCellProps || {};
+        const { ref: headerCellRef, ...headerCellProps } = header.column.columnDef.meta?.headerCellProps || {};
         const pinnedStyle = getCommonPinningStyles(header.column, table);
+        const pinnedEdge = isPinned ? getPinnedEdge(header.column.id) : undefined;
         if (typeof header.column.columnDef.header === "string") {
-            return (jsxRuntime.jsx(CellHeader, __assign({ colSpan: header.colSpan, style: {
+            return (jsxRuntime.jsx(CellHeader, __assign({ colSpan: header.colSpan, "data-pinned-edge": pinnedEdge, style: {
                     ...(isPinned ? pinnedStyle : {}),
                     width: `${header.getSize()}px`
                 }, active: !!isSorted, direction: sortDirection || undefined, hover: isSortable, onClick: header.column.getToggleSortingHandler() }, headerCellProps, { children: header.isPlaceholder ? null : header.column.columnDef.header }), header.id));
@@ -10494,6 +10763,7 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
         else if (header.column.columnDef.header) {
             return reactTable.flexRender(header.column.columnDef.header, {
                 ...header.getContext(),
+                "data-pinned-edge": pinnedEdge,
                 key: header.id,
                 style: {
                     ...(isPinned ? pinnedStyle : {}),
@@ -10503,20 +10773,21 @@ const PreComposedTable = ({ data, columns, border = true, enableSorting = false,
         }
         else {
             // Fallback for undefined header content
-            return (jsxRuntime.jsx(CellHeader, { colSpan: header.colSpan, style: {
+            return (jsxRuntime.jsx(CellHeader, { colSpan: header.colSpan, "data-pinned-edge": pinnedEdge, style: {
                     ...(isPinned ? pinnedStyle : {}),
                     width: `${header.getSize()}px`
                 }, active: !!isSorted, direction: sortDirection || undefined, hover: isSortable, onClick: header.column.getToggleSortingHandler(), children: header.column.id || "Header" }, header.id));
         }
     };
-    return (jsxRuntime.jsxs(StyledTableContainer$1, { ref: tableContainerRef, className: className, style: { width: tableWidth, ...style }, children: [enableGlobalFiltering && (jsxRuntime.jsx("div", { style: { marginBottom: "16px" }, children: jsxRuntime.jsx(StyledInputSearch, { id: "global-search", label: "Search", placeholder: "Search all columns...", value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value) }) })), jsxRuntime.jsx(StyledTableWrapper, { border: border, sdsStyle: sdsStyle, children: jsxRuntime.jsxs(Table, { children: [jsxRuntime.jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => {
+    return (jsxRuntime.jsxs(StyledTableContainer$1, { ref: tableContainerRef, className: className, style: { width: tableWidth, ...style }, children: [enableGlobalFiltering && (jsxRuntime.jsx("div", { style: { marginBottom: "16px" }, children: jsxRuntime.jsx(StyledInputSearch, { id: "global-search", label: "Search", placeholder: "Search all columns...", value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value) }) })), jsxRuntime.jsx(StyledTableWrapper, { ref: tableWrapperRef, border: border, sdsStyle: sdsStyle, children: jsxRuntime.jsxs(Table, { children: [jsxRuntime.jsx(TableHeader, { filterRow: enableColumnFiltering ? renderFilterRow() : undefined, children: table.getHeaderGroups().map((headerGroup) => {
                                 return (jsxRuntime.jsx(React.Fragment, { children: headerGroup.headers.map((header) => {
                                         return renderHeader(header);
                                     }) }, headerGroup.id));
-                            }) }), jsxRuntime.jsx("tbody", { children: table.getRowModel().rows.map((row) => (jsxRuntime.jsx(TableRow, __assign({ onMouseEnter: () => setHoveredRowId(row.id), onMouseLeave: () => setHoveredRowId(null), selected: row.getIsSelected(), "aria-selected": row.getIsSelected() }, tableRowProps, { children: row.getVisibleCells().map((cell) => {
+                            }) }), jsxRuntime.jsx("tbody", { children: table.getRowModel().rows.map((row) => (jsxRuntime.jsx(TableRow, __assign({ onMouseEnter: () => setHoveredRowId(row.id), onMouseLeave: () => setHoveredRowId(null), selected: row.getIsSelected(), "aria-selected": row.getIsSelected(), className: "group" }, tableRowProps, { children: row.getVisibleCells().map((cell) => {
                                     return renderCell(cell, row);
                                 }) }), row.id))) })] }) }), enablePagination && (jsxRuntime.jsx(StyledPaginationWrapper, { placement: paginationConfig?.placement, children: jsxRuntime.jsx(Pagination, __assign({ currentPage: table.getState().pagination.pageIndex + 1, onPageChange: (page) => table.setPageIndex(page - 1), onNextPage: () => table.nextPage(), onPreviousPage: () => table.previousPage(), pageSize: table.getState().pagination.pageSize, totalCount: table.getFilteredRowModel().rows.length }, paginationConfig)) }))] }, `table-${columns.length}-${columns.map((col) => col.id || "col").join("-")}`));
 };
+const PreComposedTable = React.forwardRef(PreComposedTableInner);
 
 const doNotForwardProps$v = [
     "icon",
@@ -10605,6 +10876,7 @@ const PrimaryText = styled__default.default("div", {
     return `
       display: block;
       font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
+      white-space: pre-wrap;
       
       ${props.shouldTextWrap
         ? ShouldWrap(primaryTextWrapLineCount)
@@ -10625,6 +10897,7 @@ const SecondaryText = styled__default.default("span", {
       color: ${semanticColors?.base?.textSecondary};
       padding-top: 0px;
       font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
+      white-space: pre-wrap;
 
       ${props.shouldTextWrap
         ? ShouldWrap(secondaryTextWrapLineCount)
@@ -10646,6 +10919,7 @@ const TertiaryText = styled__default.default("span", {
       color: ${semanticColors?.base?.textSecondary};
       padding-top: ${spaces?.xxxs}px;
       font-variant-numeric: ${tabularNums ? TABULAR_NUMS : "normal"};
+      white-space: pre-wrap;
 
       ${props.shouldTextWrap
         ? ShouldWrap(tertiaryTextWrapLineCount)
@@ -10671,7 +10945,6 @@ const PrimaryTextComponentSlotRightWrapper = styled__default.default("div") `
 `;
 const StyledTableData = styled__default.default.div `
   ${fontBodyS$1}
-  ${focusVisibleA11yStyle}
 
   ${(props) => {
     const { horizontalAlign = "left", verticalAlign = "top", shouldShowUnderlineOnHover = false, isRowHovered = false, extraRightPadding = 0, } = props;
@@ -10680,6 +10953,7 @@ const StyledTableData = styled__default.default.div `
         ? (spaces?.m ?? 0) + extraRightPadding
         : spaces?.m;
     return `
+        outline: none;
         padding: ${spaces?.m}px ${paddingRight}px ${spaces?.m}px ${spaces?.m}px !important;
         text-align: ${horizontalAlign};
         vertical-align: ${verticalAlignCSSMap[verticalAlign]};
@@ -10687,12 +10961,12 @@ const StyledTableData = styled__default.default.div `
 
         &:hover {
           ${PrimaryText} {
-            ${shouldShowUnderlineOnHover ? "text-decoration: underline;" : ""}
+            ${shouldShowUnderlineOnHover ? "text-decoration: underline !important;" : ""}
           }
         }
 
         ${PrimaryText} {
-          ${isRowHovered && shouldShowUnderlineOnHover ? "text-decoration: underline;" : ""}
+          ${isRowHovered && shouldShowUnderlineOnHover ? "text-decoration: underline !important;" : ""}
         }
     `;
 }}
@@ -18544,11 +18818,28 @@ const StyledHeaderComponent = styled__default.default("div") `
       top: 0;
       z-index: 1000;
       background-color: ${semanticColors?.base?.backgroundPrimary};
-      padding-bottom: ${spaces?.xl}px;
+      padding-bottom: ${spaces?.m}px;
+      margin-bottom: ${spaces?.m}px;
       padding-top: ${spaces?.xl}px;
       display: flex;
       justify-content: space-between;
-      align-items: start;
+      align-items: center;
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: ${spaces?.xl}px;
+        transform: translateY(100%);
+        background: linear-gradient(
+          to bottom,
+          ${semanticColors?.base?.backgroundPrimary},
+          transparent
+        );
+        pointer-events: none;
+      }
     `;
 }}
 `;
@@ -18578,6 +18869,8 @@ const StyledPanelHeaderClose = styled__default.default("div") `
     align-items: center;
 
     button {
+      height: auto !important;
+      
       svg {
         width: ${iconSizes?.l?.width}px;
         height: ${iconSizes?.l?.height}px;