@aurodesignsystem/auro-formkit 2.0.0-beta.10 → 2.0.0-beta.11

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

@@ -0,0 +1,43 @@
+/**
+ * Converts value to an array.
+ * If the value is a JSON string representing an array, it will be parsed.
+ * If the value is already an array, it is returned.
+ * If the value is undefined, it returns undefined.
+ * @private
+ * @param {any} value - The value to be converted. Can be a string, array, or undefined.
+ * @returns {Array|undefined} - The converted array or undefined.
+ * @throws {Error} - Throws an error if the value is not an array, undefined,
+ * or if the value cannot be parsed into an array from a JSON string.
+ */
+export function arrayConverter(value: any): any[] | undefined;
+/**
+ * Compare two arrays for equality.
+ * @private
+ * @param {Array} arr1 - First array to compare.
+ * @param {Array} arr2 - Second array to compare.
+ * @returns {boolean} True if arrays are equal.
+ */
+export function arraysAreEqual(arr1: any[], arr2: any[]): boolean;
+/**
+ * Compares array for changes.
+ * @private
+ * @param {Array|any} newVal - New value to compare.
+ * @param {Array|any} oldVal - Old value to compare.
+ * @returns {boolean} True if arrays have changed.
+ */
+export function arrayOrUndefinedHasChanged(newVal: any[] | any, oldVal: any[] | any): boolean;
+/**
+ * Validates if an option can be interacted with.
+ * @private
+ * @param {HTMLElement} option - The option to check.
+ * @returns {boolean} True if option is interactive.
+ */
+export function isOptionInteractive(option: HTMLElement): boolean;
+/**
+ * Helper method to dispatch custom events.
+ * @param {HTMLElement} element - Element to dispatch event from.
+ * @param {string} eventName - Name of the event to dispatch.
+ * @param {Object} [detail] - Optional detail object to include with the event.
+ */
+export function dispatchMenuEvent(element: HTMLElement, eventName: string, detail?: any): void;
+//# sourceMappingURL=auro-menu-utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"auro-menu-utils.d.ts","sourceRoot":"","sources":["../src/auro-menu-utils.js"],"names":[],"mappings":"AAKA;;;;;;;;;;GAUG;AACH,sCALW,GAAG,GACD,QAAM,SAAS,CA+B3B;AAED;;;;;;GAMG;AACH,0DAFa,OAAO,CAoBnB;AAED;;;;;;GAMG;AACH,mDAJW,QAAM,GAAG,UACT,QAAM,GAAG,GACP,OAAO,CAqBnB;AAED;;;;;GAKG;AACH,4CAHW,WAAW,GACT,OAAO,CAMnB;AAED;;;;;GAKG;AACH,2CAJW,WAAW,aACX,MAAM,sBAehB"}

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

@@ -1,18 +1,20 @@
 /**
  * The auro-menu element provides users a way to select from a list of options.
- * @attr {Object} optionSelected - Specifies the current selected menuOption.
- * @attr {String} matchWord - Specifies a string used to highlight matched string parts in options.
- * @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
- * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
- * @attr {String} value - Value selected for the menu.
- * @prop {Boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
- * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
- * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
+ * @attr {Array<HTMLElement>|undefined} optionselected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
+ * @attr {object} optionactive - Specifies the current active menuOption.
+ * @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
+ * @attr {boolean} disabled - When true, the entire menu and all options are disabled;
+ * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
+ * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
+ * @attr {boolean} multiselect - When true, the selected option can be multiple options.
+ * @attr {Array<string>|undefined} value - Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value.
+ * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
+ * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
+ * @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<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
  * @slot loadingIcon - Icon to show while loading attribute is set
  * @slot - Slot for insertion of menu options.
@@ -22,6 +24,7 @@ export class AuroMenu extends LitElement {
         noCheckmark: {
             type: BooleanConstructor;
             reflect: boolean;
+            attribute: string;
         };
         disabled: {
             type: BooleanConstructor;
@@ -32,16 +35,26 @@ export class AuroMenu extends LitElement {
             reflect: boolean;
         };
         optionSelected: {
-            type: ObjectConstructor;
+            converter: typeof arrayConverter;
+            hasChanged: typeof arrayOrUndefinedHasChanged;
         };
         optionActive: {
             type: ObjectConstructor;
+            attribute: string;
         };
         matchWord: {
             type: StringConstructor;
+            attribute: string;
+        };
+        multiSelect: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: string;
         };
         value: {
-            type: StringConstructor;
+            type: ObjectConstructor;
+            converter: typeof arrayConverter;
+            hasChanged: typeof arrayOrUndefinedHasChanged;
         };
     };
     static get styles(): import("lit").CSSResult[];
@@ -60,131 +73,134 @@ export class AuroMenu extends LitElement {
     noCheckmark: boolean;
     optionActive: Element;
     loading: boolean;
+    multiSelect: boolean;
     /**
+     * Handles keyboard navigation.
      * @private
+     * @param {KeyboardEvent} event - Event object from the browser.
      */
