feat(menu): add multi-select

[chrisfalaska]

Alaska Airlines Pull Request

Multi-select was originally added to auro-menu as a pending PR in AlaskaAirlines/auro-menu#199.

This feature was never merged or integrated but was selected for adoption into @auro-formkit/auro-menu. This PR incorporates that adoption into the formkit monorepo.

Testing

menu-muli-select.mp4

Summary by Sourcery

Add multi-select functionality to the menu component and implement loading states for combobox, menu, and select components. Update documentation and fix multiple bugs.

New Features:

• Add multi-select support to auro-menu.

Tests:

• Skip dropdown tests.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request introduces multi-select functionality to the auro-menu component. It also includes several bug fixes, performance improvements, and the addition of loading placeholders.

Sequence diagram for multi-select interaction in AuroMenu

sequenceDiagram
    participant User
    participant AuroMenu
    participant MenuOption

    User->>AuroMenu: Click option
    AuroMenu->>AuroMenu: toggleSelectionState(option)
    alt option is selected
        AuroMenu->>MenuOption: handleDeselectState()
        MenuOption-->>AuroMenu: Remove from selected array
    else option is not selected
        AuroMenu->>MenuOption: handleLocalSelectState()
        MenuOption-->>AuroMenu: Add to selected array
    end
    AuroMenu-->>User: Update UI with selection state

Loading

Sequence diagram for loading state handling

sequenceDiagram
    participant Component
    participant AuroMenu
    participant LoadingSlots

    Component->>AuroMenu: Set loading=true
    AuroMenu->>LoadingSlots: Check for loading placeholders
    alt has loading placeholders
        LoadingSlots-->>AuroMenu: Return placeholder content
        AuroMenu->>Component: Display loading UI with placeholders
    else no loading placeholders
        AuroMenu->>Component: Hide content while loading
    end
    Component->>AuroMenu: Set loading=false
    AuroMenu->>Component: Restore normal content

Loading

Class diagram showing the updated AuroMenu component with multi-select support

classDiagram
    class AuroMenu {
        -Boolean disabled
        -Boolean loading
        -Boolean multiSelect
        -Boolean noCheckmark
        -Object optionActive
        -Map loadingSlots
        +handleLocalSelectState(option)
        +handleDeselectState(option)
        +toggleSelectionState(option)
        +selectByValue(value)
        +get hasLoadingPlaceholder()
    }
    note for AuroMenu "Added multi-select and loading support"

    class AuroMenuOption {
        -Boolean selected
        -String value
        -Boolean disabled
        -Boolean loadingplaceholder
    }

    AuroMenu *-- AuroMenuOption : contains

Loading

File-Level Changes

Change	Details	Files
Added multi-select functionality to the menu component. When the multiSelect attribute is present, the value attribute becomes an array of selected values instead of a single string.	Added multiSelect property to the auro-menu component. Updated the value property to handle both string and array values based on the multiSelect attribute. Added toggleSelectionState method to manage selection and deselection of menu options. Updated documentation and examples to reflect the new multi-select functionality.	components/menu/src/auro-menu.js components/menu/demo/api.md components/menu/docs/api.md components/menu/docs/partials/api.md
Added loading state management to the menu component.	Added loading property and loadingChange event. Added loadingText and loadingIcon slots for custom loading indicators. Added styles for loading state. Updated documentation and examples. Integrated loading state with combobox and select components.	components/menu/src/auro-menu.js components/menu/demo/api.md components/menu/docs/api.md components/menu/src/styles/style-menu.scss components/menu/demo/api.html components/menu/demo/api.js components/menu/demo/api.md components/menu/docs/partials/api.md components/combobox/src/auro-combobox.js components/combobox/demo/api.md components/combobox/demo/api.html components/combobox/demo/api.js components/select/demo/api.md components/select/src/auro-select.js components/select/demo/api.html components/select/demo/api.js
Updated dropdown component to match trigger width and added fluid property.	Added fluid property to make dropdown full width. Added matchWidth property to match dropdown width to trigger width. Updated documentation and examples.	components/dropdown/demo/index.md components/dropdown/demo/api.md components/dropdown/demo/api.html components/dropdown/src/auro-dropdown.js components/dropdown/src/styles/style.scss components/dropdown/docs/partials/index.md components/dropdown/apiExamples/commonMatchWidth.html components/dropdown/apiExamples/inline.html components/dropdown/demo/index.html components/dropdown/docs/api.md components/combobox/src/auro-combobox.js
Miscellaneous bug fixes and performance improvements.	Fixed various bugs related to component behavior and styling. Improved performance by using textContent instead of innerText. Updated component dependencies and build processes.	CHANGELOG.md components/menu/src/auro-menu.js components/menu/src/auro-menuoption.js components/combobox/src/auro-combobox.js components/select/src/auro-select.js components/datepicker/src/auro-datepicker.js

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

chrisfalaska seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}