@czi-sds/components 23.4.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("");
         /**
@@ -7397,6 +7403,9 @@ var SDSWarningTypes;
     SDSWarningTypes["TooltipInvertStyle"] = "tooltipInvertStyle";
     SDSWarningTypes["ContentCardActionsOnlyButtons"] = "contentCardActionsOnlyButtons";
     SDSWarningTypes["ClickableContentCardNumberOfButtons"] = "clickableContentCardNumberOfButtons";
+    SDSWarningTypes["SegmentedControlTooltipTextDeprecated"] = "segmentedControlTooltipTextDeprecated";
+    SDSWarningTypes["SegmentedControlMissingIconOrLabel"] = "segmentedControlMissingIconOrLabel";
+    SDSWarningTypes["SegmentedControlIconAndLabelConflict"] = "segmentedControlIconAndLabelConflict";
 })(SDSWarningTypes || (SDSWarningTypes = {}));
 const SDS_WARNINGS = {
     [SDSWarningTypes.ButtonMinimalIsAllCaps]: {
@@ -7454,6 +7463,21 @@ const SDS_WARNINGS = {
     [SDSWarningTypes.ClickableContentCardNumberOfButtons]: {
         hasWarned: false,
         message: "Warning: Clickable Content Cards can only have one or no buttons!"
+    },
+    [SDSWarningTypes.SegmentedControlTooltipTextDeprecated]: {
+        hasWarned: false,
+        message: 'Warning: "tooltipText" in SegmentedControl buttonDefinition is deprecated. ' +
+            'Please use "tooltipProps" instead. Example: { tooltipProps: { title: "My tooltip" } }'
+    },
+    [SDSWarningTypes.SegmentedControlMissingIconOrLabel]: {
+        hasWarned: false,
+        message: 'Warning: Each SegmentedControl button must have either an "icon" or a "label" prop. ' +
+            "A button was found with neither."
+    },
+    [SDSWarningTypes.SegmentedControlIconAndLabelConflict]: {
+        hasWarned: false,
+        message: 'Warning: Each SegmentedControl button should have either an "icon" or a "label", ' +
+            "not both. Please use only one per button."
     }
 };
 const showWarningIfFirstOccurence = (warningType) => {
@@ -7501,6 +7525,10 @@ const GeneralButtonGroupStyles = (props) => {
       min-width: fit-content;
       z-index: 1;
 
+      &::before {
+        border-radius: inherit;
+      }
+
       &:hover,
       &:active,
       &:focus {
@@ -7607,10 +7635,11 @@ const LargeButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${material.buttonGroupClasses.grouped}:has(svg):not(
         :has(.${material.buttonClasses.startIcon})
-      ):not(:has(.${material.buttonClasses.endIcon})) {
+      ):not(:has(.${material.buttonClasses.endIcon})),
+    .${material.buttonGroupClasses.grouped}:has(> .${material.buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7618,8 +7647,10 @@ const LargeButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon */
-    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}):not(
+        :has(> .${material.buttonClasses.startIcon}:only-child)
+      ),
     .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.endIcon}) {
       ${theme?.breakpoints?.down("md")} {
         padding: 0 14px;
@@ -7685,10 +7716,11 @@ const MediumButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${material.buttonGroupClasses.grouped}:has(svg):not(
         :has(.${material.buttonClasses.startIcon})
-      ):not(:has(.${material.buttonClasses.endIcon})) {
+      ):not(:has(.${material.buttonClasses.endIcon})),
+    .${material.buttonGroupClasses.grouped}:has(> .${material.buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7696,8 +7728,10 @@ const MediumButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon - ensure spaceS (8px) padding on wide screen */
-    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}):not(
+        :has(> .${material.buttonClasses.startIcon}:only-child)
+      ),
     .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.endIcon}) {
       padding: 0 10px;
     }
@@ -7761,10 +7795,11 @@ const SmallButtonGroupStyles = (props) => {
       }
     }
 
