@wallarm-org/design-system 0.62.0 → 0.63.0

package/dist/components/Table/TableSettingsMenu/TableSettingsMenu.js

@@ -1,25 +1,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { cloneElement, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { isEqual } from "lodash-es";
 import { Settings } from "../../../icons/index.js";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
 import { Button } from "../../Button/index.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuInput, DropdownMenuLabel, DropdownMenuTrigger } from "../../DropdownMenu/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuLabel, DropdownMenuTrigger } from "../../DropdownMenu/index.js";
 import { Separator } from "../../Separator/index.js";
 import { VStack } from "../../Stack/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
-import { TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID } from "../lib/index.js";
+import { TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID, collectDirectChildren } from "../lib/index.js";
 import { useTableContext } from "../TableContext/index.js";
+import { TableSettingsMenuContentProvider } from "./TableSettingsMenuContentContext.js";
+import { useTableSettingsMenuContext } from "./TableSettingsMenuContext.js";
 import { TableSettingsMenuItem } from "./TableSettingsMenuItem.js";
+import { TableSettingsMenuReset } from "./TableSettingsMenuReset.js";
+import { TableSettingsMenuSearch } from "./TableSettingsMenuSearch.js";
 const DEFAULT_HEADER_HEIGHT = 34;
 const HEADER_HEIGHT_WITH_DESCRIPTION = 50;
