SandboxedOnClick

A container that prevents the click event from bubbling out of it.

Each table row will trigger a window.alert() when clicked. The icon button is wrapped in SandboxedOnClick and navigates you to the ngrok docs.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

1import { IconButton } from "@ngrok/mantle/button";2import { SandboxedOnClick } from "@ngrok/mantle/sandboxed-on-click";3import { Table } from "@ngrok/mantle/table";4import { BookIcon } from "@phosphor-icons/react/Book";5 6<Table.Root>⋯7	<Table.Element>⋯8		<Table.Caption>A list of your recent invoices.</Table.Caption>9		<Table.Head>⋯10			<Table.Row>⋯11				<Table.Header className="w-25">Invoice</Table.Header>12				<Table.Header>Status</Table.Header>13				<Table.Header>Method</Table.Header>14				<Table.Header className="text-right">Amount</Table.Header>15				<Table.Header className="text-right">Actions</Table.Header>16			</Table.Row>17		</Table.Head>18		<Table.Body>⋯19			{invoices.map((invoice) => (20				<Table.Row⋯21					key={invoice.invoice}22					className="cursor-pointer"23					onClick={() => {⋯24						window.alert(`Clicked on ${invoice.invoice}!`);25					}}26				>27					<Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>28					<Table.Cell>{invoice.paymentStatus}</Table.Cell>29					<Table.Cell>{invoice.paymentMethod}</Table.Cell>30					<Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>31					<Table.Cell className="text-right">⋯32						<SandboxedOnClick allowClickEventDefault>⋯33							<IconButton⋯34								appearance="ghost"35								intent="neutral"36								size="sm"37								label="See ngrok docs"38								icon={<BookIcon />}39								asChild40							>41								<a href="https://ngrok.com/docs" target="_blank" rel="noopener noreferrer" />42							</IconButton>43						</SandboxedOnClick>44					</Table.Cell>45				</Table.Row>46			))}47		</Table.Body>48		<Table.Foot>⋯49			<Table.Row>⋯50				<Table.Cell colSpan={3}>Total</Table.Cell>51				<Table.Cell className="text-right">$2,500.00</Table.Cell>52				<Table.Cell />53			</Table.Row>54		</Table.Foot>55	</Table.Element>56</Table.Root>;

Polymorphism

SandboxedOnClick accepts an asChild prop. When true, it renders its single child instead of its default <div>, forwarding the sandboxed onClick handler and the ref onto that child. The child keeps its own role: the default <div> carries role="presentation" because it exists only to catch bubbled clicks, but a presentational role on a link or button is a conflict that user agents ignore. Reach for this when the sandboxed click behavior should live directly on a semantic element such as an anchor, without an extra wrapper <div>.

See ngrok docs

1import { SandboxedOnClick } from "@ngrok/mantle/sandboxed-on-click";2 3<SandboxedOnClick asChild allowClickEventDefault>⋯4	<a href="https://ngrok.com/docs" target="_blank" rel="noopener noreferrer">⋯5		See ngrok docs6	</a>7</SandboxedOnClick>;

API Reference

SandboxedOnClick

A container that prevents the click event from bubbling out of it. Good to use when you want action buttons inside of a table row or list item that navigates on click.

All props from div, plus:

Prop	Type	Default	Description
`allowClickEventDefault`	`boolean`	`false`	Whether the click keeps its default behavior. When `false`, the `onClick` handler calls `event.preventDefault()`; propagation stops either way. Set it to `true` for links or buttons that must navigate or run an action on click.
`asChild`	`boolean`	`false`	Use the `asChild` prop to compose the `SandboxedOnClick` functionality onto alternative element types or your own React components. The child keeps its own role.

sandboxedOnClickProps

sandboxedOnClickProps({ allowClickEventDefault?, onClick? }) returns the role="presentation" and onClick props the default <div> uses. When the component does not fit, apply them to your own element. If that element already has a role, take only onClick: role="presentation" on a <td> removes the cell from the table.

1import { sandboxedOnClickProps } from "@ngrok/mantle/sandboxed-on-click";2 3const { onClick } = sandboxedOnClickProps({ allowClickEventDefault: true });4 5<td onClick={onClick}>⋯6	<Anchor href="https://ngrok.com/docs">See ngrok docs</Anchor>7</td>;