@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

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

@@ -1,17 +1,7 @@
 /**
- * The auro-menu element provides users a way to select from a list of options.
- * @attr {HTMLElement|Array<HTMLElement>} optionSelected - An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
- * @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 {boolean} selectAllMatchingOptions - When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
- * @attr {string} value - The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
- * @prop {string} size - Sets the size of the menu. Accepted values are 'sm' and 'md'. Default is 'sm'.
- * @prop {string} shape - Sets the shape of the menu options. Accepted values are 'box' and 'round'. Default is 'box'.
- * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
+ * The `auro-menu` element provides users a way to select from a list of options.
+ * @customElement auro-menu
+ *
  * @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.
@@ -31,71 +21,114 @@ export class AuroMenu extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        noCheckmark: {
+        /**
+         * When true, the entire menu and all options are disabled.
+         */
+        disabled: {
             type: BooleanConstructor;
             reflect: boolean;
-            attribute: string;
         };
-        disabled: {
+        /**
+         * 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
+         */
+        level: {
+            type: NumberConstructor;
             reflect: boolean;
+            attribute: boolean;
         };
+        /**
+         * When true, displays a loading state using the loadingIcon and loadingText slots if provided.
+         */
         loading: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        optionSelected: {
-            type: ObjectConstructor;
-        };
-        optionActive: {
-            type: ObjectConstructor;
-            attribute: string;
-        };
+        /**
+         * Specifies a string used to highlight matched string parts in options.
+         */
         matchWord: {
             type: StringConstructor;
             attribute: string;
         };
+        /**
+         * When true, the selected option can be multiple options.
+         */
         multiSelect: {
             type: BooleanConstructor;
             reflect: boolean;
             attribute: string;
         };
-        selectAllMatchingOptions: {
+        /**
+         * When true, selected option will not show the checkmark.
+         */
+        noCheckmark: {
             type: BooleanConstructor;
             reflect: boolean;
+            attribute: string;
         };
         /**
-         * Value selected for the component.
+         * Specifies the current active menuOption.
          */
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
+        optionActive: {
+            type: ObjectConstructor;
             attribute: string;
         };
         /**
-         * Indent level for submenus.
-         * @private
+         * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
          */
-        level: {
-            type: NumberConstructor;
-            reflect: boolean;
-            attribute: boolean;
+        optionSelected: {
+            type: ObjectConstructor;
         };
         options: {
             type: ArrayConstructor;
             reflect: boolean;
             attribute: boolean;
         };
-        layout: {
+        /**
+         * 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.
+         */
+        value: {
             type: StringConstructor;
-            attribute: string;
             reflect: boolean;
+            attribute: string;
         };
     };
     static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.
-     * @param {string} [name="auro-menu"] - The name of element that you want to register to.
+     * @param {string} [name="auro-menu"] - The name of the element that you want to register.
      *
      * @example
      * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>

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

@@ -1,17 +1,14 @@
 /**
- * The auro-menu element provides users a way to define a menu option.
+ * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
  *
- * @attr {String} value - Specifies the value to be sent to a server.
- * @attr {String} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
- * @attr {Boolean} selected - Specifies that an option is selected.
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
  */
 export class AuroMenuOption extends AuroElement {
     /**
      * This will register this element with the browser.
-     * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
+     * @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/>
@@ -19,47 +16,75 @@ export class AuroMenuOption extends AuroElement {
      */
     static register(name?: string): void;
     static get properties(): {
+        /**
+         * When true, disables the menu option.
+         */
         disabled: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * @private
+         */
         event: {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * @private
+         */
+        layout: {
+            type: StringConstructor;
+        };
+        /**
+         * 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;
         };
+        /**
+         * @private
+         */
         menuService: {
             type: ObjectConstructor;
             state: boolean;
         };
+        /**
+         * @private
+         */
         matchWord: {
             type: StringConstructor;
             state: boolean;
         };
+        /**
+         * @private
+         */
         noCheckmark: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * 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;
             reflect: boolean;
         };
-        layout: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
     };
     static get styles(): import("lit").CSSResult[];
     /**

package/components/menu/dist/index.js

@@ -351,12 +351,9 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 
 
 /**
- * The auro-menu element provides users a way to define a menu option.
+ * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
  *
- * @attr {String} value - Specifies the value to be sent to a server.
- * @attr {String} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
- * @attr {Boolean} selected - Specifies that an option is selected.
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
  */
@@ -364,7 +361,7 @@ class AuroMenuOption extends AuroElement {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-menuoption"] - The name of element that you want to register to.
+   * @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/>
@@ -428,38 +425,81 @@ class AuroMenuOption extends AuroElement {
   static get properties() {
     return {
       ...super.properties,
+
+      /**
+       * When true, disables the menu option.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * @private
+       */
       event: {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      layout: {
+        type: 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.
+       */
       key: {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
       menuService: {
         type: Object,
         state: true
       },
+
+      /**
+       * @private
+       */
       matchWord: {
         type: String,
         state: true
       },
+
+      /**
+       * @private
+       */
       noCheckmark: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Specifies that an option is selected.
+       */
       selected: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Specifies the tab index of the menu option.
+       */
       tabIndex: {
         type: Number,
         reflect: true
       },
+
+      /**
+       * Specifies the value to be sent to a server.
+       */
       value: {
         type: String,
         reflect: true
@@ -1410,19 +1450,9 @@ const MenuContext = createContext('menu-context');
 
 
 /**
- * The auro-menu element provides users a way to select from a list of options.
- * @attr {HTMLElement|Array<HTMLElement>} optionSelected - An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
- * @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 {boolean} selectAllMatchingOptions - When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
- * @attr {string} value - The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
- * @prop {string} size - Sets the size of the menu. Accepted values are 'sm' and 'md'. Default is 'sm'.
- * @prop {string} shape - Sets the shape of the menu options. Accepted values are 'box' and 'round'. Default is 'box'.
- * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
+ * The `auro-menu` element provides users a way to select from a list of options.
+ * @customElement auro-menu
+ *
  * @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.
@@ -1513,58 +1543,87 @@ class AuroMenu extends AuroElement {
         type: Boolean,
         reflect: true,
       },
-      noCheckmark: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'nocheckmark'
-      },
+
+      /**
+       * When true, the entire menu and all options are disabled.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
+       */
+      hasLoadingPlaceholder: {
+        type: Boolean
+      },
+
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
+
+      /**
+       * Indent level for submenus.
+       * @private
+       */
+      level: {
+        type: Number,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * When true, displays a loading state using the loadingIcon and loadingText slots if provided.
+       */
       loading: {
         type: Boolean,
         reflect: true
       },
-      optionSelected: {
-        // Allow HTMLElement, HTMLElement[] arrays and undefined
-        type: Object
-      },
-      optionActive: {
-        type: Object,
-        attribute: 'optionactive'
-      },
+
+      /**
+       * Specifies a string used to highlight matched string parts in options.
+       */
       matchWord: {
         type: String,
         attribute: 'matchword'
       },
+
+      /**
+       * When true, the selected option can be multiple options.
+       */
       multiSelect: {
         type: Boolean,
         reflect: true,
         attribute: 'multiselect'
       },
-      selectAllMatchingOptions: {
+
+      /**
+       * When true, selected option will not show the checkmark.
+       */
+      noCheckmark: {
         type: Boolean,
         reflect: true,
+        attribute: 'nocheckmark'
       },
 
       /**
-       * Value selected for the component.
+       * Specifies the current active menuOption.
        */
-      value: {
-        type: String,
-        reflect: true,
-        attribute: 'value'
+      optionActive: {
+        type: Object,
+        attribute: 'optionactive'
       },
 
       /**
-       * Indent level for submenus.
-       * @private
+       * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
        */
-      level: {
-        type: Number,
-        reflect: false,
-        attribute: false
+      optionSelected: {
+        // Allow HTMLElement, HTMLElement[] arrays and undefined
+        type: Object
       },
 
       /**
@@ -1575,6 +1634,43 @@ class AuroMenu extends AuroElement {
         type: Array,
         reflect: false,
         attribute: false
+      },
+
+      /**
+       * Sets the size of the menu.
+       * @type {'sm' | 'md'}
+       * @default 'sm'
+       */
+      size: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
+       */
+      selectAllMatchingOptions: {
+        type: Boolean,
+        reflect: true,
+      },
+
+      /**
+       * Sets the shape of the menu.
+       * @type {'box' | 'round'}
+       * @default 'box'
+       */
+      shape: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
+       */
+      value: {
+        type: String,
+        reflect: true,
+        attribute: 'value'
       }
     };
   }
@@ -1620,7 +1716,7 @@ class AuroMenu extends AuroElement {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-menu"] - The name of element that you want to register to.
+   * @param {string} [name="auro-menu"] - The name of the element that you want to register.
    *
    * @example
    * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>