@synerise/ds-information-card 1.3.8 → 1.4.0

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.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.3.9...@synerise/ds-information-card@1.4.0) (2026-01-20)
+
+### Features
+
+- **information-card:** migrate to popover ([de900e4](https://github.com/Synerise/synerise-design/commit/de900e4bc1c32a4bbbf175401374619e691023f2))
+
+## [1.3.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.3.8...@synerise/ds-information-card@1.3.9) (2026-01-15)
+
+**Note:** Version bump only for package @synerise/ds-information-card
+
 ## [1.3.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@1.3.7...@synerise/ds-information-card@1.3.8) (2026-01-12)
 
 **Note:** Version bump only for package @synerise/ds-information-card

package/dist/InformationCard.d.ts

@@ -1,4 +1,3 @@
-import 'rc-trigger/assets/index.less';
 import React from 'react';
 declare const InformationCard: React.ForwardRefExoticComponent<{
     actionButton?: boolean | (() => React.ReactNode);

package/dist/InformationCard.js

@@ -1,7 +1,6 @@
 var _excluded = ["actionButton", "actionButtonTooltipText", "actionButtonCallback", "actionsMenu", "asTooltip", "avatarTooltipText", "copyTooltip", "copiedTooltip", "renderFooter", "renderBadge", "subtitle", "title", "notice", "footerText", "icon", "iconColor", "descriptionConfig", "className", "renderAdditionalDescription", "propertyListItems", "summaryItems"];
 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; }
-import "rc-trigger/assets/index.css";
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import Card from '@synerise/ds-card';
 import { SegmentM } from '@synerise/ds-icon';

package/dist/InformationCardTooltip/InformationCard.constants.d.ts

@@ -1,34 +1,6 @@
-export declare const TRIGGER_PLACEMENTS: {
-    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[];
-    };
-};
+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/InformationCardTooltip/InformationCard.constants.js

@@ -1,34 +1,14 @@
-export var TRIGGER_PLACEMENTS = {
-  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]
+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/InformationCardTooltip/InformationCardTooltip.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
-import { type InformationCardTooltipProps } from './InformationCardTooltip.types';
-export declare const InformationCardTooltip: ({ triggerProps, children, style, informationCardProps, ...rest }: InformationCardTooltipProps) => React.JSX.Element;
+export declare const InformationCardTooltip: React.ForwardRefExoticComponent<{
+    informationCardProps?: import("..").InformationCardProps;
+    content?: React.ReactNode;
+    children: React.ReactNode;
+    popoverProps?: Omit<import("@synerise/ds-popover").PopoverOptions, "listNavigationConfig" | "arrowConfig" | "returnFocus" | "modal">;
+    asChild?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "content" | "asChild" | "popoverProps" | "informationCardProps"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/InformationCardTooltip/InformationCardTooltip.js

@@ -1,52 +1,43 @@
-var _excluded = ["triggerProps", "children", "style", "informationCardProps"];
+var _excluded = ["popoverProps", "asChild", "children", "style", "content", "informationCardProps"];
 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; }
-import Trigger from 'rc-trigger';
-import React, { useCallback, useMemo } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import { useTheme } from '@synerise/ds-core';
+import { Popover, PopoverContent, PopoverTrigger } from '@synerise/ds-popover';
 import InformationCard from '../InformationCard';
-import { TRIGGER_PLACEMENTS } from './InformationCard.constants';
+import { FLIP_CONFIG, HOVER_CONFIG, OFFSET_CONFIG, SHIFT_CONFIG } from './InformationCard.constants';
 import * as S from './InformationCardTooltip.styles';
-export var InformationCardTooltip = function InformationCardTooltip(_ref) {
-  var _triggerProps$default;
-  var triggerProps = _ref.triggerProps,
+export var InformationCardTooltip = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var popoverProps = _ref.popoverProps,
+    asChild = _ref.asChild,
     children = _ref.children,
     style = _ref.style,
+    content = _ref.content,
     informationCardProps = _ref.informationCardProps,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var dsTheme = useTheme();
-  var zIndex = parseInt(dsTheme.variables['zindex-tooltip'], 10);
-  var renderedInfocard = useMemo(function () {
-    return /*#__PURE__*/React.createElement(InformationCard, informationCardProps);
-  }, [informationCardProps]);
+  var theme = useTheme();
+  var zIndex = parseInt(theme.variables['zindex-tooltip'], 10);
   var cancelBubblingEvent = useCallback(function () {
     return function (event) {
       return event.stopPropagation();
     };
   }, []);
-  var _ref2 = triggerProps || {},
-    popupAlign = _ref2.popupAlign;
-  var triggerPopupAlign = _extends({
-    overflow: _extends({
-      adjustX: true,
-      adjustY: true
-    }, popupAlign == null ? void 0 : popupAlign.overflow)
-  }, popupAlign);
-  return /*#__PURE__*/React.createElement(S.InformationCardTooltipWrapper, _extends({}, rest, {
+  return /*#__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,
+    placement: "right",
+    zIndex: zIndex
+  }, popoverProps), /*#__PURE__*/React.createElement(PopoverContent, null, /*#__PURE__*/React.createElement(S.InformationCardTooltipWrapper, _extends({}, rest, {
     onKeyDown: cancelBubblingEvent,
     onClick: cancelBubblingEvent
-  }), /*#__PURE__*/React.createElement(Trigger, _extends({
-    builtinPlacements: TRIGGER_PLACEMENTS,
-    defaultPopupVisible: (_triggerProps$default = triggerProps == null ? void 0 : triggerProps.defaultPopupVisible) != null ? _triggerProps$default : false,
-    action: (triggerProps == null ? void 0 : triggerProps.action) || ['click', 'hover'],
-    popupPlacement: (triggerProps == null ? void 0 : triggerProps.popupPlacement) || 'right',
-    popup: renderedInfocard,
-    popupClassName: "ignore-click-outside ds-hide-arrow",
-    mouseEnterDelay: 0.2,
-    popupStyle: {
-      zIndex: zIndex
-    },
-    zIndex: zIndex,
-    popupAlign: triggerPopupAlign
-  }, triggerProps), /*#__PURE__*/React.createElement(S.InformationCardTooltipTrigger, null, children)));
-};
+  }), informationCardProps ? /*#__PURE__*/React.createElement(InformationCard, informationCardProps) : content)), /*#__PURE__*/React.createElement(PopoverTrigger, {
+    asChild: asChild,
+    ref: ref
+  }, children));
+});

