Merge branch 'main' into rob/token-cache-clock-skew

Author: wobsoriano

.changeset/mosaic-table-interactive-rows.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/components/table/table.styles.ts

@@ -42,14 +42,25 @@ export const styles = stylex.create({
     width: '100%',
   },
   header: {
-    '--_cl-table-surface': colorVars['--cl-color-border-subtle'],
-    backgroundColor: colorVars['--cl-color-border-subtle'],
+    '--_cl-table-surface': colorVars['--cl-color-background-subtle'],
+    backgroundColor: colorVars['--cl-color-background-subtle'],
   },
   bodyRow: {
     borderBlockStartColor: colorVars['--cl-color-border'],
     borderBlockStartStyle: 'solid',
     borderBlockStartWidth: '1px',
   },
+  interactiveRow: {
+    '--_cl-table-row-tint': {
+      default: null,
+      '@media (hover: hover)': { ':hover': colorVars['--cl-color-background-subtle'] },
+    },
+    backgroundColor: {
+      default: null,
+      '@media (hover: hover)': { ':hover': colorVars['--cl-color-background-subtle'] },
+    },
+    cursor: 'pointer',
+  },
   selectedRow: {
     '--_cl-table-row-tint': colorVars['--cl-color-neutral-alpha-100'],
     backgroundColor: colorVars['--cl-color-neutral-alpha-100'],

packages/mosaic/src/components/table/table.test.tsx

@@ -2,6 +2,7 @@ import * as stylex from '@stylexjs/stylex';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { createPortal } from 'react-dom';
 import { describe, expect, it, vi } from 'vitest';
 
 import { MagnifyingGlass } from '../../icons/glyphs/magnifying-glass';
@@ -313,6 +314,71 @@ describe('Mosaic Table', () => {
     });
   });
 
