@synerise/ds-popover 1.1.2 → 1.2.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.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-popover@1.1.2...@synerise/ds-popover@1.2.0) (2025-12-19)
+
+### Features
+
+- **popconfirm:** migrate to popover ([f14f74e](https://github.com/Synerise/synerise-design/commit/f14f74e1f9879ddd8264dc2614723a298b656d2f))
+
 ## [1.1.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-popover@1.1.1...@synerise/ds-popover@1.1.2) (2025-12-15)
 
 **Note:** Version bump only for package @synerise/ds-popover

package/dist/Popover.const.d.ts

@@ -1,2 +1,5 @@
+import { type Placement } from '@floating-ui/react';
+import { type LegacyPlacement } from './Popover.types';
 export declare const HOVER_OPEN_DELAY = 100;
 export declare const HOVER_CLOSE_DELAY = 100;
+export declare const PLACEMENT_MAP: Record<LegacyPlacement, Placement>;

package/dist/Popover.const.js

@@ -1,2 +1,18 @@
 export var HOVER_OPEN_DELAY = 100;
-export var HOVER_CLOSE_DELAY = 100;
+export var HOVER_CLOSE_DELAY = 100;
+export var PLACEMENT_MAP = {
+  top: 'top',
+  bottom: 'bottom',
+  left: 'left',
+  right: 'right',
+  leftTop: 'left-start',
+  leftBottom: 'left-end',
+  rightTop: 'right-start',
+  rightBottom: 'right-end',
+  topRight: 'top-end',
+  topLeft: 'top-start',
+  topCenter: 'top',
+  bottomCenter: 'bottom',
+  bottomLeft: 'bottom-start',
+  bottomRight: 'bottom-end'
+};

package/dist/Popover.types.d.ts

@@ -1,5 +1,5 @@
-import { type CSSProperties, type Dispatch, type ReactNode, type SetStateAction } from 'react';
-import { type AutoUpdateOptions, type FlipOptions, type OffsetOptions, type OpenChangeReason, type Placement, type ShiftOptions, type UseDismissProps, type UseFloatingReturn, type UseInteractionsReturn, type UseListNavigationProps, type UseTransitionStylesProps } from '@floating-ui/react';
+import { type CSSProperties, type Dispatch, type ReactNode, type RefObject, type SetStateAction } from 'react';
+import { type ArrowOptions, type AutoUpdateOptions, type FlipOptions, type OffsetOptions, type OpenChangeReason, type Placement, type ShiftOptions, type UseDismissProps, type UseFloatingReturn, type UseInteractionsReturn, type UseListNavigationProps, type UseTransitionStylesProps } from '@floating-ui/react';
 export type PopoverProps = {
     children: ReactNode;
 } & PopoverOptions;
@@ -26,6 +26,7 @@ export type PopoverOptions = {
     offsetConfig?: OffsetConfig;
     flipConfig?: FlipConfig;
     shiftConfig?: ShiftConfig;
+    arrowConfig?: Omit<ArrowOptions, 'element'>;
     dismissConfig?: UseDismissProps;
     listNavigationConfig?: UseListNavigationProps;
     trigger?: PopoverTriggerType | PopoverTriggerType[];
@@ -56,5 +57,9 @@ export type UsePopoverReturn = Omit<UseFloatingReturn, 'open'> & UseInteractions
     zIndex?: number;
     returnFocus?: boolean;
     componentId?: string;
+    arrowRef: RefObject<HTMLElement>;
 };
+export type LegacyDropdownPlacement = Exclude<LegacyPlacement, 'right' | 'left' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'>;
+export type LegacyPopconfirmPlacement = LegacyPlacement;
+export type LegacyPlacement = 'topLeft' | 'top' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottom' | 'bottomCenter' | 'bottomRight' | 'right' | 'left' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
 export {};

package/dist/components/PopoverArrow.d.ts

@@ -0,0 +1,6 @@
+import { type ReactElement } from 'react';
+import { type Placement } from '@floating-ui/react';
+export declare const PopoverArrow: ({ children, getClassNameFromPlacement, }: {
+    children?: ReactElement;
+    getClassNameFromPlacement?: (placement: Placement) => string;
+}) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;

package/dist/components/PopoverArrow.js

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { cloneElement, isValidElement } from 'react';
+import { useTheme } from '@synerise/ds-core';
+import { usePopoverContext } from '../hooks';
+export var PopoverArrow = function PopoverArrow(_ref) {
+  var children = _ref.children,
+    getClassNameFromPlacement = _ref.getClassNameFromPlacement;
+  var theme = useTheme();
+  var _usePopoverContext = usePopoverContext(),
+    arrowRef = _usePopoverContext.arrowRef,
+    placement = _usePopoverContext.placement,
+    zIndex = _usePopoverContext.zIndex,
+    middlewareData = _usePopoverContext.middlewareData;
+  var placementClassName = (getClassNameFromPlacement == null ? void 0 : getClassNameFromPlacement(placement)) || "ds-popover-arrow-" + placement;
+  if (/*#__PURE__*/isValidElement(children)) {
+    var _children$props, _middlewareData$arrow, _middlewareData$arrow2;
+    return /*#__PURE__*/cloneElement(children, {
+      // @ts-expect-error ref unknown
+      ref: arrowRef,
+      // @ts-expect-error props.className may not exist
+      className: classNames(placementClassName, (_children$props = children.props) == null ? void 0 : _children$props.className),
+      style: {
+        zIndex: zIndex !== undefined ? "" + zIndex : theme.variables['zindex-dropdown'],
+        position: 'absolute',
+        left: (_middlewareData$arrow = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow.x,
+        top: (_middlewareData$arrow2 = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow2.y
+      }
+    });
+  }
+  return children;
+};

package/dist/components/PopoverContent.js

@@ -5,6 +5,7 @@ import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { FloatingFocusManager, FloatingPortal, useMergeRefs } from '@floating-ui/react';
 import { useTheme } from '@synerise/ds-core';
 import { usePopoverContext } from '../hooks/usePopoverContext';
+import { GlobalStyles } from './PopoverContent.styles';
 export var PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent(_ref, propRef) {
   var style = _ref.style,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -54,7 +55,7 @@ export var PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent(_ref
   }
   return /*#__PURE__*/React.createElement(FloatingPortal, {
     root: getPopupContainer ? popupContainerRef : undefined
-  }, /*#__PURE__*/React.createElement(FloatingFocusManager, {
+  }, /*#__PURE__*/React.createElement(GlobalStyles, null), /*#__PURE__*/React.createElement(FloatingFocusManager, {
     initialFocus: -1,
     context: floatingContext,
     modal: modal,

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

@@ -0,0 +1 @@
+export declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/dist/components/PopoverContent.styles.js

@@ -0,0 +1,2 @@
+import { createGlobalStyle } from 'styled-components';
+export var GlobalStyles = createGlobalStyle(["[data-popover-trigger] ~ span[aria-hidden],div[data-floating-ui-portal]{display:contents;}"]);

package/dist/components/PopoverTrigger.js

@@ -13,11 +13,13 @@ export var PopoverTrigger = /*#__PURE__*/forwardRef(function (_ref, propRef) {
   var context = usePopoverContext();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var childrenRef = children.ref;
-  var ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+  var renderAsChild = asChild && /*#__PURE__*/isValidElement(children);
+  var refsArray = [propRef, childrenRef, !renderAsChild && context.refs.setReference];
+  var ref = useMergeRefs(refsArray.filter(Boolean));
   // `asChild` allows the user to pass any element as the anchor
   // if the child is a component it needs to forward the ref to a html element
   // so that the Popover can position itself correctly.
-  if (asChild && /*#__PURE__*/isValidElement(children)) {
+  if (renderAsChild) {
     var referenceProps = context.getReferenceProps(_extends({
       ref: ref,
       'data-popover-trigger': true,
@@ -25,7 +27,13 @@ export var PopoverTrigger = /*#__PURE__*/forwardRef(function (_ref, propRef) {
     }, props, children.props, {
       'data-state': context.open ? 'open' : 'closed'
     }));
-    return /*#__PURE__*/cloneElement(children, _extends({}, referenceProps));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.TriggerAnchor, {
+      "aria-hidden": "true",
+      hidden: true,
+      ref: function ref(node) {
+        context.refs.setReference((node == null ? void 0 : node.nextElementSibling) || null);
+      }
+    }), /*#__PURE__*/cloneElement(children, _extends({}, referenceProps)));
   }
   return /*#__PURE__*/React.createElement(S.Trigger, _extends({
     ref: ref

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

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

package/dist/components/PopoverTrigger.styles.js

@@ -2,4 +2,8 @@ import styled from 'styled-components';
 export var Trigger = styled.span.withConfig({
   displayName: "PopoverTriggerstyles__Trigger",
   componentId: "sc-1irht31-0"
-})(["display:flex;"]);
+})(["display:flex;"]);
+export var TriggerAnchor = styled.span.withConfig({
+  displayName: "PopoverTriggerstyles__TriggerAnchor",
+  componentId: "sc-1irht31-1"
+})(["display:contents !important;"]);

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
 export * from './PopoverTrigger';
 export * from './PopoverClose';
 export * from './PopoverContent';
+export * from './PopoverArrow';

package/dist/components/index.js

@@ -1,3 +1,4 @@
 export * from './PopoverTrigger';
 export * from './PopoverClose';
-export * from './PopoverContent';
+export * from './PopoverContent';
+export * from './PopoverArrow';

package/dist/hooks/usePopover.d.ts

@@ -1,2 +1,2 @@
 import { type PopoverOptions, type UsePopoverReturn } from '../Popover.types';
-export declare const usePopover: ({ initialOpen, placement, modal, trigger, open: controlledOpen, onOpenChange: setControlledOpen, onDismiss, transitionDuration, getPopupContainer, autoUpdate: autoUpdateWhileMounted, dismissConfig, offsetConfig, flipConfig, shiftConfig, testId, componentId, returnFocus, listNavigationConfig, getTransitionConfig, zIndex, }?: PopoverOptions) => UsePopoverReturn;
+export declare const usePopover: ({ initialOpen, placement, modal, trigger, open: controlledOpen, onOpenChange: setControlledOpen, onDismiss, transitionDuration, getPopupContainer, autoUpdate: autoUpdateWhileMounted, dismissConfig, offsetConfig, flipConfig, shiftConfig, arrowConfig, testId, componentId, returnFocus, listNavigationConfig, getTransitionConfig, zIndex, }?: PopoverOptions) => UsePopoverReturn;

package/dist/hooks/usePopover.js

@@ -1,5 +1,5 @@
 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 { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { autoUpdate, useClick, useDismiss, useFloating, useHover, useInteractions, useListNavigation, useRole, useTransitionStyles } from '@floating-ui/react';
 import { HOVER_CLOSE_DELAY, HOVER_OPEN_DELAY } from '../Popover.const';
 import { getDefaultTransitionConfig, getMiddleware } from '../utils';
@@ -27,6 +27,8 @@ export var usePopover = function usePopover(_temp) {
     flipConfig = _ref$flipConfig === void 0 ? {} : _ref$flipConfig,
     _ref$shiftConfig = _ref.shiftConfig,
     shiftConfig = _ref$shiftConfig === void 0 ? {} : _ref$shiftConfig,
+    _ref$arrowConfig = _ref.arrowConfig,
+    arrowConfig = _ref$arrowConfig === void 0 ? {} : _ref$arrowConfig,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'noTestId' : _ref$testId,
     componentId = _ref.componentId,
@@ -46,6 +48,7 @@ export var usePopover = function usePopover(_temp) {
     setDescriptionId = _useState3[1];
   var open = controlledOpen != null ? controlledOpen : uncontrolledOpen;
   var setOpen = setControlledOpen != null ? setControlledOpen : setUncontrolledOpen;
+  var arrowRef = useRef(null);
   var triggerArray = Array.isArray(trigger) ? trigger : [trigger];
   var whileElementsMounted = useMemo(function () {
     if (!autoUpdateWhileMounted) {
@@ -72,7 +75,10 @@ export var usePopover = function usePopover(_temp) {
     middleware: getMiddleware({
       offsetConfig: offsetConfig,
       flipConfig: flipConfig,
-      shiftConfig: shiftConfig
+      shiftConfig: shiftConfig,
+      arrowConfig: _extends({}, arrowConfig, {
+        element: arrowRef.current
+      })
     })
   });
   var context = data.context;
@@ -113,7 +119,8 @@ export var usePopover = function usePopover(_temp) {
       testId: testId,
       zIndex: zIndex,
       returnFocus: returnFocus,
-      componentId: componentId
+      componentId: componentId,
+      arrowRef: arrowRef
     });
   }, [getPopupContainer, isMounted, setOpen, transitionDuration, styles, interactions, data, modal, labelId, descriptionId, zIndex, testId, returnFocus, componentId]);
 };

package/dist/index.d.ts

@@ -2,3 +2,5 @@ export * from './Popover';
 export * from './components';
 export { Popover as default } from './Popover';
 export * from './Popover.types';
+export { getPlacement } from './utils/getPlacement';
+export { PLACEMENT_MAP } from './Popover.const';

package/dist/index.js

@@ -1,4 +1,6 @@
 export * from './Popover';
 export * from './components';
 export { Popover as default } from './Popover';
-export * from './Popover.types';
+export * from './Popover.types';
+export { getPlacement } from './utils/getPlacement';
+export { PLACEMENT_MAP } from './Popover.const';

package/dist/utils/getMiddleware.d.ts

@@ -1,10 +1,12 @@
+import { type ArrowOptions } from '@floating-ui/react';
 import { type FlipConfig, type OffsetConfig, type ShiftConfig } from '../Popover.types';
 type GetMiddleware = {
     offsetConfig: OffsetConfig;
     flipConfig: FlipConfig;
     shiftConfig: ShiftConfig;
+    arrowConfig?: ArrowOptions;
 };
-export declare const getMiddleware: ({ offsetConfig, flipConfig, shiftConfig, }: GetMiddleware) => {
+export declare const getMiddleware: ({ offsetConfig, flipConfig, shiftConfig, arrowConfig, }: GetMiddleware) => {
     name: string;
     options?: any;
     fn: (state: import("@floating-ui/react").MiddlewareState) => import("@floating-ui/react").MiddlewareReturn | Promise<import("@floating-ui/react").MiddlewareReturn>;

package/dist/utils/getMiddleware.js

@@ -2,11 +2,12 @@ var _excluded = ["enabled"],
   _excluded2 = ["enabled"],
   _excluded3 = ["enabled"];
 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 { flip, offset, shift } from '@floating-ui/react';
+import { arrow, flip, offset, shift } from '@floating-ui/react';
 export var getMiddleware = function getMiddleware(_ref) {
   var offsetConfig = _ref.offsetConfig,
     flipConfig = _ref.flipConfig,
-    shiftConfig = _ref.shiftConfig;
+    shiftConfig = _ref.shiftConfig,
+    arrowConfig = _ref.arrowConfig;
   var middleware = [];
   var _ref2 = offsetConfig || {},
     _ref2$enabled = _ref2.enabled,
@@ -29,5 +30,8 @@ export var getMiddleware = function getMiddleware(_ref) {
   if (shiftEnabled) {
     middleware.push(shift(shiftOptions));
   }
+  if (arrowConfig != null && arrowConfig.element) {
+    middleware.push(arrow(arrowConfig));
+  }
   return middleware;
 };

package/dist/utils/getPlacement.d.ts

@@ -0,0 +1,3 @@
+import { type Placement } from '@floating-ui/react';
+import { type LegacyPlacement } from '../Popover.types';
+export declare const getPlacement: (placement: LegacyPlacement) => Placement;

package/dist/utils/getPlacement.js

@@ -0,0 +1,4 @@
+import { PLACEMENT_MAP } from '../Popover.const';
+export var getPlacement = function getPlacement(placement) {
+  return PLACEMENT_MAP[placement];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-popover",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Popover UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,14 +34,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@floating-ui/react": "^0.27.16"
+    "@floating-ui/react": "^0.27.16",
+    "classnames": "^2.5.1"
   },
   "devDependencies": {
     "@testing-library/user-event": "^14"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "react": ">=16.9.0 <= 18.3.1"
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
   },
-  "gitHead": "b1279d5354132a2bf0b6f0cfa343db4c6c928f72"
+  "gitHead": "c638fc7e1af8aea55d466a643329fe499b2b3383"
 }