Property Menu

Usage

• Use PropertyMenu as the popover behind a column header or a property label to rename, sort, filter, hide or delete a property.
• Wire only the actions your product supports; rows without a handler still render, so pass the callbacks you need.
• Set autoFocus={false} when the menu is shown inline (docs, previews) so it does not steal focus.
• Don’t use it as a general-purpose menu; use Menu for other actions.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { PropertyMenu, createTasksSample } from '@krackedui/motion';

export function PropertyMenuExample() {
  const { collection } = createTasksSample();
  const priorityProperty = collection.properties.find((p) => p.id === 'priority')!;

  return (
    <PropertyMenu property={priorityProperty} autoFocus={false} />
  );
}

Examples

Wired to a database

Inside TableView the menu is wired for you; on its own, handle the callbacks.

Composition

<PropertyMenu property={…}>     // MenuSurface 244 wide, role="menu"
  header   → change-icon button · name input · description (i)
  rows     → Edit property · Change type › · Filter · Sort ascending / descending · Group
             · Hide · Wrap content (switch) · Insert left / right · Duplicate · Delete
</PropertyMenu>

API Reference

PropertyMenu

Based on <div> and supports its props (except onChange). Adds:

Accessibility

• role="menu" surface; ArrowUp/ArrowDown move between rows, Enter/Space activate (useMenuKeys).
• The name input is labelled "Property name" and focused on open (autoFocus); Enter commits, keys typed there do not move the menu.