@synerise/ds-menu 1.2.5 → 1.3.1

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.3.0...@synerise/ds-menu@1.3.1) (2026-01-21)
+
+**Note:** Version bump only for package @synerise/ds-menu
+
+# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.2.5...@synerise/ds-menu@1.3.0) (2026-01-20)
+
+### Features
+
+- **information-card:** migrate to popover ([de900e4](https://github.com/Synerise/synerise-design/commit/de900e4bc1c32a4bbbf175401374619e691023f2))
+
 ## [1.2.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.2.4...@synerise/ds-menu@1.2.5) (2026-01-15)
 
 **Note:** Version bump only for package @synerise/ds-menu

package/dist/Elements/Item/Text/Text.const.d.ts

@@ -0,0 +1,6 @@
+import { type FlipConfig, type HoverConfig, type OffsetConfig, type ShiftConfig } from '@synerise/ds-popover';
+export declare const TRANSITION_DURATION = 150;
+export declare const OFFSET_CONFIG: OffsetConfig;
+export declare const FLIP_CONFIG: FlipConfig;
+export declare const HOVER_CONFIG: HoverConfig;
+export declare const SHIFT_CONFIG: ShiftConfig;

package/dist/Elements/Item/Text/Text.const.js

@@ -0,0 +1,14 @@
+export var TRANSITION_DURATION = 150;
+export var OFFSET_CONFIG = {
+  mainAxis: 8
+};
+export var FLIP_CONFIG = {};
+export var HOVER_CONFIG = {
+  delay: {
+    open: 100,
+    close: 400
+  }
+};
+export var SHIFT_CONFIG = {
+  crossAxis: true
+};

package/dist/Elements/Item/Text/Text.d.ts

@@ -1,10 +1,10 @@
 import 'rc-trigger/assets/index.less';
-import { type CSSProperties, type FC, type PropsWithChildren } from 'react';
+import React, { type CSSProperties, type PropsWithChildren } from 'react';
 import { type BasicItemProps } from './Text.types';
 export type HoverTooltipProps = PropsWithChildren<{
-    hoverTooltipProps?: BasicItemProps['hoverTooltipProps'];
+    popoverProps?: BasicItemProps['popoverProps'];
     renderHoverTooltip?: () => JSX.Element;
     style?: CSSProperties;
 }>;
-declare const Text: FC<BasicItemProps>;
+declare const Text: ({ parent, disabled, prefixel, suffixel, danger, children, description, copyable, copyValue, copyHint, copyTooltip, timeToHideTooltip, tooltipProps, highlight, style, prefixVisibilityTrigger, suffixVisibilityTrigger, indentLevel, ordered, onClick, checked, popoverProps, renderHoverTooltip, size, ...rest }: BasicItemProps) => React.JSX.Element;
 export default Text;

package/dist/Elements/Item/Text/Text.js

@@ -1,19 +1,19 @@
-var _excluded = ["parent", "disabled", "prefixel", "suffixel", "danger", "children", "description", "copyable", "copyValue", "copyHint", "copyTooltip", "timeToHideTooltip", "tooltipProps", "highlight", "style", "prefixVisibilityTrigger", "suffixVisibilityTrigger", "indentLevel", "ordered", "onClick", "checked", "hoverTooltipProps", "renderHoverTooltip", "size"];
+var _excluded = ["parent", "disabled", "prefixel", "suffixel", "danger", "children", "description", "copyable", "copyValue", "copyHint", "copyTooltip", "timeToHideTooltip", "tooltipProps", "highlight", "style", "prefixVisibilityTrigger", "suffixVisibilityTrigger", "indentLevel", "ordered", "onClick", "checked", "popoverProps", "renderHoverTooltip", "size"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import classNames from 'classnames';
 import copy from 'copy-to-clipboard';
-import Trigger from 'rc-trigger';
 import "rc-trigger/assets/index.css";
 import React, { useCallback, useMemo, useState } from 'react';
 import { useDropdown, useTheme } from '@synerise/ds-core';
 import Icon, { AngleRightS, CheckS } from '@synerise/ds-icon';
+import { Popover, PopoverContent, PopoverTrigger, getPlacement } from '@synerise/ds-popover';
 import { escapeRegEx } from '@synerise/ds-utils';
 import { VisibilityTrigger } from '../../../Menu.types';
 import { useTemporaryLabel } from '../../../hooks/useTemporaryLabel';
-import { triggerPlacements } from '../../../utils';
 import { getCopyConfig } from '../../../utils/getCopyConfig';
 import { DynamicLabel } from './DynamicLabel';
+import { FLIP_CONFIG, HOVER_CONFIG, OFFSET_CONFIG, SHIFT_CONFIG, TRANSITION_DURATION } from './Text.const';
 import * as S from './Text.styles';
 var renderAddon = function renderAddon(addon) {
   for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -22,8 +22,7 @@ var renderAddon = function renderAddon(addon) {
   return addon instanceof Function ? addon.apply(void 0, params) : addon;
 };
 function WithHoverTooltip(_ref) {
-  var _hoverTooltipProps$de;
-  var hoverTooltipProps = _ref.hoverTooltipProps,
+  var popoverProps = _ref.popoverProps,
     renderHoverTooltip = _ref.renderHoverTooltip,
     children = _ref.children,
     style = _ref.style;
@@ -34,25 +33,35 @@ function WithHoverTooltip(_ref) {
       ev.stopPropagation();
     };
   }, []);
-  // onKeyDown is used to disallow propagating key events to tooltip's container element
-  return /*#__PURE__*/React.createElement("div", {
-    onKeyDown: cancelBubblingEvent,
-    onClick: cancelBubblingEvent
-  }, /*#__PURE__*/React.createElement(Trigger, _extends({
-    builtinPlacements: triggerPlacements,
-    defaultPopupVisible: (_hoverTooltipProps$de = hoverTooltipProps == null ? void 0 : hoverTooltipProps.defaultPopupVisible) != null ? _hoverTooltipProps$de : false,
-    action: (hoverTooltipProps == null ? void 0 : hoverTooltipProps.action) || ['click', 'hover'],
-    popupPlacement: (hoverTooltipProps == null ? void 0 : hoverTooltipProps.popupPlacement) || 'right',
-    popup: renderHoverTooltip && renderHoverTooltip(),
-    popupClassName: "ignore-click-outside ds-hide-arrow",
-    mouseEnterDelay: 0.2,
-    popupStyle: {
+  var popoverPlacement = getPlacement((popoverProps == null ? void 0 : popoverProps.placement) || 'right');
+  return (
+    /*#__PURE__*/
+    // onKeyDown is used to disallow propagating key events to tooltip's container element
+    React.createElement(S.PropagationStopper, {
+      onKeyDown: cancelBubblingEvent,
+      onClick: cancelBubblingEvent
+    }, /*#__PURE__*/React.createElement(Popover, _extends({
+      trigger: "hover",
+      modal: false,
+      componentId: "information-card",
+      testId: "information-card",
+      shiftConfig: SHIFT_CONFIG,
+      offsetConfig: OFFSET_CONFIG,
+      flipConfig: FLIP_CONFIG,
+      hoverConfig: HOVER_CONFIG,
+      autoUpdate: {
+        layoutShift: true
+      },
+      transitionDuration: TRANSITION_DURATION,
       zIndex: zIndex
-    },
-    zIndex: zIndex
-  }, hoverTooltipProps), /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, children)));
+    }, popoverProps, {
+      placement: popoverPlacement
+    }), /*#__PURE__*/React.createElement(PopoverContent, null, renderHoverTooltip && renderHoverTooltip()), /*#__PURE__*/React.createElement(PopoverTrigger, {
+      asChild: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, children))))
+  );
 }
 var Text = function Text(_ref2) {
   var parent = _ref2.parent,
@@ -76,7 +85,7 @@ var Text = function Text(_ref2) {
     ordered = _ref2.ordered,
     onClick = _ref2.onClick,
     checked = _ref2.checked,
-    hoverTooltipProps = _ref2.hoverTooltipProps,
+    popoverProps = _ref2.popoverProps,
     renderHoverTooltip = _ref2.renderHoverTooltip,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'default' : _ref2$size,
@@ -214,7 +223,7 @@ var Text = function Text(_ref2) {
   }), suffixElement))));
   if (renderHoverTooltip) {
     return /*#__PURE__*/React.createElement(WithHoverTooltip, {
-      hoverTooltipProps: hoverTooltipProps,
+      popoverProps: popoverProps,
       renderHoverTooltip: renderHoverTooltip,
       style: mergedStyle
     }, element);

package/dist/Elements/Item/Text/Text.styles.d.ts

@@ -36,4 +36,5 @@ export declare const DynamicLabelAlternate: import("styled-components").StyledCo
 export declare const DynamicLabelWrapper: import("styled-components").StyledComponent<"div", any, {
     showAlternative?: boolean;
 }, never>;
+export declare const PropagationStopper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/Elements/Item/Text/Text.styles.js

@@ -145,4 +145,8 @@ export var DynamicLabelWrapper = styled.div.withConfig({
   componentId: "sc-dgb761-11"
 })(["", ""], function (props) {
   return props.showAlternative ? css(["", "{height:0;visibility:hidden;}", "{height:auto;visibility:visible;}"], DynamicLabelMain, DynamicLabelAlternate) : css(["", "{height:auto;visibility:visible;}", "{height:0;visibility:hidden;}"], DynamicLabelMain, DynamicLabelAlternate);
-});
+});
+export var PropagationStopper = styled.div.withConfig({
+  displayName: "Textstyles__PropagationStopper",
+  componentId: "sc-dgb761-12"
+})(["display:contents;"]);

