New component menu bulk actions

[trigoporres]

What is the problem this feature will solve?

We do not have a special component for the bulk actions menu of the table. It must always be created in the column definition. This makes it possible for everyone to set up the menu in their own way.

What is the feature you are proposing to solve the problem?

We have to create a menu component with the corresponding styles that can be used directly in the bulkactions column. In this way:

     <Popover.Panel>
            <Panel.Header size="sm" title={'Bulk actions'}>
              <HFlex justifyContent="space-between">
                <Typography.Heading size="h5">
                  Bulk actions
                </Typography.Heading>
                <Typography.Caption colorScheme="weak">
                  {bulkSelection.length} selected
                </Typography.Caption>
              </HFlex>
            </Panel.Header>
            <Panel.Body removeSpace>
              <Box padding="cmp-xxs">
                <Menu>
                  <Menu.Item
                    onClick={() => {
                      setOpened(false);
                    }}
                  >
                    Dummy action
                  </Menu.Item>
                  <Menu.Item>Dummy action 2</Menu.Item>
                  <Popover
                    placement="right-start"
                    id={popoverId}
                  >
                    {({ toggle, ref, isOpened, setOpened }) => (
                      <Menu.Item
                        aria-controls={popoverId}
                        aria-haspopup="true"
                        aria-expanded={isOpened}
                        ref={ref}
                        onClick={() => {
                          setOpened(true);
                        }}
                        onMouseLeave={toggle}
                        onMouseOver={() => {
                          setOpened(true);
                        }}
                        expandable
                        state={
                          isOpened ? 'expanded' : undefined
                        }
                      >
                        Danger actions
                      </Menu.Item>
                    )}
                    <Popover.Panel>
                      <Menu>
                        <Menu.Item>Dummy action 1</Menu.Item>
                        <Menu.Item>Dummy action 2</Menu.Item>
                        <Menu.Item
                          onClick={() => {
                            setData((prev) =>
                              prev.filter(
                                (_, index) =>
                                  !bulkSelection.includes(
                                    index,
                                  ),
                              ),
                            );
                            clear();
                          }}
                        >
                          Remove row(s)
                        </Menu.Item>
                      </Menu>
                    </Popover.Panel>
                  </Popover>
                </Menu>
              </Box>
            </Panel.Body>
          </Popover.Panel>

What alternatives have you considered?

No response