@momentum-design/components 0.122.4 → 0.122.6

package/dist/components/popover/popover.component.d.ts

@@ -323,6 +323,13 @@ declare class Popover extends Popover_base {
      * Useful for scenarios where both a popover and a tooltip are linked to the same trigger element.
      */
     keepConnectedTooltipOpen: boolean;
+    /**
+     * Whether to update the position of the Popover on every animation frame if required.
+     * While optimized for performance, it should be used sparingly and with caution.
+     *
+     * @default false
+     */
+    animationFrame: boolean;
     arrowElement: HTMLElement | null;
     /** @internal */
     private hoverTimer;

package/dist/components/popover/popover.component.js

@@ -337,6 +337,13 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * Useful for scenarios where both a popover and a tooltip are linked to the same trigger element.
          */
         this.keepConnectedTooltipOpen = DEFAULTS.KEEP_CONNECTED_TOOLTIP_OPEN;
+        /**
+         * Whether to update the position of the Popover on every animation frame if required.
+         * While optimized for performance, it should be used sparingly and with caution.
+         *
+         * @default false
+         */
+        this.animationFrame = DEFAULTS.ANIMATION_FRAME;
         this.arrowElement = null;
         /** @internal */
         this.hoverTimer = null;
@@ -661,6 +668,8 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 if (this.trigger.includes('mouseenter')) {
                     this.utils.setupHoverBridge(placement);
                 }
+            }, {
+                animationFrame: this.animationFrame,
             });
         };
         this.utils = new PopoverUtils(this);
@@ -1057,4 +1066,8 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'keep-connected-tooltip-open' }),
     __metadata("design:type", Boolean)
 ], Popover.prototype, "keepConnectedTooltipOpen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'animation-frame' }),
+    __metadata("design:type", Boolean)
+], Popover.prototype, "animationFrame", void 0);
 export default Popover;

package/dist/components/popover/popover.constants.d.ts

@@ -56,5 +56,6 @@ declare const DEFAULTS: {
     readonly PROPAGATE_EVENT_ON_ESCAPE: false;
     readonly KEEP_CONNECTED_TOOLTIP_OPEN: false;
     readonly IS_BACKDROP_INVISIBLE: true;
+    readonly ANIMATION_FRAME: false;
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };

package/dist/components/popover/popover.constants.js

@@ -58,5 +58,6 @@ const DEFAULTS = {
     PROPAGATE_EVENT_ON_ESCAPE: false,
     KEEP_CONNECTED_TOOLTIP_OPEN: false,
     IS_BACKDROP_INVISIBLE: true,
+    ANIMATION_FRAME: false,
 };
 export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS };

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

@@ -1,10 +1,11 @@
 import type { TypedCustomEvent, ValueOf } from '../../utils/types';
 import type TabList from './tablist.component';
 import { ARROW_BUTTON_DIRECTION } from './tablist.constants';
+type TablistChangeEvent = TypedCustomEvent<TabList, {
+    tabId: string;
+}>;
 interface Events {
-    onChangeEvent: TypedCustomEvent<TabList, {
-        tabId: string;
-    }>;
+    onChangeEvent: TablistChangeEvent;
 }
 type ArrowButtonDirectionType = ValueOf<typeof ARROW_BUTTON_DIRECTION>;
-export { ArrowButtonDirectionType, Events };
+export type { ArrowButtonDirectionType, Events, TablistChangeEvent };

package/dist/custom-elements.json

@@ -12834,6 +12834,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "animationFrame",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether to update the position of the Popover on every animation frame if required.\nWhile optimized for performance, it should be used sparingly and with caution.",
+              "default": "false",
+              "attribute": "animation-frame",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "arrowElement",
@@ -13604,6 +13619,19 @@
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "name": "animation-frame",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether to update the position of the Popover on every animation frame if required.\nWhile optimized for performance, it should be used sparingly and with caution.",
+              "default": "false",
+              "fieldName": "animationFrame",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "superclass": {
@@ -27965,6 +27993,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "animationFrame",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether to update the position of the Popover on every animation frame if required.\nWhile optimized for performance, it should be used sparingly and with caution.",
+              "default": "false",
+              "attribute": "animation-frame",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "arrowElement",
@@ -28693,6 +28736,19 @@
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "name": "animation-frame",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether to update the position of the Popover on every animation frame if required.\nWhile optimized for performance, it should be used sparingly and with caution.",
+              "default": "false",
+              "fieldName": "animationFrame",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "superclass": {
@@ -33267,6 +33323,17 @@
               "attribute": "keep-connected-tooltip-open",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "animationFrame",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether to update the position of the Popover on every animation frame if required.\nWhile optimized for performance, it should be used sparingly and with caution.",
+              "default": "false",
+              "attribute": "animation-frame",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "arrowElement",
@@ -34295,6 +34362,15 @@
               "description": "Controls the visibility of a connected tooltip when this popover is open.\n- If set to `true`, the tooltip remains open alongside the popover.\n- If set to `false`, the tooltip will be closed when the popover opens.\nUseful for scenarios where both a popover and a tooltip are linked to the same trigger element.",
               "fieldName": "keepConnectedTooltipOpen"
             },
+            {
+              "name": "animation-frame",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether to update the position of the Popover on every animation frame if required.\nWhile optimized for performance, it should be used sparingly and with caution.",
+              "default": "false",
+              "fieldName": "animationFrame"
+            },
             {
               "name": "should-focus-trap-wrap",
               "type": {
@@ -49489,6 +49565,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "animationFrame",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether to update the position of the Popover on every animation frame if required.\nWhile optimized for performance, it should be used sparingly and with caution.",
+              "default": "false",
+              "attribute": "animation-frame",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "arrowElement",
@@ -50267,6 +50358,19 @@
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "name": "animation-frame",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether to update the position of the Popover on every animation frame if required.\nWhile optimized for performance, it should be used sparingly and with caution.",
+              "default": "false",
+              "fieldName": "animationFrame",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "superclass": {
@@ -51560,6 +51664,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "animationFrame",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether to update the position of the Popover on every animation frame if required.\nWhile optimized for performance, it should be used sparingly and with caution.",
+              "default": "false",
+              "attribute": "animation-frame",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "arrowElement",
@@ -52339,6 +52458,19 @@
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
+            },
+            {
+              "name": "animation-frame",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether to update the position of the Popover on every animation frame if required.\nWhile optimized for performance, it should be used sparingly and with caution.",
+              "default": "false",
+              "fieldName": "animationFrame",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -101,6 +101,7 @@ import type { TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, Texta
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
+import type { TablistChangeEvent } from './components/tablist/tablist.types';
 export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
-export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, };
+export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.122.4",
+  "version": "0.122.6",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"