@astryxdesign/core 0.1.2 → 0.1.3-canary.102854d

package/src/Table/plugins/sortable/useTableSortable.tsx

@@ -17,10 +17,12 @@ import {useRef, useMemo, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {colorVars, spacingVars, radiusVars} from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
+import {resolveContextActions} from '../../tableContextMenu';
 import type {
   TablePlugin,
   HeaderCellRenderProps,
   TableColumn,
+  TableContextAction,
 } from '../../types';
 
 // =============================================================================
@@ -356,10 +358,56 @@ export function useTableSortable<
           return props;
         }
 
-        // Find sort entry for this column
         const cfg = configRef.current;
         const entry = cfg.sort.find(e => e.sortKey === sortKey);
 
+        // Context-menu actions are built lazily (only when the menu opens) via
+        // a getter, reading the current sort state at call time — so we don't
+        // build an action array for every header on every render, and the
+        // checked/clear state always reflects the latest sort.
+        const getSortActions = (): TableContextAction[] => {
+          const c = configRef.current;
+          const dir = c.sort.find(e => e.sortKey === sortKey)?.direction ?? null;
+          const actions: TableContextAction[] = [
+            {
+              id: 'sort-asc',
+              group: 'sort',
+              label: 'Sort ascending',
+              icon: <Icon icon="arrowUp" size="xsm" aria-hidden />,
+              checked: dir === 'ascending',
+              onSelect: () =>
+                c.onSortChange([
+                  {sortKey: sortKey as TSortKey, direction: 'ascending'},
+                ]),
+            },
+            {
+              id: 'sort-desc',
+              group: 'sort',
+              label: 'Sort descending',
+              icon: <Icon icon="arrowDown" size="xsm" aria-hidden />,
+              checked: dir === 'descending',
+              onSelect: () =>
+                c.onSortChange([
+                  {sortKey: sortKey as TSortKey, direction: 'descending'},
+                ]),
+            },
+          ];
+          if (dir != null) {
+            actions.push({
+              id: 'sort-clear',
+              group: 'sort-clear',
+              label: 'Clear sort',
+              icon: <Icon icon="close" size="xsm" aria-hidden />,
+              onSelect: () =>
+                c.onSortChange(c.sort.filter(e => e.sortKey !== sortKey)),
+            });
+          }
+          return actions;
+        };
+
+        // Merge with any actions a prior plugin contributed (array or getter),
+        // resolving both lazily at open time.
+        const priorActions = props.contextMenuActions;
         return {
           ...props,
           htmlProps: {
@@ -375,6 +423,10 @@ export function useTableSortable<
               {props.content}
             </SortHeaderButton>
           ),
+          contextMenuActions: () => [
+            ...resolveContextActions(priorActions),
+            ...getSortActions(),
+          ],
         };
       },
     }),

package/src/Table/tableContextMenu.test.tsx

