@wallarm-org/design-system 0.62.0 → 0.63.0

package/dist/components/Selection/index.d.ts

@@ -1,4 +1,6 @@
 export { Selection, type SelectionProps } from './Selection';
 export { SelectionAll, type SelectionAllProps } from './SelectionAll';
 export { SelectionBulkBar, type SelectionBulkBarPlacement, type SelectionBulkBarProps, } from './SelectionBulkBar';
+export type { SelectionContextValue } from './SelectionContext';
 export { SelectionItem, type SelectionItemProps } from './SelectionItem';
+export { useSelectionContext } from './useSelectionContext';

package/dist/components/Selection/index.js

@@ -2,4 +2,5 @@ import { Selection } from "./Selection.js";
 import { SelectionAll } from "./SelectionAll.js";
 import { SelectionBulkBar } from "./SelectionBulkBar/index.js";
 import { SelectionItem } from "./SelectionItem.js";
-export { Selection, SelectionAll, SelectionBulkBar, SelectionItem };
+import { useSelectionContext } from "./useSelectionContext.js";
+export { Selection, SelectionAll, SelectionBulkBar, SelectionItem, useSelectionContext };

package/dist/components/Table/Table.js

@@ -1,12 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { TestIdProvider } from "../../utils/testId.js";
+import { containsDirectChild } from "./lib/index.js";
 import { TableProvider } from "./TableContext/index.js";
 import { TableImperativeBridge } from "./TableImperativeBridge.js";
 import { TableInner } from "./TableInner/index.js";
