@synerise/ds-list-item 1.2.6 → 1.3.0

package/CHANGELOG.md

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

package/dist/ListItem.d.ts

@@ -15,8 +15,8 @@ declare const ListItem: React.ForwardRefExoticComponent<import("./ListItem.types
     direction?: "ltr" | "rtl";
     disabled?: boolean;
     highlight?: string;
-    hoverTooltipProps?: Pick<import("rc-trigger").TriggerProps, "onPopupVisibleChange" | "onPopupClick" | "mouseEnterDelay" | "mouseLeaveDelay" | "defaultPopupVisible" | "action" | "afterPopupVisibleChange" | "popupPlacement" | "getPopupContainer" | "forceRender"> & {
-        ref?: React.LegacyRef<import("./ListItem.types").TriggerHandle>;
+    popoverProps?: Pick<import("@synerise/ds-popover").PopoverOptions, "getPopupContainer" | "offsetConfig" | "flipConfig" | "shiftConfig" | "initialOpen"> & {
+        placement?: import("@synerise/ds-popover").LegacyPlacement;
     };
     key?: React.Key;
     itemKey?: React.Key;
@@ -36,5 +36,5 @@ declare const ListItem: React.ForwardRefExoticComponent<import("./ListItem.types
     subMenu?: ListItemProps[];
     indentLevel?: number;
     featured?: boolean;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "children" | "onClick" | keyof import("./ListItem.types").ListItemDividerProps | "checked" | "selected" | "copyable" | "copyValue" | "copyHint" | "copyTooltip" | "timeToHideTooltip" | "tooltipProps" | "description" | "direction" | "disabled" | "highlight" | "hoverTooltipProps" | "key" | "itemKey" | "noHover" | "onItemHover" | "ordered" | "parent" | "prefixel" | "prefixVisibilityTrigger" | "renderHoverTooltip" | "size" | "suffixel" | "suffixVisibilityTrigger" | "text" | "type" | "subMenu" | "indentLevel" | "featured"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "children" | "onClick" | keyof import("./ListItem.types").ListItemDividerProps | "checked" | "selected" | "copyable" | "copyValue" | "copyHint" | "copyTooltip" | "timeToHideTooltip" | "tooltipProps" | "description" | "direction" | "disabled" | "highlight" | "popoverProps" | "key" | "itemKey" | "noHover" | "onItemHover" | "ordered" | "parent" | "prefixel" | "prefixVisibilityTrigger" | "renderHoverTooltip" | "size" | "suffixel" | "suffixVisibilityTrigger" | "text" | "type" | "subMenu" | "indentLevel" | "featured"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;
 export default ListItem;

package/dist/ListItem.types.d.ts

@@ -1,6 +1,6 @@
-import type { TriggerProps } from 'rc-trigger';
-import type { Component, ComponentType, ForwardRefExoticComponent, Key, KeyboardEvent, LegacyRef, MouseEvent, ReactNode, RefAttributes } from 'react';
+import type { ComponentType, ForwardRefExoticComponent, Key, KeyboardEvent, MouseEvent, ReactNode, RefAttributes } from 'react';
 import { type StyledComponent } from 'styled-components';
+import { type LegacyPlacement, type PopoverOptions } from '@synerise/ds-popover';
 import type { TooltipProps } from '@synerise/ds-tooltip';
 import type { WithHTMLAttributes } from '@synerise/ds-utils';
 export type AddonRenderer = (hovered: boolean) => ReactNode;
@@ -23,9 +23,6 @@ export type ItemData<EventType = MouseEvent | KeyboardEvent> = {
     domEvent: EventType;
 };
 export type ListItemEventHandler<EventType> = (item: ItemData<EventType>) => void;
-export type TriggerHandle = Component<TriggerProps> & {
-    getPopupDomNode: () => HTMLElement;
-};
 /**
  * @deprecated
  * provide Copyable type instead
@@ -67,8 +64,8 @@ export type BaseListItemProps = ListItemDividerProps & {
     direction?: 'ltr' | 'rtl';
     disabled?: boolean;
     highlight?: string;
-    hoverTooltipProps?: Pick<TriggerProps, 'onPopupVisibleChange' | 'onPopupClick' | 'mouseEnterDelay' | 'mouseLeaveDelay' | 'defaultPopupVisible' | 'action' | 'afterPopupVisibleChange' | 'popupPlacement' | 'getPopupContainer' | 'forceRender'> & {
-        ref?: LegacyRef<TriggerHandle>;
+    popoverProps?: Pick<PopoverOptions, 'getPopupContainer' | 'offsetConfig' | 'flipConfig' | 'shiftConfig' | 'initialOpen'> & {
+        placement?: LegacyPlacement;
     };
     key?: Key;
     itemKey?: Key;

package/dist/components/HoverTooltip/HoverTooltip.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/components/HoverTooltip/HoverTooltip.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/components/HoverTooltip/HoverTooltip.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type HoverTooltipProps } from './HoverTooltip.types';
-declare const HoverTooltip: ({ hoverTooltipProps, renderHoverTooltip, children, style, }: HoverTooltipProps) => React.JSX.Element;
+declare const HoverTooltip: ({ popoverProps, renderHoverTooltip, children, style, }: HoverTooltipProps) => React.JSX.Element;
 export default HoverTooltip;

package/dist/components/HoverTooltip/HoverTooltip.js

@@ -1,11 +1,11 @@
 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 Trigger from 'rc-trigger';
 import React, { useCallback } from 'react';
 import { useTheme } from '@synerise/ds-core';
-import { TRIGGER_PLACEMENTS } from '../../utils';
+import { Popover, PopoverContent, PopoverTrigger, getPlacement } from '@synerise/ds-popover';
+import { FLIP_CONFIG, HOVER_CONFIG, OFFSET_CONFIG, SHIFT_CONFIG, TRANSITION_DURATION } from './HoverTooltip.const';
+import { PropagationStopper } from './HoverTooltip.styles';
 var HoverTooltip = function HoverTooltip(_ref) {
-  var _hoverTooltipProps$de;
-  var hoverTooltipProps = _ref.hoverTooltipProps,
+  var popoverProps = _ref.popoverProps,
     renderHoverTooltip = _ref.renderHoverTooltip,
     children = _ref.children,
     style = _ref.style;
@@ -16,26 +16,33 @@ var HoverTooltip = function HoverTooltip(_ref) {
       return event.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: TRIGGER_PLACEMENTS,
-    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(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,
+      transitionDuration: TRANSITION_DURATION,
       zIndex: zIndex
-    },
-    zIndex: zIndex
-  }, hoverTooltipProps), /*#__PURE__*/React.createElement("div", {
-    style: _extends({
-      position: 'relative'
-    }, style)
-  }, children)));
+    }, popoverProps, {
+      placement: popoverPlacement
+    }), /*#__PURE__*/React.createElement(PopoverContent, null, renderHoverTooltip && renderHoverTooltip()), /*#__PURE__*/React.createElement(PopoverTrigger, {
+      asChild: true
+    }, /*#__PURE__*/React.createElement("div", {
+      style: _extends({
+        position: 'relative'
+      }, style)
+    }, children))))
+  );
 };
 export default HoverTooltip;