-const TableSettingsMenu = ()=>{
-    const testId = useTestId('settings-menu');
+const TableSettingsMenu = ({ 'data-testid': testIdProp, children, ...rest })=>{
+    const testId = useTestId('settings-menu', testIdProp);
+    const { anchorNode } = useTableSettingsMenuContext();
     const ctx = useTableContext();
-    const { table, visibilityEnabled, columnDndEnabled, defaultColumnVisibility, defaultColumnOrder, alwaysPinnedLeft, masterColumnId } = ctx;
+    const { table, alwaysPinnedLeft, masterColumnId } = ctx;
     const hasTextDescription = table.getAllLeafColumns().some((col)=>col.columnDef.meta?.description?.type === 'text');
     const [search, setSearch] = useState('');
     const [menuOpen, setMenuOpen] = useState(false);
@@ -47,7 +52,30 @@ const TableSettingsMenu = ()=>{
     }, [
         filteredColumns
     ]);
+    const { searchOverride, resetOverride, itemOverrides } = useMemo(()=>{
+        const [search] = collectDirectChildren(children, TableSettingsMenuSearch);
+        const [reset] = collectDirectChildren(children, TableSettingsMenuReset);
+        const items = new Map(collectDirectChildren(children, TableSettingsMenuItem).map((el)=>[
+                el.props.columnId,
+                el
+            ]));
+        return {
+            searchOverride: search,
+            resetOverride: reset,
+            itemOverrides: items
+        };
+    }, [
+        children
+    ]);
     const hasUserPinned = pinnedColumns.some((col)=>col.id !== masterColumnId);
+    const renderColumnItem = (col)=>{
+        const override = itemOverrides.get(col.id);
+        return override ? /*#__PURE__*/ cloneElement(override, {
+            key: col.id
+        }) : /*#__PURE__*/ jsx(TableSettingsMenuItem, {
+            columnId: col.id
+        }, col.id);
+    };
     const sensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: {
             distance: 5
@@ -64,101 +92,83 @@ const TableSettingsMenu = ()=>{
         const newOrder = arrayMove(currentOrder, oldIndex, newIndex);
         ctx.setColumnOrder(newOrder);
     };
-    const handleReset = ()=>{
-        if (defaultColumnVisibility && visibilityEnabled) table.setColumnVisibility(defaultColumnVisibility);
-        if (defaultColumnOrder && columnDndEnabled) ctx.setColumnOrder(defaultColumnOrder);
-    };
-    const { columnVisibility: currentVisibility, columnOrder: currentOrder } = table.getState();
-    const effectiveOrder = 0 === currentOrder.length ? defaultColumnOrder : currentOrder;
-    const visibilityMatch = !defaultColumnVisibility || isEqual(currentVisibility, defaultColumnVisibility);
-    const orderMatch = !defaultColumnOrder || isEqual(effectiveOrder, defaultColumnOrder);
-    const isDefaultState = visibilityMatch && orderMatch;
-    return /*#__PURE__*/ jsx("div", {
-        "data-testid": testId,
-        className: cn('absolute top-0 right-0 z-30', 'flex items-start', 'bg-bg-light-primary border rounded-tr-12 border-border-primary-light', 'pl-6 pr-4 py-4', 'rounded-tr-12'),
-        style: {
-            height: hasTextDescription ? HEADER_HEIGHT_WITH_DESCRIPTION : DEFAULT_HEADER_HEIGHT
+    const content = /*#__PURE__*/ jsx(TableSettingsMenuContentProvider, {
+        value: {
+            search,
+            setSearch
         },
-        children: /*#__PURE__*/ jsxs(Tooltip, {
-            disabled: menuOpen,
-            children: [
-                /*#__PURE__*/ jsx(TooltipTrigger, {
-                    asChild: true,
-                    children: /*#__PURE__*/ jsx("span", {
-                        className: "inline-flex",
-                        children: /*#__PURE__*/ jsxs(DropdownMenu, {
-                            onOpenChange: setMenuOpen,
-                            children: [
-                                /*#__PURE__*/ jsx(DropdownMenuTrigger, {
-                                    asChild: true,
-                                    children: /*#__PURE__*/ jsx(Button, {
-                                        variant: "outline",
-                                        color: "neutral",
-                                        size: "small",
-                                        className: "shadow-sm",
-                                        "aria-label": "Table settings",
-                                        children: /*#__PURE__*/ jsx(Settings, {})
-                                    })
-                                }),
-                                /*#__PURE__*/ jsxs(DropdownMenuContent, {
-                                    className: cn('min-w-256 max-h-[430px]'),
-                                    children: [
-                                        /*#__PURE__*/ jsx(DropdownMenuInput, {
-                                            placeholder: "Search",
-                                            value: search,
-                                            onChange: (e)=>setSearch(e.target.value)
-                                        }),
-                                        /*#__PURE__*/ jsx(VStack, {
-                                            gap: 1,
-                                            children: /*#__PURE__*/ jsx(DndContext, {
-                                                sensors: sensors,
-                                                collisionDetection: closestCenter,
-                                                onDragEnd: handleDragEnd,
-                                                children: /*#__PURE__*/ jsxs(SortableContext, {
-                                                    items: filteredColumns.filter((c)=>!alwaysPinnedLeft.includes(c.id)).map((c)=>c.id),
-                                                    strategy: verticalListSortingStrategy,
-                                                    children: [
-                                                        hasUserPinned && /*#__PURE__*/ jsx(DropdownMenuLabel, {
-                                                            children: "Pinned"
-                                                        }),
-                                                        pinnedColumns.map((col)=>/*#__PURE__*/ jsx(TableSettingsMenuItem, {
-                                                                column: col,
-                                                                canDrag: columnDndEnabled
-                                                            }, col.id)),
-                                                        hasUserPinned && unpinnedColumns.length > 0 && /*#__PURE__*/ jsx(Separator, {
-                                                            spacing: 4
-                                                        }),
-                                                        unpinnedColumns.map((col)=>/*#__PURE__*/ jsx(TableSettingsMenuItem, {
-                                                                column: col,
-                                                                canDrag: columnDndEnabled
-                                                            }, col.id))
-                                                    ]
+        children: /*#__PURE__*/ jsx("div", {
+            "data-testid": testId,
+            className: cn('absolute top-0 right-0 z-30', 'flex items-start', 'bg-bg-light-primary border rounded-tr-12 border-border-primary-light', 'pl-6 pr-4 py-4', 'rounded-tr-12'),
+            style: {
+                height: hasTextDescription ? HEADER_HEIGHT_WITH_DESCRIPTION : DEFAULT_HEADER_HEIGHT
+            },
+            children: /*#__PURE__*/ jsxs(Tooltip, {
+                disabled: menuOpen,
+                children: [
+                    /*#__PURE__*/ jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "inline-flex",
+                            children: /*#__PURE__*/ jsxs(DropdownMenu, {
+                                onOpenChange: setMenuOpen,
+                                children: [
+                                    /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                        asChild: true,
+                                        children: /*#__PURE__*/ jsx(Button, {
+                                            variant: "outline",
+                                            color: "neutral",
+                                            size: "small",
+                                            className: "shadow-sm",
+                                            "aria-label": "Table settings",
+                                            ...rest,
+                                            children: /*#__PURE__*/ jsx(Settings, {})
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                                        className: cn('min-w-256 max-h-[430px]'),
+                                        children: [
+                                            searchOverride ?? /*#__PURE__*/ jsx(TableSettingsMenuSearch, {}),
+                                            /*#__PURE__*/ jsx(VStack, {
+                                                gap: 1,
+                                                children: /*#__PURE__*/ jsx(DndContext, {
+                                                    sensors: sensors,
+                                                    collisionDetection: closestCenter,
+                                                    onDragEnd: handleDragEnd,
+                                                    children: /*#__PURE__*/ jsxs(SortableContext, {
+                                                        items: filteredColumns.filter((c)=>!alwaysPinnedLeft.includes(c.id)).map((c)=>c.id),
+                                                        strategy: verticalListSortingStrategy,
+                                                        children: [
+                                                            hasUserPinned && /*#__PURE__*/ jsx(DropdownMenuLabel, {
+                                                                children: "Pinned"
+                                                            }),
+                                                            pinnedColumns.map(renderColumnItem),
+                                                            hasUserPinned && unpinnedColumns.length > 0 && /*#__PURE__*/ jsx(Separator, {
+                                                                spacing: 4
+                                                            }),
+                                                            unpinnedColumns.map(renderColumnItem)
+                                                        ]
+                                                    })
                                                 })
+                                            }),
+                                            /*#__PURE__*/ jsx(DropdownMenuFooter, {
+                                                children: resetOverride ?? /*#__PURE__*/ jsx(TableSettingsMenuReset, {})
                                             })
-                                        }),
-                                        /*#__PURE__*/ jsx(DropdownMenuFooter, {
-                                            children: /*#__PURE__*/ jsx(Button, {
-                                                variant: "ghost",
-                                                color: "neutral",
-                                                size: "small",
-                                                onClick: handleReset,
-                                                disabled: isDefaultState,
-                                                fullWidth: true,
-                                                children: "Reset to default"
-                                            })
-                                        })
-                                    ]
-                                })
-                            ]
+                                        ]
+                                    })
+                                ]
+                            })
                         })
+                    }),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        children: "Table settings"
                     })
-                }),
-                /*#__PURE__*/ jsx(TooltipContent, {
-                    children: "Table settings"
-                })
-            ]
+                ]
+            })
         })
     });
+    if (!anchorNode) return null;
+    return /*#__PURE__*/ createPortal(content, anchorNode);
 };
 TableSettingsMenu.displayName = 'TableSettingsMenu';
 export { TableSettingsMenu };

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

@@ -0,0 +1,7 @@
+interface TableSettingsMenuContentContextValue {
+    search: string;
+    setSearch: (value: string) => void;
+}
+export declare const TableSettingsMenuContentProvider: import("react").Provider<TableSettingsMenuContentContextValue | null>;
+export declare const useTableSettingsMenuContentContext: () => TableSettingsMenuContentContextValue;
+export {};

package/dist/components/Table/TableSettingsMenu/TableSettingsMenuContentContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const TableSettingsMenuContentContext = /*#__PURE__*/ createContext(null);
+const TableSettingsMenuContentProvider = TableSettingsMenuContentContext.Provider;
+const useTableSettingsMenuContentContext = ()=>{
+    const ctx = useContext(TableSettingsMenuContentContext);
+    if (!ctx) throw new Error('TableSettingsMenu item components must be rendered inside <TableSettingsMenu>');
+    return ctx;
+};
+export { TableSettingsMenuContentProvider, useTableSettingsMenuContentContext };

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

@@ -0,0 +1,15 @@
+import { type FC, type ReactNode } from 'react';
+interface TableSettingsMenuContextValue {
+    anchorNode: HTMLElement | null;
+    setAnchorNode: (node: HTMLElement | null) => void;
+}
+/**
+ * Holds the DOM node of the internal settings-menu anchor slot so a
+ * consumer-rendered `<TableSettingsMenu>` (declared in `Table` children) can
+ * portal its trigger into the correct absolutely-positioned location.
+ */
+export declare const TableSettingsMenuProvider: FC<{
+    children: ReactNode;
+}>;
+export declare const useTableSettingsMenuContext: () => TableSettingsMenuContextValue;
+export {};

package/dist/components/Table/TableSettingsMenu/TableSettingsMenuContext.js

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

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

@@ -1,7 +1,9 @@
-import type { Column } from '@tanstack/react-table';
-interface TableSettingsMenuItemProps<T> {
-    column: Column<T, unknown>;
-    canDrag: boolean;
+import { type SwitchProps } from '../../Switch';
+export interface TableSettingsMenuItemProps extends Omit<SwitchProps, 'checked' | 'onCheckedChange' | 'disabled' | 'children'> {
+    /** Column id from the table's column definitions. */
+    columnId: string;
 }
-export declare const TableSettingsMenuItem: <T>({ column, canDrag }: TableSettingsMenuItemProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const TableSettingsMenuItem: {
+    ({ columnId, className, "data-testid": testIdProp, ...rest }: TableSettingsMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/Table/TableSettingsMenu/TableSettingsMenuItem.js

@@ -6,17 +6,20 @@ import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
 import { Switch, SwitchControl, SwitchLabel } from "../../Switch/index.js";
 import { useTableContext } from "../TableContext/index.js";
-const TableSettingsMenuItem = ({ column, canDrag })=>{
-    const { masterColumnId } = useTableContext();
-    const testId = useTestId('settings-menu-item');
+const TableSettingsMenuItem = ({ columnId, className, 'data-testid': testIdProp, ...rest })=>{
+    const { masterColumnId, columnDndEnabled, table } = useTableContext();
+    const slotTestId = useTestId('settings-menu-item');
+    const switchTestId = useTestId(`settings-menu-item-${columnId}`, testIdProp);
+    const column = table.getColumn(columnId);
+    const isMasterColumn = column?.id === masterColumnId;
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: columnId,
+        disabled: isMasterColumn || !columnDndEnabled
+    });
+    if (!column) return null;
     const isVisible = column.getIsVisible();
     const canHide = column.getCanHide();
     const header = 'string' == typeof column.columnDef.header ? column.columnDef.header : column.id;
-    const isMasterColumn = column.id === masterColumnId;
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-        id: column.id,
-        disabled: isMasterColumn || !canDrag
-    });
     const style = {
         transform: CSS.Transform.toString(transform),
         transition,
@@ -25,7 +28,7 @@ const TableSettingsMenuItem = ({ column, canDrag })=>{
     return /*#__PURE__*/ jsxs("div", {
         ref: setNodeRef,
         style: style,
-        "data-testid": testId,
+        "data-testid": slotTestId,
         className: cn('relative flex items-center w-full rounded-6 pl-20 pr-8 py-6', 'hover:bg-states-primary-hover transition-colors', 'data-disabled:opacity-50 data-disabled:pointer-events-none'),
         "data-disabled": isMasterColumn || void 0,
         children: [
@@ -33,13 +36,15 @@ const TableSettingsMenuItem = ({ column, canDrag })=>{
                 className: cn('absolute left-4 top-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing text-icon-secondary hover:text-icon-primary data-disabled:opacity-50 data-disabled:pointer-events-none'),
                 ...attributes,
                 ...listeners,
-                "data-disabled": isMasterColumn || !canDrag || void 0,
+                "data-disabled": isMasterColumn || !columnDndEnabled || void 0,
                 children: /*#__PURE__*/ jsx(GripVertical, {
                     size: "sm"
                 })
             }),
             /*#__PURE__*/ jsxs(Switch, {
-                className: cn('flex-1'),
+                ...rest,
+                "data-testid": switchTestId,
+                className: cn('flex-1', className),
                 checked: isVisible,
                 onCheckedChange: (details)=>column.toggleVisibility(details.checked),
                 disabled: isMasterColumn || !canHide,
@@ -54,4 +59,5 @@ const TableSettingsMenuItem = ({ column, canDrag })=>{
         ]
     });
 };
+TableSettingsMenuItem.displayName = 'TableSettingsMenuItem';
 export { TableSettingsMenuItem };

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

@@ -0,0 +1,5 @@
+import type { ButtonHTMLAttributes, FC } from 'react';
+import { type TestableProps } from '../../../utils/testId';
+export interface TableSettingsMenuResetProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color' | 'type'>, TestableProps {
+}
+export declare const TableSettingsMenuReset: FC<TableSettingsMenuResetProps>;

package/dist/components/Table/TableSettingsMenu/TableSettingsMenuReset.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { isEqual } from "lodash-es";
+import { useTestId } from "../../../utils/testId.js";
+import { Button } from "../../Button/index.js";
+import { useTableContext } from "../TableContext/index.js";
+const TableSettingsMenuReset = ({ 'data-testid': testIdProp, onClick, ...rest })=>{
+    const testId = useTestId('settings-menu-reset', testIdProp);
+    const { table, visibilityEnabled, columnDndEnabled, defaultColumnVisibility, defaultColumnOrder, setColumnOrder } = useTableContext();
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        if (defaultColumnVisibility && visibilityEnabled) table.setColumnVisibility(defaultColumnVisibility);
+        if (defaultColumnOrder && columnDndEnabled) setColumnOrder(defaultColumnOrder);
+    };
+    const { columnVisibility: currentVisibility, columnOrder: currentOrder } = table.getState();
+    const effectiveOrder = 0 === currentOrder.length ? defaultColumnOrder : currentOrder;
+    const visibilityMatch = !defaultColumnVisibility || isEqual(currentVisibility, defaultColumnVisibility);
+    const orderMatch = !defaultColumnOrder || isEqual(effectiveOrder, defaultColumnOrder);
+    const isDefaultState = visibilityMatch && orderMatch;
+    return /*#__PURE__*/ jsx(Button, {
+        ...rest,
+        type: "button",
+        "data-testid": testId,
+        variant: "ghost",
+        color: "neutral",
+        size: "small",
+        onClick: handleClick,
+        disabled: isDefaultState,
+        fullWidth: true,
+        children: "Reset to default"
+    });
+};
+TableSettingsMenuReset.displayName = 'TableSettingsMenuReset';
+export { TableSettingsMenuReset };

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

@@ -0,0 +1,5 @@
+import type { FC, InputHTMLAttributes } from 'react';
+import { type TestableProps } from '../../../utils/testId';
+export interface TableSettingsMenuSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'>, TestableProps {
+}
+export declare const TableSettingsMenuSearch: FC<TableSettingsMenuSearchProps>;

package/dist/components/Table/TableSettingsMenu/TableSettingsMenuSearch.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../../utils/testId.js";
+import { DropdownMenuInput } from "../../DropdownMenu/index.js";
+import { useTableSettingsMenuContentContext } from "./TableSettingsMenuContentContext.js";
+const TableSettingsMenuSearch = ({ 'data-testid': testIdProp, placeholder = 'Search', ...rest })=>{
+    const testId = useTestId('settings-menu-search', testIdProp);
+    const { search, setSearch } = useTableSettingsMenuContentContext();
+    return /*#__PURE__*/ jsx(DropdownMenuInput, {
+        ...rest,
+        "data-testid": testId,
+        placeholder: placeholder,
+        value: search,
+        onChange: (e)=>setSearch(e.target.value)
+    });
+};
+TableSettingsMenuSearch.displayName = 'TableSettingsMenuSearch';
+export { TableSettingsMenuSearch };

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

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+interface TableSettingsMenuSlotProps {
+    hasConsumerMenu: boolean;
+}
+/**
+ * Internal anchor for the settings menu. Registers its DOM node with the
+ * context so a consumer-rendered `<TableSettingsMenu>` can portal into it, and
+ * renders the default menu when the consumer did not supply one.
+ */
+export declare const TableSettingsMenuSlot: FC<TableSettingsMenuSlotProps>;
+export {};

package/dist/components/Table/TableSettingsMenu/TableSettingsMenuSlot.js

@@ -0,0 +1,16 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TableSettingsMenu } from "./TableSettingsMenu.js";
+import { useTableSettingsMenuContext } from "./TableSettingsMenuContext.js";
+const TableSettingsMenuSlot = ({ hasConsumerMenu })=>{
+    const { setAnchorNode } = useTableSettingsMenuContext();
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                ref: setAnchorNode
+            }),
+            !hasConsumerMenu && /*#__PURE__*/ jsx(TableSettingsMenu, {})
+        ]
+    });
+};
+TableSettingsMenuSlot.displayName = 'TableSettingsMenuSlot';
+export { TableSettingsMenuSlot };

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

@@ -1 +1,6 @@
-export { TableSettingsMenu } from './TableSettingsMenu';
+export { TableSettingsMenu, type TableSettingsMenuProps } from './TableSettingsMenu';
+export { TableSettingsMenuProvider } from './TableSettingsMenuContext';
+export { TableSettingsMenuItem, type TableSettingsMenuItemProps } from './TableSettingsMenuItem';
+export { TableSettingsMenuReset, type TableSettingsMenuResetProps } from './TableSettingsMenuReset';
+export { TableSettingsMenuSearch, type TableSettingsMenuSearchProps, } from './TableSettingsMenuSearch';
+export { TableSettingsMenuSlot } from './TableSettingsMenuSlot';

package/dist/components/Table/TableSettingsMenu/index.js

@@ -1,2 +1,7 @@
 import { TableSettingsMenu } from "./TableSettingsMenu.js";
-export { TableSettingsMenu };
+import { TableSettingsMenuProvider } from "./TableSettingsMenuContext.js";
+import { TableSettingsMenuItem } from "./TableSettingsMenuItem.js";
+import { TableSettingsMenuReset } from "./TableSettingsMenuReset.js";
+import { TableSettingsMenuSearch } from "./TableSettingsMenuSearch.js";
+import { TableSettingsMenuSlot } from "./TableSettingsMenuSlot.js";
+export { TableSettingsMenu, TableSettingsMenuItem, TableSettingsMenuProvider, TableSettingsMenuReset, TableSettingsMenuSearch, TableSettingsMenuSlot };

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

@@ -0,0 +1,39 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import type { Column } from '@tanstack/react-table';
+import { type TestableProps } from '../../utils/testId';
+export interface TableSortTriggerProps<T = unknown> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'type' | 'children'>, TestableProps {
+    /**
+     * Column from the header render context — wires the trigger to TanStack's
+     * sort state. Pass `header.column` directly:
+     *
+     * ```tsx
+     * header: ({ column }) => (
+     *   <TableSortTrigger column={column} data-analytics-id='users.sort.name'>
+     *     Name
+     *   </TableSortTrigger>
+     * )
+     * ```
+     */
+    column: Column<T, unknown>;
+    /** Label rendered next to the sort icon. Visual styling matches the default header text. */
+    children?: ReactNode;
+}
+/**
+ * Consumer-rendered sort trigger. Replaces the auto-rendered sort icon when
+ * present as a direct child of the column's `header` render return — the
+ * `TableHeadCell` children-scan suppresses the default `TableSortHandler` and
+ * does not wrap the label in its own `<Text>`.
+ *
+ * All native button attributes (including `data-analytics-id`,
+ * `data-analytics-props`, `aria-*`, `id`, `ref`, and any `data-*`) reach the
+ * underlying `<button>` so analytics SDKs that walk up via
+ * `closest('[data-analytics-id]')` resolve clicks on the icon to the
+ * consumer-supplied id.
+ *
+ * Consumer-passed `onClick` runs first; if it calls `event.preventDefault()`,
+ * the internal `toggleSorting` is skipped.
+ */
+export declare const TableSortTrigger: {
+    <T>({ column, children, "data-testid": testIdProp, className, onClick, ...rest }: TableSortTriggerProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Table/TableSortTrigger.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { MoveDown, MoveUp, MoveVertical } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { HStack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
+import { tableHeaderButtonClass } from "./classes.js";
+import { SORT_LABELS, getAlignClass } from "./lib/index.js";
+import { useTableContext } from "./TableContext/index.js";
+const getSortTooltip = (sortType, sortDirection)=>{
+    const labels = sortType && SORT_LABELS[sortType] || SORT_LABELS.text;
+    const [ascLabel, descLabel] = labels;
+    return 'asc' === sortDirection ? descLabel : ascLabel;
+};
+const getAriaLabel = (sortDirection)=>{
+    if ('asc' === sortDirection) return 'Sorted ascending';
+    if ('desc' === sortDirection) return 'Sorted descending';
+    return 'Sort column';
+};
+const renderSortIcon = (sortDirection)=>{
+    if ('asc' === sortDirection) return /*#__PURE__*/ jsx(MoveUp, {
+        size: "sm"
+    });
+    if ('desc' === sortDirection) return /*#__PURE__*/ jsx(MoveDown, {
+        size: "sm"
+    });
+    return /*#__PURE__*/ jsx(MoveVertical, {
+        size: "sm"
+    });
+};
+const TableSortTrigger = ({ column, children, 'data-testid': testIdProp, className, onClick, ...rest })=>{
+    const ctx = useTableContext();
+    const testId = useTestId('sort', testIdProp);
+    const canSort = ctx.sortingEnabled && column.getCanSort();
+    const sortDirection = column.getIsSorted();
+    const sortType = column.columnDef.meta?.sortType;
+    const tooltipText = getSortTooltip(sortType, sortDirection);
+    const isRightAligned = 'text-right' === getAlignClass(column.columnDef.meta);
+    const handleClick = useCallback((e)=>{
+        onClick?.(e);
+        if (e.defaultPrevented) return;
+        if (canSort) column.toggleSorting(void 0, e.shiftKey);
+    }, [
+        canSort,
+        column,
+        onClick
+    ]);
+    const iconButton = /*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx("button", {
+                    ...rest,
+                    type: "button",
+                    "data-testid": testId,
+                    className: cn(tableHeaderButtonClass, className),
+                    onClick: handleClick,
+                    "aria-label": getAriaLabel(sortDirection),
+                    children: renderSortIcon(sortDirection)
+                })
+            }),
+            /*#__PURE__*/ jsx(TooltipContent, {
+                children: tooltipText
+            })
+        ]
+    });
+    const label = children ? /*#__PURE__*/ jsx(Text, {
+        size: "xs",
+        weight: "medium",
+        truncate: true,
+        children: children
+    }) : null;
+    return /*#__PURE__*/ jsxs(HStack, {
+        gap: 2,
+        align: "center",
+        children: [
+            isRightAligned ? iconButton : null,
+            label,
+            isRightAligned ? null : iconButton
+        ]
+    });
+};
+TableSortTrigger.displayName = 'TableSortTrigger';
+export { TableSortTrigger };