-    private rootMenu;
+    private handleKeyDown;
     /**
+     * Handles option selection via mouse.
      * @private
+     * @param {MouseEvent} event - Event object from the browser.
      */
-    private runtimeUtils;
+    private handleMouseSelect;
     /**
+     * Handles option hover events.
      * @private
+     * @param {CustomEvent} event - Event object from the browser.
      */
-    private nestingSpacer;
+    private handleOptionHover;
     /**
+     * Handles slot change events.
      * @private
      */
-    private loadingSlots;
+    private handleSlotChange;
+    firstUpdated(): void;
+    loadingSlots: NodeListOf<Element>;
+    updated(changedProperties: any): void;
+    index: any;
     /**
-     * Passes the noCheckmark attribute to all nested auro-menuoptions.
+     * Updates the UI state and appearance of menu items based on changed properties.
      * @private
-     * @returns {void}
+     * @param {Map<string, boolean>} changedProperties - LitElement's changed properties map.
      */
-    private handleNoCheckmarkAttr;
-    firstUpdated(): void;
-    updated(changedProperties: any): void;
+    private updateItemsState;
     /**
+     * Initializes the menu's state and structure.
      * @private
-     * @param {Object} option - The menuoption to check for interactive state.
-     * @returns {Boolean} Returns true if the option is interactive.
      */
-    private optionInteractive;
+    private initializeMenu;
     /**
+     * Initializes menu items and their attributes.
      * @private
-     * @returns {void} When called will update the DOM with visible suggest text matches.
      */
-    private markOptions;
+    private initItems;
+    items: Element[];
     /**
-     * Reset the menu and all options.
+     * Updates menu state when an option is selected.
+     * @private
+     * @param {HTMLElement} option - The option element to select.
      */
-    resetOptionsStates(): void;
+    private handleSelectState;
     /**
-     * Set the attributes on the selected menuoption, the menu value and stored option.
-     * @param {Object} option - The menuoption to be selected.
+     * Deselects a menu option and updates related state.
      * @private
+     * @param {HTMLElement} option - The menuoption to be deselected.
      */
-    private handleLocalSelectState;
-    index: number;
+    private handleDeselectState;
     /**
-     * Notify selection change.
+     * Resets all options to their default state.
      * @private
-     * @return {void}
      */
-    private notifySelectionChange;
+    private clearSelection;
     /**
-     * Process actions for making making a menuoption selection.
+     * Resets the menu to its initial state.
+     * This is the only way to return value to undefined.
+     * @public
      */
-    makeSelection(): void;
+    public reset(): void;
     /**
-     * Manage ArrowDown, ArrowUp and Enter keyboard events.
+     * Handles nested menu structure.
      * @private
-     * @param {Object} event - Event object from the browser.
+     * @param {HTMLElement} menu - Root menu element.
      */
-    private handleKeyDown;
+    private handleNestedMenus;
     /**
-     * Initializes all menu options in the DOM. This must be re-run every time the options are changed.
+     * Makes a selection based on the current index or clicked option.
      * @private
      */
-    private initItems;
-    items: Element[];
+    private makeSelection;
     /**
-     * Sets the index value of the selected item or first non-disabled menuoption.
+     * Toggle the selection state of the menuoption.
      * @private
+     * @param {HTMLElement} option - The menuoption to toggle.
      */
-    private getSelectedIndex;
+    private toggleOption;
+    rootMenu: boolean;
     /**
-     * Using value of current this.index evaluates index
-     * of next :focus to set based on array of this.items ignoring items
-     * with disabled attr.
-     *
-     * The event.target is not used as the function needs to know where to go,
-     * versus knowing where it is.
-     * @param {String} moveDirection - Up or Down based on keyboard event.
+     * Navigates through options using keyboard.
+     * @private
+     * @param {string} direction - 'up' or 'down'.
      */
-    selectNextItem(moveDirection: string): void;
+    private navigateOptions;
     /**
-     * Used for applying indentation to each level of nested menu.
+     * Updates the active option state and dispatches events.
      * @private
-     * @param {String} menu - Root level menu object.
+     * @param {number} index - Index of the option to make active.
      */
-    private handleNestedMenus;
+    private updateActiveOption;
     /**
-     * Method to apply `selected` attribute to `menuoption` via `value`.
+     * Handles custom events defined on options.
      * @private
-     * @param {String} value - Must match a unique `menuoption` value.
+     * @param {HTMLElement} option - Option with custom event.
      */
-    private selectByValue;
+    private handleCustomEvent;
     /**
-     * Used to make the active state for options follow mouseover.
-     * @param {Number} index - Index of the menuoption that will be made active.
+     * Notifies selection change to parent components.
      * @private
      */
-    private updateActiveOption;
+    private notifySelectionChange;
     /**
-     * Used to only make a selection when a menuoption is receiving a mousedown event.
-     * @param {Event} evt - Mousedown event.
+     * Checks if an option is currently selected.
      * @private
+     * @param {HTMLElement} option - The option to check.
+     * @returns {boolean}
      */
