Cards in-context actions have no context?

[marios-zindilis]

In the code example named Cards with in context actions there is a Button Dropdown placed in the header of each card in the sections attribute of cardDefinition. However, the header does not accept each card item as a parameter (as opposed to the content which does accept it).

So, what is the point of placing in-context actions in the header? The header has no context of which item it is working on, so it cannot pass the item to a callback function in the Button Dropdown buttons.

Am I missing something?

[davdifr]

You're not missing anything: in that example the ButtonDropdown sits in sections[].header, which is a static ReactNode (SectionDefinition.header?: React.ReactNode), and it has no onItemClick, so it's only a visual demo.

Two places in cardDefinition do receive the item: the card-level header?(item: T) and each section's content?(item: T). Put the actions in one of those and the item is in scope for the handler:

cardDefinition={{
  header: item => (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <Link href="#" fontSize="heading-m">{item.name}</Link>
      <ButtonDropdown
        variant="inline-icon"
        ariaLabel={`Actions for ${item.name}`}
        items={[
          { id: "rm", text: "Delete" },
          { id: "mv", text: "Move" },
        ]}
        onItemClick={({ detail }) => handleAction(detail.id, item)}
      />
    </div>
  ),
  sections: [
    { id: "description", header: "Description", content: item => item.description },
  ],
}}

If you'd rather keep the menu next to the "Description" label, move that whole row (label + dropdown) from the section header into the section's content: item => ....

(Checked against @cloudscape-design/components 3.0.1388 with TypeScript 7.0.2 in strict mode: both variants compile with item inferred as your item type, while header: (item) => … inside a section fails with Type '(item: Item) => string' is not assignable to type 'ReactNode'. onItemClick gives ButtonDropdownProps.ItemClickDetails, whose detail.id is the clicked item's id.)

[marios-zindilis]

Thanks for your reply.

I guess the documentation is a little misleading with actions like "delete" and "move", when that section has no context.