package/dist/Elements/Item/Text/Text.types.d.ts

@@ -22,6 +22,6 @@ export type BasicItemProps = {
     key?: string | number;
     checked?: boolean;
     size?: 'default' | 'large';
-    hoverTooltipProps?: MenuItemProps['hoverTooltipProps'];
+    popoverProps?: MenuItemProps['popoverProps'];
     renderHoverTooltip?: MenuItemProps['renderHoverTooltip'];
 } & Pick<MenuItemProps, 'copyHint' | 'copyValue' | 'copyTooltip' | 'copyable' | 'timeToHideTooltip' | 'tooltipProps'>;

package/dist/Menu.js

@@ -1,4 +1,4 @@
-var _excluded = ["dataSource", "ordered", "selectable", "children", "showTextTooltip", "texts", "maxToShowItems"];
+var _excluded = ["dataSource", "ordered", "selectable", "children", "showTextTooltip", "texts", "maxToShowItems", "popoverDelay"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
@@ -8,6 +8,7 @@ import { FormattedMessage } from 'react-intl';
 import Button from '@synerise/ds-button';
 import '@synerise/ds-core/dist/js/style';
 import Icon, { ArrowDownCircleM, ArrowUpCircleM } from '@synerise/ds-icon';
+import { FloatingDelayGroup } from '@synerise/ds-popover';
 import Tooltip from '@synerise/ds-tooltip';
 import Breadcrumb from './Elements/Breadcrumb/Breadcrumb';
 import { Divider } from './Elements/Divider/Divider';
@@ -46,6 +47,11 @@ export var Menu = /*#__PURE__*/function (_Component) {
       showTextTooltip = _this$props.showTextTooltip,
       texts = _this$props.texts,
       maxToShowItems = _this$props.maxToShowItems,
+      _this$props$popoverDe = _this$props.popoverDelay,
+      popoverDelay = _this$props$popoverDe === void 0 ? {
+        open: 100,
+        close: 400
+      } : _this$props$popoverDe,
       rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
     var allItemsVisible = this.state.allItemsVisible;
     var allTexts = _extends({
@@ -75,7 +81,9 @@ export var Menu = /*#__PURE__*/function (_Component) {
     }, /*#__PURE__*/React.createElement(Icon, {
       component: allItemsVisible ? /*#__PURE__*/React.createElement(ArrowUpCircleM, null) : /*#__PURE__*/React.createElement(ArrowDownCircleM, null)
     }), toggleButtonLabel);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.AntdMenu, _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FloatingDelayGroup, {
+      delay: popoverDelay
+    }, /*#__PURE__*/React.createElement(S.AntdMenu, _extends({
       ordered: ordered,
       mode: "inline",
       inlineIndent: ordered ? 20 : 18
@@ -125,7 +133,7 @@ export var Menu = /*#__PURE__*/function (_Component) {
         key: item.key || "" + item.text + index,
         menuItemKey: item.key || "" + item.text + index
       }, rest, item));
-    }) : visibleChildren), toggleButton);
+    }) : visibleChildren)), toggleButton);
   };
   return Menu;
 }(Component);