@@ -0,0 +1,181 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file tableContextMenu.test.tsx
+ * @output Tests for the Table context-menu system
+ * @position Validates contextMenuActions aggregation + header context menus
+ */
+
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
+import {Table} from './Table';
+import type {TablePlugin, TableColumn} from './types';
+import {resolveContextActions} from './tableContextMenu';
+
+// jsdom doesn't implement the Popover API; mirror the ContextMenu test's mock
+// so the menu can "open" and its items become queryable (as hidden).
+beforeEach(() => {
+  HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
+    this.setAttribute('popover-open', '');
+    const event = new Event('toggle', {bubbles: false});
+    Object.defineProperty(event, 'newState', {value: 'open'});
+    this.dispatchEvent(event);
+  });
+  HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+    this.removeAttribute('popover-open');
+    const event = new Event('toggle', {bubbles: false});
+    Object.defineProperty(event, 'newState', {value: 'closed'});
+    this.dispatchEvent(event);
+  });
+  const originalMatches = HTMLElement.prototype.matches;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (HTMLElement.prototype as any).matches = function (
+    selector: string,
+  ): boolean {
+    if (selector === ':popover-open') {
+      return this.hasAttribute('popover-open');
+    }
+    return originalMatches.call(this, selector);
+  };
+});
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+}
+
+const data: Row[] = [
+  {id: '1', name: 'Alice'},
+  {id: '2', name: 'Bob'},
+];
+
+const columns: TableColumn<Row>[] = [
+  {key: 'name', header: 'Name'},
+  {key: 'id', header: 'ID'},
+];
+
+// =============================================================================
+// contextMenuActions via transformHeaderCell
+// =============================================================================
+
+describe('Table header context menu', () => {
+  it('renders a menu from a plugin that sets contextMenuActions', () => {
+    const onSelect = vi.fn();
+    const plugin: TablePlugin<Row> = {
+      transformHeaderCell: props => ({
+        ...props,
+        contextMenuActions: [{id: 'pin', label: 'Pin column', onSelect}],
+      }),
+    };
+    render(
+      <Table data={data} columns={columns} idKey="id" plugins={{plugin}} />,
+    );
+    fireEvent.contextMenu(screen.getByText('Name'));
+    const items = screen.getAllByRole('menuitem', {
+      name: 'Pin column',
+      hidden: true,
+    });
+    expect(items.length).toBeGreaterThan(0);
+    fireEvent.click(items[0]);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it('concatenates actions from multiple plugins (never overridden)', () => {
+    const a: TablePlugin<Row> = {
+      transformHeaderCell: props => ({
+        ...props,
+        contextMenuActions: [
+          ...resolveContextActions(props.contextMenuActions),
+          {id: 'a', label: 'Action A', onSelect: () => {}},
+        ],
+      }),
+    };
+    const b: TablePlugin<Row> = {
+      transformHeaderCell: props => ({
+        ...props,
+        contextMenuActions: [
+          ...resolveContextActions(props.contextMenuActions),
+          {id: 'b', label: 'Action B', onSelect: () => {}},
+        ],
+      }),
+    };
+    render(<Table data={data} columns={columns} idKey="id" plugins={{a, b}} />);
+    fireEvent.contextMenu(screen.getByText('Name'));
+    expect(
+      screen.getAllByRole('menuitem', {name: 'Action A', hidden: true}).length,
+    ).toBeGreaterThan(0);
+    expect(
+      screen.getAllByRole('menuitem', {name: 'Action B', hidden: true}).length,
+    ).toBeGreaterThan(0);
+  });
+
+  it('does not render a menu when no plugin contributes actions', () => {
+    render(<Table data={data} columns={columns} idKey="id" />);
+    fireEvent.contextMenu(screen.getByText('Name'));
+    expect(
+      screen.queryByRole('menuitem', {hidden: true}),
+    ).not.toBeInTheDocument();
+  });
+});
+
+// =============================================================================
+// Body / row context menu
+// =============================================================================
+
+describe('Table body context menu', () => {
+  it('renders row actions from a plugin that sets contextMenuActions in transformBodyCell', () => {
+    const onSelect = vi.fn();
+    const plugin: TablePlugin<Row> = {
+      transformBodyCell: (props, _column, item) => ({
+        ...props,
+        contextMenuActions: [
+          {
+            id: `delete-${item.id}`,
+            label: 'Delete row',
+            onSelect: () => {
+              onSelect(item.id);
+            },
+          },
+        ],
+      }),
+    };
+    render(
+      <Table data={data} columns={columns} idKey="id" plugins={{plugin}} />,
+    );
+    // Right-click the first body cell (Alice).
+    fireEvent.contextMenu(screen.getByText('Alice'));
+    const items = screen.getAllByRole('menuitem', {
+      name: 'Delete row',
+      hidden: true,
+    });
+    expect(items.length).toBeGreaterThan(0);
+    fireEvent.click(items[0]);
+    expect(onSelect).toHaveBeenCalledWith('1');
+  });
+
+  it('trigger wrapper fills the full cell so the whole cell is right-clickable', () => {
+    const plugin: TablePlugin<Row> = {
+      transformBodyCell: props => ({
+        ...props,
+        contextMenuActions: [{id: 'act', label: 'Act', onSelect: () => {}}],
+      }),
+    };
+    render(
+      <Table data={data} columns={columns} idKey="id" plugins={{plugin}} />,
+    );
+    // The context-menu trigger wraps the cell content. It must fill the cell
+    // (block display + 100% width) so right-clicking anywhere in the cell —
+    // not just on the content — opens the menu. Regression test for the bug
+    // where only the wide first column responded to right-click.
+    const alice = screen.getByText('Alice');
+    const trigger = alice.closest('div');
+    expect(trigger).not.toBeNull();
+    expect(trigger?.className).toBeTruthy();
+    // The fillCell style sets inline-size:100% + display:block on the trigger.
+    const styleAttr = trigger?.getAttribute('class') ?? '';
+    // StyleX compiles to atomic classes; just assert the wrapper carries styles
+    // (the visual fill is covered by the compiled CSS). The key contract is
+    // that the trigger is a styled block wrapper, not a bare inline element.
+    expect(styleAttr.length).toBeGreaterThan(0);
+  });
+});

package/src/Table/tableContextMenu.tsx

@@ -0,0 +1,160 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file tableContextMenu.tsx
+ * @input React, ContextMenu, Icon, types
+ * @output wrapInTableContextMenu helper
+ * @position Renders the aggregated `contextMenuActions` for a header cell / row
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/BaseTable.tsx (call sites)
+ * - /packages/core/src/Table/types.ts (TableContextAction)
+ */
+
+import {useState, type ReactNode} from 'react';
+import {ContextMenu, type ContextMenuOption} from '../ContextMenu';
+import {Icon} from '../Icon';
+import type {StyleXStyles} from '../theme/types';
+import type {TableContextAction, TableContextActions} from './types';
+
+/**
+ * Resolve a `contextMenuActions` value (array or getter) to a plain array.
+ * Use this when composing actions from a prior plugin's render props so you
+ * don't have to branch on the array-vs-getter form:
+ *
+ * ```
+ * contextMenuActions: () => [
+ *   ...resolveContextActions(props.contextMenuActions),
+ *   ...myActions,
+ * ]
+ * ```
+ */
+export function resolveContextActions(
+  actions: TableContextActions | undefined,
+): TableContextAction[] {
+  if (typeof actions === 'function') {
+    return actions();
+  }
+  return actions ?? [];
+}
+
+/**
+ * Convert the flat action list into ContextMenu options, inserting a divider
+ * between groups (first-seen group order). Ungrouped actions form a trailing
+ * group. A `checked` action shows a trailing check icon.
+ */
+function toContextMenuOptions(
+  actions: TableContextAction[],
+): ContextMenuOption[] {
+  const order: string[] = [];
+  const buckets = new Map<string, TableContextAction[]>();
+  for (const action of actions) {
+    const key = action.group ?? '__ungrouped__';
+    let bucket = buckets.get(key);
+    if (!bucket) {
+      bucket = [];
+      buckets.set(key, bucket);
+      order.push(key);
+    }
+    bucket.push(action);
+  }
+
+  const options: ContextMenuOption[] = [];
+  order.forEach((key, groupIndex) => {
+    if (groupIndex > 0) {
+      options.push({type: 'divider'});
+    }
+    for (const action of buckets.get(key) ?? []) {
+      options.push({
+        label: typeof action.label === 'string' ? action.label : action.id,
+        // A checked action (e.g. the active sort direction) shows a checkmark;
+        // otherwise the action's own icon. ContextMenu's data form takes a
+        // single leading icon, so checked state replaces the icon.
+        icon: action.checked ? (
+          <Icon icon="check" size="xsm" aria-hidden />
+        ) : (
+          action.icon
+        ),
+        isDisabled: action.disabled,
+        onClick: action.onSelect,
+      });
+    }
+  });
+  return options;
+}
+
+/**
+ * Wrap a table element (a header cell's content or a row) in a right-click
+ * context menu rendering the aggregated `actions`. When no plugin contributes
+ * actions the element is returned untouched so the native browser menu passes
+ * through.
+ */
+/**
+ * A context menu whose actions are resolved lazily — only when the user opens
+ * the menu (right-click). Deferring the work means plugins that pass a getter
+ * don't build an action array (with its closures) for every cell on every
+ * render; it's computed on demand and memoized until the menu closes.
+ */
+function LazyTableContextMenu({
+  element,
+  getActions,
+  triggerXstyle,
+}: {
+  element: ReactNode;
+  getActions: () => TableContextAction[];
+  triggerXstyle?: StyleXStyles | StyleXStyles[];
+}): ReactNode {
+  const [options, setOptions] = useState<ContextMenuOption[] | null>(null);
+  return (
+    <ContextMenu
+      items={options ?? []}
+      triggerXstyle={triggerXstyle}
+      onOpenChange={open => {
+        // Resolve actions when opening; clear on close so state derived later
+        // (e.g. current sort direction) is always fresh next open.
+        setOptions(open ? toContextMenuOptions(getActions()) : null);
+      }}>
+      {element}
+    </ContextMenu>
+  );
+}
+
+/**
+ * Wrap a table element (a header cell's content or a body cell) in a right-click
+ * context menu rendering the aggregated `actions`. Accepts a static array or a
+ * getter (resolved lazily on open). When there are no actions the element is
+ * returned untouched so the native browser menu passes through.
+ *
+ * `triggerXstyle` styles the right-click target wrapper. Cells pass a fill +
+ * padding style so the entire cell (padding included) opens the menu.
+ */
+export function wrapInTableContextMenu(
+  element: ReactNode,
+  actions: TableContextActions | undefined,
+  triggerXstyle?: StyleXStyles | StyleXStyles[],
+): ReactNode {
+  // Getter form → resolve lazily on open.
+  if (typeof actions === 'function') {
+    return (
+      <LazyTableContextMenu
+        element={element}
+        getActions={actions}
+        triggerXstyle={triggerXstyle}
+      />
+    );
+  }
+  if (!actions || actions.length === 0) {
+    return element;
+  }
+  // item (it looked like "ascending" was always selected). Focus moves only
+  // when the user arrow-keys into the menu.
+  return (
+    <ContextMenu
+      items={toContextMenuOptions(actions)}
+      triggerXstyle={triggerXstyle}>
+      {element}
+    </ContextMenu>
+  );
+}

package/src/Table/types.ts

@@ -261,6 +261,12 @@ export interface HeaderCellRenderProps {
   overlay?: ReactNode;
   /** Content rendered below the header label row (e.g. inline filter controls). */
   below?: ReactNode;
+  /**
+   * Right-click context-menu actions for this header cell. Plugins append
+   * their actions in `transformHeaderCell`; BaseTable concatenates the arrays
+   * across plugins (never overridden) and renders one menu per header cell.
+   */
+  contextMenuActions?: TableContextActions;
   /**
    * Index of this column within the final, ordered list of rendered columns
    * (after column injection/reordering by other plugins). Populated by
@@ -290,6 +296,13 @@ export interface BodyRowRenderProps {
 export interface BodyCellRenderProps {
   htmlProps: TdHTMLAttributes<HTMLTableCellElement>;
   styles: StyleXStyles[];
+  /**
+   * Right-click context-menu actions for this body cell. Plugins append their
+   * actions in `transformBodyCell`; BaseTable concatenates the arrays across
+   * plugins and across the row's cells (never overridden) and renders one menu
+   * per row.
+   */
+  contextMenuActions?: TableContextActions;
   /**
    * Index of this cell's column within the final ordered column list.
    * Mirrors the `columnIndex` passed to `transformHeaderCell`. Populated by
@@ -335,6 +348,50 @@ export interface ScrollWrapperRenderProps {
   afterTable?: ReactNode;
 }
 
+// =============================================================================
+// Context-menu actions
+// =============================================================================
+
+/**
+ * A single right-click context-menu action contributed by a plugin.
+ *
+ * Plugins contribute actions via the `contextMenuActions` field on
+ * `HeaderCellRenderProps` / `BodyCellRenderProps` (set in
+ * `transformHeaderCell` / `transformBodyCell`); the table aggregates actions
+ * from every enabled plugin into a single menu per header cell / row.
+ */
+export interface TableContextAction {
+  /** Stable identifier, unique within a single menu. */
+  id: string;
+  /** Visible label for the menu item. */
+  label: ReactNode;
+  /** Optional leading icon. */
+  icon?: ReactNode;
+  /** Invoked when the item is selected. */
+  onSelect: () => void;
+  /** When true, the item is rendered but not selectable. */
+  disabled?: boolean;
+  /**
+   * Group key used to cluster related actions and insert a divider between
+   * groups (e.g. 'sort', 'selection'). Actions without a group form a trailing
+   * group. Group order follows first-seen order across the aggregated list.
+   */
+  group?: string;
+  /** When true, the item renders as checked (e.g. the active sort direction). */
+  checked?: boolean;
+}
+
+/**
+ * Context-menu actions for a cell — either a static array, or a getter that
+ * returns the actions lazily. Prefer the getter for actions derived from state
+ * (e.g. the active sort direction): it's only invoked when the menu is opened,
+ * so the plugin doesn't build an action array (with closures) for every cell on
+ * every render.
+ */
+export type TableContextActions =
+  | TableContextAction[]
+  | (() => TableContextAction[]);
+
 // =============================================================================
 // Plugin Interface
 // =============================================================================
@@ -353,6 +410,10 @@ export interface ScrollWrapperRenderProps {
  * 6. `transformBodyCell` — transform each body `<td>` props
  * 7. `transformScrollWrapper` — transform the scroll-container wrapper around the table
  * 8. `transformTableContext` — wrap the table output in context providers
+ *
+ * Plugins may also contribute right-click menu actions by appending to
+ * `contextMenuActions` in `transformHeaderCell` / `transformBodyCell`
+ * (aggregated into one menu per header cell / row).
  */
 export interface TablePlugin<
   T extends Record<string, unknown> = Record<string, unknown>,
@@ -432,12 +493,25 @@ export interface TableRowComponentProps extends HTMLAttributes<HTMLTableRowEleme
 export interface TableCellComponentProps extends TdHTMLAttributes<HTMLTableCellElement> {
   children?: ReactNode;
   xstyle?: StyleXStyles | StyleXStyles[];
+  /**
+   * Right-click actions to render as a context menu around the cell content.
+   * The cell owns the menu wrapper so it can control how it interacts with
+   * padding / content sizing. Empty/undefined renders no menu (native passes
+   * through).
+   */
+  contextMenuActions?: TableContextActions;
 }
 
 /** Props for header cell components used in the components prop */
 export interface TableHeaderCellComponentProps extends ThHTMLAttributes<HTMLTableCellElement> {
   children?: ReactNode;
   xstyle?: StyleXStyles | StyleXStyles[];
+  /**
+   * Right-click actions to render as a context menu around the header content.
+   * The cell owns the menu wrapper so it can control how it interacts with
+   * padding / content sizing. Empty/undefined renders no menu.
+   */
+  contextMenuActions?: TableContextActions;
 }
 
 // =============================================================================

package/src/Table/useTableColumnResize.doc.mjs

@@ -19,7 +19,7 @@ export const docs = {
       name: 'onColumnResizeEnd',
       type: '(updates: Record<string, number>) => void',
       description:
-        'Called when a resize completes (pointerup / Enter). Receives a map of every column key whose width changed — merge it into your columnWidths state.',
+        'Called when a resize completes (pointerup / Enter). Receives a map of every column key whose width changed; merge it into your columnWidths state.',
     },
     {
       name: 'minWidth',
@@ -37,7 +37,7 @@ export const docs = {
       name: 'columns',
       type: 'TableColumn<T>[]',
       description:
-        'Column definitions — needed to derive per-column min widths and detect proportional vs pixel columns for neighbor/last-column resize behavior.',
+        'Column definitions, needed to derive per-column min widths and detect proportional vs pixel columns for neighbor/last-column resize behavior.',
     },
   ],
 };
@@ -91,6 +91,6 @@ export const docsDense = {
     minWidth: 'Global min column width (px) during resize.',
     maxWidth: 'Global max column width (px) during resize. Default Infinity.',
     columns:
-      'Column defs — derive per-column mins + proportional/pixel detection for neighbor/last-column behavior.',
+      'Column defs: derive per-column mins + proportional/pixel detection for neighbor/last-column behavior.',
   },
 };

package/src/Table/useTablePagination.doc.mjs

@@ -6,7 +6,10 @@ export const docs = {
   name: 'useTablePagination',
   subComponentOf: 'Table',
   displayName: 'useTablePagination',
-  description: 'Headless pagination plugin for Table. Supports client-side slicing, server-side pagination, and cursor-based pagination. Renders Pagination controls automatically above, below, or both.',
+  description: 'Headless pagination plugin for Table. Call with a config object: `useTablePagination({ page, onPageChange, totalItems })`. Returns a TablePlugin to pass to `<Table plugins={{ pagination: paginationPlugin }} />`.',
+  usage: {
+    description: 'Call useTablePagination with a config object containing page state and callback. Pass the returned plugin to Table via the plugins prop.',
+  },
   props: [
     {
       name: 'page',

package/src/Table/useTableRowExpansion.doc.mjs

@@ -0,0 +1,63 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'useTableRowExpansion',
+  subComponentOf: 'Table',
+  displayName: 'useTableRowExpansion',
+  description:
+    'Hook that returns a TablePlugin implementing expandable rows with inherited columns. Child rows use the same columns as their parents, indented by depth. Clicking the chevron (or right-click context menu) toggles expansion. Pair with useTableRowExpansionState, which flattens the tree and derives this config (expand/collapse handlers + expand-all state) from a single expandedKeys set.',
+  props: [
+    {
+      name: 'expandedKeys',
+      type: 'Set<string>',
+      description: 'Set of currently-expanded row keys.',
+      required: true,
+    },
+    {
+      name: 'onToggle',
+      type: '(key: string) => void',
+      description: 'Called when a row expansion is toggled.',
+      required: true,
+    },
+    {
+      name: 'getRowKey',
+      type: '(item: T) => string',
+      description: 'Derive a stable unique key from a row item.',
+      required: true,
+    },
+    {
+      name: 'getChildren',
+      type: '(item: T) => T[]',
+      description: 'Return the children of a row (determines expandability).',
+      required: true,
+    },
+    {
+      name: 'getDepth',
+      type: '(item: T) => number',
+      description: 'Return the depth of a row in the hierarchy (0 = top-level). Used for indentation.',
+    },
+    {
+      name: 'getIsItemExpandable',
+      type: '(item: T) => boolean',
+      description: 'Control which rows are expandable. Defaults to checking getChildren length.',
+    },
+    {
+      name: 'hasRowClickExpansion',
+      type: 'boolean',
+      description: 'When true, clicking anywhere on the row toggles expansion.',
+      default: 'false',
+    },
+    {
+      name: 'isAllExpanded',
+      type: "boolean | 'indeterminate'",
+      description: 'State of the expand-all toggle in the header. Enables the header toggle button.',
+    },
+    {
+      name: 'onToggleExpandAll',
+      type: '(expand: boolean) => void',
+      description: 'Callback when the expand-all header toggle is clicked.',
+    },
+  ],
+};

package/src/Table/useTableSortable.doc.mjs

@@ -6,7 +6,10 @@ export const docs = {
   name: 'useTableSortable',
   subComponentOf: 'Table',
   displayName: 'useTableSortable',
-  description: 'Headless multi-sort plugin for Table. The consumer owns sort state and provides a callback. Shift+click enables secondary sort columns. Sort indicators render in header cells automatically.',
+  description: 'Headless multi-sort plugin for Table. Call with a config object: `useTableSortable({ sort, onSortChange })`. Returns a TablePlugin to pass to `<Table plugins={{ sort: sortPlugin }} />`.',
+  usage: {
+    description: 'Call useTableSortable with a config object containing sort state and callback. Pass the returned plugin to Table via the plugins prop.',
+  },
   props: [
     {
       name: 'sort',

package/src/Table/useTableStickyColumns.doc.mjs

@@ -13,13 +13,13 @@ export const docs = {
       name: 'startKeys',
       type: 'string[]',
       description:
-        'Column keys pinned to the start (inline-start / left in LTR) edge — the contiguous run from the first column through the last listed key.',
+        'Column keys pinned to the start (inline-start / left in LTR) edge: the contiguous run from the first column through the last listed key.',
     },
     {
       name: 'endKeys',
       type: 'string[]',
       description:
-        'Column keys pinned to the end (inline-end / right in LTR) edge — the contiguous run from the first listed key through the last column.',
+        'Column keys pinned to the end (inline-end / right in LTR) edge: the contiguous run from the first listed key through the last column.',
     },
   ],
 };