-    /* Icon-only buttons: has svg but no startIcon/endIcon slots */
+    /* Icon-only buttons: has svg but no startIcon/endIcon slots, or startIcon is the only child (e.g. ButtonToggle) */
     .${material.buttonGroupClasses.grouped}:has(svg):not(
         :has(.${material.buttonClasses.startIcon})
-      ):not(:has(.${material.buttonClasses.endIcon})) {
+      ):not(:has(.${material.buttonClasses.endIcon})),
+    .${material.buttonGroupClasses.grouped}:has(> .${material.buttonClasses.startIcon}:only-child) {
       padding: ${iconOnlyPaddingWide};
 
       ${theme?.breakpoints?.down("md")} {
@@ -7772,8 +7807,10 @@ const SmallButtonGroupStyles = (props) => {
       }
     }
 
-    /* Text + icon buttons: has startIcon or endIcon - ensure spaceS (8px) padding on wide screen */
-    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}),
+    /* Text + icon buttons: has startIcon or endIcon (excluding icon-only ButtonToggle) */
+    .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.startIcon}):not(
+        :has(> .${material.buttonClasses.startIcon}:only-child)
+      ),
     .${material.buttonGroupClasses.grouped}:has(.${material.buttonClasses.endIcon}) {
       padding: 0 ${spaces?.s}px;
     }