package/dist/InformationCardTooltip/InformationCardTooltip.styles.d.ts

@@ -1,2 +1 @@
 export declare const InformationCardTooltipWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InformationCardTooltipTrigger: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/InformationCardTooltip/InformationCardTooltip.styles.js

@@ -2,8 +2,4 @@ import styled from 'styled-components';
 export var InformationCardTooltipWrapper = styled.div.withConfig({
   displayName: "InformationCardTooltipstyles__InformationCardTooltipWrapper",
   componentId: "sc-1q11fca-0"
-})([""]);
-export var InformationCardTooltipTrigger = styled.div.withConfig({
-  displayName: "InformationCardTooltipstyles__InformationCardTooltipTrigger",
-  componentId: "sc-1q11fca-1"
-})([""]);
+})(["display:contents;"]);

package/dist/InformationCardTooltip/InformationCardTooltip.types.d.ts

@@ -1,13 +1,23 @@
-import type { TriggerProps } from 'rc-trigger';
-import type { Component, HTMLAttributes, ReactNode } from 'react';
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { type StyledComponent } from 'styled-components';
+import { type LegacyPlacement, type PopoverOptions } from '@synerise/ds-popover';
+import { type WithHTMLAttributes } from '@synerise/ds-utils';
 import type { InformationCardProps } from '../InformationCard.types';
-export type TriggerHandle = Component<TriggerProps> & {
-    getPopupDomNode: () => HTMLElement;
-};
-export type InformationCardTooltipProps = Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown'> & {
-    informationCardProps: InformationCardProps;
+export type InformationCardTooltipProps = WithHTMLAttributes<HTMLDivElement, {
+    /**
+     * InformationCardProps - will render <InformationCard/> component with these props as the content of the tooltip
+     */
+    informationCardProps?: InformationCardProps;
+    /**
+     * rendered content of the infocard tooltip (alternative to informationCardProps prop)
+     */
+    content?: ReactNode;
+    /**
+     * trigger to attach the tooltip to
+     */
     children: ReactNode;
-    triggerProps?: Partial<TriggerProps> & {
-        ref?: React.LegacyRef<TriggerHandle>;
-    };
-};
+    popoverProps?: Omit<PopoverOptions, 'listNavigationConfig' | 'arrowConfig' | 'returnFocus' | 'modal'>;
+    asChild?: boolean;
+}>;
+export type LegacyInformationCardPlacement = Exclude<LegacyPlacement, 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'>;
+export type StyledInformationCardTooltip<CustomProps extends object = object> = StyledComponent<ForwardRefExoticComponent<InformationCardTooltipProps & RefAttributes<HTMLDivElement>>, object, CustomProps, never>;

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 export { default } from './InformationCard';
 export { InformationCardPropertyList } from './InformationCardPropertyList/InformationCardPropertyList';
