@aurodesignsystem-dev/auro-formkit 0.0.0-pr1498.0 → 0.0.0-pr1499.0

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

@@ -5,62 +5,103 @@
  * @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(): {
-        noCheckmark: {
+        /**
+         * When true, disables the menu option.
+         */
+        disabled: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        selected: {
-            type: BooleanConstructor;
+        /**
+         * @private
+         */
+        event: {
+            type: StringConstructor;
             reflect: boolean;
         };
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
+        /**
+         * @private
+         */
+        layout: {
+            type: StringConstructor;
         };
-        value: {
+        /**
+         * 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: {
             type: StringConstructor;
             reflect: boolean;
         };
-        tabIndex: {
-            type: NumberConstructor;
-            reflect: boolean;
+        /**
+         * @private
+         */
+        menuService: {
+            type: ObjectConstructor;
+            state: boolean;
         };
         /**
          * @private
          */
-        event: {
+        matchWord: {
             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.
+         * 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.
          */
         noMatch: {
             type: BooleanConstructor;
             reflect: boolean;
             attribute: string;
         };
-        layout: {
+        /**
+         * 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: {
             type: StringConstructor;
-            attribute: string;
             reflect: boolean;
         };
     };
     static get styles(): import("lit").CSSResult[];
     /**
-     * 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/>
-     *
+     * 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.
      */
-    static register(name?: string): void;
+    get isActive(): boolean;
     /**
      * @private
      */
@@ -78,23 +119,87 @@ export class AuroMenuOption extends AuroElement {
      * @private
      */
     private runtimeUtils;
+    menuService: Object | null;
+    unsubscribe: any;
     /**
-     * Returns whether the menu option is currently active and selectable.
-     * @returns {boolean}
+     * 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.
      */
-    get isActive(): boolean;
+    handleMenuChange(event: Object): void;
+    _contextConsumer: ContextConsumer<import("@lit/context").Context<"menu-context", any>, this> | undefined;
+    key: any;
     firstUpdated(): void;
     updated(changedProperties: any): void;
-    handleMenuChange(): void;
-    setSelected(value: any): void;
-    updateActive(active: any): void;
-    active: any;
-    attachTo(): void;
     /**
-     * Handles click events on the menu option.
+     * 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.
      * @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`.
      *
@@ -111,3 +216,4 @@ export class AuroMenuOption extends AuroElement {
     protected renderLayout(): void;
 }
 import { AuroElement } from "../../layoutElement/src/auroElement.js";
+import { ContextConsumer } from '@lit/context';