+import { TableScrollHandler } from "./TableScrollHandler.js";
+import { TableSettingsMenu } from "./TableSettingsMenu/index.js";
 const Table = (props)=>{
     const { data, isLoading = false, children, className, 'aria-label': ariaLabel, 'data-testid': testId, ref, ...providerProps } = props;
     const isEmpty = 0 === data.length && !isLoading;
     const showSettings = !!props.onColumnVisibilityChange || !!props.onColumnOrderChange;
+    const hasConsumerSettingsMenu = containsDirectChild(children, TableSettingsMenu);
+    const hasConsumerScrollHandler = containsDirectChild(children, TableScrollHandler);
     return /*#__PURE__*/ jsxs(TableProvider, {
         data: data,
         isLoading: isLoading,
@@ -21,6 +26,8 @@ const Table = (props)=>{
                     isEmpty: isEmpty,
                     virtualized: props.virtualized,
                     showSettings: showSettings,
+                    hasConsumerSettingsMenu: hasConsumerSettingsMenu,
+                    hasConsumerScrollHandler: hasConsumerScrollHandler,
                     ariaLabel: ariaLabel,
                     className: className,
                     "data-testid": testId,

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

@@ -1,5 +1,11 @@
-import type { FC, ReactNode } from 'react';
+import { type FC, type ReactNode } from 'react';
 export interface TableActionBarProps {
+    /**
+     * Action controls rendered on the right (consumer-owned `<Button>`s, etc.).
+     * A single direct `<TableActionBarSelection>` child is recognized and used to
+     * override the default selection summary on the left; everything else is
+     * treated as an action control.
+     */
     children?: ReactNode;
 }
 export declare const TableActionBar: FC<TableActionBarProps>;

package/dist/components/Table/TableActionBar/TableActionBar.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
 import { Popover } from "@ark-ui/react/popover";
 import { Portal } from "@ark-ui/react/portal";
 import { useTestId } from "../../../utils/testId.js";
@@ -7,6 +8,9 @@ import { HStack } from "../../Stack/index.js";
 import { TableActionBarSelection } from "./TableActionBarSelection.js";
 const TableActionBar = ({ children })=>{
     const testId = useTestId('action-bar');
+    const items = Children.toArray(children);
+    const selectionOverride = items.find((child)=>/*#__PURE__*/ isValidElement(child) && child.type === TableActionBarSelection);
+    const actions = items.filter((child)=>child !== selectionOverride);
     return /*#__PURE__*/ jsx(Portal, {
         children: /*#__PURE__*/ jsx(Popover.Positioner, {
             style: {
@@ -19,11 +23,11 @@ const TableActionBar = ({ children })=>{
                     gap: 40,
                     align: "center",
                     children: [
-                        /*#__PURE__*/ jsx(TableActionBarSelection, {}),
+                        selectionOverride ?? /*#__PURE__*/ jsx(TableActionBarSelection, {}),
                         /*#__PURE__*/ jsx(HStack, {
                             gap: 8,
                             align: "center",
-                            children: children
+                            children: actions
                         })
                     ]
                 })

package/dist/components/Table/TableActionBar/TableActionBarSelection.d.ts

@@ -1,2 +1,16 @@
-import type { FC } from 'react';
-export declare const TableActionBarSelection: FC;
+import { type FC, type ReactNode } from 'react';
+export interface TableActionBarSelectionProps {
+    /**
+     * Optional override of the selection summary. Compose it from the exported
+     * `BulkBarSummary*` primitives; the DS injects table state and actions
+     * (`onClick`, `disabled`, `count`) into the recognized parts while preserving
+     * every attribute you set (`data-analytics-id`, `data-analytics-props`,
+     * `aria-*`, `ref`, any `data-*`). Omit `children` to render the DS default
+     * block.
+     *
+     * Injection targets the **direct** `BulkBarSummary*` children (Fragments are
+     * not unwrapped); wrapping a part in your own element opts it out of wiring.
+     */
+    children?: ReactNode;
+}
+export declare const TableActionBarSelection: FC<TableActionBarSelectionProps>;

package/dist/components/Table/TableActionBar/TableActionBarSelection.js

@@ -1,16 +1,58 @@
-import { jsx } from "react/jsx-runtime";
-import { useTestId } from "../../../utils/testId.js";
-import { BulkBarSummary } from "../../BulkBar/BulkBarSummary.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import { BulkBarSummary, BulkBarSummaryClear, BulkBarSummaryCount, BulkBarSummarySelectAll, BulkBarSummarySeparator } from "../../BulkBar/index.js";
 import { useTableContext } from "../TableContext/index.js";
-const TableActionBarSelection = ()=>{
+const composeClick = (consumer, internal)=>(event)=>{
+        consumer?.(event);
+        if (event.defaultPrevented) return;
+        internal();
+    };
+const TableActionBarSelection = ({ children })=>{
     const { table } = useTableContext();
-    const testId = useTestId('action-bar-selection');
+    const count = Object.keys(table.getState().rowSelection).length;
+    const isAllSelected = table.getIsAllRowsSelected();
+    const selectAll = ()=>table.toggleAllRowsSelected(true);
+    const clear = ()=>table.resetRowSelection();
+    if (void 0 === children) return /*#__PURE__*/ jsxs(BulkBarSummary, {
+        children: [
+            /*#__PURE__*/ jsx(BulkBarSummaryCount, {
+                count: count
+            }),
+            /*#__PURE__*/ jsx(BulkBarSummarySelectAll, {
+                onClick: selectAll,
+                disabled: isAllSelected
+            }),
+            /*#__PURE__*/ jsx(BulkBarSummarySeparator, {}),
+            /*#__PURE__*/ jsx(BulkBarSummaryClear, {
+                onClick: clear
+            })
+        ]
+    });
+    const wired = Children.map(children, (child)=>{
+        if (!/*#__PURE__*/ isValidElement(child)) return child;
+        if (child.type === BulkBarSummarySelectAll) {
+            const el = child;
+            return /*#__PURE__*/ cloneElement(el, {
+                disabled: el.props.disabled ?? isAllSelected,
+                onClick: composeClick(el.props.onClick, selectAll)
+            });
+        }
+        if (child.type === BulkBarSummaryClear) {
+            const el = child;
+            return /*#__PURE__*/ cloneElement(el, {
+                onClick: composeClick(el.props.onClick, clear)
+            });
+        }
+        if (child.type === BulkBarSummaryCount) {
+            const el = child;
+            return /*#__PURE__*/ cloneElement(el, {
+                count: el.props.count ?? count
+            });
+        }
+        return child;
+    });
     return /*#__PURE__*/ jsx(BulkBarSummary, {
-        "data-testid": testId,
-        count: Object.keys(table.getState().rowSelection).length,
-        isAllSelected: table.getIsAllRowsSelected(),
-        onSelectAll: ()=>table.toggleAllRowsSelected(true),
-        onClear: ()=>table.resetRowSelection()
+        children: wired
     });
 };
 TableActionBarSelection.displayName = 'TableActionBarSelection';

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

@@ -1,3 +1,4 @@
 export { TableActionBar } from './TableActionBar';
 export { TableActionBarAnchor } from './TableActionBarAnchor';
 export { TableActionBarProvider } from './TableActionBarProvider';
+export { TableActionBarSelection, type TableActionBarSelectionProps, } from './TableActionBarSelection';

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

@@ -1,4 +1,5 @@
 import { TableActionBar } from "./TableActionBar.js";
 import { TableActionBarAnchor } from "./TableActionBarAnchor.js";
 import { TableActionBarProvider } from "./TableActionBarProvider.js";
-export { TableActionBar, TableActionBarAnchor, TableActionBarProvider };
+import { TableActionBarSelection } from "./TableActionBarSelection.js";
+export { TableActionBar, TableActionBarAnchor, TableActionBarProvider, TableActionBarSelection };

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

@@ -0,0 +1,37 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import type { Column } from '@tanstack/react-table';
+import { type TestableProps } from '../../../utils/testId';
+interface TableColumnMenuContextValue {
+    column: Column<unknown>;
+}
+export declare const useTableColumnMenuContext: () => TableColumnMenuContextValue;
+export interface TableColumnMenuProps<T = unknown> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'type' | 'children'>, TestableProps {
+    /** Column from the header render context. */
+    column: Column<T>;
+    /**
+     * When omitted, the menu renders the default set of items (Move left / Move
+     * right / Sort submenu / Pin / Hide) the same way the design system has
+     * always rendered them. When provided, the consumer takes full control of
+     * the menu's contents — typically a mix of the exported item sub-components
+     * (`TableColumnMenuSortItem`, `TableColumnMenuPinItem`, etc.) for per-item
+     * analytics, or arbitrary `DropdownMenuItem`s for custom actions.
+     */
+    children?: ReactNode;
+}
+/**
+ * Per-column header menu ("…" trigger) with an optional consumer-controlled
+ * item set. The trigger `<button>` accepts the full
+ * `ButtonHTMLAttributes<HTMLButtonElement>` surface (minus `color` / `type` /
+ * `children`) plus `TestableProps`, so `data-analytics-id`,
+ * `data-analytics-props`, `aria-*`, `id`, `ref`, and any `data-*` reach the
+ * underlying DOM node directly.
+ *
+ * The menu collapses to `null` when no action is available for the column
+ * (sorting disabled, pinning disabled, hiding disabled, and DnD disabled) —
+ * matching the behavior of the legacy `TableHeadCellMenu` it replaces.
+ */
+export declare const TableColumnMenu: {
+    <T>({ column, children, className, "data-testid": testIdProp, ...rest }: TableColumnMenuProps<T>): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/components/Table/TableColumnMenu/TableColumnMenu.js

@@ -0,0 +1,139 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+import { Check, ChevronsDown, Ellipsis } 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, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem } from "../../DropdownMenu/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
+import { SORT_LABELS } from "../lib/index.js";
+import { useTableContext } from "../TableContext/index.js";
+import { TableColumnMenuHideItem } from "./TableColumnMenuHideItem.js";
+import { TableColumnMenuMoveLeftItem } from "./TableColumnMenuMoveLeftItem.js";
+import { TableColumnMenuMoveRightItem } from "./TableColumnMenuMoveRightItem.js";
+import { TableColumnMenuPinItem } from "./TableColumnMenuPinItem.js";
+const TableColumnMenuContext = /*#__PURE__*/ createContext(null);
+const useTableColumnMenuContext = ()=>{
+    const ctx = useContext(TableColumnMenuContext);
+    if (!ctx) throw new Error('TableColumnMenu item components must be rendered inside <TableColumnMenu>');
+    return ctx;
+};
+const TableColumnMenu = ({ column, children, className, 'data-testid': testIdProp, ...rest })=>{
+    const ctx = useTableContext();
+    const testId = useTestId('column-menu', testIdProp);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const isAlwaysPinned = ctx.alwaysPinnedLeft.includes(column.id);
+    const canSort = ctx.sortingEnabled && column.getCanSort();
+    const canPin = ctx.pinningEnabled && column.getCanPin() && !isAlwaysPinned;
+    const canHide = ctx.visibilityEnabled && column.getCanHide();
+    const canReorder = ctx.columnDndEnabled && !isAlwaysPinned;
+    if (!canSort && !canPin && !canHide && !canReorder) return null;
+    return /*#__PURE__*/ jsx(TableColumnMenuContext.Provider, {
+        value: {
+            column: column
+        },
+        children: /*#__PURE__*/ jsx("span", {
+            className: "shrink-0 inline-flex opacity-0 group-hover:opacity-100 has-[>_[data-state=open]]:opacity-100 transition-opacity",
+            children: /*#__PURE__*/ jsxs(Tooltip, {
+                disabled: menuOpen,
+                children: [
+                    /*#__PURE__*/ jsxs(DropdownMenu, {
+                        onOpenChange: setMenuOpen,
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsx(TooltipTrigger, {
+                                    asChild: true,
+                                    children: /*#__PURE__*/ jsx(Button, {
+                                        ...rest,
+                                        type: "button",
+                                        "data-testid": testId,
+                                        variant: "ghost",
+                                        color: "neutral",
+                                        size: "small",
+                                        "aria-label": rest['aria-label'] ?? 'More',
+                                        className: cn(className),
+                                        children: /*#__PURE__*/ jsx(Ellipsis, {})
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuContent, {
+                                children: children ?? /*#__PURE__*/ jsx(DefaultTableColumnMenuItems, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        children: "More"
+                    })
+                ]
+            })
+        })
+    });
+};
+TableColumnMenu.displayName = 'TableColumnMenu';
+const DefaultTableColumnMenuItems = ()=>{
+    const { column } = useTableColumnMenuContext();
+    const ctx = useTableContext();
+    const isPinned = column.getIsPinned();
+    const isAlwaysPinned = ctx.alwaysPinnedLeft.includes(column.id);
+    const canReorder = ctx.columnDndEnabled && !isAlwaysPinned;
+    const canSort = ctx.sortingEnabled && column.getCanSort();
+    const canPin = ctx.pinningEnabled && column.getCanPin() && !isAlwaysPinned;
+    const canHide = ctx.visibilityEnabled && column.getCanHide();
+    const visibleColumns = ctx.table.getVisibleLeafColumns();
+    const columnIdx = visibleColumns.findIndex((c)=>c.id === column.id);
+    const isFirst = 0 === columnIdx;
+    const isLast = columnIdx === visibleColumns.length - 1;
+    const canMoveLeft = canReorder && !isFirst && !isPinned;
+    const canMoveRight = canReorder && !isLast && !isPinned;
+    const hasMovement = canMoveLeft || canMoveRight;
+    const sortType = column.columnDef.meta?.sortType;
+    const [ascLabel, descLabel] = sortType && SORT_LABELS[sortType] || SORT_LABELS.text;
+    const sortDirection = column.getIsSorted();
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(TableColumnMenuMoveLeftItem, {}),
+            /*#__PURE__*/ jsx(TableColumnMenuMoveRightItem, {}),
+            hasMovement && (canSort || canPin || canHide) && /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+            canSort && /*#__PURE__*/ jsxs(DropdownMenu, {
+                children: [
+                    /*#__PURE__*/ jsxs(DropdownMenuTriggerItem, {
+                        children: [
+                            /*#__PURE__*/ jsx(ChevronsDown, {
+                                size: "sm"
+                            }),
+                            "Sort"
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                        children: [
+                            /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                onSelect: ()=>column.toggleSorting(false),
+                                children: [
+                                    ascLabel,
+                                    'asc' === sortDirection && /*#__PURE__*/ jsx(Check, {
+                                        size: "sm",
+                                        className: "ml-auto text-icon-primary"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(DropdownMenuItem, {
+                                onSelect: ()=>column.toggleSorting(true),
+                                children: [
+                                    descLabel,
+                                    'desc' === sortDirection && /*#__PURE__*/ jsx(Check, {
+                                        size: "sm",
+                                        className: "ml-auto text-icon-primary"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(TableColumnMenuPinItem, {}),
+            /*#__PURE__*/ jsx(TableColumnMenuHideItem, {})
+        ]
+    });
+};
+export { TableColumnMenu, useTableColumnMenuContext };

package/dist/components/Table/TableColumnMenu/TableColumnMenuHideItem.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import { type DropdownMenuItemProps } from '../../DropdownMenu';
+export type TableColumnMenuHideItemProps = DropdownMenuItemProps;
+/**
+ * "Hide" entry in the column header menu. Auto-suppresses when the column
+ * cannot be hidden.
+ */
+export declare const TableColumnMenuHideItem: FC<TableColumnMenuHideItemProps>;

package/dist/components/Table/TableColumnMenu/TableColumnMenuHideItem.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EyeOff } from "../../../icons/index.js";
+import { DropdownMenuItem } from "../../DropdownMenu/index.js";
+import { useTableContext } from "../TableContext/index.js";
+import { useTableColumnMenuContext } from "./TableColumnMenu.js";
+const TableColumnMenuHideItem = ({ onSelect, children, ...rest })=>{
+    const { column } = useTableColumnMenuContext();
+    const ctx = useTableContext();
+    const canHide = ctx.visibilityEnabled && column.getCanHide();
+    if (!canHide) return null;
+    const handleSelect = ()=>{
+        onSelect?.();
+        column.toggleVisibility(false);
+    };
+    return /*#__PURE__*/ jsxs(DropdownMenuItem, {
+        ...rest,
+        onSelect: handleSelect,
+        children: [
+            /*#__PURE__*/ jsx(EyeOff, {
+                size: "sm"
+            }),
+            children ?? 'Hide'
+        ]
+    });
+};
+TableColumnMenuHideItem.displayName = 'TableColumnMenuHideItem';
+export { TableColumnMenuHideItem };

package/dist/components/Table/TableColumnMenu/TableColumnMenuMoveLeftItem.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import { type DropdownMenuItemProps } from '../../DropdownMenu';
+export type TableColumnMenuMoveLeftItemProps = DropdownMenuItemProps;
+/**
+ * "Move left" entry in the column header menu. Auto-suppresses when the
+ * column cannot be reordered, is pinned, or is already first.
+ */
+export declare const TableColumnMenuMoveLeftItem: FC<TableColumnMenuMoveLeftItemProps>;

package/dist/components/Table/TableColumnMenu/TableColumnMenuMoveLeftItem.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { arrayMove } from "@dnd-kit/sortable";
+import { ArrowLeft } from "../../../icons/index.js";
+import { DropdownMenuItem } from "../../DropdownMenu/index.js";
+import { useTableContext } from "../TableContext/index.js";
+import { useTableColumnMenuContext } from "./TableColumnMenu.js";
+const TableColumnMenuMoveLeftItem = ({ onSelect, children, ...rest })=>{
+    const { column } = useTableColumnMenuContext();
+    const ctx = useTableContext();
+    const isPinned = column.getIsPinned();
+    const isAlwaysPinned = ctx.alwaysPinnedLeft.includes(column.id);
+    const canReorder = ctx.columnDndEnabled && !isAlwaysPinned;
+    const visibleColumns = ctx.table.getVisibleLeafColumns();
+    const columnIdx = visibleColumns.findIndex((c)=>c.id === column.id);
+    const canMoveLeft = canReorder && columnIdx > 0 && !isPinned;
+    if (!canMoveLeft) return null;
+    const handleSelect = ()=>{
+        onSelect?.();
+        const allColumns = ctx.table.getAllLeafColumns();
+        const currentOrder = ctx.table.getState().columnOrder.length ? ctx.table.getState().columnOrder : allColumns.map((c)=>c.id);
+        const fromIdx = currentOrder.indexOf(column.id);
+        const toIdx = fromIdx - 1;
+        if (toIdx < 0) return;
+        ctx.setColumnOrder(arrayMove(currentOrder, fromIdx, toIdx));
+    };
+    return /*#__PURE__*/ jsxs(DropdownMenuItem, {
+        ...rest,
+        onSelect: handleSelect,
+        children: [
+            /*#__PURE__*/ jsx(ArrowLeft, {
+                size: "sm"
+            }),
+            children ?? 'Move left'
+        ]
+    });
+};
+TableColumnMenuMoveLeftItem.displayName = 'TableColumnMenuMoveLeftItem';
+export { TableColumnMenuMoveLeftItem };

package/dist/components/Table/TableColumnMenu/TableColumnMenuMoveRightItem.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import { type DropdownMenuItemProps } from '../../DropdownMenu';
+export type TableColumnMenuMoveRightItemProps = DropdownMenuItemProps;
+/**
+ * "Move right" entry in the column header menu. Auto-suppresses when the
+ * column cannot be reordered, is pinned, or is already last.
+ */
+export declare const TableColumnMenuMoveRightItem: FC<TableColumnMenuMoveRightItemProps>;

package/dist/components/Table/TableColumnMenu/TableColumnMenuMoveRightItem.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { arrayMove } from "@dnd-kit/sortable";
+import { ArrowRight } from "../../../icons/index.js";
+import { DropdownMenuItem } from "../../DropdownMenu/index.js";
+import { useTableContext } from "../TableContext/index.js";
+import { useTableColumnMenuContext } from "./TableColumnMenu.js";
+const TableColumnMenuMoveRightItem = ({ onSelect, children, ...rest })=>{
+    const { column } = useTableColumnMenuContext();
+    const ctx = useTableContext();
+    const isPinned = column.getIsPinned();
+    const isAlwaysPinned = ctx.alwaysPinnedLeft.includes(column.id);
+    const canReorder = ctx.columnDndEnabled && !isAlwaysPinned;
+    const visibleColumns = ctx.table.getVisibleLeafColumns();
+    const columnIdx = visibleColumns.findIndex((c)=>c.id === column.id);
+    const isLast = columnIdx === visibleColumns.length - 1;
+    const canMoveRight = canReorder && !isLast && !isPinned;
+    if (!canMoveRight) return null;
+    const handleSelect = ()=>{
+        onSelect?.();
+        const allColumns = ctx.table.getAllLeafColumns();
+        const currentOrder = ctx.table.getState().columnOrder.length ? ctx.table.getState().columnOrder : allColumns.map((c)=>c.id);
+        const fromIdx = currentOrder.indexOf(column.id);
+        const toIdx = fromIdx + 1;
+        if (toIdx >= currentOrder.length) return;
+        ctx.setColumnOrder(arrayMove(currentOrder, fromIdx, toIdx));
+    };
+    return /*#__PURE__*/ jsxs(DropdownMenuItem, {
+        ...rest,
+        onSelect: handleSelect,
+        children: [
+            /*#__PURE__*/ jsx(ArrowRight, {
+                size: "sm"
+            }),
+            children ?? 'Move right'
+        ]
+    });
+};
+TableColumnMenuMoveRightItem.displayName = 'TableColumnMenuMoveRightItem';
+export { TableColumnMenuMoveRightItem };

package/dist/components/Table/TableColumnMenu/TableColumnMenuPinItem.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import { type DropdownMenuItemProps } from '../../DropdownMenu';
+export type TableColumnMenuPinItemProps = DropdownMenuItemProps;
+/**
+ * Pin / unpin toggle. Renders "Pin" when the column is unpinned and "Unpin"
+ * when it is — the same DOM node receives the consumer's `data-analytics-id`
+ * in both states, so a single id captures both transitions. Auto-suppresses
+ * when the column cannot be pinned (or is always-pinned).
+ */
+export declare const TableColumnMenuPinItem: FC<TableColumnMenuPinItemProps>;

package/dist/components/Table/TableColumnMenu/TableColumnMenuPinItem.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Pin, PinOff } from "../../../icons/index.js";
+import { DropdownMenuItem } from "../../DropdownMenu/index.js";
+import { useTableContext } from "../TableContext/index.js";
+import { useTableColumnMenuContext } from "./TableColumnMenu.js";
+const TableColumnMenuPinItem = ({ onSelect, children, ...rest })=>{
+    const { column } = useTableColumnMenuContext();
+    const ctx = useTableContext();
+    const isPinned = column.getIsPinned();
+    const isAlwaysPinned = ctx.alwaysPinnedLeft.includes(column.id);
+    const canPin = ctx.pinningEnabled && column.getCanPin() && !isAlwaysPinned;
+    if (!canPin) return null;
+    const handleSelect = ()=>{
+        onSelect?.();
+        column.pin(isPinned ? false : 'left');
+    };
+    return /*#__PURE__*/ jsxs(DropdownMenuItem, {
+        ...rest,
+        onSelect: handleSelect,
+        children: [
+            isPinned ? /*#__PURE__*/ jsx(PinOff, {
+                size: "sm"
+            }) : /*#__PURE__*/ jsx(Pin, {
+                size: "sm"
+            }),
+            children ?? (isPinned ? 'Unpin' : 'Pin')
+        ]
+    });
+};
+TableColumnMenuPinItem.displayName = 'TableColumnMenuPinItem';
+export { TableColumnMenuPinItem };

package/dist/components/Table/TableColumnMenu/TableColumnMenuSortItem.d.ts

@@ -0,0 +1,17 @@
+import type { FC } from 'react';
+import { type DropdownMenuItemProps } from '../../DropdownMenu';
+export interface TableColumnMenuSortItemProps extends DropdownMenuItemProps {
+    /** Direction this item commits when selected. */
+    direction: 'asc' | 'desc';
+}
+/**
+ * "Sort ascending / descending" entry. Renders the localized label that
+ * matches the column's `sortType` (e.g. "A → Z" for text, "Highest on top"
+ * for number/score/size) and shows a checkmark when the column is currently
+ * sorted in this direction. Auto-suppresses when sorting is disabled.
+ *
+ * The legacy default menu nests these items under a submenu; consumer-supplied
+ * children can place them flat or inside their own `<DropdownMenu>` submenu —
+ * the item itself doesn't care.
+ */
+export declare const TableColumnMenuSortItem: FC<TableColumnMenuSortItemProps>;

package/dist/components/Table/TableColumnMenu/TableColumnMenuSortItem.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "../../../icons/index.js";
+import { DropdownMenuItem } from "../../DropdownMenu/index.js";
+import { SORT_LABELS } from "../lib/index.js";
+import { useTableContext } from "../TableContext/index.js";
+import { useTableColumnMenuContext } from "./TableColumnMenu.js";
+const TableColumnMenuSortItem = ({ direction, onSelect, children, ...rest })=>{
+    const { column } = useTableColumnMenuContext();
+    const ctx = useTableContext();
+    if (!ctx.sortingEnabled || !column.getCanSort()) return null;
+    const sortDirection = column.getIsSorted();
+    const sortType = column.columnDef.meta?.sortType;
+    const [ascLabel, descLabel] = sortType && SORT_LABELS[sortType] || SORT_LABELS.text;
+    const label = 'asc' === direction ? ascLabel : descLabel;
+    const isActive = sortDirection === direction;
+    const handleSelect = ()=>{
+        onSelect?.();
+        column.toggleSorting('desc' === direction);
+    };
+    return /*#__PURE__*/ jsxs(DropdownMenuItem, {
+        ...rest,
+        onSelect: handleSelect,
+        children: [
+            children ?? label,
+            isActive && /*#__PURE__*/ jsx(Check, {
+                size: "sm",
+                className: "ml-auto text-icon-primary"
+            })
+        ]
+    });
+};
+TableColumnMenuSortItem.displayName = 'TableColumnMenuSortItem';
+export { TableColumnMenuSortItem };

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

@@ -0,0 +1,6 @@
+export { TableColumnMenu, type TableColumnMenuProps } from './TableColumnMenu';
+export { TableColumnMenuHideItem, type TableColumnMenuHideItemProps, } from './TableColumnMenuHideItem';
+export { TableColumnMenuMoveLeftItem, type TableColumnMenuMoveLeftItemProps, } from './TableColumnMenuMoveLeftItem';
+export { TableColumnMenuMoveRightItem, type TableColumnMenuMoveRightItemProps, } from './TableColumnMenuMoveRightItem';
+export { TableColumnMenuPinItem, type TableColumnMenuPinItemProps, } from './TableColumnMenuPinItem';
+export { TableColumnMenuSortItem, type TableColumnMenuSortItemProps, } from './TableColumnMenuSortItem';

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

@@ -0,0 +1,7 @@
+import { TableColumnMenu } from "./TableColumnMenu.js";
+import { TableColumnMenuHideItem } from "./TableColumnMenuHideItem.js";
+import { TableColumnMenuMoveLeftItem } from "./TableColumnMenuMoveLeftItem.js";
+import { TableColumnMenuMoveRightItem } from "./TableColumnMenuMoveRightItem.js";
+import { TableColumnMenuPinItem } from "./TableColumnMenuPinItem.js";
+import { TableColumnMenuSortItem } from "./TableColumnMenuSortItem.js";
+export { TableColumnMenu, TableColumnMenuHideItem, TableColumnMenuMoveLeftItem, TableColumnMenuMoveRightItem, TableColumnMenuPinItem, TableColumnMenuSortItem };