@aurodesignsystem-dev/auro-formkit 0.0.0-pr1503.2 → 0.0.0-pr1505.0

package/components/menu/demo/api.md

@@ -7,32 +7,32 @@ The `auro-menu` element provides users a way to select from a list of options.
 
 ## Properties
 
-| Property                   | Attribute                  | Modifiers | Type                  | Default     | Description                                      |
-|----------------------------|----------------------------|-----------|-----------------------|-------------|--------------------------------------------------|
-| `allowDeselect`            | `allowDeselect`            |           | `boolean`             | false       | Allows deselecting an already selected option when clicked again in single-select mode. |
-| `currentLabel`             |                            | readonly  | `string`              |             |                                                  |
-| `disabled`                 | `disabled`                 |           | `boolean`             |             | When true, the entire menu and all options are disabled. |
-| `hasLoadingPlaceholder`    | `hasLoadingPlaceholder`    |           | `boolean`             |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
-| `index`                    |                            |           | `number`              |             |                                                  |
-| `items`                    |                            | readonly  | `HTMLElement[]`       |             |                                                  |
-| `loading`                  | `loading`                  |           | `boolean`             | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
-| `matchWord`                | `matchword`                |           | `string`              | "undefined" | Specifies a string used to highlight matched string parts in options. |
-| `multiSelect`              | `multiselect`              |           | `boolean`             | false       | When true, the selected option can be multiple options. |
-| `noCheckmark`              | `nocheckmark`              |           | `boolean`             | false       | When true, selected option will not show the checkmark. |
-| `optionActive`             | `optionactive`             |           | `object`              | "undefined" | Specifies the current active menuOption.         |
-| `optionSelected`           | `optionSelected`           |           | `object`              | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
-| `options`                  |                            | readonly  | `array`               |             | Available menu options.                          |
-| `selectAllMatchingOptions` | `selectAllMatchingOptions` |           | `boolean`             | false       | When true, selects all options that match the provided value/key when setting value and multiselect is enabled. |
-| `selectedOption`           |                            | readonly  | `HTMLElement \| null` |             | Gets the first selected option, or null if none. |
-| `selectedOptions`          |                            | readonly  | `HTMLElement[]`       |             | Gets the currently selected options.             |
-| `value`                    | `value`                    |           | `string`              |             | The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values. |
+| Property                | Attribute        | Modifiers | Type                  | Default     | Description                                      |
+|-------------------------|------------------|-----------|-----------------------|-------------|--------------------------------------------------|
+| `currentLabel`          |                  | readonly  | `string`              |             |                                                  |
+| `disabled`              | `disabled`       |           | `boolean`             |             | When true, the entire menu and all options are disabled. |
+| `hasLoadingPlaceholder` |                  | readonly  | `boolean`             |             | Getter for loading placeholder state.            |
+| `index`                 |                  |           | `number`              |             |                                                  |
+| `layout`                |                  |           | `string`              |             |                                                  |
+| `loading`               | `loading`        |           | `boolean`             | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
+| `matchWord`             | `matchword`      |           | `string`              | "undefined" | Specifies a string used to highlight matched string parts in options. |
+| `multiSelect`           | `multiselect`    |           | `boolean`             | false       | When true, the selected option can be multiple options. |
+| `noCheckmark`           | `nocheckmark`    |           | `boolean`             | false       | When true, selected option will not show the checkmark. |
+| `optionActive`          | `optionactive`   |           | `object`              | "undefined" | Specifies the current active menuOption.         |
+| `optionSelected`        | `optionSelected` |           | `object`              | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
+| `options`               |                  | readonly  | `HTMLElement[]`       |             |                                                  |
+| `selectedOption`        |                  | readonly  | `HTMLElement \| null` |             | Gets the first selected option, or null if none. |
+| `selectedOptions`       |                  | readonly  | `HTMLElement[]`       |             | Gets the currently selected options as an array. |
+| `value`                 | `value`          |           | `string`              | "undefined" | The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values. |
 
 ## Methods
 
