PicklistCart

When to use

Bulk pick/pack workflows where users select rows in a table and accumulate a named cart.

When NOT to use

Simple multi-select lists without cart semantics. Checkout/payment flows — out of scope.

Podium primitives composed

• Podium Button
• Podium TextField
• Podium Text

Related stores

• usePicklistCartStore
• usePicklistCartEntries
• usePicklistCartActions

Common pitfalls

• Pass picklistCart.getItem — it maps each row to a normalized PicklistCartItem shape.
• Cart state lives in usePicklistCartStore — one cart per module unless namespaced.

Props

Auto-generated from src/components/PicklistCart/PicklistCart.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

PicklistCartProps

Props for the standalone PicklistCart component

Prop	Type	Required	Description
width	number	No	Drawer panel width in pixels. Default: 480

Examples

Table with picklist cart

import { DataTable, PicklistCart } from '@nike/whisker-component-library';

<>
  <PicklistCart onSubmit={(cart) => submitPicklist(cart)} />
  <DataTable
    columns={columns}
    data={rows}
    picklistCart={{
      getItem: (row) => ({
        styleColor: row.styleColor,
        imageUrl: row.imageUrl,
        description: row.description,
        gtins: row.gtins,
      }),
    }}
  />
</>;

Live playground