Alaska Airlines Pull Request

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Resolves: #199

Summary:

The code diff introduces a new multiSelect attribute to the AuroMenu component, allowing for multiple options to be selected. Here's a breakdown of the functional differences:

1. New Attribute: multiSelect

   • Definition: Added a multiSelect Boolean attribute to the class, allowing the menu to support multiple selections.
   • Usage:

     this.multiSelect = undefined;

2. Handling value Property

   • Before: The value property was a single string representing the selected value.
   • After: The value property can be either a string or an array of strings when multiSelect is true.

     if (!this.multiSelect) {
       this.selectByValue(this.value);
     } else {
       const values = JSON.parse(this.value);
       if (this.value && Array.isArray(values)) {
         values.forEach((val) => {
           this.selectByValue(val);
         });
       }
     }

3. Selection State Management

   • New Methods: Added methods to handle multiple selections:
     • toggleSelectionState: Toggles the selection state of an option.
     • handleDeselectState: Handles deselection of an option, updating the value array.
     • Modified handleLocalSelectState to support multiple selections by updating the value array.

     toggleSelectionState(option) {
       if (option.hasAttribute('selected')) {
         this.handleDeselectState(option);
       } else {
         this.handleLocalSelectState(option);
       }
     }
     handleDeselectState(option) {
       option.removeAttribute('selected');
       option.classList.remove('active');
       option.ariaSelected = false;
     
       if (this.multiSelect && Array.isArray(this.value)) {
         this.value = this.value.filter((val) => val !== option.value);
         if (this.value.length === 0) {
           this.value = undefined;
         }
       }
     
       if (this.multiSelect && Array.isArray(this.optionSelected)) {
         this.optionSelected = this.optionSelected.filter((val) => val !== option);
         if (this.optionSelected.length === 0) {
           this.optionSelected = undefined;
         }
       }
     
       this.index = this.items.indexOf(option);
     }

4. Resetting Option States

   • Before: resetOptionsStates was always called when selecting an item.
   • After: resetOptionsStates is only called when multiSelect is false.

     if (!this.multiSelect) {
       this.resetOptionsStates();
     }

5. Event Handling

   • Modified event handling to toggle selection state instead of always setting it:

     if (!this.multiSelect) {
       this.handleLocalSelectState(option);
     } else {
       this.toggleSelectionState(option);
     }

The changes allow the AuroMenu component to handle multiple selections by using an array for the value property and providing methods to manage the selection and deselection of multiple options.

Type of change:

Please delete options that are not relevant.

• New capability
• Revision of an existing capability
• Infrastructure change (automation, etc.)
• Other (please elaborate)

Checklist:

• My update follows the CONTRIBUTING guidelines of this project
• I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!

-- Auro Design System Team