@mgdis/mg-components 5.7.0 → 5.8.1

package/dist/types/components.d.ts

@@ -14,11 +14,12 @@ import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
-import { Direction, MenuSizeType, MoreItemType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
+import { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-item-more/mg-item-more.conf";
+import { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
 import { Status } from "./components/molecules/menu/mg-menu-item/mg-menu-item.conf";
 import { Placement } from "@popperjs/core";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
-import { SizeType, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
+import { SizeType as SizeType1, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
 export namespace Components {
     interface MgActionMore {
@@ -574,7 +575,7 @@ export namespace Components {
         /**
           * Items are the possible options to select
          */
-        "items": string[] | SelectOption[];
+        "items": (string | SelectOption)[];
         /**
           * Input label
          */
@@ -884,19 +885,33 @@ export namespace Components {
          */
         "value": any;
     }
+    interface MgItemMore {
+        /**
+          * Define icon Default: {icon: 'ellipsis-vertical'}
+         */
+        "icon": IconType;
+        /**
+          * Define component child menu size.
+         */
+        "size": SizeType;
+        /**
+          * Define slot label element Default: {display: false}
+         */
+        "slotlabel": SlotLabelType;
+    }
     interface MgMenu {
         /**
           * Component display direction. Default: "horizontal"
          */
         "direction": Direction;
         /**
-          * Menu label. Include short menu description. Required for accessibility
+          * Customize "mg-item-more" element Used with direction: 'vertical' to manage overflow
          */
-        "label": string;
+        "itemmore": ItemMoreType;
         /**
-          * Customize mg-menu "more element" Used with direction: 'vertical' to manage overflow
+          * Menu label. Include short menu description. Required for accessibility
          */
-        "moreitem": MoreItemType;
+        "label": string;
         /**
           * Define mg-menu size Default: 'regular'
          */
@@ -911,6 +926,10 @@ export namespace Components {
           * Define menu-item href when defined menu-item contain an anchor instead of button
          */
         "href": string;
+        /**
+          * Identifier is used to control mg-popover Default: createID('mg-menu-item');
+         */
+        "identifier": string;
         /**
           * Define menu-item status. Default: "visible"
          */
@@ -1060,7 +1079,7 @@ export namespace Components {
         /**
           * Define tabs size
          */
-        "size": SizeType;
+        "size": SizeType1;
     }
     interface MgTag {
         /**
@@ -1099,6 +1118,10 @@ export namespace Components {
         "placement": Placement;
     }
 }
+export interface MgButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgButtonElement;
+}
 export interface MgDetailsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgDetailsElement;
@@ -1296,6 +1319,12 @@ declare global {
         prototype: HTMLMgInputToggleElement;
         new (): HTMLMgInputToggleElement;
     };
+    interface HTMLMgItemMoreElement extends Components.MgItemMore, HTMLStencilElement {
+    }
+    var HTMLMgItemMoreElement: {
+        prototype: HTMLMgItemMoreElement;
+        new (): HTMLMgItemMoreElement;
+    };
     interface HTMLMgMenuElement extends Components.MgMenu, HTMLStencilElement {
     }
     var HTMLMgMenuElement: {
@@ -1383,6 +1412,7 @@ declare global {
         "mg-input-textarea": HTMLMgInputTextareaElement;
         "mg-input-title": HTMLMgInputTitleElement;
         "mg-input-toggle": HTMLMgInputToggleElement;
+        "mg-item-more": HTMLMgItemMoreElement;
         "mg-menu": HTMLMgMenuElement;
         "mg-menu-item": HTMLMgMenuItemElement;
         "mg-message": HTMLMgMessageElement;
@@ -1462,6 +1492,10 @@ declare namespace LocalJSX {
           * aria-label In case button text is not explicit enough
          */
         "label"?: string;
+        /**
+          * Emmited event when disabled change
+         */
+        "onDisabled-change"?: (event: MgButtonCustomEvent<MgButton['disabled']>) => void;
         /**
           * Define button type
          */
@@ -1617,11 +1651,11 @@ declare namespace LocalJSX {
         /**
           * Emited event when checking validity
          */
-        "onInput-valid"?: (event: MgInputCheckboxCustomEvent<boolean>) => void;
+        "onInput-valid"?: (event: MgInputCheckboxCustomEvent<MgInputCheckbox['valid']>) => void;
         /**
           * Emitted event when value change
          */
-        "onValue-change"?: (event: MgInputCheckboxCustomEvent<CheckboxValue[]>) => void;
+        "onValue-change"?: (event: MgInputCheckboxCustomEvent<MgInputCheckbox['value']>) => void;
         /**
           * Define if input is readonly
          */
@@ -1967,7 +2001,7 @@ declare namespace LocalJSX {
         /**
           * Items are the possible options to select
          */
-        "items": string[] | SelectOption[];
+        "items": (string | SelectOption)[];
         /**
           * Input label
          */
@@ -1995,7 +2029,7 @@ declare namespace LocalJSX {
         /**
           * Emited event when value change
          */
-        "onValue-change"?: (event: MgInputSelectCustomEvent<any>) => void;
+        "onValue-change"?: (event: MgInputSelectCustomEvent<MgInputSelect['value']>) => void;
         /**
           * Input placeholder. It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
          */
@@ -2294,19 +2328,33 @@ declare namespace LocalJSX {
          */
         "value"?: any;
     }
+    interface MgItemMore {
+        /**
+          * Define icon Default: {icon: 'ellipsis-vertical'}
+         */
+        "icon"?: IconType;
+        /**
+          * Define component child menu size.
+         */
+        "size"?: SizeType;
+        /**
+          * Define slot label element Default: {display: false}
+         */
+        "slotlabel"?: SlotLabelType;
+    }
     interface MgMenu {
         /**
           * Component display direction. Default: "horizontal"
          */
         "direction"?: Direction;
         /**
-          * Menu label. Include short menu description. Required for accessibility
+          * Customize "mg-item-more" element Used with direction: 'vertical' to manage overflow
          */
-        "label": string;
+        "itemmore"?: ItemMoreType;
         /**
-          * Customize mg-menu "more element" Used with direction: 'vertical' to manage overflow
+          * Menu label. Include short menu description. Required for accessibility
          */
-        "moreitem"?: MoreItemType;
+        "label": string;
         /**
           * Define mg-menu size Default: 'regular'
          */
@@ -2321,6 +2369,14 @@ declare namespace LocalJSX {
           * Define menu-item href when defined menu-item contain an anchor instead of button
          */
         "href"?: string;
+        /**
+          * Identifier is used to control mg-popover Default: createID('mg-menu-item');
+         */
+        "identifier"?: string;
+        /**
+          * Emited event when item is loaded
+         */
+        "onItem-loaded"?: (event: MgMenuItemCustomEvent<void>) => void;
         /**
           * Emited event when status change
          */
@@ -2514,7 +2570,7 @@ declare namespace LocalJSX {
         /**
           * Define tabs size
          */
-        "size"?: SizeType;
+        "size"?: SizeType1;
     }
     interface MgTag {
         /**
@@ -2573,6 +2629,7 @@ declare namespace LocalJSX {
         "mg-input-textarea": MgInputTextarea;
         "mg-input-title": MgInputTitle;
         "mg-input-toggle": MgInputToggle;
+        "mg-item-more": MgItemMore;
         "mg-menu": MgMenu;
         "mg-menu-item": MgMenuItem;
         "mg-message": MgMessage;
@@ -2610,6 +2667,7 @@ declare module "@stencil/core" {
             "mg-input-textarea": LocalJSX.MgInputTextarea & JSXBase.HTMLAttributes<HTMLMgInputTextareaElement>;
             "mg-input-title": LocalJSX.MgInputTitle & JSXBase.HTMLAttributes<HTMLMgInputTitleElement>;
             "mg-input-toggle": LocalJSX.MgInputToggle & JSXBase.HTMLAttributes<HTMLMgInputToggleElement>;
+            "mg-item-more": LocalJSX.MgItemMore & JSXBase.HTMLAttributes<HTMLMgItemMoreElement>;
             "mg-menu": LocalJSX.MgMenu & JSXBase.HTMLAttributes<HTMLMgMenuElement>;
             "mg-menu-item": LocalJSX.MgMenuItem & JSXBase.HTMLAttributes<HTMLMgMenuItemElement>;
             "mg-message": LocalJSX.MgMessage & JSXBase.HTMLAttributes<HTMLMgMessageElement>;

package/dist/types/utils/behaviors.utils.d.ts

@@ -1,14 +1,14 @@
 export declare enum OverflowBehaviorElements {
-  MORE = "data-overflow-more",
   BASE_INDEX = "data-overflow-base-index",
   PROXY_INDEX = "data-overflow-proxy-index"
 }
 export declare class OverflowBehavior {
   private element;
   private render;
-  private resizeObserver;
-  private moreElement;
-  private children;
+  private _resizeObserver;
+  private _moreElement;
+  private _baseChildren;
+  private _proxyChildren;
   constructor(element: Element, render: () => HTMLElement);
   /**********
    * Public *
@@ -25,10 +25,17 @@ export declare class OverflowBehavior {
   /**
    * run overflow behavior
    *
-   * @param {number} width width of the container
+   * @param {number} width width of the container. Optional.
    * @returns {void}
    */
   private run;
+  /**
+   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
+   *
+   * @param {Element} element element to parse
+   * @returns {Element[]} children
+   */
+  private getInteractiveItems;
   /**
    * Update displayed items in container from a given available space
    *

package/dist/types/utils/components.utils.d.ts

@@ -44,10 +44,10 @@ export declare class ClassList {
 /**
  * Check if all items are string
  *
- * @param {string[]} items items to check
+ * @param {unknown} items items to check
  * @returns {boolean} all items are string
  */
-export declare const allItemsAreString: (items: string[]) => boolean;
+export declare const allItemsAreString: (items: unknown) => items is string[];
 /**
  * Check if element is a heading
  *

package/dist/types/utils/unit.test.utils.d.ts

@@ -1,3 +1,4 @@
+import { MockCustomEvent } from '@stencil/core/mock-doc';
 /**
  * Clone Deep function
  *
@@ -67,6 +68,16 @@ type setupResizeObserverMockParams = {
   observe: ResizeObserver['observe'];
 };
 export declare const setupResizeObserverMock: ({ disconnect, observe }: setupResizeObserverMockParams) => typeof ResizeObserver;
+/**
+ * Utility function that mocks the `SubmitEvent` API. Recommended to execute inside `beforeEach`.
+ *
+ * @returns {void}
+ * @example
+ * ```
+ * setupSubmitEventMock();
+ * ```
+ */
+export declare const setupSubmitEventMock: () => typeof MockCustomEvent;
 /**
  * force popover id when component use randomed identifier
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.7.0",
+  "version": "5.8.1",
   "description": "MG Components",
   "packageManager": "pnpm@7.17.1",
   "engineStrict": true,