-| Method               | Type                          | Description                                      |
-|----------------------|-------------------------------|--------------------------------------------------|
-| `reset`              | `(): void`                    | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
-| `updateActiveOption` | `(option: HTMLElement): void` | Updates the currently active option in the menu.<br /><br />**option**: The option to set as active. |
+| Method               | Type                                             | Description                                      |
+|----------------------|--------------------------------------------------|--------------------------------------------------|
+| `navigateOptions`    | `(direction: string): void`                      | Navigates through options using keyboard.<br /><br />**direction**: 'up' or 'down'. |
+| `reset`              | `(): void`                                       | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
+| `selectByValue`      | `(value: string \| string[] \| null \| undefined): void` | Selects options by value.<br /><br />**value**: The value(s) to select. |
+| `updateActiveOption` | `(indexOrOption: number \| HTMLElement): void`   | Updates the active option state and dispatches events.<br />Accepts either a numeric index or an HTMLElement option.<br /><br />**indexOrOption**: Index of the option or the option element to make active. |
 
 ## Events
 
@@ -40,9 +40,8 @@ The `auro-menu` element provides users a way to select from a list of options.
 |-------------------------------|--------------------------------------------------|--------------------------------------------------|
 | `auroMenu-activatedOption`    | `CustomEvent<Element>`                           | Notifies that a menuoption has been made `active`. |
 | `auroMenu-customEventFired`   | `CustomEvent<any>`                               | Notifies that a custom event has been fired.     |
-| `auroMenu-deselectPrevented`  | `CustomEvent<{ values: HTMLElement[] }>`         | Notifies that deselection was prevented and includes the affected options in `detail.values`. |
 | `auroMenu-loadingChange`      | `CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>` | Notifies when the loading attribute is changed.  |
-| `auroMenu-optionsChange`      | `CustomEvent<{ options: any; }>`                 |                                                  |
+| `auroMenu-optionsChange`      | `CustomEvent<{ options: Element[] \| undefined; }>` |                                                  |
 | `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that an attempt to select a menuoption by matching a value has failed. |
 | `auroMenu-selectValueReset`   | `CustomEvent<any>`                               | Notifies that the component value has been reset. |
 | `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
@@ -61,34 +60,31 @@ The `auro-menuoption` element provides users a way to define a menu option.
 
 ## Properties
 
-| Property      | Attribute  | Modifiers | Type      | Default | Description                                      |
-|---------------|------------|-----------|-----------|---------|--------------------------------------------------|
-| `disabled`    | `disabled` |           | `boolean` | false   | When true, disables the menu option.             |
-| `iconTag`     |            |           |           |         |                                                  |
-| `isActive`    |            | readonly  | `boolean` |         | Returns whether the menu option is currently active and selectable.<br />An option is considered active if it is not hidden, not disabled, and not static. |
-| `key`         | `key`      |           | `string`  |         | Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used. |
-| `noMatch`     | `nomatch`  |           | `boolean` | false   | When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match. |
-| `selected`    | `selected` |           | `boolean` | false   | Specifies that an option is selected.            |
-| `tabIndex`    | `tabIndex` |           | `number`  |         | Specifies the tab index of the menu option.      |
-| `unsubscribe` |            |           | `number`  | null    |                                                  |
-| `value`       | `value`    |           | `string`  |         | Specifies the value to be sent to a server.      |
+| Property      | Attribute     | Modifiers | Type      | Default | Description                                      |
+|---------------|---------------|-----------|-----------|---------|--------------------------------------------------|
+| `disabled`    | `disabled`    |           | `boolean` | false   |                                                  |
+| `iconTag`     |               |           |           |         |                                                  |
+| `isActive`    |               | readonly  | `boolean` |         | Returns whether the menu option is currently active and selectable. |
+| `layout`      |               |           | `string`  |         |                                                  |
+| `noCheckmark` | `noCheckmark` |           | `boolean` | false   |                                                  |
+| `noMatch`     | `nomatch`     |           | `boolean` | false   | When true, marks this option as the "no matching results" placeholder shown by combobox<br />when the user's input does not match any available options. |
+| `selected`    | `selected`    |           | `boolean` | false   |                                                  |
+| `value`       | `value`       |           | `string`  |         |                                                  |
 
 ## Methods
 