package/dist/Menu.types.d.ts

@@ -1,6 +1,6 @@
 import { type MenuProps } from 'antd/lib/menu';
-import type { TriggerProps } from 'rc-trigger';
-import type { Component, LegacyRef, ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import { type DelayConfig, type LegacyPlacement, type PopoverOptions } from '@synerise/ds-popover';
 import { type TooltipProps } from '@synerise/ds-tooltip';
 export type MenuTexts = {
     showLess: ReactNode;
@@ -12,6 +12,7 @@ export type AntdMenuProps = Omit<MenuProps, 'dataSource' | 'footer'> & {
     asDropdownMenu?: boolean;
     showTextTooltip?: boolean;
     asInfoCardContainer?: boolean;
+    popoverDelay?: DelayConfig;
     maxToShowItems?: number;
     texts?: Partial<MenuTexts>;
 };
@@ -80,9 +81,6 @@ export declare enum ItemSize {
     DEFAULT = "default",
     LARGE = "large"
 }
-export type TriggerHandle = Component<TriggerProps> & {
-    getPopupDomNode: () => HTMLElement;
-};
 export type MenuItemProps = Omit<MenuProps, 'dataSource' | 'footer'> & {
     key?: string | number;
     text?: ReactNode;
@@ -123,8 +121,8 @@ export type MenuItemProps = Omit<MenuProps, 'dataSource' | 'footer'> & {
     menuItemKey?: string | number;
     checked?: boolean;
     size?: 'default' | 'large';
-    hoverTooltipProps?: TriggerProps & {
-        ref?: LegacyRef<TriggerHandle>;
+    popoverProps?: Pick<PopoverOptions, 'getPopupContainer' | 'offsetConfig' | 'flipConfig' | 'shiftConfig' | 'initialOpen'> & {
+        placement?: LegacyPlacement;
     };
     renderHoverTooltip?: () => JSX.Element;
 };

package/dist/index.d.ts

@@ -7,7 +7,6 @@ import * as ItemTextStyles from './Elements/Item/Text/Text.styles';
 import * as MainMenuStyles from './Menu.styles';
 export { default } from './Menu';
 export * from './Menu.types';
-export * from './utils';
 export declare const MenuStyles: {
     MenuStyles: typeof MainMenuStyles;
     Breadcrumb: typeof BreadcrumbStyles;

package/dist/index.js

@@ -7,7 +7,6 @@ import * as ItemTextStyles from './Elements/Item/Text/Text.styles';
 import * as MainMenuStyles from './Menu.styles';
 export { default } from './Menu';
 export * from './Menu.types';
-export * from './utils';
 export var MenuStyles = {
   MenuStyles: MainMenuStyles,
   Breadcrumb: BreadcrumbStyles,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-menu",
-  "version": "1.2.5",
+  "version": "1.3.1",
   "description": "Menu UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -38,13 +38,16 @@
     "@synerise/ds-button": "^1.5.5",
     "@synerise/ds-divider": "^1.2.6",
     "@synerise/ds-icon": "^1.10.0",
+    "@synerise/ds-popover": "^1.3.1",
     "@synerise/ds-tooltip": "^1.3.5",
     "@synerise/ds-utils": "^1.5.3",
     "classnames": "^2.5.1",
     "rc-menu": "~9.6.3",
-    "rc-trigger": "^5.3.4",
     "uuid": "^8.3.2"
   },
+  "devDependencies": {
+    "@testing-library/user-event": "^14"
+  },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "antd": "4.24.16",
@@ -52,5 +55,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "4cde643d1f63a4b47e84707a13b1b1d138730d53"
+  "gitHead": "1ab50150aadeb21d9464b1558d0d1ea8808b85e5"
 }

package/dist/utils.d.ts

@@ -1,34 +0,0 @@
-export declare const triggerPlacements: {
-    left: {
-        points: string[];
-        offset: number[];
-    };
-    right: {
-        points: string[];
-        offset: number[];
-    };
-    top: {
-        points: string[];
-        offset: number[];
-    };
-    bottom: {
-        points: string[];
-        offset: number[];
-    };
-    topLeft: {
-        points: string[];
-        offset: number[];
-    };
-    topRight: {
-        points: string[];
-        offset: number[];
-    };
-    bottomRight: {
-        points: string[];
-        offset: number[];
-    };
-    bottomLeft: {
-        points: string[];
-        offset: number[];
-    };
-};

package/dist/utils.js

@@ -1,34 +0,0 @@
-export var triggerPlacements = {
-  left: {
-    points: ['cr', 'cl'],
-    offset: [-8, 0]
-  },
-  right: {
-    points: ['cl', 'cr'],
-    offset: [0, 0]
-  },
-  top: {
-    points: ['bc', 'tc'],
-    offset: [0, -8]
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    offset: [0, 8]
-  },
-  topLeft: {
-    points: ['bl', 'tl'],
-    offset: [0, -8]
-  },
-  topRight: {
-    points: ['br', 'tr'],
-    offset: [0, -8]
-  },
-  bottomRight: {
-    points: ['tr', 'br'],
-    offset: [0, 8]
-  },
-  bottomLeft: {
-    points: ['tl', 'bl'],
-    offset: [0, 8]
-  }
-};