-export type { InformationCardPropertyItem, InformationCardPropertyItemTypes, InformationCardPropertyListProps, } from './InformationCardPropertyList/InformationCardPropertyList.types';
 export { buildExtraInfo, buildIconBadge, buildInitialsBadge, } from './InformationCard.utils';
-export type { InformationCardProps } from './InformationCard.types';
 export { InformationCardTooltip } from './InformationCardTooltip/InformationCardTooltip';
-export { TRIGGER_PLACEMENTS } from './InformationCardTooltip/InformationCard.constants';
-export type { InformationCardTooltipProps } from './InformationCardTooltip/InformationCardTooltip.types';
+export * from './InformationCardPropertyList/InformationCardPropertyList.types';
+export * from './InformationCard.types';
+export * from './InformationCardTooltip/InformationCardTooltip.types';

package/dist/index.js

@@ -2,4 +2,6 @@ export { default } from './InformationCard';
 export { InformationCardPropertyList } from './InformationCardPropertyList/InformationCardPropertyList';
 export { buildExtraInfo, buildIconBadge, buildInitialsBadge } from './InformationCard.utils';
 export { InformationCardTooltip } from './InformationCardTooltip/InformationCardTooltip';
-export { TRIGGER_PLACEMENTS } from './InformationCardTooltip/InformationCard.constants';
+export * from './InformationCardPropertyList/InformationCardPropertyList.types';
+export * from './InformationCard.types';
+export * from './InformationCardTooltip/InformationCardTooltip.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-information-card",
-  "version": "1.3.8",
+  "version": "1.4.0",
   "description": "InformationCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,25 +36,26 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^1.1.30",
-    "@synerise/ds-avatar": "^1.1.4",
-    "@synerise/ds-badge": "^1.0.29",
-    "@synerise/ds-button": "^1.5.4",
-    "@synerise/ds-card": "^1.2.20",
-    "@synerise/ds-copy-icon": "^1.0.5",
-    "@synerise/ds-description": "^1.1.18",
-    "@synerise/ds-divider": "^1.2.5",
-    "@synerise/ds-dropdown": "^1.1.7",
-    "@synerise/ds-icon": "^1.9.3",
-    "@synerise/ds-menu": "^1.2.4",
-    "@synerise/ds-scrollbar": "^1.2.4",
-    "@synerise/ds-skeleton": "^1.0.29",
-    "@synerise/ds-status": "^1.3.4",
-    "@synerise/ds-subtle-form": "^1.1.42",
-    "@synerise/ds-tooltip": "^1.3.4",
-    "@synerise/ds-typography": "^1.0.27",
-    "@synerise/ds-utils": "^1.5.3",
-    "rc-trigger": "^5.3.4"
+    "@floating-ui/react": "^0.27.16",
+    "@synerise/ds-alert": "^1.1.31",
+    "@synerise/ds-avatar": "^1.1.5",
+    "@synerise/ds-badge": "^1.0.30",
+    "@synerise/ds-button": "^1.5.5",
+    "@synerise/ds-card": "^1.2.21",
+    "@synerise/ds-copy-icon": "^1.0.6",
+    "@synerise/ds-description": "^1.1.19",
+    "@synerise/ds-divider": "^1.2.6",
+    "@synerise/ds-dropdown": "^1.1.9",
+    "@synerise/ds-icon": "^1.10.0",
+    "@synerise/ds-menu": "^1.3.0",
+    "@synerise/ds-popover": "^1.3.0",
+    "@synerise/ds-scrollbar": "^1.2.5",
+    "@synerise/ds-skeleton": "^1.0.30",
+    "@synerise/ds-status": "^1.3.5",
+    "@synerise/ds-subtle-form": "^1.1.44",
+    "@synerise/ds-tooltip": "^1.3.5",
+    "@synerise/ds-typography": "^1.0.28",
+    "@synerise/ds-utils": "^1.5.3"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -62,5 +63,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "70a5256c87ef38313eedb9a004d1c6980082b2f5"
+  "gitHead": "db758824923a2a231a0de460f0d6d10739514cda"
 }