@@ -7822,6 +7859,7 @@ const PrimaryButtonGroupStyles = (props) => {
     && .${material.buttonGroupClasses.grouped} {
       background-color: transparent;
       border: 1px solid ${defaultColor};
+      box-shadow: none;
       color: ${defaultColor};
 
       svg {
@@ -7833,6 +7871,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${hoverColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${hoverColor};
+      box-shadow: none;
 
       svg {
         color: ${hoverColor};
@@ -7843,6 +7882,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${pressedColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${pressedColor};
+      box-shadow: none;
 
       svg {
         color: ${pressedColor};
@@ -7857,6 +7897,7 @@ const PrimaryButtonGroupStyles = (props) => {
       color: ${textDisabledColor};
       background-color: transparent;
       border: 1px solid ${disabledColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentDisabledColor};
@@ -7910,6 +7951,7 @@ const SecondaryButtonGroupStyles = (props) => {
     && .${material.buttonGroupClasses.grouped} {
       background-color: transparent;
       border: 1px solid ${defaultColor};
+      box-shadow: none;
       color: ${textColor};
 
       svg {
@@ -7921,6 +7963,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textColor};
       background-color: ${hoverBgColor};
       border: 1px solid ${defaultColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentColor};
@@ -7931,6 +7974,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textColor};
       background-color: ${pressedBgColor};
       border: 1px solid ${defaultColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentColor};
@@ -7945,6 +7989,7 @@ const SecondaryButtonGroupStyles = (props) => {
       color: ${textDisabledColor};
       background-color: transparent;
       border: 1px solid ${disabledColor};
+      box-shadow: none;
 
       svg {
         color: ${ornamentDisabledColor};
@@ -8283,29 +8328,44 @@ const StageOnStyles = (props) => {
     // So we need to apply the "on" state background to ::before as well
     const isSecondary = sdsType === "secondary";
     if (isSecondary) {
+        /**
+         * Specificity boost via Emotion's `&&&&` technique.
+         *
+         * Each `&` repeats the component's generated class, producing a selector
+         * like `.css-abc123.css-abc123.css-abc123.css-abc123` — specificity (0,4,0).
+         *
+         * This is needed because ButtonGroup styles its children with
+         * `&& .MuiButtonGroup-grouped` which has specificity (0,3,0).
+         * Without the boost, the sdsStage="on" styles would always lose
+         * the cascade to the ButtonGroup's parent-level overrides.
+         */
         return react.css `
-      color: ${contentColor};
+      &&&& {
+        color: ${contentColor};
 
-      svg {
-        color: ${ornamentColor};
-      }
+        svg {
+          color: ${ornamentColor};
+        }
 
-      /* Apply "on" state background via ::before to match Button's hover pattern */
-      &::before {
-        background-color: ${sdsStyle === "minimal" && !backgroundOnHover
+        /* Apply "on" state background via ::before to match Button's hover pattern */
+        &::before {
+          background-color: ${sdsStyle === "minimal" && !backgroundOnHover
             ? "transparent"
             : backgroundColor};
+        }
       }
     `;
     }
     return react.css `
-    background-color: ${sdsStyle === "minimal" && !backgroundOnHover
+    &&&& {
+      background-color: ${sdsStyle === "minimal" && !backgroundOnHover
         ? "transparent"
         : backgroundColor};
-    color: ${contentColor};
+      color: ${contentColor};
 
-    svg {
-      color: ${ornamentColor};
+      svg {
+        color: ${ornamentColor};
+      }
     }
   `;
 };
@@ -9326,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 = {
@@ -9381,7 +9454,6 @@ const ShouldTruncate$1 = () => {
 };
 const StyledTableHeader = styled__default.default.div `
   ${fontHeaderS}
-  ${focusVisibleA11yStyle}
 
   ${(props) => {
     const { active = false, horizontalAlign = "left", hover = true } = props;
@@ -9394,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};
@@ -9964,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};
@@ -10081,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;
+      }
     `;
 }}
 `;
@@ -10132,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) {
@@ -10227,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({});
@@ -10303,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,
@@ -10315,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) => {
@@ -10382,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;
@@ -10412,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
@@ -10423,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));
@@ -10440,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 : {}),
@@ -10449,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",
@@ -10551,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)
@@ -10571,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)
@@ -10592,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)
@@ -10617,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;
@@ -10626,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]};
@@ -10633,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;" : ""}
         }
     `;
 }}
@@ -18490,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;
+      }
     `;
 }}
 `;
@@ -18524,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;
@@ -18590,6 +18937,41 @@ const Panel = React__namespace.default.forwardRef((props, ref) => {
         }, slotProps: SLOT_PROPS, hideBackdrop: !isBackdropClickEnabled, children: [isOverlayPanelProps(props) && (jsxRuntime.jsxs(StyledHeaderComponent, { children: [props?.HeaderComponent && (jsxRuntime.jsx(PanelHeader, { children: props?.HeaderComponent })), jsxRuntime.jsx(PanelHeaderClose, { onClick: props?.closeButtonOnClick, CloseButtonComponent: props?.CloseButtonComponent })] })), children] })));
 });
 
+const StyledPopover = styled__default.default(material.Popover) `
+  & .${material.popoverClasses.paper} {
+    ${(props) => {
+    const corners = getCorners(props);
+    const shadows = getShadows(props);
+    const semanticColors = getSemanticColors(props);
+    const borders = getBorders(props);
+    const spaces = getSpaces(props);
+    return `
+        background-color: ${semanticColors?.base?.surfacePrimary};
+        background-image: none;
+        border-radius: ${corners?.l}px;
+        padding: ${spaces?.xs}px ${spaces?.m}px;
+        border: ${borders?.none};
+        outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000000", 15)};
+        box-shadow: ${shadows?.m};
+        box-sizing: border-box;
+        z-index: ${props?.theme?.zIndex?.tooltip ?? 1400};
+      `;
+}}
+  }
+`;
+
+/**
+ * @see https://mui.com/material-ui/react-popover/
+ */
+const Popover = React.forwardRef(function Popover(props, ref) {
+    const theme = material.useTheme();
+    const spaces = getSpaces({ theme });
+    return (jsxRuntime.jsx(StyledPopover, __assign({ ref: ref, anchorOrigin: {
+            horizontal: "left",
+            vertical: "bottom"
+        }, transformOrigin: { vertical: -(spaces?.s || 8), horizontal: 0 } }, props)));
+});
+
 const doNotForwardProps = ["buttonDefinition"];
 const StyledSegmentedControl = styled__default.default(material.ToggleButtonGroup, {
     shouldForwardProp: (prop) => !doNotForwardProps.includes(prop)
@@ -18631,7 +19013,6 @@ const StyledSegmentedControl = styled__default.default(material.ToggleButtonGrou
         ${focusVisibleA11yStyle(props)}
         background-color: transparent;
         border: none;
-        line-height: 0px;
         color: ${semanticColors?.base?.ornamentSecondary};
         padding: ${spaces?.xxs}px ${spaces?.m}px;
         border-radius: ${corners?.m}px;
@@ -18660,6 +19041,14 @@ const StyledToggleButton = styled__default.default(material.ToggleButton, {
     `;
 }}
 `;
+const StyledToggleButtonIcon = styled__default.default("div") `
+  line-height: 0px;
+`;
+const StyledToggleButtonLabel = styled__default.default("div") `
+  ${fontBodyMediumS}
+  white-space: nowrap;
+  line-height: 16px !important;
+`;
 
 /**
  * @see https://mui.com/material-ui/react-toggle-button/
@@ -18679,13 +19068,27 @@ const SegmentedControl = (props) => {
             onChangeProp(event, newActive);
         }
     };
-    return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map((button) => {
-                const { icon, tooltipText, value: buttonValue, disabled = false, } = button;
-                const iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
-                const toggleButton = (jsxRuntime.jsx(StyledToggleButton, { "aria-label": tooltipText ?? buttonValue, value: buttonValue, disabled: disabled, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
-                // (masoudmanson): If the button is disabled, we don't want to show the tooltip.
-                return disabled ? (toggleButton) : (jsxRuntime.jsx(Tooltip, { title: tooltipText ?? buttonValue, sdsStyle: "dark", arrow: true, children: toggleButton }, buttonValue));
-            }), ";"] })));
+    return (jsxRuntime.jsx(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: buttonDefinition.map((button) => {
+            const { icon, label, shouldShowTooltip = true, tooltipProps, tooltipText, value: buttonValue, disabled = false, } = button;
+            if (tooltipText) {
+                showWarningIfFirstOccurence(SDSWarningTypes.SegmentedControlTooltipTextDeprecated);
+            }
+            if (!icon && !label) {
+                showWarningIfFirstOccurence(SDSWarningTypes.SegmentedControlMissingIconOrLabel);
+            }
+            if (icon && label) {
+                showWarningIfFirstOccurence(SDSWarningTypes.SegmentedControlIconAndLabelConflict);
+            }
+            const iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
+            const buttonContent = label ? (jsxRuntime.jsx(StyledToggleButtonLabel, { children: label })) : iconItem ? (jsxRuntime.jsx(StyledToggleButtonIcon, { children: iconItem })) : (jsxRuntime.jsx(StyledToggleButtonLabel, { children: buttonValue }));
+            const toggleButton = (jsxRuntime.jsx(StyledToggleButton, { "aria-label": tooltipText ?? label ?? buttonValue, value: buttonValue, disabled: disabled, children: jsxRuntime.jsx("span", { tabIndex: -1, children: buttonContent }) }, buttonValue));
+            // Resolve the tooltip title: tooltipText takes priority,
+            // then tooltipProps.title, then label, then falls back to buttonValue.
+            const resolvedTitle = tooltipText ?? tooltipProps?.title ?? label ?? buttonValue;
+            // (masoudmanson): If the button is disabled or shouldShowTooltip
+            // is false, we don't render the tooltip.
+            return disabled || !shouldShowTooltip ? (toggleButton) : (React.createElement(Tooltip, __assign({ arrow: true }, tooltipProps, { title: resolvedTitle, key: buttonValue }), toggleButton));
+        }) })));
 };
 
 const TabsContext = React.createContext({ sdsSize: "large" });
@@ -22590,6 +22993,7 @@ exports.NavigationJumpTo = NavigationJumpTo;
 exports.Notification = Notification;
 exports.Pagination = Pagination;
 exports.Panel = Panel;
+exports.Popover = Popover;
 exports.PreComposedTable = PreComposedTable;
 exports.RowHoverContext = RowHoverContext;
 exports.SDSChooseTheme = SDSChooseTheme;