@mgdis/mg-components 6.4.0 → 6.5.0

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { Placement } from '@popperjs/core';
+import { type PopoverPlacementType } from './mg-popover.conf';
 /**
  * @slot - Element that will display the popover
  * @slot content - popover content
@@ -8,10 +8,10 @@ export declare class MgPopover {
     /************
      * Internal *
      ************/
-    private popper;
     private mgPopover;
     private mgPopoverContent;
     private windows;
+    private floatingUICleanup;
     /**************
      * Decorators *
      **************/
@@ -28,7 +28,8 @@ export declare class MgPopover {
     /**
      * Popover placement
      */
-    placement: Placement;
+    placement: PopoverPlacementType;
+    watchPlacement(newValue: any): void;
     /**
      * Hide popover arrow
      */
@@ -69,11 +70,6 @@ export declare class MgPopover {
      * Hide popover
      */
     private hide;
-    /**
-     * Set popper listeners
-     * @param newValue - if true enable popper listners
-     */
-    private setPopperListeners;
     /**
      * Manage all clickOustside listeners
      * @param action - top process on elements listeners
@@ -87,6 +83,11 @@ export declare class MgPopover {
      * Render popover content element
      */
     private renderPopoverContent;
+    /**
+     * Set up Floating UI positioning and arrow behavior
+     * @param interactiveElement - Element that triggers the popover
+     */
+    private setFloatingUI;
     /*************
      * Lifecycle *
      *************/
@@ -102,6 +103,10 @@ export declare class MgPopover {
      * Check if component props are well configured on init
      */
     componentDidLoad(): void;
+    /**
+     * Cleanup when component is disconnected
+     */
+    disconnectedCallback(): void;
     /**
      * Render
      * @returns HTML Element

package/dist/types/components.d.ts

@@ -26,11 +26,12 @@ import { MgMenuStatusType, TargetType } from "./components/molecules/menu/mg-men
 import { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } from "./components/molecules/mg-message/mg-message.conf";
 import { DialogRoleType } from "./components/molecules/mg-modal/mg-modal.conf";
 import { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
-import { Placement } from "@popperjs/core";
+import { PopoverPlacementType } from "./components/molecules/mg-popover/mg-popover.conf";
 import { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 import { SizeType as SizeType2, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
+import { TooltipPlacementType } from "./components/atoms/mg-tooltip/mg-tooltip.conf";
 export { MgActionMoreButtonType, MgActionMoreDividerType, MgActionMoreIconType, MgActionMoreItemType } from "./components/molecules/mg-action-more/mg-action-more.conf";
 export { VariantStyleType, VariantType } from "./components/molecules/mg-alert/mg-alert.conf";
 export { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
@@ -52,11 +53,12 @@ export { MgMenuStatusType, TargetType } from "./components/molecules/menu/mg-men
 export { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } from "./components/molecules/mg-message/mg-message.conf";
 export { DialogRoleType } from "./components/molecules/mg-modal/mg-modal.conf";
 export { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
-export { Placement } from "@popperjs/core";
+export { PopoverPlacementType } from "./components/molecules/mg-popover/mg-popover.conf";
 export { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 export { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 export { SizeType as SizeType2, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 export { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
+export { TooltipPlacementType } from "./components/atoms/mg-tooltip/mg-tooltip.conf";
 export namespace Components {
     interface MgActionMore {
         /**
@@ -1373,7 +1375,7 @@ export namespace Components {
         /**
           * Popover placement
          */
-        "placement": Placement;
+        "placement": PopoverPlacementType;
     }
     interface MgPopoverContent {
         /**
@@ -1465,7 +1467,7 @@ export namespace Components {
         /**
           * Tooltip placement
          */
-        "placement": Placement;
+        "placement": TooltipPlacementType;
     }
     interface MgTooltipContent {
         /**
@@ -3427,7 +3429,7 @@ declare namespace LocalJSX {
         /**
           * Popover placement
          */
-        "placement"?: Placement;
+        "placement"?: PopoverPlacementType;
     }
     interface MgPopoverContent {
         /**
@@ -3531,7 +3533,7 @@ declare namespace LocalJSX {
         /**
           * Tooltip placement
          */
-        "placement"?: Placement;
+        "placement"?: TooltipPlacementType;
     }
     interface MgTooltipContent {
         /**

package/dist/types/utils/floating-ui.utils.d.ts

@@ -0,0 +1,19 @@
+import { type Placement } from "@floating-ui/dom";
+/**
+ * List of all possibles sides
+ */
+export declare const sides: readonly ["top", "right", "bottom", "left"];
+/**
+ * List of all possibles placements
+ */
+export declare const placements: readonly ["top", "right", "bottom", "left", "auto", "auto-start", "auto-end", "top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end"];
+/**
+ * Define placement type
+ */
+export type ExtendedPlacement = Placement | (typeof placements)[number];
+/**
+ * FloatingUI Placement type guard
+ * @param placement - value to check
+ * @returns truthy if placement is valid
+ */
+export declare const isFloatingUIPlacement: (placement: any) => placement is Placement;

package/ide/intellij/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@mgdis/mg-components",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -33,27 +33,27 @@
     "outputName": "junit.xml"
   },
   "dependencies": {
-    "@popperjs/core": "2.11.8",
-    "@stencil/core": "4.23.2",
+    "@floating-ui/dom": "1.6.13",
+    "@stencil/core": "4.25.1",
     "@mgdis/img": "2.1.2",
-    "@mgdis/styles": "2.2.1",
-    "@mgdis/stencil-helpers": "2.2.2"
+    "@mgdis/stencil-helpers": "2.2.3",
+    "@mgdis/styles": "2.2.2"
   },
   "devDependencies": {
-    "@playwright/test": "1.49.1",
-    "@storybook/addon-a11y": "8.5.0",
-    "@storybook/addon-actions": "8.5.0",
-    "@storybook/addon-essentials": "8.5.0",
-    "@storybook/addon-interactions": "8.5.0",
-    "@storybook/addon-links": "8.5.0",
-    "@storybook/blocks": "8.5.0",
-    "@storybook/html": "8.5.0",
-    "@storybook/html-vite": "8.5.0",
-    "@storybook/manager-api": "8.5.0",
-    "@storybook/theming": "8.5.0",
+    "@playwright/test": "1.50.0",
+    "@storybook/addon-a11y": "8.5.2",
+    "@storybook/addon-actions": "8.5.2",
+    "@storybook/addon-essentials": "8.5.2",
+    "@storybook/addon-interactions": "8.5.2",
+    "@storybook/addon-links": "8.5.2",
+    "@storybook/blocks": "8.5.2",
+    "@storybook/html": "8.5.2",
+    "@storybook/html-vite": "8.5.2",
+    "@storybook/manager-api": "8.5.2",
+    "@storybook/theming": "8.5.2",
     "@types/jest": "29.5.14",
-    "@types/node": "22.10.7",
-    "chromatic": "11.25.0",
+    "@types/node": "22.12.0",
+    "chromatic": "11.25.1",
     "eslint": "8.57.1",
     "eslint-plugin-storybook": "0.11.2",
     "jest": "29.7.0",
@@ -62,11 +62,11 @@
     "jest-transform-stub": "2.0.0",
     "react": "18.3.1",
     "sass": "1.83.4",
-    "storybook": "8.5.0",
+    "storybook": "8.5.2",
     "typescript": "5.7.3",
-    "vite": "6.0.9",
+    "vite": "6.0.11",
     "@core-ui/jest-config": "1.0.9",
-    "@mgdis/linting-stencil": "1.3.3",
+    "@mgdis/linting-stencil": "1.3.4",
     "@mgdis/playwright-helpers": "1.0.11"
   },
   "license": "BSD-3-Clause",