+  describe('interactive rows', () => {
+    it('marks rows with a click handler as interactive', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(
+        <Table.Root>
+          <Table.Body>
+            <Table.Row onClick={onClick}>
+              <Table.Cell>Alpha</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Beta</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>,
+      );
+      const [interactive, plain] = screen.getAllByRole('row');
+      expect(interactive).toHaveAttribute('data-interactive', '');
+      expect(plain).not.toHaveAttribute('data-interactive');
+      await user.click(screen.getByText('Alpha'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not run the row action when a control inside the row is clicked', async () => {
+      const user = userEvent.setup();
+      const onRowClick = vi.fn();
+      const onButtonClick = vi.fn();
+      render(
+        <Table.Root>
+          <Table.Body>
+            <Table.Row onClick={onRowClick}>
+              <Table.Cell>
+                <button
+                  type='button'
+                  onClick={onButtonClick}
+                >
+                  View
+                </button>
+              </Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>,
+      );
+      await user.click(screen.getByRole('button', { name: 'View' }));
+      expect(onButtonClick).toHaveBeenCalledTimes(1);
+      expect(onRowClick).not.toHaveBeenCalled();
+    });
+
+    it('does not run the row action for clicks inside content portaled out of the row', async () => {
+      const user = userEvent.setup();
+      const onRowClick = vi.fn();
+      render(
+        <Table.Root>
+          <Table.Body>
+            <Table.Row onClick={onRowClick}>
+              <Table.Cell>{createPortal(<p>Menu content</p>, document.body)}</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>,
+      );
+      await user.click(screen.getByText('Menu content'));
+      expect(onRowClick).not.toHaveBeenCalled();
+    });
+  });
+
   describe('empty state', () => {
     it('renders the empty state across every column', () => {
       render(

packages/mosaic/src/components/table/table.tsx

@@ -208,23 +208,51 @@ export interface TableRowProps extends MosaicComponentProps<'tr'> {
 }
 
 const Row = React.forwardRef<HTMLTableRowElement, TableRowProps>(function MosaicTableRow(
-  { selected, render, xstyle, ...rest },
+  { selected, onClick, render, xstyle, ...rest },
   ref,
 ) {
   const section = React.useContext(TableSectionContext);
+  const interactive = onClick !== undefined;
   return useRender({
     defaultTagName: 'tr',
     render,
     ref,
     props: mergeStyleProps(
-      themeProps('table-row', { selected }),
-      stylex.props(reset.base, section === 'body' && styles.bodyRow, selected && styles.selectedRow, xstyle),
-      { 'aria-selected': selected ? true : undefined },
+      themeProps('table-row', { selected, interactive }),
+      stylex.props(
+        reset.base,
+        section === 'body' && styles.bodyRow,
+        interactive && styles.interactiveRow,
+        selected && styles.selectedRow,
+        xstyle,
+      ),
+      {
+        'aria-selected': selected ? true : undefined,
+        onClick: interactive
+          ? (event: React.MouseEvent<HTMLTableRowElement>) => {
+              if (isRowOwnClick(event)) {
+                onClick(event);
+              }
+            }
+          : undefined,
+      },
       rest,
     ),
   });
 });
 
+const nestedControlSelector =
+  'a[href], button, input, select, textarea, label, [role="button"], [role="link"], [role="checkbox"], [role="menuitem"]';
+
+const isRowOwnClick = (event: React.MouseEvent<HTMLElement>) => {
+  const { target, currentTarget } = event;
+  if (!(target instanceof Element) || !currentTarget.contains(target)) {
+    return false;
+  }
+  const control = target.closest(nestedControlSelector);
+  return control === null || !currentTarget.contains(control);
+};
+
 export interface TableHeaderCellProps extends Omit<MosaicComponentProps<'th'>, 'align'> {
   align?: TableAlign;
   sticky?: TableSticky;

packages/swingset/src/stories/table.mdx

@@ -55,7 +55,7 @@ import { Table } from '@clerk/mosaic/components/table';
 - `Table.ColumnGroup` renders a `<colgroup>`. Put it first inside `Table.Root`, with one column part per column.
 - `Table.Column` renders a `<col>`. Pass `width` (any CSS length) to set the column's width. A column without `width` takes the space the others leave, unless the cell in its first row sets its own width, as `Table.SelectAllCell` does.
 - `Table.Header` and `Table.Body` render `<thead>` and `<tbody>`. Rows inside the body get a top border.
-- `Table.Row` renders a `<tr>`. Pass `selected` to mark it `aria-selected` and tint it.
+- `Table.Row` renders a `<tr>`. Pass `selected` to mark it `aria-selected` and tint it. Pass `onClick` to make the whole row clickable: it gets a pointer cursor and a hover tint, and clicks on links, buttons, and other controls inside the row are left to those controls. The row is not focusable, so put a button or link with the same action in its first cell for keyboard users, and have `onClick` click that control so a dialog it opens returns focus to it on close.
 - `Table.HeaderCell` renders a `<th scope="col">`. Pass `onSort` to make it sortable: the label becomes a button with a direction icon, and `sort` (`'ascending'`, `'descending'`, or `'none'`) reflects the current direction as `aria-sort`. `align` moves the content to `'center'` or `'end'`.
 - `Table.Cell` renders a `<td>` with the same `align` prop. `noWrap` defaults to `false`; enable it to keep dates and other short values on one line.
 - `Table.HeaderCell` and `Table.Cell` take `sticky` (`'start'` or `'end'`) to pin the cell to that edge while the table scrolls horizontally. Set it on every cell in the column. A pinned cell gets an opaque background that matches its row and a fade on its inner edge.
@@ -77,7 +77,7 @@ Each part carries a stable `.cl-*` class, and the parts with state reflect it as
 | `.cl-table-column`       | `Table.Column`                            |                                                                                                                                                            |
 | `.cl-table-header`       | `Table.Header`                            |                                                                                                                                                            |
 | `.cl-table-body`         | `Table.Body`                              |                                                                                                                                                            |
-| `.cl-table-row`          | `Table.Row`                               | `data-selected` when `selected`                                                                                                                            |
+| `.cl-table-row`          | `Table.Row`                               | `data-selected` when `selected`, `data-interactive` when `onClick` is set                                                                                  |
 | `.cl-table-header-cell`  | `Table.HeaderCell`                        | `data-align` (`start` / `center` / `end`), `data-sticky` (`start` / `end`), `data-sortable` when `onSort` is set, `data-sort` (`ascending` / `descending`) |
 | `.cl-table-cell`         | `Table.Cell`                              | `data-align` (`start` / `center` / `end`), `data-sticky` (`start` / `end`), `data-no-wrap` when `noWrap`                                                   |
 | `.cl-table-select-cell`  | `Table.SelectAllCell`, `Table.SelectCell` |                                                                                                                                                            |
@@ -153,3 +153,12 @@ With `layout='fixed'`, the widths in `Table.ColumnGroup` decide the columns, so
   name='ColumnWidths'
   storyModule={TableStories}
 />
+
+### Clickable rows
+
+Clicking anywhere on a row opens the key's details. The name is a dialog trigger, so keyboard users reach the same dialog, and the row's `onClick` clicks that trigger, so focus returns to it when the dialog closes. The row menu still opens on its own.
+
+<Story
+  name='ClickableRows'
+  storyModule={TableStories}
+/>

packages/swingset/src/stories/table.stories.tsx

@@ -1,5 +1,8 @@
 import { Badge } from '@clerk/mosaic/components/badge';
 import { Button } from '@clerk/mosaic/components/button';
+import { Card } from '@clerk/mosaic/components/card';
+import { DataList } from '@clerk/mosaic/components/data-list';
+import { Dialog } from '@clerk/mosaic/components/dialog';
 import { EmptyState } from '@clerk/mosaic/components/empty-state';
 import { Icon } from '@clerk/mosaic/components/icon';
 import { Menu } from '@clerk/mosaic/components/menu';
@@ -500,3 +503,113 @@ export function ColumnWidths() {
     </Table.Root>
   );
 }
+
+const keyDetails = Dialog.createHandle<ApiKey>();
+
+export function ClickableRows() {
+  return (
+    <>
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Environment</Table.HeaderCell>
+            <Table.HeaderCell>Last used</Table.HeaderCell>
+            <Table.HeaderCell align='end'>
+              <VisuallyHidden>Actions</VisuallyHidden>
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {apiKeys.map(key => (
+            <ClickableKeyRow
+              key={key.id}
+              apiKey={key}
+            />
+          ))}
+        </Table.Body>
+      </Table.Root>
+      <Dialog.Root handle={keyDetails}>
+        {({ payload }) =>
+          payload === undefined ? null : (
+            <Dialog.Popup
+              variant='card'
+              compactPlacement='center'
+            >
+              <Card.Root
+                elevation='overlay'
+                renderBranding={false}
+              >
+                <Card.Header>
+                  <Card.Title>{payload.name}</Card.Title>
+                  <Card.Description>API key</Card.Description>
+                </Card.Header>
+                <Card.Content>
+                  <DataList.Root>
+                    <DataList.Item>
+                      <DataList.Label>Environment</DataList.Label>
+                      <DataList.Value>{payload.environment}</DataList.Value>
+                    </DataList.Item>
+                    <DataList.Item>
+                      <DataList.Label>Last used</DataList.Label>
+                      <DataList.Value>{payload.lastUsed}</DataList.Value>
+                    </DataList.Item>
+                    <DataList.Item>
+                      <DataList.Label>Created</DataList.Label>
+                      <DataList.Value>{payload.created}</DataList.Value>
+                    </DataList.Item>
+                  </DataList.Root>
+                </Card.Content>
+                <Card.Footer>
+                  <Dialog.Close
+                    render={
+                      <Button
+                        color='neutral'
+                        fullWidth
+                        variant='outline'
+                      />
+                    }
+                  >
+                    Close
+                  </Dialog.Close>
+                </Card.Footer>
+              </Card.Root>
+            </Dialog.Popup>
+          )
+        }
+      </Dialog.Root>
+    </>
+  );
+}
+
+function ClickableKeyRow({ apiKey }: { apiKey: ApiKey }) {
+  const trigger = React.useRef<HTMLButtonElement>(null);
+  return (
+    <Table.Row onClick={() => trigger.current?.click()}>
+      <Table.Cell>
+        <Dialog.Trigger
+          ref={trigger}
+          handle={keyDetails}
+          payload={apiKey}
+          render={<Button variant='link' />}
+        >
+          {apiKey.name}
+        </Dialog.Trigger>
+      </Table.Cell>
+      <Table.Cell>
+        <Badge color={apiKey.environment === 'Production' ? 'positive' : 'neutral'}>{apiKey.environment}</Badge>
+      </Table.Cell>
+      <Table.Cell>{apiKey.lastUsed}</Table.Cell>
+      <Table.Cell align='end'>
+        <Menu.Root placement='bottom-end'>
+          <Menu.Trigger aria-label={`Manage ${apiKey.name}`} />
+          <Menu.Popup>
+            <Menu.Item label='Revoke'>
+              <Menu.Label>Revoke</Menu.Label>
+            </Menu.Item>
+          </Menu.Popup>
+        </Menu.Root>
+      </Table.Cell>
+    </Table.Row>
+  );
+}