[ic-popover-menu]: Allow menu to not close to allow clicking multiple options

Summary

When I click one of these checkboxes I'd like to be able to do multiple at once without the menu being closed:

💬 Description

A click anywhere on the menu shouldn't close the menu or I should at least be able to control that somehow

I think its this code: https://github.com/mi6/ic-ui-kit/blob/895517389cf1b33e002f4b72661792fd74ee4cbb/packages/web-components/src/components/ic-popover-menu/ic-popover-menu.tsx#L126C12-L136

Example code with the issue:

export default function SelectColumn({ list, label, heading, columns, setColumns }: Props) {
  const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
  const handlePopoverToggled = () => {
    setPopoverOpen((value) => !value);
  };
  const handlePopoverClosed = () => {
    setPopoverOpen(false);
  };

  const onChange = (checks: string[]) => {
    setColumns(columns.map((e) => ({ ...e, checked: checks.includes(e.key) })));
  };

  const list: CheckBox[] = [
    {
      key: 'column1',
      label: 'Column 1',
      checked: true,
    },
    {
      key: 'column2',
      label: 'Column 2',
      checked: true,
    },
    {
      key: 'column3',
      label: 'Column 3',
      checked: true,
    },
    {
      key: 'column4',
      label: 'Column 4',
      checked: true,
    },
  ];

  return (
    <>
      <IcButton variant="secondary" id="button-1" onClick={handlePopoverToggled}>
        {heading}
      </IcButton>
      <IcPopoverMenu anchor="button-1" aria-label="popover" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>
        <IcCheckboxGroup
          label={label}
          name="default"
          hideLabel
          style={{ padding: IC_SPACE_MD }}
          onIcChange={(ev) => onChange(ev.detail.value)}
        >
          {list.map((item) => {
            return (
              <IcCheckbox
                value={item.key}
                checked={columns.find((e) => e.key === item.key)?.checked}
                label={item.label}
                key={`key-selector-${item.key}`}
              />
            );
          })}
        </IcCheckboxGroup>
      </IcPopoverMenu>
    </>
  );
}

💰 Use value

End users will be able to use this component to customise a datatable to only show the columns they are interested in..

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given
When
Then

✏ Designs

If there's a Figma design file (or other mock-up), include it here.

## 🧾 Guidance
If there's written guidance or documentation, include a link to it here.

Additional info

I'm using the checkbox component to work around https://github.com/mi6/ic-ui-kit/issues/2745

I've managed a somewhat workable solution by changing the handlePopoverClosed function to:

  const handlePopoverClosed = () => {
    // hacky workaround to keep menu open to allow turning off multiple columns
    // causes a bug if you click away and click back after updating a column
    // expected that https://github.com/mi6/ic-ui-kit/pull/2678 will allow us to fix this by looking at the event
    setPopoverOpen(true);
  };

It works if the user clicks on the menu, but if the user clicks away and clicks the button to open the menu again they have to click twice. Once https://github.com/mi6/ic-ui-kit/pull/2678 is in we might be able to adjust the work around to avoid that.

Start in packages/web-components/src/components/ic-popover-menu/ic-popover-menu.tsx at the linked menu-close handling around lines 126–136, and review the referenced PR #2678 for related event behavior. Confirm that clicking multiple checkbox options keeps the menu open while clicking away closes it without requiring an extra button click.