alpha

ActionBar

Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.

installyarn add @react-spectrum/actionbar
version3.0.0-alpha.16
usageimport {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar'
View guidelines
Spectrum
View repository
GitHub
View package
NPM

Example#

function Example() {
  let items = [
    { key: 0, name: 'Adobe Photoshop' },
    { key: 1, name: 'Adobe Illustrator' },
    { key: 2, name: 'Adobe XD' }
  ];

  let [selectedKeys, setSelectedKeys] = React.useState(new Set([0]));

  return (
    <ActionBarContainer height={300} maxWidth="size-6000">
      <ListView
        items={items}
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </ListView>
      <ActionBar
        isEmphasized
        selectedItemCount={selectedKeys === 'all'
          ? items.length
          : selectedKeys.size}
        onAction={(key) =>
          alert(`Performing ${key} action on ${selectedKeys.size} rows.`)}
        onClearSelection={() => setSelectedKeys(new Set([]))}
      >
        <Item key="edit">
          <Edit />
          <Text>Edit</Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />
function Example() {
  let items = [
    { key: 0, name: 'Adobe Photoshop' },
    { key: 1, name: 'Adobe Illustrator' },
    { key: 2, name: 'Adobe XD' }
  ];

  let [selectedKeys, setSelectedKeys] = React.useState(
    new Set([0])
  );

  return (
    <ActionBarContainer height={300} maxWidth="size-6000">
      <ListView
        items={items}
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </ListView>
      <ActionBar
        isEmphasized
        selectedItemCount={selectedKeys === 'all'
          ? items.length
          : selectedKeys.size}
        onAction={(key) =>
          alert(
            `Performing ${key} action on ${selectedKeys.size} rows.`
          )}
        onClearSelection={() =>
          setSelectedKeys(new Set([]))}
      >
        <Item key="edit">
          <Edit />
          <Text>
            Edit
          </Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />
function Example() {
  let items = [
    {
      key: 0,
      name:
        'Adobe Photoshop'
    },
    {
      key: 1,
      name:
        'Adobe Illustrator'
    },
    {
      key: 2,
      name: 'Adobe XD'
    }
  ];

  let [
    selectedKeys,
    setSelectedKeys
  ] = React.useState(
    new Set([0])
  );

  return (
    <ActionBarContainer
      height={300}
      maxWidth="size-6000"
    >
      <ListView
        items={items}
        aria-label="ListView with action bar"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </ListView>
      <ActionBar
        isEmphasized
        selectedItemCount={selectedKeys ===
            'all'
          ? items.length
          : selectedKeys
            .size}
        onAction={(
          key
        ) =>
          alert(
            `Performing ${key} action on ${selectedKeys.size} rows.`
          )}
        onClearSelection={() =>
          setSelectedKeys(
            new Set([])
          )}
      >
        <Item key="edit">
          <Edit />
          <Text>
            Edit
          </Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy
          </Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete
          </Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />

Content#

224 selectedDeleteEditCopyAction group (quiet)Item counterClose button

An ActionBar is a companion component intended to facilitate bulk actions on selected items within a collection component. It consists of an ActionGroup, a clear button, and a count of selected items. It accepts a list of Item elements as children, each with a key prop. Alternatively, a function that returns Item elements is also supported as seen below. See the collection components docs for more details about this API. These Item elements are used to populate the ActionBar's ActionGroup and thus follows the same content guidelines when it comes to customization and labeling.

function Example() {
  let barItems = [
    { key: 'edit', label: 'Edit' },
    { key: 'copy', label: 'Copy' },
    { key: 'delete', label: 'Delete' }
  ];

  let listItems = [
    { key: 0, name: 'Adobe Photoshop' },
    { key: 1, name: 'Adobe Illustrator' },
    { key: 2, name: 'Adobe XD' }
  ];

  let [selectedKeys, setSelectedKeys] = React.useState(new Set([0]));

  return (
    <ActionBarContainer height={300} maxWidth="size-6000">
      <ListView
        items={listItems}
        aria-label="ListView with action bar, dynamic collection"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </ListView>
      <ActionBar
        items={barItems}
        selectedItemCount={selectedKeys === 'all'
          ? items.length
          : selectedKeys.size}
        onAction={(key) =>
          alert(`Performing ${key} action on ${selectedKeys.size} rows.`)}
        onClearSelection={() => setSelectedKeys(new Set([]))}
        isEmphasized
      >
        {(item) => (
          <Item key={item.key}>
            {item.label}
          </Item>
        )}
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />
function Example() {
  let barItems = [
    { key: 'edit', label: 'Edit' },
    { key: 'copy', label: 'Copy' },
    { key: 'delete', label: 'Delete' }
  ];

  let listItems = [
    { key: 0, name: 'Adobe Photoshop' },
    { key: 1, name: 'Adobe Illustrator' },
    { key: 2, name: 'Adobe XD' }
  ];

  let [selectedKeys, setSelectedKeys] = React.useState(
    new Set([0])
  );

  return (
    <ActionBarContainer height={300} maxWidth="size-6000">
      <ListView
        items={listItems}
        aria-label="ListView with action bar, dynamic collection"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </ListView>
      <ActionBar
        items={barItems}
        selectedItemCount={selectedKeys === 'all'
          ? items.length
          : selectedKeys.size}
        onAction={(key) =>
          alert(
            `Performing ${key} action on ${selectedKeys.size} rows.`
          )}
        onClearSelection={() =>
          setSelectedKeys(new Set([]))}
        isEmphasized
      >
        {(item) => (
          <Item key={item.key}>
            {item.label}
          </Item>
        )}
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />
function Example() {
  let barItems = [
    {
      key: 'edit',
      label: 'Edit'
    },
    {
      key: 'copy',
      label: 'Copy'
    },
    {
      key: 'delete',
      label: 'Delete'
    }
  ];

  let listItems = [
    {
      key: 0,
      name:
        'Adobe Photoshop'
    },
    {
      key: 1,
      name:
        'Adobe Illustrator'
    },
    {
      key: 2,
      name: 'Adobe XD'
    }
  ];

  let [
    selectedKeys,
    setSelectedKeys
  ] = React.useState(
    new Set([0])
  );

  return (
    <ActionBarContainer
      height={300}
      maxWidth="size-6000"
    >
      <ListView
        items={listItems}
        aria-label="ListView with action bar, dynamic collection"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </ListView>
      <ActionBar
        items={barItems}
        selectedItemCount={selectedKeys ===
            'all'
          ? items.length
          : selectedKeys
            .size}
        onAction={(
          key
        ) =>
          alert(
            `Performing ${key} action on ${selectedKeys.size} rows.`
          )}
        onClearSelection={() =>
          setSelectedKeys(
            new Set([])
          )}
        isEmphasized
      >
        {(item) => (
          <Item
            key={item
              .key}
          >
            {item.label}
          </Item>
        )}
      </ActionBar>
    </ActionBarContainer>
  );
}

<Example />

Accessibility#

The contents of the ActionBar should follow the same accessibility guidelines as ActionGroup's items, see the ActionGroup docs for more details.

Internationalization#

To internationalize an ActionBar, the content provided to all child items should be localized. A localized string for the selection count and clear button aria-label will be provided automatically. For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of the ActionBar is automatically flipped.

Events#

Use the onClearSelection prop as a callback to handle when the clear button in the ActionBar is pressed. Additionally, the onAction prop can be used as a callback for when the user presses any of the buttons in the ActionBar's ActionGroup. The key from the pressed button will be passed into the callback.

The following example clears row selection within the TableView when the clear button is pressed and alerts the user as to what action is being taken on the selected rows when the ActionButtons are pressed.

function ActionBarActions(props) {
  // Same bar items, table columns, and table rows as example above...

  return (
    <ActionBarContainer height="size-5000">
      <TableView
        aria-label="Table with action bar and controlled selection"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        height="size-3000"
      >
        <TableHeader columns={columns}>
          {(column) => (
            <Column
              key={column.uid}
              align={column.uid === 'level' ? 'end' : 'start'}
            >
              {column.name}
            </Column>
          )}
        </TableHeader>
        <TableBody items={rows}>
          {(item) => (
            <Row>
              {(columnKey) => <Cell>{item[columnKey]}</Cell>}
            </Row>
          )}
        </TableBody>
      </TableView>
      <ActionBar
        items={barItems}
        isEmphasized
        selectedItemCount={selectedKeys === 'all'
          ? selectedKeys
          : selectedKeys.size}
        onClearSelection={() => {
          setSelectedKeys(new Set());
        }}
        onAction={(key) =>
          alert(`Performing ${key} action on ${selectedKeys.size} rows.`)}      >
        {(item) => (
          <Item key={item.key}>
            {item.label}
          </Item>
        )}
      </ActionBar>
    </ActionBarContainer>
  );
}

function ActionBarActions(props) {
  // Same bar items, table columns, and table rows as example above...

  return (
    <ActionBarContainer height="size-5000">
      <TableView
        aria-label="Table with action bar and controlled selection"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        height="size-3000"
      >
        <TableHeader columns={columns}>
          {(column) => (
            <Column
              key={column.uid}
              align={column.uid === 'level'
                ? 'end'
                : 'start'}
            >
              {column.name}
            </Column>
          )}
        </TableHeader>
        <TableBody items={rows}>
          {(item) => (
            <Row>
              {(columnKey) => (
                <Cell>{item[columnKey]}</Cell>
              )}
            </Row>
          )}
        </TableBody>
      </TableView>
      <ActionBar
        items={barItems}
        isEmphasized
        selectedItemCount={selectedKeys === 'all'
          ? selectedKeys : selectedKeys.size}
        onClearSelection={() => {
          setSelectedKeys(new Set());
        }}
        onAction={(key) =>
          alert(
            `Performing ${key} action on ${selectedKeys.size} rows.`
          )}      >
        {(item) => (
          <Item key={item.key}>
            {item.label}
          </Item>
        )}
      </ActionBar>
    </ActionBarContainer>
  );
}

function ActionBarActions(
  props
) {
  // Same bar items, table columns, and table rows as example above...

  return (
    <ActionBarContainer height="size-5000">
      <TableView
        aria-label="Table with action bar and controlled selection"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        height="size-3000"
      >
        <TableHeader
          columns={columns}
        >
          {(column) => (
            <Column
              key={column
                .uid}
              align={column
                  .uid ===
                  'level'
                ? 'end'
                : 'start'}
            >
              {column
                .name}
            </Column>
          )}
        </TableHeader>
        <TableBody
          items={rows}
        >
          {(item) => (
            <Row>
              {(columnKey) => (
                <Cell>
                  {item[
                    columnKey
                  ]}
                </Cell>
              )}
            </Row>
          )}
        </TableBody>
      </TableView>
      <ActionBar
        items={barItems}
        isEmphasized
        selectedItemCount={selectedKeys ===
            'all'
          ? selectedKeys
          : selectedKeys
            .size}
        onClearSelection={() => {
          setSelectedKeys(
            new Set()
          );
        }}
        onAction={(key) =>
          alert(
            `Performing ${key} action on ${selectedKeys.size} rows.`
          )}      >
        {(item) => (
          <Item
            key={item
              .key}
          >
            {item.label}
          </Item>
        )}
      </ActionBar>
    </ActionBarContainer>
  );
}

Props#

ActionBarContainer props#

NameTypeDefaultDescription
childrenReactNode—The contents of the ActionBarContainer. Should include a ActionBar and the renderable content it is associated with.
Layout
NameTypeDefaultDescription
flexResponsive<string | number | boolean>—When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrowResponsive<number>—When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrinkResponsive<number>—When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasisResponsive<number | string>—When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelfResponsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>—Overrides the alignItems property of a flex or grid container. See MDN.
justifySelfResponsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>—Specifies how the element is justified inside a flex or grid container. See MDN.
orderResponsive<number>—The layout order for the element within a flex or grid container. See MDN.
gridAreaResponsive<string>—When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumnResponsive<string>—When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRowResponsive<string>—When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStartResponsive<string>—When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEndResponsive<string>—When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStartResponsive<string>—When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEndResponsive<string>—When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDefaultDescription
marginResponsive<DimensionValue>—The margin for all four sides of the element. See MDN.
marginTopResponsive<DimensionValue>—The margin for the top side of the element. See MDN.
marginBottomResponsive<DimensionValue>—The margin for the bottom side of the element. See MDN.
marginStartResponsive<DimensionValue>—The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEndResponsive<DimensionValue>—The margin for the logical end side of an element, depending on layout direction. See MDN.
marginXResponsive<DimensionValue>—The margin for both the left and right sides of the element. See MDN.
marginYResponsive<DimensionValue>—The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDefaultDescription
widthResponsive<DimensionValue>—The width of the element. See MDN.
minWidthResponsive<DimensionValue>—The minimum width of the element. See MDN.
maxWidthResponsive<DimensionValue>—The maximum width of the element. See MDN.
heightResponsive<DimensionValue>—The height of the element. See MDN.
minHeightResponsive<DimensionValue>—The minimum height of the element. See MDN.
maxHeightResponsive<DimensionValue>—The maximum height of the element. See MDN.
Positioning
NameTypeDefaultDescription
positionResponsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>—Specifies how the element is positioned. See MDN.
topResponsive<DimensionValue>—The top position for the element. See MDN.
bottomResponsive<DimensionValue>—The bottom position for the element. See MDN.
leftResponsive<DimensionValue>—The left position for the element. See MDN. Consider using start instead for RTL support.
rightResponsive<DimensionValue>—The right position for the element. See MDN. Consider using start instead for RTL support.
startResponsive<DimensionValue>—The logical start position for the element, depending on layout direction. See MDN.
endResponsive<DimensionValue>—The logical end position for the element, depending on layout direction. See MDN.
zIndexResponsive<number>—The stacking order for the element. See MDN.
isHiddenResponsive<boolean>—Hides the element.
Accessibility
NameTypeDefaultDescription
idstring—The element's unique identifier. See MDN.
Advanced
NameTypeDefaultDescription
UNSAFE_classNamestring—Sets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSProperties—Sets inline style for the element. Only use as a last resort. Use style props instead.

ActionBar props#

NameTypeDefaultDescription
selectedItemCountnumber | 'all'—The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden.
childrenCollectionChildren<object>—The contents of the collection.
isEmphasizedboolean—Whether the ActionBar should be displayed with a emphasized style.
itemsIterable<object>—Item objects in the collection.
disabledKeysIterable<Key>—The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
Events
NameTypeDefaultDescription
onClearSelection() => void—Handler that is called when the ActionBar clear button is pressed.
onAction( (key: Key )) => void—Handler that is called when an ActionBar button is pressed.
Layout
NameTypeDefaultDescription
flexResponsive<string | number | boolean>—When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrowResponsive<number>—When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrinkResponsive<number>—When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasisResponsive<number | string>—When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelfResponsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>—Overrides the alignItems property of a flex or grid container. See MDN.
justifySelfResponsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>—Specifies how the element is justified inside a flex or grid container. See MDN.
orderResponsive<number>—The layout order for the element within a flex or grid container. See MDN.
gridAreaResponsive<string>—When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumnResponsive<string>—When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRowResponsive<string>—When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStartResponsive<string>—When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEndResponsive<string>—When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStartResponsive<string>—When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEndResponsive<string>—When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDefaultDescription
marginResponsive<DimensionValue>—The margin for all four sides of the element. See MDN.
marginTopResponsive<DimensionValue>—The margin for the top side of the element. See MDN.
marginBottomResponsive<DimensionValue>—The margin for the bottom side of the element. See MDN.
marginStartResponsive<DimensionValue>—The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEndResponsive<DimensionValue>—The margin for the logical end side of an element, depending on layout direction. See MDN.
marginXResponsive<DimensionValue>—The margin for both the left and right sides of the element. See MDN.
marginYResponsive<DimensionValue>—The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDefaultDescription
widthResponsive<DimensionValue>—The width of the element. See MDN.
minWidthResponsive<DimensionValue>—The minimum width of the element. See MDN.
maxWidthResponsive<DimensionValue>—The maximum width of the element. See MDN.
heightResponsive<DimensionValue>—The height of the element. See MDN.
minHeightResponsive<DimensionValue>—The minimum height of the element. See MDN.
maxHeightResponsive<DimensionValue>—The maximum height of the element. See MDN.
Positioning
NameTypeDefaultDescription
positionResponsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>—Specifies how the element is positioned. See MDN.
topResponsive<DimensionValue>—The top position for the element. See MDN.
bottomResponsive<DimensionValue>—The bottom position for the element. See MDN.
leftResponsive<DimensionValue>—The left position for the element. See MDN. Consider using start instead for RTL support.
rightResponsive<DimensionValue>—The right position for the element. See MDN. Consider using start instead for RTL support.
startResponsive<DimensionValue>—The logical start position for the element, depending on layout direction. See MDN.
endResponsive<DimensionValue>—The logical end position for the element, depending on layout direction. See MDN.
zIndexResponsive<number>—The stacking order for the element. See MDN.
isHiddenResponsive<boolean>—Hides the element.
Accessibility
NameTypeDefaultDescription
idstring—The element's unique identifier. See MDN.
Advanced
NameTypeDefaultDescription
UNSAFE_classNamestring—Sets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSProperties—Sets inline style for the element. Only use as a last resort. Use style props instead.

Visual options#

isEmphasized#

isEmphasized should be applied to the ActionBar when it should call attention, such as when floating in a TableView. It should be omitted if the ActionBar should blend in with the rest of the UI, directing a user’s focus to elsewhere in a view.

function Example({ isEmphasized }) {
  let items = [
    { key: 0, name: 'Adobe Photoshop' },
    { key: 1, name: 'Adobe Illustrator' },
    { key: 2, name: 'Adobe XD' }
  ];

  let [selectedKeys, setSelectedKeys] = React.useState(new Set([0]));

  return (
    <ActionBarContainer height={300} width="size-5000">
      <ListView
        items={items}
        aria-label={`ListView with${
          isEmphasized
            ? ' emphasized'
            : ''
        } action bar`}
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </ListView>
      <ActionBar
        isEmphasized={isEmphasized}        selectedItemCount={selectedKeys === 'all'
          ? items.length
          : selectedKeys.size}
        onAction={(key) =>
          alert(`Performing ${key} action on ${selectedKeys.size} rows.`)}
        onClearSelection={() => setSelectedKeys(new Set([]))}
      >
        <Item key="edit">
          <Edit />
          <Text>Edit</Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Flex direction="row" gap="size-200">
  <Example />
  <Example isEmphasized />
</Flex>
function Example({ isEmphasized }) {
  let items = [
    { key: 0, name: 'Adobe Photoshop' },
    { key: 1, name: 'Adobe Illustrator' },
    { key: 2, name: 'Adobe XD' }
  ];

  let [selectedKeys, setSelectedKeys] = React.useState(
    new Set([0])
  );

  return (
    <ActionBarContainer height={300} width="size-5000">
      <ListView
        items={items}
        aria-label={`ListView with${
          isEmphasized
            ? ' emphasized'
            : ''
        } action bar`}
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </ListView>
      <ActionBar
        isEmphasized={isEmphasized}        selectedItemCount={selectedKeys === 'all'
          ? items.length
          : selectedKeys.size}
        onAction={(key) =>
          alert(
            `Performing ${key} action on ${selectedKeys.size} rows.`
          )}
        onClearSelection={() =>
          setSelectedKeys(new Set([]))}
      >
        <Item key="edit">
          <Edit />
          <Text>Edit</Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy</Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete</Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Flex direction="row" gap="size-200">
  <Example />
  <Example isEmphasized />
</Flex>
function Example(
  { isEmphasized }
) {
  let items = [
    {
      key: 0,
      name:
        'Adobe Photoshop'
    },
    {
      key: 1,
      name:
        'Adobe Illustrator'
    },
    {
      key: 2,
      name: 'Adobe XD'
    }
  ];

  let [
    selectedKeys,
    setSelectedKeys
  ] = React.useState(
    new Set([0])
  );

  return (
    <ActionBarContainer
      height={300}
      width="size-5000"
    >
      <ListView
        items={items}
        aria-label={`ListView with${
          isEmphasized
            ? ' emphasized'
            : ''
        } action bar`}
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </ListView>
      <ActionBar
        isEmphasized={isEmphasized}        selectedItemCount={selectedKeys ===
            'all'
          ? items.length
          : selectedKeys
            .size}
        onAction={(
          key
        ) =>
          alert(
            `Performing ${key} action on ${selectedKeys.size} rows.`
          )}
        onClearSelection={() =>
          setSelectedKeys(
            new Set([])
          )}
      >
        <Item key="edit">
          <Edit />
          <Text>
            Edit
          </Text>
        </Item>
        <Item key="copy">
          <Copy />
          <Text>Copy
          </Text>
        </Item>
        <Item key="delete">
          <Delete />
          <Text>Delete
          </Text>
        </Item>
      </ActionBar>
    </ActionBarContainer>
  );
}

<Flex
  direction="row"
  gap="size-200"
>
  <Example />
  <Example
    isEmphasized
  />
</Flex>