package/dist/components/HoverTooltip/HoverTooltip.styles.d.ts

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

package/dist/components/HoverTooltip/HoverTooltip.styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var PropagationStopper = styled.div.withConfig({
+  displayName: "HoverTooltipstyles__PropagationStopper",
+  componentId: "sc-5vleg6-0"
+})(["display:contents;"]);

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

@@ -3,6 +3,6 @@ import type { BasicItemProps } from '../../ListItem.types';
 export type HoverTooltipProps = {
     children: ReactNode;
     style?: CSSProperties;
-    hoverTooltipProps?: BasicItemProps['hoverTooltipProps'];
+    popoverProps?: BasicItemProps['popoverProps'];
     renderHoverTooltip?: () => JSX.Element;
 };

package/dist/components/ListContext/ListContext.d.ts

@@ -1,6 +1,8 @@
+import { type DelayConfig } from '@synerise/ds-popover';
 import type { ListItemProps } from '../../ListItem.types';
 export type ListContextProps = {
     onClick?: ListItemProps['onClick'];
+    popoverDelay?: DelayConfig;
     selectedKeys?: [];
     multiple?: boolean;
 };

package/dist/components/ListContext/ListContextProvider.d.ts

@@ -1,5 +1,5 @@
 import React, { type ReactNode } from 'react';
 import { type ListContextProps } from './ListContext';