-| Method                | Type                          | Description                                      |
-|-----------------------|-------------------------------|--------------------------------------------------|
-| `attachTo`            | `(service: Object): void`     | Attaches this menu option to a menu service and subscribes to its events.<br />This method enables the option to participate in menu selection and highlighting logic.<br /><br />**service**: The menu service instance to attach to. |
-| `bindEvents`          | `(): void`                    | Sets up event listeners for user interaction with the menu option.<br />This function enables click and mouse enter events to trigger selection and highlighting logic. |
-| `handleMenuChange`    | `(event: Object): void`       | Handles changes from the menu service and updates the option's state.<br />This function synchronizes the option's properties and selection/highlight state with menu events.<br /><br />**event**: The event object from the menu service. |
-| `setInternalSelected` | `(isSelected: boolean): void` | Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.<br />This function ensures the option's selection state is synchronized with menu logic and notifies listeners.<br /><br />**isSelected**: Whether the option should be marked as selected. |
-| `setSelected`         | `(isSelected: boolean): void` | Sets the selected state of the menu option.<br />This function updates whether the option is currently selected.<br /><br />**isSelected**: Whether the option should be marked as selected. |
-| `updateActive`        | `(isActive: boolean): void`   | Updates the active state and visual highlighting of the menu option.<br />This function toggles the option's active status and applies or removes the active CSS class.<br /><br />**isActive**: Whether the option should be marked as active. |
+| Method             | Type                  |
+|--------------------|-----------------------|
+| `attachTo`         | `(): void`            |
+| `handleMenuChange` | `(): void`            |
+| `setSelected`      | `(value: any): void`  |
+| `updateActive`     | `(active: any): void` |
 
 ## Events
 
 | Event                      | Type                | Description                                      |
 |----------------------------|---------------------|--------------------------------------------------|
-| `auroMenuOption-click`     | `CustomEvent<this>` |                                                  |
+| `auroMenuOption-click`     | `CustomEvent<this>` | Notifies that this option has been clicked.      |
 | `auroMenuOption-mouseover` | `CustomEvent<this>` | Notifies that this option has been hovered over. |
 
 ## Slots

package/components/menu/demo/customize.md

@@ -18,7 +18,6 @@
 <auro-anchorlink fluid href="#presetValue" class="level2 body-xs">Preset Value</auro-anchorlink>
 <auro-anchorlink fluid href="#presetValueMultiselect" class="level2 body-xs">Preset Value (Multi)</auro-anchorlink>
 <auro-anchorlink fluid href="#preselect" class="level2 body-xs">Pre-Selected</auro-anchorlink>
-<auro-anchorlink fluid href="#allowDeselect" class="level2 body-xs">Allow Deselect</auro-anchorlink>
 </auro-nav>
 </nav>
 <div class="mainContent">
@@ -604,33 +603,6 @@
 &lt;/auro-menu&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-<auro-header level="3" id="allowDeselect">Allow Deselect</auro-header>
-<p>Use the <code>allowDeselect</code> attribute to allow users to click a selected option again to deselect it in single-select mode. In multi-select mode, deselection is always available regardless of this attribute.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/allow-deselect.html) -->
-<!-- The below content is automatically added from ./../apiExamples/allow-deselect.html -->
-<auro-menu allowDeselect>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-</auro-menu>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/allow-deselect.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/allow-deselect.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-menu allowDeselect&gt;
-  &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-&lt;/auro-menu&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
 </section>
 </div>
 </div>