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

package/components/menu/dist/auro-menu.d.ts

@@ -6,7 +6,6 @@
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
- * @event {CustomEvent<{ values: HTMLElement[] }>} auroMenu-deselectPrevented - Notifies that deselection was prevented and includes the affected options in `detail.values`.
  * @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
  * @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
  * @slot loadingText - Text to show while loading attribute is set
@@ -15,13 +14,6 @@
  */
 export class AuroMenu extends AuroElement {
     static get properties(): {
-        /**
-         * Allows deselecting an already selected option when clicked again in single-select mode.
-         */
-        allowDeselect: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
         /**
          * When true, the entire menu and all options are disabled.
          */
@@ -29,18 +21,6 @@ export class AuroMenu extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        /**
-         * Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
-         */
-        hasLoadingPlaceholder: {
-            type: BooleanConstructor;
-        };
-        /**
-         * @private
-         */
-        layout: {
-            type: StringConstructor;
-        };
         /**
          * Indent level for submenus.
          * @private
@@ -93,30 +73,6 @@ export class AuroMenu extends AuroElement {
         optionSelected: {
             type: ObjectConstructor;
         };
-        options: {
-            type: ArrayConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * Sets the size of the menu.
-         * @type {'sm' | 'md'}
-         * @default 'sm'
-         */
-        size: "sm" | "md";
-        /**
-         * When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
-         */
-        selectAllMatchingOptions: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Sets the shape of the menu.
-         * @type {'box' | 'round'}
-         * @default 'box'
-         */
-        shape: "box" | "round";
         /**
          * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
          */
@@ -125,11 +81,16 @@ export class AuroMenu extends AuroElement {
             reflect: boolean;
             attribute: string;
         };
+        layout: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
     };
     static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.
-     * @param {string} [name="auro-menu"] - The name of the element that you want to register.
+     * @param {string} [name="auro-menu"] - The name of element that you want to register to.
      *
      * @example
      * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
@@ -144,30 +105,41 @@ export class AuroMenu extends AuroElement {
      * @private
      */
     private size;
+    value: any;
     optionSelected: any;
     matchWord: any;
     noCheckmark: boolean;
-    optionActive: any;
+    optionActive: Element | undefined;
     loading: boolean;
     multiSelect: boolean;
-    allowDeselect: boolean;
-    selectAllMatchingOptions: boolean;
     /**
-     * Handles slot change events.
+     * Handles keyboard navigation and selection.
      * @private
+     * @param {KeyboardEvent} event - The keydown event.
      */
-    private handleSlotChange;
+    private handleKeyDown;
     /**
-     * @readonly
-     * @returns {string} - Returns the label of the currently selected option(s).
+     * Handles option selection via click events from menuoptions.
+     * @private
+     * @param {CustomEvent} event - The auroMenuOption-click event.
      */
-    readonly get currentLabel(): string;
+    private handleMouseSelect;
+    /**
+     * Handles option hover events.
+     * @private
+     * @param {CustomEvent} event - Event object from the browser.
+     */
+    private handleOptionHover;
+    /**
+     * Handles slot change events.
+     * @private
+     */
+    private handleSlotChange;
     /**
      * @readonly
      * @returns {Array<HTMLElement>} - Returns the array of available menu options.
-     * @deprecated Use `options` property instead.
      */
-    readonly get items(): Array<HTMLElement>;
+    readonly get options(): Array<HTMLElement>;
     /**
      * @param {number} value - Sets the index of the currently active option.
      */
@@ -177,83 +149,72 @@ export class AuroMenu extends AuroElement {
      */
     get index(): number;
     /**
-     * Formatted value based on `multiSelect` state.
-     * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
-     * @private
-     * @returns {String|Array<String>}
-     */
-    private get formattedValue();
-    /**
-     * Gets the current property values for the menu service.
-     * @private
-     * @returns {Object}
-     */
-    private get propertyValues();
-    /**
-     * Provides the menu context to child components.
-     * Initializes the MenuService and subscribes to menu changes.
-     * @protected
-     */
-    protected provideContext(): void;
-    rootMenu: boolean | undefined;
-    menuService: any;
-    _contextProvider: any;
-    /**
-     * Updates the currently active option in the menu.
-     * @param {HTMLElement} option - The option to set as active.
+     * Gets the currently selected options as an array.
+     * @returns {Array<HTMLElement>}
      */
-    updateActiveOption(option: HTMLElement): void;
+    get selectedOptions(): Array<HTMLElement>;
     /**
-     * Sets the internal value and manages update state.
-     * @param {String|Array<String>} value - The value to set.
-     * @protected
+     * Gets the first selected option, or null if none.
+     * @returns {HTMLElement|null}
      */
-    protected setInternalValue(value: string | Array<string>): void;
-    internalUpdateInProgress: boolean | undefined;
-    value: any;
+    get selectedOption(): HTMLElement | null;
     /**
-     * Handles changes from the menu service and updates component state.
-     * @param {Object} event - The event object from the menu service.
-     * @protected
+     * @readonly
+     * @returns {string} - Returns the label of the currently selected option(s).
      */
-    protected handleMenuChange(event: Object): void;
-    _index: any;
-    options: any;
+    readonly get currentLabel(): string;
     /**
-     * Gets the currently selected options.
-     * @returns {Array<HTMLElement>}
+     * Formatted value based on `multiSelect` state.
+     * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+     * @private
+     * @returns {String|Array<String>}
      */
-    get selectedOptions(): Array<HTMLElement>;
+    private get formattedValue();
     /**
-     * Gets the first selected option, or null if none.
-     * @returns {HTMLElement|null}
+     * Selects options by value.
+     * @param {string|string[]|undefined|null} value - The value(s) to select.
+     * @public
      */
-    get selectedOption(): HTMLElement | null;
+    public selectByValue(value: string | string[] | undefined | null): void;
     firstUpdated(): void;
     loadingSlots: NodeListOf<Element> | undefined;
-    updated(changedProperties: any): void;
     /**
      * Sets an attribute that matches the default tag name if the tag name is not the default.
      * @param {string} tagName - The tag name to set as an attribute.
      * @private
      */
     private setTagAttribute;
+    updated(changedProperties: any): void;
+    _index: number | undefined;
     /**
-     * Sets the loading state and dispatches a loading change event.
-     * @param {boolean} isLoading - Whether the menu is loading.
-     * @protected
+     * Updates the UI state and appearance of menu items based on changed properties.
+     * @private
+     * @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
      */
-    protected setLoadingState(isLoading: boolean): void;
+    private updateItemsState;
     /**
      * Initializes the menu's state and structure.
      * @private
      */
     private initializeMenu;
     /**
-     * Selects the currently highlighted option.
-     * @protected
+     * Initializes menu items and their attributes.
+     * @private
+     */
+    private initItems;
+    items: Element[] | undefined;
+    /**
+     * Updates menu state when an option is selected.
+     * @private
+     * @param {HTMLElement} option - The option element to select.
+     */
+    private handleSelectState;
+    /**
+     * Deselects a menu option and updates related state.
+     * @private
+     * @param {HTMLElement} option - The menuoption to be deselected.
      */
-    protected makeSelection(): void;
+    private handleDeselectState;
     /**
      * Resets all options to their default state.
      * @private
@@ -272,11 +233,28 @@ export class AuroMenu extends AuroElement {
      */
     private handleNestedMenus;
     /**
-     * Navigates the menu options in the specified direction.
-     * @param {'up'|'down'} direction - The direction to navigate.
-     * @protected
+     * Makes a selection based on the current index.
+     * @private
      */
-    protected navigateOptions(direction: "up" | "down"): void;
+    private makeSelection;
+    /**
+     * Toggle the selection state of the menuoption.
+     * @private
+     * @param {HTMLElement} option - The menuoption to toggle.
+     */
+    private toggleOption;
+    rootMenu: boolean | undefined;
+    /**
+     * Navigates through options using keyboard.
+     * @param {string} direction - 'up' or 'down'.
+     */
+    navigateOptions(direction: string): void;
+    /**
+     * Updates the active option state and dispatches events.
+     * Accepts either a numeric index or an HTMLElement option.
+     * @param {number|HTMLElement} indexOrOption - Index of the option or the option element to make active.
+     */
+    updateActiveOption(indexOrOption: number | HTMLElement): void;
     /**
      * Handles custom events defined on options.
      * @private
@@ -289,6 +267,13 @@ export class AuroMenu extends AuroElement {
      * @private
      */
     private notifySelectionChange;
+    /**
+     * @private
+     * @param {any} current - Current selection.
+     * @param {any} next - New selection to compare.
+     * @returns {boolean} Whether the selections are equal.
+     */
+    private selectionEquals;
     /**
      * Checks if an option is currently selected.
      * @private

package/components/menu/dist/auro-menuoption.d.ts

@@ -5,103 +5,62 @@
  * @slot default - The default slot for the menu option text.
  *
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
+ * @event auroMenuOption-click - Notifies that this option has been clicked.
  */
 export class AuroMenuOption extends AuroElement {
-    /**
-     * This will register this element with the browser.
-     * @param {string} [name="auro-menuoption"] - The name of the element that you want to register.
-     *
-     * @example
-     * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
-     *
-     */
-    static register(name?: string): void;
     static get properties(): {
-        /**
-         * When true, disables the menu option.
-         */
-        disabled: {
+        noCheckmark: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        /**
-         * @private
-         */
-        event: {
-            type: StringConstructor;
+        selected: {
+            type: BooleanConstructor;
             reflect: boolean;
         };
-        /**
-         * @private
-         */
-        layout: {
-            type: StringConstructor;
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
         };
-        /**
-         * 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.
-         */
-        key: {
+        value: {
             type: StringConstructor;
             reflect: boolean;
         };
-        /**
-         * @private
-         */
-        menuService: {
-            type: ObjectConstructor;
-            state: boolean;
+        tabIndex: {
+            type: NumberConstructor;
+            reflect: boolean;
         };
         /**
          * @private
          */
-        matchWord: {
+        event: {
             type: StringConstructor;
-            state: boolean;
-        };
-        /**
-         * @private
-         */
-        noCheckmark: {
-            type: BooleanConstructor;
             reflect: boolean;
         };
         /**
-         * 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.
+         * 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.
          */
         noMatch: {
             type: BooleanConstructor;
             reflect: boolean;
             attribute: string;
         };
-        /**
-         * Specifies that an option is selected.
-         */
-        selected: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Specifies the tab index of the menu option.
-         */
-        tabIndex: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Specifies the value to be sent to a server.
-         */
-        value: {
+        layout: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
     };
     static get styles(): import("lit").CSSResult[];
     /**
-     * Returns whether the menu option is currently active and selectable.
-     * An option is considered active if it is not hidden, not disabled, and not static.
-     * @returns {boolean} True if the option is active, false otherwise.
+     * This will register this element with the browser.
+     * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
+     *
+     * @example
+     * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
+     *
      */
-    get isActive(): boolean;
+    static register(name?: string): void;
     /**
      * @private
      */
@@ -119,87 +78,23 @@ export class AuroMenuOption extends AuroElement {
      * @private
      */
     private runtimeUtils;
-    menuService: Object | null;
-    unsubscribe: any;
     /**
-     * Handles changes from the menu service and updates the option's state.
-     * This function synchronizes the option's properties and selection/highlight state with menu events.
-     * @param {Object} event - The event object from the menu service.
+     * Returns whether the menu option is currently active and selectable.
+     * @returns {boolean}
      */
-    handleMenuChange(event: Object): void;
-    _contextConsumer: ContextConsumer<import("@lit/context").Context<"menu-context", any>, this> | undefined;
-    key: any;
+    get isActive(): boolean;
     firstUpdated(): void;
     updated(changedProperties: any): void;
+    handleMenuChange(): void;
+    setSelected(value: any): void;
+    updateActive(active: any): void;
+    active: any;
+    attachTo(): void;
     /**
-     * Sets up event listeners for user interaction with the menu option.
-     * This function enables click and mouse enter events to trigger selection and highlighting logic.
-     */
-    bindEvents(): void;
-    /**
-     * Attaches this menu option to a menu service and subscribes to its events.
-     * This method enables the option to participate in menu selection and highlighting logic.
-     * @param {Object} service - The menu service instance to attach to.
-     */
-    attachTo(service: Object): void;
-    active: boolean | undefined;
-    /**
-     * Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.
-     * This function ensures the option's selection state is synchronized with menu logic and notifies listeners.
-     * @param {boolean} isSelected - Whether the option should be marked as selected.
-     */
-    setInternalSelected(isSelected: boolean): void;
-    internalUpdateInProgress: boolean | undefined;
-    /**
-     * Sets the selected state of the menu option.
-     * This function updates whether the option is currently selected.
-     * @param {boolean} isSelected - Whether the option should be marked as selected.
-     * @deprecated Simply modify the `selected` property directly instead.
-     */
-    setSelected(isSelected: boolean): void;
-    /**
-     * Updates the active state and visual highlighting of the menu option.
-     * This function toggles the option's active status and applies or removes the active CSS class.
-     * @param {boolean} isActive - Whether the option should be marked as active.
-     * @deprecated Simply modify the `active` property directly instead.
-     */
-    updateActive(isActive: boolean): void;
-    /**
-     * Updates the CSS class for the menu option based on its active state.
-     * This function adds or removes the 'active' class to visually indicate the option's active status.
-     * @private
-     */
-    private updateActiveClasses;
-    /**
-     * Updates the visual highlighting of text within the menu option based on the current match word.
-     * This function highlights matching text segments and manages nested spacers for display formatting.
-     * @private
-     */
-    private updateTextHighlight;
-    /**
-     * Handles click events on the menu option, toggling its selected state.
-     * This function dispatches a click event and updates selection if the option is not disabled.
+     * Handles click events on the menu option.
      * @private
      */
     private handleClick;
-    /**
-     * Handles mouse enter events to highlight the menu option.
-     * This function updates the menu service to set this option as the currently highlighted item if not disabled.
-     * @private
-     */
-    private handleMouseEnter;
-    /**
-     * Dispatches custom events defined for this menu option.
-     * This function notifies listeners when a custom event is triggered by the option.
-     * @private
-     */
-    private handleCustomEvent;
-    /**
-     * Dispatches a click event for this menu option.
-     * This function notifies listeners that the option has been clicked.
-     * @private
-     */
-    private dispatchClickEvent;
     /**
      * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
      *
@@ -216,4 +111,3 @@ export class AuroMenuOption extends AuroElement {
     protected renderLayout(): void;
 }
 import { AuroElement } from "../../layoutElement/src/auroElement.js";
-import { ContextConsumer } from '@lit/context';