@mgdis/mg-components 5.20.0 → 5.21.0

package/dist/types/components/molecules/mg-form/mg-form.conf.d.ts

@@ -0,0 +1,16 @@
+/**
+ * List of all possibles roles
+ */
+export declare const roles: readonly ["form", "search", "none", "presentation"];
+/**
+ * Aria Role type from roles
+ */
+export type AriaRoleType = (typeof roles)[number];
+/**
+ * List of all possibles required message status
+ */
+export declare const requiredMessageStatus: readonly ["default", "hide"];
+/**
+ * RequiredMessageStatus type from requiredMessageStatus
+ */
+export type RequiredMessageStatusType = (typeof requiredMessageStatus)[number];

package/dist/types/components/molecules/mg-form/mg-form.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '../../../utils/components.utils';
+import { AriaRoleType, RequiredMessageStatusType } from './mg-form.conf';
 export declare class MgForm {
     /************
      * Internal *
@@ -29,6 +30,22 @@ export declare class MgForm {
      * Define if form is readonly
      */
     readonly: boolean;
+    /**
+     * Define when required message is display.
+     * When it is unset, component use it internal logic to manage "required message" help text display.
+     * When you set the prop to `default`, you override the component internal logique to torce it display "required message" help text.
+     * When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.
+     * As **this element is an accessibility requirement in the view**,
+     * you **MUST*** re-implement this message on your own and display it when your form contains required inputs.
+     */
+    requiredMessage: RequiredMessageStatusType;
+    validateRequiredMessage(newValue: any): void;
+    /**
+     * Define `<form/>` element aria role
+     * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+     */
+    ariaRole: AriaRoleType;
+    validateAriaRole(newValue: MgForm['ariaRole']): void;
     /**
      * Define if form is disabled
      */
@@ -49,7 +66,7 @@ export declare class MgForm {
     /**
      * Required message
      */
-    requiredMessage: string;
+    requiredMessageText: string;
     /**
      * Emitted event on form validity check
      * Tells if form is valid or not

package/dist/types/components/molecules/mg-item-more/mg-item-more.d.ts

@@ -5,8 +5,10 @@ export declare class MgItemMore {
      ************/
     private readonly name;
     private messages;
-    private menuItems;
+    private parentMenuItems;
+    private moreElementMenuItem;
     private overflowBehavior;
+    private canRenderMgMenuItemOverflowElement;
     /**************
      * Decorators *
      **************/
@@ -44,18 +46,22 @@ export declare class MgItemMore {
     /*************
      * Lifecycle *
      *************/
-    /**
-     * Disconnect overflow ResizeObserver
-     */
-    disconnectedCallback(): void;
     /**
      * Set variables and validate props
      */
     componentWillLoad(): void;
     /**
-     * Add overflow behavior
+     * Ensure parent DOM is fully rendered with timeout method before parse elements
+     */
+    componentDidLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Set OverflowBehavior when parentMenu state is upate AND defined
      */
-    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    /**
+     * Disconnect overflow ResizeObserver
+     */
+    disconnectedCallback(): void;
     /**
      * Render
      * @returns HTML Element

package/dist/types/components.d.ts

@@ -9,6 +9,7 @@ import { MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreItemType } fr
 import { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 import { ButtonType, VariantType } from "./components/atoms/mg-button/mg-button.conf";
 import { VariantStyleType, VariantType as VariantType1 } from "./components/atoms/mg-card/mg-card.conf";
+import { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 import { IconSizeType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 import { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 import { Width } from "./components/molecules/inputs/MgInput.conf";
@@ -30,6 +31,7 @@ export { MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreItemType } fr
 export { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 export { ButtonType, VariantType } from "./components/atoms/mg-button/mg-button.conf";
 export { VariantStyleType, VariantType as VariantType1 } from "./components/atoms/mg-card/mg-card.conf";
+export { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 export { IconSizeType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 export { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 export { Width } from "./components/molecules/inputs/MgInput.conf";
@@ -171,6 +173,10 @@ export namespace Components {
         "size": 'regular' | 'full';
     }
     interface MgForm {
+        /**
+          * Define `<form/>` element aria role see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+         */
+        "ariaRole": AriaRoleType;
         /**
           * Define if form is disabled
          */
@@ -195,6 +201,10 @@ export namespace Components {
           * Define if form is readonly
          */
         "readonly": boolean;
+        /**
+          * Define when required message is display. When it is unset, component use it internal logic to manage "required message" help text display. When you set the prop to `default`, you override the component internal logique to torce it display "required message" help text. When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM. As **this element is an accessibility requirement in the view**, you **MUST*** re-implement this message on your own and display it when your form contains required inputs.
+         */
+        "requiredMessage": RequiredMessageStatusType;
         /**
           * Define form valid state
          */
@@ -2008,6 +2018,10 @@ declare namespace LocalJSX {
         "size"?: 'regular' | 'full';
     }
     interface MgForm {
+        /**
+          * Define `<form/>` element aria role see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+         */
+        "ariaRole"?: AriaRoleType;
         /**
           * Define if form is disabled
          */
@@ -2036,6 +2050,10 @@ declare namespace LocalJSX {
           * Define if form is readonly
          */
         "readonly"?: boolean;
+        /**
+          * Define when required message is display. When it is unset, component use it internal logic to manage "required message" help text display. When you set the prop to `default`, you override the component internal logique to torce it display "required message" help text. When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM. As **this element is an accessibility requirement in the view**, you **MUST*** re-implement this message on your own and display it when your form contains required inputs.
+         */
+        "requiredMessage"?: RequiredMessageStatusType;
         /**
           * Define form valid state
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.20.0",
+  "version": "5.21.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -25,8 +25,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "@stencil/core": "4.8.2",
-    "@mgdis/img": "1.5.0",
-    "@mgdis/styles": "1.0.0"
+    "@mgdis/img": "1.6.0",
+    "@mgdis/styles": "1.0.1"
   },
   "devDependencies": {
     "@playwright/test": "1.40.1",
@@ -58,10 +58,10 @@
     "sass": "^1.69.5",
     "storybook": "^7.5.3",
     "ts-node": "^10.9.1",
-    "typescript": "5.2.2",
-    "@mgdis/playwright-helpers": "1.0.0",
-    "tsconfig": "1.0.0",
+    "typescript": "5.3.3",
     "eslint-config-stencil": "1.1.1",
+    "tsconfig": "1.0.0",
+    "@mgdis/playwright-helpers": "1.0.0",
     "@mgdis/linting-stencil": "1.1.0"
   },
   "license": "BSD-3-Clause",