@mgdis/mg-components 5.7.0 → 5.8.1

package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js

@@ -31,6 +31,7 @@ export const icons = {
   'bell': () => (h("path", { fill: "currentColor", d: "M8 15.33a1.7 1.7 0 0 0 1.52-1.83h-3A1.7 1.7 0 0 0 8 15.33ZM13.13 11c-.46-.59-1.32-1.48-1.32-4.42a4.4 4.4 0 0 0-3.05-4.4v-.6A.85.85 0 0 0 8 .67a.85.85 0 0 0-.76.91v.6a4.4 4.4 0 0 0-3 4.44c0 2.94-.86 3.83-1.32 4.42a1 1 0 0 0-.2.63.85.85 0 0 0 .76.91h9.14a.85.85 0 0 0 .76-.91 1.05 1.05 0 0 0-.25-.67Z" })),
   'briefcase': () => (h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Z" })),
   'briefcase-outline': () => (h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Zm8 9H2v-7h12v7Z" })),
+  'building-outline': () => (h("path", { fill: "currentColor", d: "M4 2h8v12H9v-1a1 1 0 1 0-2 0v1H4V2Zm4 13h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h4ZM7 4H5v2h2V4Zm2 0h2v2H9V4Zm2 4H9v2h2V8ZM5 8h2v2H5V8Z" })),
   'calculator': () => (h("path", { fill: "currentColor", d: "M12.83.67H3.17a.5.5 0 0 0-.5.5v13.66a.5.5 0 0 0 .5.5h9.66a.5.5 0 0 0 .5-.5V1.17a.5.5 0 0 0-.5-.5ZM5.58 13.39a.29.29 0 0 1-.28.3H4.1a.29.29 0 0 1-.3-.28v-1.2a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm0-3.28a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V8.93a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm3.29 3.28a.29.29 0 0 1-.3.3H7.38a.29.29 0 0 1-.3-.3v-1.18a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm0-3.28a.32.32 0 0 1-.3.3H7.38a.32.32 0 0 1-.3-.3V8.93a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm3.33 3.28a.29.29 0 0 1-.28.3h-1.25a.29.29 0 0 1-.3-.28V8.93a.29.29 0 0 1 .28-.3h1.25a.29.29 0 0 1 .3.28v4.48Zm0-7.15a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V2.61a.29.29 0 0 1 .28-.3h7.82a.29.29 0 0 1 .3.28v3.65Z" })),
   'calendar': () => (h("path", { fill: "currentColor", d: "M14 3.5c0-.55-.45-1-1-1h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v.98s0 .02.02.02H2v9c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-9h-.02s.02 0 .02-.02V3.5Zm-11 10v-8h10v8H3Z" })),
   'calendar-outline': () => (h("path", { fill: "currentColor", d: "M13 2.5h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1Zm-10 11v-8h10v8H3Zm0-9v-1h10v1H3Z" })),
@@ -146,6 +147,7 @@ export const icons = {
   'pen': () => (h("path", { fill: "currentColor", d: "M1.67,11.69v2.64h2.64l7.78-7.78-2.64-2.64L1.67,11.69ZM14.13,4.51c.27-.28,.27-.72,0-1h0l-1.65-1.64c-.28-.27-.72-.27-1,0h0l-1.28,1.29,2.64,2.64,1.29-1.29Z" })),
   'pen-circle': () => (h("path", { fill: "currentColor", d: "M8 .44C3.82.44.44 3.82.44 8S3.83 15.56 8 15.56s7.56-3.39 7.56-7.56C15.56 3.82 12.18.44 8 .44M5.47 12.19H3.62v-1.85l5.46-5.45 1.85 1.86-5.45 5.45Zm6.88-6.89-.9.9-1.86-1.85.9-.9c.19-.19.51-.19.7 0l1.16 1.15c.19.19.19.51 0 .7" })),
   'pen-fancy': () => (h("path", { fill: "currentColor", d: "M3.63,8.65c-.24,.07-.43,.26-.5,.5l-1.46,4.37,.11,.12,2.3-2.3c0-.06,0-.13,0-.19,0-.44,.35-.8,.79-.81,.44,0,.8,.35,.81,.79,0,.44-.35,.8-.79,.81,0,0-.01,0-.02,0h-.19l-2.3,2.3,.12,.11,4.37-1.46c.24-.07,.43-.26,.5-.5l.82-2.08-2.49-2.48-2.07,.82ZM10.8,2.35L6.27,7.28l2.42,2.42,4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z" })),
+  'pen-fancy-files-outline': () => (h("path", { fill: "currentColor", d: "M12 2H6v10h6V8.946l.023-.058.085-.078.892-.813V12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.112a2.298 2.298 0 0 0-.974.66L12 2.8V2Zm1 4.643-1 .913-.566.515-1.528-1.524L12 4.275l.767-.832c.075-.085.153-.156.233-.215 1.167-.857 2.796.9 1.555 1.997L13 6.643ZM4 3H3v11.5a.5.5 0 0 0 .5.5H11v-1H4V3Zm4.238 4.41a.466.466 0 0 0-.316.315L7 10.477l.07.076 1.452-1.449v-.12a.51.51 0 0 1 .5-.51.51.51 0 0 1 .511.498.51.51 0 0 1-.499.51h-.133L7.45 10.931l.075.069 2.76-.92a.466.466 0 0 0 .317-.314l.518-1.31-1.573-1.562-1.308.516Z" })),
   'pen-fancy-outline': () => (h("path", { fill: "currentColor", d: "M12.24 1.67c-.49 0-1 .21-1.44.7L6.27 7.3l2.42 2.42 4.94-4.52c1.6-1.42.19-3.53-1.39-3.53ZM8.72 8.34 7.66 7.28l3.9-4.24c.22-.24.44-.36.69-.36.41 0 .87.34 1.03.78.14.37.04.7-.32 1.02L8.73 8.36ZM5.7 7.86l-2.08.82c-.24.08-.42.26-.5.5l-1.46 4.37.12.12.56.56.12.12 4.37-1.46c.24-.08.42-.26.5-.5l.81-2.08L5.7 7.87Zm-2.57 4.46L4 9.72c.03-.08.09-.15.17-.18l1.29-.51 1.52 1.52-.5 1.29c-.03.08-.1.15-.19.18l-2.6.87.95-.95c.06.02.12.04.19.04.44 0 .79-.35.79-.79s-.35-.79-.79-.79-.79.35-.79.79c0 .07.02.13.04.19l-.95.95Z" })),
   'phone': () => (h("path", { fill: "currentColor", d: "M13.97 10.62 11.2 9.43a.6.6 0 0 0-.69.17l-1.23 1.5A9.137 9.137 0 0 1 4.9 6.72l1.5-1.23c.21-.17.28-.45.17-.69L5.38 2.03a.589.589 0 0 0-.68-.34l-2.57.59a.59.59 0 0 0-.46.58c0 6.34 5.14 11.48 11.48 11.48.28 0 .52-.19.58-.46l.59-2.57a.595.595 0 0 0-.35-.68Z" })),
   'picture': () => (h("path", { fill: "currentColor", d: "M14.33 12.93V3.07a1.4 1.4 0 0 0-1.4-1.4H3.07a1.4 1.4 0 0 0-1.4 1.4v9.86a1.4 1.4 0 0 0 1.4 1.4h9.86a1.4 1.4 0 0 0 1.4-1.4ZM5.54 9.06l1.76 2.11L9.76 8l3.17 4.22H3.07Z" })),
@@ -164,6 +166,8 @@ export const icons = {
     h("path", { key: "tags-2", fill: "currentColor", d: "M15 7.37 10.15 3a1.12 1.12 0 0 0-.77-.29H8.26l4.5 4.09a1.76 1.76 0 0 1 0 2.65L8.77 13a1.17 1.17 0 0 0 1.55 0L15 8.79a.94.94 0 0 0 0-1.42Z" }),
   ],
   'thumb-up': () => (h("path", { fill: "currentColor", d: "M2.11 14.36h1a.45.45 0 0 0 .45-.44V7.17a.45.45 0 0 0-.45-.44h-1a.44.44 0 0 0-.44.44v6.75a.44.44 0 0 0 .44.44Zm12.22-7a1.27 1.27 0 0 0-1.27-1.27H9.71l.61-2.91v-.2a1.07 1.07 0 0 0-.28-.68l-.68-.66-4.17 4.19a1.26 1.26 0 0 0-.37.9v6.36a1.27 1.27 0 0 0 1.27 1.27h5.06a1.24 1.24 0 0 0 1.17-.77l1.92-4.49a1.22 1.22 0 0 0 .09-.46V7.42Z" })),
+  'thumbtack': () => (h("path", { fill: "currentColor", d: "M8.91 2 7.71 5.594 2.364 7.09 5.274 10l-.707.706-1.687 1.687-.264.264-.09.09-.209.498L2 14l.755-.317.498-.21.09-.089.264-.264 1.687-1.687.706-.706 2.91 2.908 1.496-5.347L14 7.09 8.91 2Z" })),
+  'thumbtack-outline': () => (h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "m5.273 10-2.91 2.91L2 14l1.09-.364L6 10.727l2.91 2.91 1.496-5.348L14 7.09 8.91 2 7.71 5.594 2.364 7.09 5.273 10Zm3.241-3.563-4.18 1.17 4.059 4.059 1.17-4.18 2.533-.845-2.737-2.737-.845 2.533Z" })),
   'trash': () => [
     h("path", { key: "trash-1", fill: "currentColor", d: "M3.27 14.17c0 .66.54 1.19 1.2 1.2h7l-.05-.02h.08c.64-.02 1.14-.56 1.12-1.2V4.32H3.27v9.85Zm5.97-7.12c0-.33.27-.6.6-.6s.6.27.6.6v5.3c0 .33-.27.6-.6.6s-.6-.27-.6-.6v-5.3Zm-3.5 0c0-.33.27-.59.6-.6.32.02.58.28.6.6v5.3c-.02.32-.28.58-.6.6a.645.645 0 0 1-.6-.6v-5.3Zm7.28-5.39h-2.6V.95a.28.28 0 0 0-.28-.28H5.87a.28.28 0 0 0-.28.28v.72H2.91a.28.28 0 0 0-.28.28V3.1c0 .15.12.28.28.28h10.11c.15 0 .28-.12.28-.28V1.94a.28.28 0 0 0-.28-.28Z" }),
     h("path", { key: "trash-2", fill: "currentColor", d: "M13,2h-2.9L9.9,1.6    C9.8,1.4,9.6,1.2,9.4,1.2H6.6c-0.2,0-0.4,0.1-0.5,0.3L5.8,2H2.9C2.7,2,2.5,2.2,2.5,2.4c0,0,0,0,0,0v0.8c0,0.2,0.2,0.4,0.4,0.4H13    c0.2,0,0.4-0.2,0.4-0.4V2.4C13.4,2.2,13.2,2,13,2z" }),
@@ -174,6 +178,10 @@ export const icons = {
   'upload': () => (h("path", { fill: "currentColor", d: "M9.58 10.74V6.59a.31.31 0 0 1 .31-.3H12a.3.3 0 0 0 .21-.52l-4-4a.29.29 0 0 0-.42 0l-4 4a.3.3 0 0 0 .21.52h2.11a.31.31 0 0 1 .31.3v4.15a.3.3 0 0 0 .3.3h2.56a.3.3 0 0 0 .3-.3ZM14.33 14v-1a.29.29 0 0 0-.29-.3H2a.29.29 0 0 0-.29.3v1a.29.29 0 0 0 .29.29h12a.29.29 0 0 0 .33-.29Z" })),
   'user': () => (h("path", { fill: "currentColor", d: "M8 8.79a3.56 3.56 0 1 0-3.56-3.56A3.56 3.56 0 0 0 8 8.79Zm3.17.79H9.8a4.27 4.27 0 0 1-3.6 0H4.83a3.16 3.16 0 0 0-3.16 3.17v.4a1.18 1.18 0 0 0 1.18 1.18h10.3a1.18 1.18 0 0 0 1.18-1.18v-.4a3.16 3.16 0 0 0-3.16-3.17Z" })),
   'user-circle': () => (h("path", { fill: "currentColor", d: "M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38H8Zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.713 2.713 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.483 6.483 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63H8ZM5 5.63c0-1.68 1.37-3.05 3.05-3.05 1.68 0 3.05 1.37 3.05 3.05 0 1.68-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05Z" })),
+  'user-pen-fancy-outline': () => [
+    h("path", { fill: "currentColor", d: "M7.5 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5Zm0-4C6.67 3 6 3.67 6 4.5S6.67 6 7.5 6 9 5.33 9 4.5 8.33 3 7.5 3ZM11.12 11.46l-.22.54-.3.77s-.04.09-.06.13c-.03.04-.06.07-.1.1-.05.04-.1.07-.16.08L7.52 14l-.07-.07 1.45-1.45h.13c.15 0 .27-.06.36-.16a.56.56 0 0 0 .1-.15c.01-.02.02-.04.03-.07v-.02s.01-.05.01-.08v-.03c0-.28-.23-.5-.51-.5-.28.01-.5.24-.5.51v.14l-.76.75-.14.13-.55.55-.07-.07.16-.48.1-.29.24-.71.42-1.27c.05-.16.17-.28.32-.32l1.31-.52 1.57 1.57ZM14.56 8.22l-2.05 1.87-.7.64-.06.05-.32.29-1.52-1.52.28-.31.06-.06.64-.7 1.88-2.04c1.16-1.31 3.11.61 1.79 1.78Z" }),
+    h("path", { fill: "currentColor", d: "M9 8H6c-2.21 0-4 1.79-4 4 0 .55.45 1 1 1h3.11l.33-1H3c0-1.66 1.34-3 3-3h3.05l.12-.13.71-.77C9.6 8.03 9.3 8 9 8Z" }),
+  ],
   'user-group': () => (h("path", { fill: "currentColor", d: "M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48Zm-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59Zm7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72Zm-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64Zm5.52.25a7.282 7.282 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98ZM2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.238 7.238 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3Z" })),
   'user-plus': () => (h("path", { fill: "currentColor", d: "M14,3.33H12.65V2a.36.36,0,0,0-.35-.33h-.65A.36.36,0,0,0,11.3,2V3.33H10a.34.34,0,0,0-.33.34v.66a.34.34,0,0,0,.33.34H11.3V6a.37.37,0,0,0,.35.33h.65A.37.37,0,0,0,12.65,6V4.67H14a.34.34,0,0,0,.32-.34V3.67A.34.34,0,0,0,14,3.33ZM9.28,9.77h-.2a5.19,5.19,0,0,1-3.91,0H5A3,3,0,0,0,1.7,12.46h0v.72A1.27,1.27,0,0,0,3,14.33h8.25a1.26,1.26,0,0,0,1.36-1.14v-.68A3,3,0,0,0,9.37,9.76H9.28ZM7.13,3.7A2.64,2.64,0,1,1,4.5,6.34h0A2.64,2.64,0,0,1,7.13,3.7Z" })),
   'user-question-outline': () => (h("path", { fill: "currentColor", d: "M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03ZM2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22Zm2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42h-.01Zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56Zm.82 6.33c0 .45-.37.82-.82.82H8.4a.41.41 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82v4.77Zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41c.23 0 .41.18.41.41Zm-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68.38 0 .68.31.68.69 0 .38-.31.68-.68.68-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09Z" })),

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -157,6 +157,7 @@ export class MgTooltip {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-tooltip> prop "message" is required.');
     }
+    this.popper.update();
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -188,10 +189,13 @@ export class MgTooltip {
     this.tooltipedElement = interactiveElement || slotElement;
     // Check if slotted element is a disabled mg-button
     // In this case we wrap the mg-button into a div to enable the tooltip
-    if (slotElement.tagName === 'MG-BUTTON') {
+    if (['MG-BUTTON', 'BUTTON'].includes(slotElement.tagName)) {
       new MutationObserver(mutationList => {
-        if (mutationList.some(mutation => mutation.attributeName === 'aria-disabled')) {
+        if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {
           this.setMgButtonWrapper(slotElement);
+          // Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
+          // we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
+          this.resetGuard();
           this.initTooltip(slotElement, interactiveElement);
         }
       }).observe(slotElement, { attributes: true });

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js

@@ -6,10 +6,11 @@ import { initLocales } from '../../../../locales';
 /**
  * type CheckboxItem validation function
  *
- * @param {CheckboxItem} item Checkbox item
- * @returns {boolean} match item expectations
+ * @param {unknown} items Checkbox item
+ * @returns {boolean} match item type
  */
-const isCheckboxItem = (item) => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined;
+const isCheckboxItems = (items) => Array.isArray(items) &&
+  items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);
 export class MgInputCheckbox {
   constructor() {
     /************
@@ -87,7 +88,7 @@ export class MgInputCheckbox {
     this.checkboxItems = [];
   }
   validateValue(newValue) {
-    if (newValue && newValue.every(item => isCheckboxItem(item))) {
+    if (isCheckboxItems(newValue)) {
       this.checkboxItems = newValue.map((item, index) => ({
         id: `${this.identifier}_${index.toString()}`,
         title: item.title,
@@ -437,12 +438,11 @@ export class MgInputCheckbox {
           "text": "Emitted event when value change"
         },
         "complexType": {
-          "original": "CheckboxValue[]",
+          "original": "MgInputCheckbox['value']",
           "resolved": "CheckboxValue[]",
           "references": {
-            "CheckboxValue": {
-              "location": "import",
-              "path": "./mg-input-checkbox.conf"
+            "MgInputCheckbox": {
+              "location": "global"
             }
           }
         }
@@ -457,9 +457,13 @@ export class MgInputCheckbox {
           "text": "Emited event when checking validity"
         },
         "complexType": {
-          "original": "boolean",
+          "original": "MgInputCheckbox['valid']",
           "resolved": "boolean",
-          "references": {}
+          "references": {
+            "MgInputCheckbox": {
+              "location": "global"
+            }
+          }
         }
       }];
   }

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js

@@ -7,10 +7,24 @@ import { initLocales } from '../../../../locales';
 /**
  * Check if item is a well configured option
  *
- * @param {SelectOption} option select option
+ * @param {unknown} option select option
  * @returns {boolean} select option type is valid
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string';
+/**
+ * Check if items[] is SelectOption
+ *
+ * @param {unknown[]} items select option
+ * @returns {boolean} select option array type is valid
+ */
+const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption(item));
+/**
+ * Check if item is a well configured optgroup
+ *
+ * @param {unknown} optgroup select option
+ * @returns {boolean} select optgroup type is valid
+ */
+const isOptGroup = (optgroup) => typeof optgroup === 'object' && typeof optgroup.group === 'string' && allItemsAreOptions(optgroup.options);
 /**
  * Group options
  *
@@ -46,17 +60,50 @@ export class MgInputSelect {
     this.hasDisplayedError = false;
     /**
      * Handle input event
+     *
+     * @returns {void}
      */
     this.handleInput = () => {
-      this.checkValidity();
-      if (this.hasDisplayedError) {
+      this.updateValue();
+      if (this.hasDisplayedError)
         this.setErrorMessage();
+    };
+    /**
+     * Method to compare item.title with input.value
+     *
+     * @param {SelectOption} item item to compare with
+     * @returns {boolean} truthy if input.value is an item
+     */
+    this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
+    /**
+     * value props setter
+     *
+     * @param {MgInputSelect['value']} newValue value to update with
+     * @returns {void}
+     */
+    this.setValue = (newValue) => {
+      this.checkValidity();
+      this.value = newValue;
+    };
+    /**
+     * Update value from input.value
+     *
+     * @returns {void}
+     */
+    this.updateValue = () => {
+      if (this.input.value === '') {
+        this.setValue(null);
       }
-      if (this.input.value !== '') {
-        this.value = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.title === this.input.value).value;
+      else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {
+        this.setValue(this.input.value);
+      }
+      else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
+        this.setValue(this.items.find(this.isInputValue).value);
       }
       else {
-        this.value = null;
+        // before set newValue with push to options[] the unknown input.value with a disable satus
+        this.options.push({ title: this.input.value, value: this.input.value, disabled: true });
+        this.setValue(this.input.value);
       }
     };
     /**
@@ -65,12 +112,18 @@ export class MgInputSelect {
     this.handleBlur = () => {
       this.displayError();
     };
+    /**
+     * Input value is disabled
+     *
+     * @returns {boolean} truthy if input value is disabled
+     */
+    this.isDisabledValue = () => { var _a; return allItemsAreOptions(this.options) && ((_a = this.options.find(this.isInputValue)) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
     /**
      * Check if input is valid
      */
     this.checkValidity = () => {
       var _a;
-      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
+      this.valid = !this.isDisabledValue() && (this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
       this.invalid = !this.valid;
       // We need to send valid event even if it is the same value
       this.inputValid.emit(this.valid);
@@ -85,6 +138,13 @@ export class MgInputSelect {
         this.errorMessage = this.messages.errors.required;
       }
     };
+    /**
+     * Render option
+     *
+     * @param {SelectOption} option to render
+     * @returns {HTMLElement} render option
+     */
+    this.renderOption = (option) => (h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     this.value = undefined;
     this.items = undefined;
     this.identifier = undefined;
@@ -109,9 +169,13 @@ export class MgInputSelect {
     this.valueExist = undefined;
     this.readonlyValue = undefined;
   }
-  handleValue(newValue) {
-    if (newValue !== null) {
-      this.readonlyValue = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.value === newValue).title;
+  validateValue(newValue) {
+    var _a, _b;
+    if (allItemsAreString(this.items) && typeof newValue === 'string') {
+      this.readonlyValue = Boolean((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
+    }
+    else if (allItemsAreOptions(this.items)) {
+      this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
     }
     else {
       this.readonlyValue = null;
@@ -125,14 +189,15 @@ export class MgInputSelect {
     }
     // String array
     else if (allItemsAreString(newValue)) {
-      this.valueExist = newValue.includes(this.value);
-      this.options = newValue.map((item) => ({ title: item, value: item }));
+      if (typeof this.value === 'string')
+        this.valueExist = newValue.includes(this.value);
+      this.options = newValue.map(item => ({ title: item, value: item }));
     }
     // Object array
-    else if (newValue.every(item => isOption(item))) {
+    else if (allItemsAreOptions(newValue)) {
       this.valueExist = newValue.map(item => item.value).includes(this.value);
       // Grouped object options
-      if (newValue.some(item => item.group !== undefined)) {
+      if (newValue.some(item => Boolean(item.group))) {
         this.options = newValue.reduce(groupOptions, []);
       }
       // Standart object options
@@ -177,6 +242,7 @@ export class MgInputSelect {
     this.messages = initLocales(this.element).messages;
     // Validate
     this.validateItems(this.items);
+    this.validateValue(this.value);
     // Set default placeholder
     if (this.placeholder === undefined || this.placeholder === '') {
       this.placeholder = this.messages.input.select.placeholder;
@@ -194,11 +260,11 @@ export class MgInputSelect {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
-    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { key: optgroup.title, value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
+    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? h("optgroup", { label: option.group }, option.options.map(this.renderOption)) : isOption(option) && this.renderOption(option)))));
   }
   static get is() { return "mg-input-select"; }
   static get encapsulation() { return "shadow"; }
@@ -235,8 +301,8 @@ export class MgInputSelect {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "string[] | SelectOption[]",
-          "resolved": "SelectOption[] | string[]",
+          "original": "(string | SelectOption)[]",
+          "resolved": "(string | SelectOption)[]",
           "references": {
             "SelectOption": {
               "location": "import",
@@ -558,9 +624,13 @@ export class MgInputSelect {
           "text": "Emited event when value change"
         },
         "complexType": {
-          "original": "any",
+          "original": "MgInputSelect['value']",
           "resolved": "any",
-          "references": {}
+          "references": {
+            "MgInputSelect": {
+              "location": "global"
+            }
+          }
         }
       }, {
         "method": "inputValid",
@@ -606,7 +676,7 @@ export class MgInputSelect {
   static get watchers() {
     return [{
         "propName": "value",
-        "methodName": "handleValue"
+        "methodName": "validateValue"
       }, {
         "propName": "items",
         "methodName": "validateItems"

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js

@@ -6,19 +6,6 @@ export var Direction;
   Direction["VERTICAL"] = "vertical";
   Direction["HORIZONTAL"] = "horizontal";
 })(Direction || (Direction = {}));
-/**
- * More item type guard
- *
- * @param {unknown} element element to control
- * @returns {boolean} truthy if element is more-item
- */
-export const isMoreItem = (element) => {
-  var _a, _b, _c;
-  const item = element;
-  return (item === undefined ||
-    (typeof item === 'object' &&
-      (typeof item.size === 'string' || typeof ((_a = item.mgIcon) === null || _a === void 0 ? void 0 : _a.icon) === 'string' || typeof ((_b = item.slotLabel) === null || _b === void 0 ? void 0 : _b.label) === 'string' || typeof ((_c = item.slotLabel) === null || _c === void 0 ? void 0 : _c.display) === 'boolean')));
-};
 /**
  * List of all possibles sizes
  */

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js

@@ -1,7 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { OverflowBehavior, OverflowBehaviorElements } from '../../../../utils/behaviors.utils';
-import { Direction, isMoreItem, sizes } from './mg-menu.conf';
-import { initLocales } from '../../../../locales';
+import { Direction, sizes } from './mg-menu.conf';
 export class MgMenu {
   constructor() {
     /************
@@ -10,6 +8,9 @@ export class MgMenu {
     this.name = 'mg-menu';
     this.menuItems = [];
     this.focusedMenuItem = 0;
+    /*************
+     * Methods *
+     *************/
     /**
      * Close matching menu-item
      *
@@ -22,68 +23,74 @@ export class MgMenu {
         item.expanded = false;
       }
     };
-    /*************
-     * Methods *
-     *************/
     /**
-     * Store menu-items on component init and add listeners
+     * get mg-item-more element
      *
+     * @returns {HTMLMgItemMoreElement} mg-item-more element
+     */
+    this.getItemMore = () => this.element.querySelector('mg-item-more');
+    /**
+     * get mg-item-more >>> mg-menu-item element
+     *
+     * @returns {HTMLMgMenuItemElement} mg-item-more >>> mg-menu-item element
+     */
+    this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
+    /**
+     * Set item listend
+     *
+     * @param {HTMLMgMenuItemElement} item mg-menu-item element
+     * @param {MgMenu['focusedMenuItem']} index number
      * @returns {void}
      */
-    this.initMenuItemsListeners = () => {
-      // add listeners on menu item and edit index
-      this.menuItems.forEach((item, menuItemIndex) => {
-        ['click', 'focus'].forEach(trigger => {
-          (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
-            this.focusedMenuItem = menuItemIndex;
-            // reset expanded on previous active menu item
-            this.menuItems.forEach((item, index) => {
-              this.closeMenuItem(item, index !== this.focusedMenuItem);
-            });
+    this.setItemListener = (item, index) => {
+      ['click', 'focus'].forEach(trigger => {
+        (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
+          this.focusedMenuItem = index;
+          // reset expanded on previous active menu item
+          (Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
+            this.closeMenuItem(item, index !== this.focusedMenuItem);
           });
         });
       });
     };
     /**
-     * render mg-menu-more
+     * Store menu-items on component init and add listeners
      *
-     * @returns {HTMLElement} formated mg-menu-item element
+     * @returns {void}
      */
-    this.renderMgMenuMore = () => {
-      const moreElement = this.element.shadowRoot.querySelector(`[${OverflowBehaviorElements.MORE}]`);
-      this.menuItems.forEach((child) => {
-        const proxy = child.cloneNode(true);
-        moreElement.querySelector('mg-menu').appendChild(proxy);
-      });
-      const allMenuItem = Array.from(this.element.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
-      Array.from(moreElement.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
-        // manage click on proxy to mirror it on initial element
-        proxy.addEventListener('click', () => {
-          (allMenuItem[index].shadowRoot.querySelector('a') || allMenuItem[index].shadowRoot.querySelector('button')).dispatchEvent(new MouseEvent('click', { bubbles: true }));
-        });
-        // manage status change miror in proxy
-        allMenuItem[index].addEventListener('status-change', (event) => {
-          proxy.setAttribute('status', event.detail);
-        });
+    this.initMenuItemsListeners = () => {
+      // add listeners on menu item and edit index
+      this.menuItems.forEach((item, index) => {
+        this.setItemListener(item, index);
       });
-      this.element.appendChild(moreElement);
-      return this.element.querySelector(`[${OverflowBehaviorElements.MORE}]`);
     };
     /**
-     * Render mg-menu-item more element for overflow behavior
+     * Handle item-loaded event on mg-item-more element
      *
-     * @returns {HTMLElement} rendered mg-menu-item more element
+     * @returns {void}
      */
-    this.renderMgMenuItemMore = () => {
-      var _a, _b, _c, _d, _e, _f, _g;
-      return (h("mg-menu-item", { "data-overflow-more": true }, h("mg-icon", { icon: ((_b = (_a = this.moreitem) === null || _a === void 0 ? void 0 : _a.mgIcon) === null || _b === void 0 ? void 0 : _b.icon) || 'ellipsis-vertical', slot: "image" }), h("span", { class: { 'sr-only': !((_d = (_c = this.moreitem) === null || _c === void 0 ? void 0 : _c.slotLabel) === null || _d === void 0 ? void 0 : _d.display) }, slot: "label" }, ((_f = (_e = this.moreitem) === null || _e === void 0 ? void 0 : _e.slotLabel) === null || _f === void 0 ? void 0 : _f.label) || this.messages.moreLabel), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: (_g = this.moreitem) === null || _g === void 0 ? void 0 : _g.size })));
+    this.handleItemLoaded = () => {
+      this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
+    };
+    /**
+     * render mg-item-more
+     *
+     * @returns {void}
+     */
+    this.renderMgItemMore = () => {
+      // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
+      // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
+      const item = 'mg-item-more';
+      const mgItemMore = document.createElement(item);
+      Object.assign(mgItemMore, this.itemmore);
+      mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
+      this.element.appendChild(mgItemMore);
     };
     this.label = undefined;
     this.direction = Direction.HORIZONTAL;
-    this.moreitem = undefined;
+    this.itemmore = undefined;
     this.size = 'regular';
     this.isChildMenu = undefined;
-    this.hasOverflow = false;
   }
   validateLabel(newValue) {
     if (newValue === undefined) {
@@ -95,12 +102,9 @@ export class MgMenu {
       throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
     }
   }
-  validateMoreItem(newValue) {
+  validateItemMore(newValue) {
     if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
-      throw new Error(`<${this.name}> prop "moreitem" must be paired with direction ${Direction.HORIZONTAL}.`);
-    }
-    else if (newValue !== undefined && !isMoreItem(newValue)) {
-      throw new Error(`<${this.name}> prop "moreitem" must match MoreItemType.`);
+      throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
     }
   }
   validateSize(newValue) {
@@ -117,11 +121,9 @@ export class MgMenu {
    * @returns {void}
    */
   componentWillLoad() {
-    this.messages = initLocales(this.element).messages.plusMenu;
-    // validation
     this.validateDirection(this.direction);
     this.validateLabel(this.label);
-    this.validateMoreItem(this.moreitem);
+    this.validateItemMore(this.itemmore);
     this.validateSize(this.size);
   }
   /**
@@ -137,36 +139,39 @@ export class MgMenu {
       // store all menu-items
       this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
       this.isChildMenu = this.element.closest('mg-menu-item') !== null;
-      this.hasOverflow = this.direction === Direction.HORIZONTAL && !this.isChildMenu;
-      if (this.hasOverflow && isMoreItem(this.moreitem))
-        this.overflowBehavior = new OverflowBehavior(this.element, this.renderMgMenuMore);
+      // add mg-item-more to manage OverflowBehavior
+      if (this.direction === Direction.HORIZONTAL && !this.isChildMenu)
+        this.renderMgItemMore();
+      // use mutation observer to improve reactivity
+      new MutationObserver(entries => {
+        const mgItemMore = this.getItemMore();
+        // prevent infinit loop by exclude mg-item-more deletion entry
+        if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
+          return;
+        else if (mgItemMore !== null) {
+          // render a new mg-item-more
+          mgItemMore.remove();
+          mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);
+          this.renderMgItemMore();
+        }
+      }).observe(this.element, { childList: true, characterData: true, subtree: true });
     }, 0);
   }
   /**
-   * Check add listeners to childs
+   * Add listeners to items
    *
    * @returns {void}
    */
   componentDidRender() {
-    // add menu items listeners
     this.initMenuItemsListeners();
   }
-  /**
-   * Disconnect overflow ResizeObserver
-   *
-   * @returns {void} run overflow resize obeserver disconnexion
-   */
-  disconnectedCallback() {
-    if (this.hasOverflow)
-      this.overflowBehavior.disconnect();
-  }
   /**
    * Render
    *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null), this.hasOverflow && isMoreItem(this.moreitem) && this.renderMgMenuItemMore()));
+    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null)));
   }
   static get is() { return "mg-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -222,14 +227,14 @@ export class MgMenu {
         "reflect": true,
         "defaultValue": "Direction.HORIZONTAL"
       },
-      "moreitem": {
+      "itemmore": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "MoreItemType",
-          "resolved": "{ mgIcon?: { icon: string; }; slotLabel?: { label?: string; display?: boolean; }; size?: \"regular\" | \"large\" | \"medium\"; }",
+          "original": "ItemMoreType",
+          "resolved": "{ size: \"regular\" | \"large\" | \"medium\"; icon: IconType; slotlabel: SlotLabelType; }",
           "references": {
-            "MoreItemType": {
+            "ItemMoreType": {
               "location": "import",
               "path": "./mg-menu.conf"
             }
@@ -239,7 +244,7 @@ export class MgMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Customize mg-menu \"more element\"\nUsed with direction: 'vertical' to manage overflow"
+          "text": "Customize \"mg-item-more\" element\nUsed with direction: 'vertical' to manage overflow"
         }
       },
       "size": {
@@ -269,8 +274,7 @@ export class MgMenu {
   }
   static get states() {
     return {
-      "isChildMenu": {},
-      "hasOverflow": {}
+      "isChildMenu": {}
     };
   }
   static get elementRef() { return "element"; }
@@ -282,8 +286,8 @@ export class MgMenu {
         "propName": "direction",
         "methodName": "validateDirection"
       }, {
-        "propName": "moreitem",
-        "methodName": "validateMoreItem"
+        "propName": "itemmore",
+        "methodName": "validateItemMore"
       }, {
         "propName": "size",
         "methodName": "validateSize"