@wallarm-org/design-system 0.62.0 → 0.63.0

package/dist/components/Table/TableHeadCell.js

@@ -6,13 +6,14 @@ import { HStack, VStack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
 import { useHorizontalScrollState } from "./hooks/index.js";
-import { TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID, getAlignClass, getPinningStyles, isLastPinnedLeft, useColumnDnd } from "./lib/index.js";
+import { TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID, containsDirectChild, getAlignClass, getPinningStyles, isLastPinnedLeft, useColumnDnd } from "./lib/index.js";
 import { Th } from "./primitives/index.js";
+import { TableColumnMenu } from "./TableColumnMenu/index.js";
 import { useTableContext } from "./TableContext/index.js";
-import { TableHeadCellMenu } from "./TableHeadCellMenu.js";
 import { TableResizeHandler } from "./TableResizeHandler.js";
-import { TableScrollHandler } from "./TableScrollHandler.js";
+import { TableScrollHandlerSlot } from "./TableScrollHandlerSlot.js";
 import { TableSortHandler } from "./TableSortHandler.js";
+import { TableSortTrigger } from "./TableSortTrigger.js";
 const TableHeadCell = ({ header, hasTextDescription })=>{
     const ctx = useTableContext();
     const testId = useTestId('head-cell');
@@ -33,8 +34,12 @@ const TableHeadCell = ({ header, hasTextDescription })=>{
     const pinningStyles = getPinningStyles(column);
     const lastLeft = isLastPinnedLeft(column, allLeafColumns, column.id);
     const { canDnd, setNodeRef, dndStyle, attributes, listeners } = useColumnDnd(column);
-    const { hasOverflow, atStart, atEnd } = useHorizontalScrollState(containerRef, isMasterColumn);
-    const content = flexRender(header.column.columnDef.header, header.getContext());
+    const { hasOverflow } = useHorizontalScrollState(containerRef, isMasterColumn);
+    const headerDef = header.column.columnDef.header;
+    const headerCtx = header.getContext();
+    const content = 'function' == typeof headerDef ? headerDef(headerCtx) : flexRender(headerDef, headerCtx);
+    const hasCustomSortTrigger = containsDirectChild(content, TableSortTrigger);
+    const hasCustomColumnMenu = containsDirectChild(content, TableColumnMenu);
     const alignClass = getAlignClass(meta);
     const isRightAligned = 'text-right' === alignClass;
     const description = meta?.description;
@@ -79,17 +84,14 @@ const TableHeadCell = ({ header, hasTextDescription })=>{
                 align: isTextDescription ? 'start' : 'center',
                 justify: isRightAligned ? hasMenu ? 'between' : 'end' : void 0,
                 children: [
-                    isRightAligned && hasMenu && /*#__PURE__*/ jsx("span", {
-                        className: "shrink-0 opacity-0 group-hover:opacity-100 has-[>_[data-state=open]]:opacity-100 transition-opacity",
-                        children: /*#__PURE__*/ jsx(TableHeadCellMenu, {
-                            column: column
-                        })
+                    isRightAligned && hasMenu && !hasCustomColumnMenu && /*#__PURE__*/ jsx(TableColumnMenu, {
+                        column: column
                     }),
                     /*#__PURE__*/ jsxs(VStack, {
                         gap: 0,
                         align: isRightAligned ? 'end' : void 0,
                         children: [
-                            /*#__PURE__*/ jsxs(HStack, {
+                            hasCustomSortTrigger || hasCustomColumnMenu ? content : /*#__PURE__*/ jsxs(HStack, {
                                 gap: 2,
                                 children: [
                                     isRightAligned && canSort && /*#__PURE__*/ jsx(TableSortHandler, {
@@ -120,16 +122,13 @@ const TableHeadCell = ({ header, hasTextDescription })=>{
                             })
                         ]
                     }),
-                    !isRightAligned && hasMenu && /*#__PURE__*/ jsx("span", {
-                        className: "shrink-0 ml-auto opacity-0 group-hover:opacity-100 has-[>_[data-state=open]]:opacity-100 transition-opacity",
-                        children: /*#__PURE__*/ jsx(TableHeadCellMenu, {
+                    !isRightAligned && hasMenu && !hasCustomColumnMenu && /*#__PURE__*/ jsx("span", {
+                        className: "ml-auto inline-flex",
+                        children: /*#__PURE__*/ jsx(TableColumnMenu, {
                             column: column
                         })
                     }),
-                    isMasterColumn && hasOverflow && /*#__PURE__*/ jsx(TableScrollHandler, {
-                        atStart: atStart,
-                        atEnd: atEnd
-                    })
+                    isMasterColumn && hasOverflow && /*#__PURE__*/ jsx(TableScrollHandlerSlot, {})
                 ]
             }),
             canResize && /*#__PURE__*/ jsx(TableResizeHandler, {

package/dist/components/Table/TableInner/TableInner.d.ts

@@ -5,6 +5,8 @@ interface TableInnerProps extends TestableProps {
     isEmpty: boolean;
     virtualized?: TableVirtualized;
     showSettings: boolean;
+    hasConsumerSettingsMenu: boolean;
+    hasConsumerScrollHandler: boolean;
     ariaLabel?: string;
     className?: string;
     children?: ReactNode;

package/dist/components/Table/TableInner/TableInner.js

@@ -1,22 +1,31 @@
 import { jsx } from "react/jsx-runtime";
 import { TableActionBarAnchor, TableActionBarProvider } from "../TableActionBar/index.js";
+import { TableScrollHandlerProvider } from "../TableScrollHandlerContext.js";
+import { TableSettingsMenuProvider } from "../TableSettingsMenu/index.js";
 import { TableInnerContainer } from "./TableInnerContainer.js";
 import { TableInnerWindow } from "./TableInnerWindow.js";
-const TableInner = ({ isEmpty, virtualized, showSettings, ariaLabel, className, 'data-testid': testId, children })=>/*#__PURE__*/ jsx(TableActionBarProvider, {
+const TableInner = ({ isEmpty, virtualized, showSettings, hasConsumerSettingsMenu, hasConsumerScrollHandler, ariaLabel, className, 'data-testid': testId, children })=>/*#__PURE__*/ jsx(TableActionBarProvider, {
         children: /*#__PURE__*/ jsx(TableActionBarAnchor, {
             className: className,
             "data-testid": testId,
-            children: 'window' === virtualized ? /*#__PURE__*/ jsx(TableInnerWindow, {
-                isEmpty: isEmpty,
-                showSettings: showSettings,
-                ariaLabel: ariaLabel,
-                children: children
-            }) : /*#__PURE__*/ jsx(TableInnerContainer, {
-                isEmpty: isEmpty,
-                virtualized: virtualized,
-                showSettings: showSettings,
-                ariaLabel: ariaLabel,
-                children: children
+            children: /*#__PURE__*/ jsx(TableSettingsMenuProvider, {
+                children: /*#__PURE__*/ jsx(TableScrollHandlerProvider, {
+                    hasConsumerScrollHandler: hasConsumerScrollHandler,
+                    children: 'window' === virtualized ? /*#__PURE__*/ jsx(TableInnerWindow, {
+                        isEmpty: isEmpty,
+                        showSettings: showSettings,
+                        hasConsumerSettingsMenu: hasConsumerSettingsMenu,
+                        ariaLabel: ariaLabel,
+                        children: children
+                    }) : /*#__PURE__*/ jsx(TableInnerContainer, {
+                        isEmpty: isEmpty,
+                        virtualized: virtualized,
+                        showSettings: showSettings,
+                        hasConsumerSettingsMenu: hasConsumerSettingsMenu,
+                        ariaLabel: ariaLabel,
+                        children: children
+                    })
+                })
             })
         })
     });

package/dist/components/Table/TableInner/TableInnerContainer.d.ts

@@ -3,6 +3,7 @@ interface TableInnerContainerProps {
     isEmpty: boolean;
     virtualized?: 'container';
     showSettings: boolean;
+    hasConsumerSettingsMenu: boolean;
     ariaLabel?: string;
     children?: ReactNode;
 }

package/dist/components/Table/TableInner/TableInnerContainer.js

@@ -10,8 +10,8 @@ import { TableBody } from "../TableBody/index.js";
 import { TableColGroup } from "../TableColGroup.js";
 import { useTableContext } from "../TableContext/index.js";
 import { TableHead } from "../TableHead.js";
-import { TableSettingsMenu } from "../TableSettingsMenu/index.js";
-const TableInnerContainer = ({ isEmpty, virtualized, showSettings, ariaLabel, children })=>{
+import { TableSettingsMenuSlot } from "../TableSettingsMenu/index.js";
+const TableInnerContainer = ({ isEmpty, virtualized, showSettings, hasConsumerSettingsMenu, ariaLabel, children })=>{
     const { containerRef, table, virtualizerRef, tbodyRef, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, initialScrollToRowId } = useTableContext();
     const testId = useTestId('container');
     const scrollRootRef = useRef(null);
@@ -85,7 +85,9 @@ const TableInnerContainer = ({ isEmpty, virtualized, showSettings, ariaLabel, ch
                     /*#__PURE__*/ jsx(ScrollAreaCorner, {})
                 ]
             }),
-            showSettings && /*#__PURE__*/ jsx(TableSettingsMenu, {})
+            showSettings && /*#__PURE__*/ jsx(TableSettingsMenuSlot, {
+                hasConsumerMenu: hasConsumerSettingsMenu
+            })
         ]
     });
 };

package/dist/components/Table/TableInner/TableInnerWindow.d.ts

@@ -2,6 +2,7 @@ import { type FC, type ReactNode } from 'react';
 interface TableInnerWindowProps {
     isEmpty: boolean;
     showSettings: boolean;
+    hasConsumerSettingsMenu: boolean;
     ariaLabel?: string;
     children?: ReactNode;
 }

package/dist/components/Table/TableInner/TableInnerWindow.js

@@ -8,8 +8,8 @@ import { TableBody } from "../TableBody/index.js";
 import { TableColGroup } from "../TableColGroup.js";
 import { useTableContext } from "../TableContext/index.js";
 import { TableHead } from "../TableHead.js";
-import { TableSettingsMenu } from "../TableSettingsMenu/index.js";
-const TableInnerWindow = ({ isEmpty, showSettings, ariaLabel, children })=>{
+import { TableSettingsMenuSlot } from "../TableSettingsMenu/index.js";
+const TableInnerWindow = ({ isEmpty, showSettings, hasConsumerSettingsMenu, ariaLabel, children })=>{
     const { table, virtualizerRef, tbodyRef, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, initialScrollToRowId } = useTableContext();
     const testId = useTestId('window');
     const rootRef = useRef(null);
@@ -93,7 +93,9 @@ const TableInnerWindow = ({ isEmpty, showSettings, ariaLabel, children })=>{
                     })
                 ]
             }),
-            showSettings && /*#__PURE__*/ jsx(TableSettingsMenu, {})
+            showSettings && /*#__PURE__*/ jsx(TableSettingsMenuSlot, {
+                hasConsumerMenu: hasConsumerSettingsMenu
+            })
         ]
     });
 };

package/dist/components/Table/TableScrollHandler.d.ts

@@ -1,7 +1,30 @@
-import { type FC } from 'react';
-interface TableScrollHandlerProps {
-    atStart: boolean;
-    atEnd: boolean;
+import { type ButtonHTMLAttributes, type FC, type ReactNode } from 'react';
+type ScrollButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'type' | 'children'>;
+export type TableScrollHandlerLeftProps = ScrollButtonProps;
+export type TableScrollHandlerRightProps = ScrollButtonProps;
+/**
+ * "Scroll left" control. All native button attributes (`data-analytics-id`,
+ * `data-analytics-props`, `aria-*`, `id`, `ref`, any `data-*`) reach the
+ * underlying `<button>`. Consumer `onClick` runs first; calling
+ * `event.preventDefault()` skips the internal scroll. Must be a child of
+ * `<TableScrollHandler>`.
+ */
+export declare const TableScrollHandlerLeft: FC<TableScrollHandlerLeftProps>;
+/** "Scroll right" control. Same pass-through contract as `TableScrollHandlerLeft`. */
+export declare const TableScrollHandlerRight: FC<TableScrollHandlerRightProps>;
+export interface TableScrollHandlerProps {
+    /**
+     * Override the default controls — typically the exported
+     * `TableScrollHandlerLeft` / `TableScrollHandlerRight` sub-components carrying
+     * per-control analytics attributes. When omitted, both default controls
+     * render.
+     *
+     * Render `<TableScrollHandler>` as a direct child of `<Table>` (like
+     * `<TableActionBar>` / `<TableSettingsMenu>`). The DS portals it into the
+     * scroll slot in the master column header and shows it only on horizontal
+     * overflow — no column selection or manual positioning required.
+     */
+    children?: ReactNode;
 }
 export declare const TableScrollHandler: FC<TableScrollHandlerProps>;
 export {};

package/dist/components/Table/TableScrollHandler.js

@@ -1,82 +1,113 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { createPortal } from "react-dom";
 import { ArrowLeft, ArrowRight } from "../../icons/index.js";
 import { Button } from "../Button/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { useHorizontalScrollState } from "./hooks/index.js";
 import { useTableContext } from "./TableContext/index.js";
-const TableScrollHandler = ({ atStart, atEnd })=>{
-    const ctx = useTableContext();
-    const { allLeafColumns, containerRef } = ctx;
-    const getScrollPageSize = useCallback(()=>{
+import { useTableScrollHandlerContext } from "./TableScrollHandlerContext.js";
+const TableScrollStateContext = /*#__PURE__*/ createContext(null);
+const useTableScrollStateContext = ()=>{
+    const ctx = useContext(TableScrollStateContext);
+    if (!ctx) throw new Error('TableScrollHandlerLeft / TableScrollHandlerRight must be rendered inside <TableScrollHandler>');
+    return ctx;
+};
+const TableScrollHandlerLeft = ({ onClick, disabled, 'aria-label': ariaLabel, ...rest })=>{
+    const { atStart, scrollLeft } = useTableScrollStateContext();
+    const isDisabled = disabled ?? atStart;
+    const handleClick = (e)=>{
+        onClick?.(e);
+        if (e.defaultPrevented) return;
+        scrollLeft();
+    };
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        disabled: isDisabled,
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Button, {
+                    ...rest,
+                    type: "button",
+                    variant: "ghost",
+                    color: "neutral",
+                    size: "small",
+                    disabled: isDisabled,
+                    onClick: handleClick,
+                    "aria-label": ariaLabel ?? 'Scroll left',
+                    children: /*#__PURE__*/ jsx(ArrowLeft, {})
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                children: "Scroll left"
+            })
+        ]
+    });
+};
+TableScrollHandlerLeft.displayName = 'TableScrollHandlerLeft';
+const TableScrollHandlerRight = ({ onClick, disabled, 'aria-label': ariaLabel, ...rest })=>{
+    const { atEnd, scrollRight } = useTableScrollStateContext();
+    const isDisabled = disabled ?? atEnd;
+    const handleClick = (e)=>{
+        onClick?.(e);
+        if (e.defaultPrevented) return;
+        scrollRight();
+    };
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        disabled: isDisabled,
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Button, {
+                    ...rest,
+                    type: "button",
+                    variant: "ghost",
+                    color: "neutral",
+                    size: "small",
+                    disabled: isDisabled,
+                    onClick: handleClick,
+                    "aria-label": ariaLabel ?? 'Scroll right',
+                    children: /*#__PURE__*/ jsx(ArrowRight, {})
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                children: "Scroll right"
+            })
+        ]
+    });
+};
+TableScrollHandlerRight.displayName = 'TableScrollHandlerRight';
+const TableScrollHandler = ({ children })=>{
+    const { anchorNode } = useTableScrollHandlerContext();
+    const { allLeafColumns, containerRef } = useTableContext();
+    const { atStart, atEnd } = useHorizontalScrollState(containerRef, true);
+    const getScrollPageSize = ()=>{
         const pinnedLeftWidth = allLeafColumns.filter((c)=>'left' === c.getIsPinned()).reduce((sum, c)=>sum + c.getSize(), 0);
         return Math.max((containerRef.current?.clientWidth ?? 0) - pinnedLeftWidth, 0);
-    }, [
-        allLeafColumns,
-        containerRef
-    ]);
-    const handleScrollLeft = useCallback(()=>{
-        containerRef.current?.scrollBy({
+    };
+    const scrollLeft = ()=>containerRef.current?.scrollBy({
             left: -getScrollPageSize(),
             behavior: 'smooth'
         });
-    }, [
-        containerRef,
-        getScrollPageSize
-    ]);
-    const handleScrollRight = useCallback(()=>{
-        containerRef.current?.scrollBy({
+    const scrollRight = ()=>containerRef.current?.scrollBy({
             left: getScrollPageSize(),
             behavior: 'smooth'
         });
-    }, [
-        containerRef,
-        getScrollPageSize
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        className: "shrink-0 ml-auto flex items-center gap-4",
-        children: [
-            /*#__PURE__*/ jsxs(Tooltip, {
-                disabled: atStart,
-                children: [
-                    /*#__PURE__*/ jsx(TooltipTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ jsx(Button, {
-                            variant: "ghost",
-                            color: "neutral",
-                            size: "small",
-                            disabled: atStart,
-                            onClick: handleScrollLeft,
-                            "aria-label": "Scroll left",
-                            children: /*#__PURE__*/ jsx(ArrowLeft, {})
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(TooltipContent, {
-                        children: "Scroll left"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs(Tooltip, {
-                disabled: atEnd,
-                children: [
-                    /*#__PURE__*/ jsx(TooltipTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ jsx(Button, {
-                            variant: "ghost",
-                            color: "neutral",
-                            size: "small",
-                            disabled: atEnd,
-                            onClick: handleScrollRight,
-                            "aria-label": "Scroll right",
-                            children: /*#__PURE__*/ jsx(ArrowRight, {})
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(TooltipContent, {
-                        children: "Scroll right"
-                    })
-                ]
-            })
-        ]
-    });
+    if (!anchorNode) return null;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(TableScrollStateContext.Provider, {
+        value: {
+            atStart,
+            atEnd,
+            scrollLeft,
+            scrollRight
+        },
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(TableScrollHandlerLeft, {}),
+                /*#__PURE__*/ jsx(TableScrollHandlerRight, {})
+            ]
+        })
+    }), anchorNode);
 };
 TableScrollHandler.displayName = 'TableScrollHandler';
-export { TableScrollHandler };
+export { TableScrollHandler, TableScrollHandlerLeft, TableScrollHandlerRight };

package/dist/components/Table/TableScrollHandlerContext.d.ts

@@ -0,0 +1,19 @@
+import { type FC, type ReactNode } from 'react';
+interface TableScrollHandlerContextValue {
+    anchorNode: HTMLElement | null;
+    setAnchorNode: (node: HTMLElement | null) => void;
+    /** Whether the consumer rendered their own <TableScrollHandler> in Table children. */
+    hasConsumerScrollHandler: boolean;
+}
+/**
+ * Holds the DOM node of the internal scroll-controls anchor slot (in the master
+ * column header) so a consumer-rendered `<TableScrollHandler>` (declared in
+ * `Table` children) can portal into the correct location. Mirrors
+ * `TableSettingsMenuProvider`.
+ */
+export declare const TableScrollHandlerProvider: FC<{
+    hasConsumerScrollHandler: boolean;
+    children: ReactNode;
+}>;
+export declare const useTableScrollHandlerContext: () => TableScrollHandlerContextValue;
+export {};

package/dist/components/Table/TableScrollHandlerContext.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState } from "react";
+const TableScrollHandlerContext = /*#__PURE__*/ createContext({
+    anchorNode: null,
+    setAnchorNode: ()=>{},
+    hasConsumerScrollHandler: false
+});
+const TableScrollHandlerProvider = ({ hasConsumerScrollHandler, children })=>{
+    const [anchorNode, setAnchorNode] = useState(null);
+    const value = useMemo(()=>({
+            anchorNode,
+            setAnchorNode,
+            hasConsumerScrollHandler
+        }), [
+        anchorNode,
+        hasConsumerScrollHandler
+    ]);
+    return /*#__PURE__*/ jsx(TableScrollHandlerContext.Provider, {
+        value: value,
+        children: children
+    });
+};
+const useTableScrollHandlerContext = ()=>useContext(TableScrollHandlerContext);
+export { TableScrollHandlerProvider, useTableScrollHandlerContext };

package/dist/components/Table/TableScrollHandlerSlot.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+/**
+ * Internal anchor for the horizontal scroll controls. Registers its DOM node so
+ * a consumer-rendered `<TableScrollHandler>` (declared in `Table` children) can
+ * portal into it, and renders the default controls when the consumer did not
+ * supply one. Mounted in the master column header, gated by overflow.
+ */
+export declare const TableScrollHandlerSlot: FC;

package/dist/components/Table/TableScrollHandlerSlot.js

@@ -0,0 +1,18 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { TableScrollHandler } from "./TableScrollHandler.js";
+import { useTableScrollHandlerContext } from "./TableScrollHandlerContext.js";
+const TableScrollHandlerSlot = ()=>{
+    const { setAnchorNode, hasConsumerScrollHandler } = useTableScrollHandlerContext();
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                ref: setAnchorNode,
+                className: cn('shrink-0 ml-auto flex items-center gap-4')
+            }),
+            !hasConsumerScrollHandler && /*#__PURE__*/ jsx(TableScrollHandler, {})
+        ]
+    });
+};
+TableScrollHandlerSlot.displayName = 'TableScrollHandlerSlot';
+export { TableScrollHandlerSlot };

package/dist/components/Table/TableSettingsMenu/TableSettingsMenu.d.ts

@@ -1,2 +1,18 @@
-import { type FC } from 'react';
-export declare const TableSettingsMenu: FC;
+import { type ButtonHTMLAttributes, type FC, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../../utils/testId';
+export interface TableSettingsMenuProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color' | 'type'>, TestableProps {
+    /**
+     * Forwarded to the trigger `<button>` (focus management, measurement,
+     * ref-based instrumentation). `ButtonHTMLAttributes` does not carry `ref`, so
+     * it is declared explicitly; it flows through `{...rest}` to `<Button>`.
+     */
+    ref?: Ref<HTMLButtonElement>;
+    /**
+     * Optional override sub-components — `TableSettingsMenuItem` (addressed by
+     * `columnId`), `TableSettingsMenuReset`, `TableSettingsMenuSearch`. Each one
+     * supplied replaces only its own slot; every other item renders the DS
+     * default. DnD, grouping, and filtering remain DS-owned.
+     */
+    children?: ReactNode;
+}
+export declare const TableSettingsMenu: FC<TableSettingsMenuProps>;