-export declare const ListContextProvider: ({ children, ...rest }: ListContextProps & {
+export declare const ListContextProvider: ({ children, popoverDelay, ...rest }: ListContextProps & {
     children?: ReactNode;
 }) => React.JSX.Element;

package/dist/components/ListContext/ListContextProvider.js

@@ -1,11 +1,19 @@
-var _excluded = ["children"];
+var _excluded = ["children", "popoverDelay"];
 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 React from 'react';
+import { FloatingDelayGroup } from '@synerise/ds-popover';
 import { ListContext } from './ListContext';
 export var ListContextProvider = function ListContextProvider(_ref) {
   var children = _ref.children,
+    _ref$popoverDelay = _ref.popoverDelay,
+    popoverDelay = _ref$popoverDelay === void 0 ? {
+      open: 100,
+      close: 400
+    } : _ref$popoverDelay,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(ListContext.Provider, {
+  return /*#__PURE__*/React.createElement(FloatingDelayGroup, {
+    delay: popoverDelay
+  }, /*#__PURE__*/React.createElement(ListContext.Provider, {
     value: rest
-  }, children);
+  }, children));
 };

package/dist/components/Text/Text.js

@@ -1,4 +1,4 @@
-var _excluded = ["checked", "className", "children", "itemKey", "noHover", "size", "prefixel", "suffixel", "copyable", "copyHint", "copyValue", "copyTooltip", "timeToHideTooltip", "tooltipProps", "disabled", "description", "parent", "ordered", "indentLevel", "onClick", "onMouseOver", "onMouseDown", "onMouseLeave", "onBlur", "onFocus", "onItemHover", "onKeyDown", "prefixVisibilityTrigger", "suffixVisibilityTrigger", "highlight", "style", "hoverTooltipProps", "renderHoverTooltip", "subMenu", "featured", "ItemComponent"];
+var _excluded = ["checked", "className", "children", "itemKey", "noHover", "size", "prefixel", "suffixel", "copyable", "copyHint", "copyValue", "copyTooltip", "timeToHideTooltip", "tooltipProps", "disabled", "description", "parent", "ordered", "indentLevel", "onClick", "onMouseOver", "onMouseDown", "onMouseLeave", "onBlur", "onFocus", "onItemHover", "onKeyDown", "prefixVisibilityTrigger", "suffixVisibilityTrigger", "highlight", "style", "popoverProps", "renderHoverTooltip", "subMenu", "featured", "ItemComponent"];
 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 copy from 'copy-to-clipboard';
@@ -43,7 +43,7 @@ var Text = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     suffixVisibilityTrigger = props.suffixVisibilityTrigger,
     highlight = props.highlight,
     style = props.style,
-    hoverTooltipProps = props.hoverTooltipProps,
+    popoverProps = props.popoverProps,
     renderHoverTooltip = props.renderHoverTooltip,
     subMenu = props.subMenu,
     featured = props.featured,
@@ -212,7 +212,7 @@ var Text = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   }, rest));
   if (renderHoverTooltip) {
     return /*#__PURE__*/React.createElement(HoverTooltip, {
-      hoverTooltipProps: hoverTooltipProps,
+      popoverProps: popoverProps,
       renderHoverTooltip: renderHoverTooltip,
       style: style
     }, TextNode);

package/dist/index.d.ts

@@ -2,5 +2,6 @@ export { default } from './ListItem';
 export { HoverTooltip, GroupItem } from './components';
 export { ListWrapper, type ListWrapperProps, } from './components/ListWrapper/ListWrapper';
 export { useListContext } from './components/ListContext/ListContext';
+export { ListContextProvider } from './components/ListContext/ListContextProvider';
 export { itemSizes, itemTypes, type ListItemProps, type BasicItemProps, type ItemSize, type ItemType, type ItemData, type StyledListItem, type ListItemEventHandler, } from './ListItem.types';
 export * from './ListItem.const';

package/dist/index.js

@@ -2,5 +2,6 @@ export { default } from './ListItem';
 export { HoverTooltip, GroupItem } from './components';
 export { ListWrapper } from './components/ListWrapper/ListWrapper';
 export { useListContext } from './components/ListContext/ListContext';
+export { ListContextProvider } from './components/ListContext/ListContextProvider';
 export { itemSizes, itemTypes } from './ListItem.types';
 export * from './ListItem.const';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-list-item",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "ListItem UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -38,18 +38,17 @@
     "@floating-ui/react": "^0.27.16",
     "@synerise/ds-divider": "^1.2.6",
     "@synerise/ds-icon": "^1.10.0",
+    "@synerise/ds-popover": "^1.3.0",
     "@synerise/ds-tooltip": "^1.3.5",
     "@synerise/ds-utils": "^1.5.3",
     "classnames": "^2.5.1",
-    "rc-trigger": "^5.3.4",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "copy-to-clipboard": "^3.3.1",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "4cde643d1f63a4b47e84707a13b1b1d138730d53"
+  "gitHead": "db758824923a2a231a0de460f0d6d10739514cda"
 }

package/dist/utils.d.ts

@@ -1,34 +0,0 @@
-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[];
-    };
-};

package/dist/utils.js

@@ -1,34 +0,0 @@
-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]
-  }
-};