-    private handleMenuMouseDown;
+    private isOptionSelected;
     /**
-     * Checks if there are any loading placeholders in the component.
-     *
-     * This getter evaluates the `loadingSlots` collection to determine if it contains any items.
-     * If the size of the collection is greater than zero, it indicates the presence of loading
-     * placeholders, returning true; otherwise, it returns false.
-     *
-     * @getter hasLoadingPlaceholder
-     * @type {boolean}
-     * @returns {boolean} Returns true if loading placeholders exist; false otherwise.
+     * Getter for loading placeholder state.
+     * @returns {boolean} - True if loading slots are present and non-empty.
      */
     get hasLoadingPlaceholder(): boolean;
     /**
-     * Used for @slotchange event on slotted element.
-     * @private
+     * Renders the component.
+     * @returns {boolean} - True if loading slots are present and non-empty.
      */
-    private handleSlotItems;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): boolean;
 }
 import { LitElement } from "lit";
+import { arrayConverter } from './auro-menu-utils.js';
+import { arrayOrUndefinedHasChanged } from './auro-menu-utils.js';
 //# sourceMappingURL=auro-menu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"auro-menu.d.ts","sourceRoot":"","sources":["../src/auro-menu.js"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;GAkBG;AAIH;IA+BE;;;;;;;;;;;;;;;;;;;;;;;;;MAmBC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAnEC,WAAsB;IACtB,oBAA+B;IAC/B,eAA0B;IAC1B,qBAAwB;IACxB,sBAA6B;IAC7B,iBAAoB;IAEpB;;OAEG;IACH,iBAAoB;IAEpB;;OAEG;IACH,qBAAiD;IAEjD;;OAEG;IACH,sBAA0D;IAE1D;;OAEG;IACH,qBAAwB;IA4C1B;;;;OAIG;IACH,8BAcC;IAED,qBAOC;IAED,sCA4BC;IAED;;;;OAIG;IACH,0BAEC;IAED;;;OAGG;IACH,oBAkBC;IAED;;OAEG;IACH,2BAQC;IAED;;;;OAIG;IACH,+BAQC;IADC,cAAuC;IAGzC;;;;OAIG;IACH,8BAMC;IAED;;OAEG;IACH,sBAkCC;IAED;;;;OAIG;IACH,sBAoBC;IAED;;;OAGG;IACH,kBAGC;IAFC,iBAAoF;IAItF;;;OAGG;IACH,yBAQC;IAED;;;;;;;;OAQG;IACH,4CAsCC;IAED;;;;OAIG;IACH,0BAgBC;IAED;;;;OAIG;IACH,sBAqCC;IAED;;;;OAIG;IACH,2BAaC;IAED;;;;OAIG;IACH,4BAIC;IAED;;;;;;;;;;OAUG;IACH,6BAHU,OAAO,CAKhB;IAED;;;OAGG;IACH,wBA0BC;IAED,+CAYC;CACF;2BArhBgC,KAAK"}
+{"version":3,"file":"auro-menu.d.ts","sourceRoot":"","sources":["../src/auro-menu.js"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH;IA8DE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwCC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAnHC,WAAsB;IAEtB,oBAA+B;IAE/B,eAA0B;IAE1B,qBAAwB;IAExB,sBAA6B;IAE7B,iBAAoB;IAEpB,qBAAwB;IA8Z1B;;;;OAIG;IACH,sBAeC;IAsDD;;;;OAIG;IACH,0BAUC;IAED;;;;OAIG;IACH,0BAIC;IAED;;;OAGG;IACH,yBAeC;IA1ZD,qBAKC;IAFC,kCAAuF;IAIzF,sCA+CC;IAzCK,WAAe;IA2CrB;;;;OAIG;IACH,yBAgEC;IAID;;;OAGG;IACH,uBAOC;IAED;;;OAGG;IACH,kBAUC;IATC,iBAAoF;IAatF;;;;OAIG;IACH,0BAwBC;IAED;;;;OAIG;IACH,4BAiCC;IAED;;;OAGG;IACH,uBAGC;IAED;;;;OAIG;IACH,qBAgBC;IAED;;;;OAIG;IACH,0BAiBC;IA0BD;;;OAGG;IACH,sBA6BC;IAED;;;;OAIG;IACH,qBAUC;IAoCG,kBAAqB;IAezB;;;;OAIG;IACH,wBA2CC;IAED;;;;OAIG;IACH,2BAUC;IAED;;;;OAIG;IACH,0BAIC;IAED;;;OAGG;IACH,8BAEC;IAED;;;;;OAKG;IACH,yBAMC;IAED;;;OAGG;IACH,6BAFa,OAAO,CAInB;IAED;;;OAGG;IACH,UAFa,OAAO,CAenB;CACF;2BAltBgC,KAAK;+BAY/B,sBAAsB;2CAAtB,sBAAsB"}

package/components/menu/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { AuroMenu } from './auro-menu.js';
 import { AuroMenuOption } from './auro-menuoption.js';
 export { AuroMenu, AuroMenuOption };
+export { arrayConverter, arrayOrUndefinedHasChanged, isOptionInteractive, dispatchMenuEvent } from "./auro-menu-utils.js";
 //# sourceMappingURL=index.d.ts.map