@synerise/ds-popconfirm 1.3.8 → 1.3.10

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-popconfirm@1.3.9...@synerise/ds-popconfirm@1.3.10) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-popconfirm
+
+## [1.3.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-popconfirm@1.3.8...@synerise/ds-popconfirm@1.3.9) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-popconfirm
+
 ## [1.3.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-popconfirm@1.3.7...@synerise/ds-popconfirm@1.3.8) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-popconfirm

package/README.md

@@ -33,28 +33,36 @@ import Popconfirm from '@synerise/ds-popconfirm';
 
 ## API
 
-| Property            | Description                            | Type                         | Default                              |
-| ------------------- | -------------------------------------- | ---------------------------- | ------------------------------------ |
-| cancelText          | Text of the Cancel button              | string                       | `Cancel`                             |
-| okText              | Text of the Confirm button             | string                       | `OK`                                 |
-| okType              | Button type of the Confirm button      | string                       | `primary`                            |
-| title               | Title of the confirmation box          | string / React.ReactNode     | -                                    |
-| description         | Description of the confirmation box    | string / React.ReactNode     | -                                    |
-| images              | Urls of images displayed as a carousel | string[]                     | `[]`                                 |
-| imagesAutoplay      | Whether to autoplay images             | boolean                      | `false`                              |
-| imagesAutoplaySpeed | Speed of autoplay [ms]                 | number                       | `5000`                               |
-| onCancel            | Callback of cancel                     | (e: Event) => void           | -                                    |
-| onConfirm           | Callback of confirmation               | (e: Event) => void           | -                                    |
-| icon                | Customize icon of confirmation         | React.ReactNode              | `<Icon type="exclamation-circle" />` |
-| disabled            | Whether component is disabled          | boolean                      | `false`                              |
-| withLink            | Text with highlited text               | React.ReactNode              | -                                    |
-| closeIcon           | Icon to close popconfirm               | React.ReactNode              | -                                    |
-| hideButtons         | prop to hide buttons                   | React.ReactNode              | -                                    |
-| titlePadding        | prop to set padding                    | boolean                      | `false`                              |
-| buttonsAlign        | Sets footer buttons align              | 'right' / 'left' / undefined | `'right'`                            |
-| staticVisible       | stay open even after click outside     | boolean                      | `false`                              |
-
-# Popcofirm.ConfirmMessage
+| Property            | Description                            | Type                                                                                                                          | Default   |
+| ------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------- |
+| cancelText          | Text of the Cancel button              | React.ReactNode                                                                                                               | -         |
+| okText              | Text of the Confirm button             | React.ReactNode                                                                                                               | -         |
+| okType              | Button type of the Confirm button      | ButtonProps['type']                                                                                                           | `primary` |
+| title               | Title of the confirmation box          | React.ReactNode                                                                                                               | -         |
+| description         | Description of the confirmation box    | React.ReactNode                                                                                                               | -         |
+| images              | Urls of images displayed as a carousel | string[]                                                                                                                      | -         |
+| imagesAutoplay      | Whether to autoplay images             | boolean                                                                                                                       | -         |
+| imagesAutoplaySpeed | Speed of autoplay [ms]                 | number                                                                                                                        | `5000`    |
+| onCancel            | Callback of cancel                     | (event?: MouseEvent\<HTMLElement\>) => void                                                                                   | -         |
+| onConfirm           | Callback of confirmation               | (event?: MouseEvent\<HTMLElement\>) => void                                                                                   | -         |
+| icon                | Icon displayed left of the title       | React.ReactNode                                                                                                               | -         |
+| disabled            | When true renders only children with no popover | boolean                                                                                                              | -         |
+| withLink            | Link node rendered below description   | React.ReactNode                                                                                                               | -         |
+| closeIcon           | Icon rendered as a close button        | React.ReactNode                                                                                                               | -         |
+| hideButtons         | Truthy value hides the button row      | React.ReactNode                                                                                                               | -         |
+| titlePadding        | Adjusts close icon margin and description spacing | boolean                                                                                                          | -         |
+| buttonsAlign        | Sets footer buttons align              | 'right' / 'left'                                                                                                              | -         |
+| staticVisible       | Stay open even after click outside     | boolean                                                                                                                       | -         |
+| placement           | Popover placement                      | 'top' / 'topLeft' / 'topCenter' / 'topRight' / 'bottom' / 'bottomLeft' / 'bottomCenter' / 'bottomRight' / 'left' / 'leftTop' / 'leftBottom' / 'right' / 'rightTop' / 'rightBottom' | `top` |
+| trigger             | Open trigger                           | 'click' / 'hover' / array                                                                                                     | `click`   |
+| open                | Controlled open state                  | boolean                                                                                                                       | -         |
+| onOpenChange        | Callback when open state changes       | (open: boolean) => void                                                                                                       | -         |
+| asChild             | Merge trigger props onto child element | boolean                                                                                                                       | `true`    |
+| zIndex              | Z-index override                       | number                                                                                                                        | `theme.variables['zindex-popconfirm']` |
+| overlayClassName    | Class applied to popconfirm container  | string                                                                                                                        | -         |
+| overlayStyle        | Inline styles for popconfirm container | CSSProperties                                                                                                                 | -         |
+
+# Popconfirm.ConfirmMessage
 
 ## Usage
 
@@ -88,5 +96,5 @@ import Popconfirm from '@synerise/ds-popconfirm';
 | title           | text confirm message                                                                                                                                                  | string                                   | -         |
 | icon            | icon component                                                                                                                                                        | React.ReactNode                          | -         |
 | displayDuration | confirm message display time in ms                                                                                                                                    | number                                   | 5000      |
-| placement       | position of confirm message `left`, `top`, `right`, `bottom`, `topLeft`, `topRight`, `bottomLeft`, `bottomRight`, `leftTop`, `leftBottom,`, `rightTop`, `rightBottom` | string                                   | `topLeft` |
+| placement       | Position of confirm message                                                                                                                                           | 'top' / 'left' / 'right' / 'bottom' / 'topLeft' / 'topRight' / 'bottomLeft' / 'bottomRight' | `topLeft` |
 | onClick         | method which returns a showConfirmMessage callback                                                                                                                    | (showConfirmMessage: () => void) => void | -         |

package/dist/ConfirmMessage/ConfirmMessage.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type ConfirmMessageProps } from './ConfirmMessage.types';
+import { default as React } from 'react';
+import { ConfirmMessageProps } from './ConfirmMessage.types';
 export declare const ConfirmMessage: ({ children, placement, title, onClick, displayDuration, icon, }: ConfirmMessageProps) => React.JSX.Element;
 export default ConfirmMessage;

package/dist/ConfirmMessage/ConfirmMessage.js

@@ -1,45 +1,39 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './ConfirmMessage.style';
-export var ConfirmMessage = function ConfirmMessage(_ref) {
-  var children = _ref.children,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'topLeft' : _ref$placement,
-    title = _ref.title,
-    onClick = _ref.onClick,
-    _ref$displayDuration = _ref.displayDuration,
-    displayDuration = _ref$displayDuration === void 0 ? 5000 : _ref$displayDuration,
-    icon = _ref.icon;
-  var _useState = useState(false),
-    open = _useState[0],
-    setOpen = _useState[1];
-  useEffect(function () {
-    var timeout = setTimeout(function () {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import Tooltip from "@synerise/ds-tooltip";
+import { ConfirmMessage as ConfirmMessage$1, ConfirmMessageTitle, Message } from "./ConfirmMessage.style.js";
+const ConfirmMessage = ({
+  children,
+  placement = "topLeft",
+  title,
+  onClick,
+  displayDuration = 5e3,
+  icon
+}) => {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
       setOpen(false);
     }, displayDuration);
-    return function () {
+    return () => {
       clearTimeout(timeout);
     };
   }, [open, displayDuration]);
-  var showMessage = function showMessage() {
+  const showMessage = () => {
     setOpen(true);
   };
-  var handleClick = useCallback(function () {
+  const handleClick = useCallback(() => {
     onClick && onClick(showMessage);
   }, [onClick]);
-  var content = useMemo(function () {
-    return /*#__PURE__*/React.createElement(S.ConfirmMessage, null, icon, /*#__PURE__*/React.createElement(S.ConfirmMessageTitle, null, title));
+  const content = useMemo(() => {
+    return /* @__PURE__ */ jsxs(ConfirmMessage$1, { children: [
+      icon,
+      /* @__PURE__ */ jsx(ConfirmMessageTitle, { children: title })
+    ] });
   }, [title, icon]);
-  return /*#__PURE__*/React.createElement(S.Message, {
-    onClick: handleClick,
-    "data-testid": "confirm-message"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: "click",
-    render: function render() {
-      return content;
-    },
-    open: open,
-    placement: placement
-  }, children));
+  return /* @__PURE__ */ jsx(Message, { onClick: handleClick, "data-testid": "confirm-message", children: /* @__PURE__ */ jsx(Tooltip, { trigger: "click", render: () => content, open, placement, children }) });
+};
+export {
+  ConfirmMessage,
+  ConfirmMessage as default
 };
-export default ConfirmMessage;

package/dist/ConfirmMessage/ConfirmMessage.style.d.ts

@@ -1,3 +1,3 @@
-export declare const Message: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConfirmMessageTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ConfirmMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Message: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ConfirmMessageTitle: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const ConfirmMessage: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/ConfirmMessage/ConfirmMessage.style.js

@@ -1,16 +1,19 @@
-import styled from 'styled-components';
-import { IconContainer } from '@synerise/ds-icon';
-export var Message = styled.div.withConfig({
+import styled from "styled-components";
+import { IconContainer } from "@synerise/ds-icon";
+const Message = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ConfirmMessagestyle__Message",
   componentId: "sc-6dbwo9-0"
 })([""]);
-export var ConfirmMessageTitle = styled.span.withConfig({
+const ConfirmMessageTitle = /* @__PURE__ */ styled.span.withConfig({
   displayName: "ConfirmMessagestyle__ConfirmMessageTitle",
   componentId: "sc-6dbwo9-1"
 })(["font-size:14px;line-height:1.43;color:#404c5a;"]);
-export var ConfirmMessage = styled.div.withConfig({
+const ConfirmMessage = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ConfirmMessagestyle__ConfirmMessage",
   componentId: "sc-6dbwo9-2"
-})(["display:flex;align-items:center;justify-content:center;background-color:", ";padding:16px;border-radius:3px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);", "{margin-right:8px;}"], function (props) {
-  return props.theme.palette.white;
-}, IconContainer);
+})(["display:flex;align-items:center;justify-content:center;background-color:", ";padding:16px;border-radius:3px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);", "{margin-right:8px;}"], (props) => props.theme.palette.white, IconContainer);
+export {
+  ConfirmMessage,
+  ConfirmMessageTitle,
+  Message
+};

package/dist/ConfirmMessage/ConfirmMessage.types.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { ReactNode } from 'react';
 export type ConfirmMessageProps = {
     displayDuration?: number;
     title: string;

package/dist/ConfirmMessage/ConfirmMessage.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Popconfirm.const.d.ts

@@ -1,2 +1,2 @@
-import { type OffsetConfig } from '@synerise/ds-popover';
+import { OffsetConfig } from '@synerise/ds-popover';
 export declare const POPOVER_OFFSET_CONFIG: OffsetConfig;

package/dist/Popconfirm.const.js

@@ -1,3 +1,6 @@
-export var POPOVER_OFFSET_CONFIG = {
+const POPOVER_OFFSET_CONFIG = {
   mainAxis: 16
-};
+};
+export {
+  POPOVER_OFFSET_CONFIG
+};

package/dist/Popconfirm.d.ts

@@ -1,4 +1,3 @@
-import { type PopconfirmType } from './Popconfirm.types';
-import './style/index.less';
+import { PopconfirmType } from './Popconfirm.types';
 declare const Popconfirm: PopconfirmType;
 export default Popconfirm;

package/dist/Popconfirm.js

@@ -1,146 +1,104 @@
-var _excluded = ["icon", "title", "description", "images", "imagesAutoplay", "imagesAutoplaySpeed", "withLink", "closeIcon", "titlePadding", "onCancel", "cancelButtonProps", "onConfirm", "okButtonProps", "okType", "hideButtons", "cancelText", "okText", "buttonsAlign", "disabled", "staticVisible", "children", "open", "onOpenChange", "trigger", "asChild", "placement", "overlayClassName", "overlayStyle", "zIndex"];
-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 { Carousel } from 'antd';
-import React, { forwardRef, useEffect, useMemo, useState } from 'react';
-import { useTheme } from '@synerise/ds-core';
-import { Popover, PopoverArrow, PopoverContent, PopoverTrigger, getPlacement } from '@synerise/ds-popover';
-import ConfirmMessage from './ConfirmMessage/ConfirmMessage';
-import { POPOVER_OFFSET_CONFIG } from './Popconfirm.const';
-import * as S from './Popconfirm.styles';
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Carousel } from "antd";
+import { forwardRef, useMemo, useState, useEffect } from "react";
+import { useTheme } from "@synerise/ds-core";
+import { getPlacement, Popover, PopoverTrigger, PopoverContent, PopoverArrow } from "@synerise/ds-popover";
+import { ConfirmMessage } from "./ConfirmMessage/ConfirmMessage.js";
+import { POPOVER_OFFSET_CONFIG } from "./Popconfirm.const.js";
+import { PopconfirmImage, PopconfirmContainer, PopconfirmContent, PopconfirmWrapper, PopconfirmContentWrapper, PopconfirmHeaderWrapper, PopconfirmIcon, PopconfirmTitle, PopconfirmTextWrapper, PopconfirmDescription, LinkWrapper, PopconfirmCloseIcon, PopconfirmButtonWrapper, PopconfirmButton, PopconfirmArrowWrapper, PopconfirmArrow } from "./Popconfirm.styles.js";
+import { getTransitionConfig } from "./utils/getTransitionConfig.js";
 import "./style/index.css";
-import { getTransitionConfig } from './utils/getTransitionConfig';
-var Popconfirm = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var icon = _ref.icon,
-    title = _ref.title,
-    description = _ref.description,
-    images = _ref.images,
-    imagesAutoplay = _ref.imagesAutoplay,
-    _ref$imagesAutoplaySp = _ref.imagesAutoplaySpeed,
-    imagesAutoplaySpeed = _ref$imagesAutoplaySp === void 0 ? 5000 : _ref$imagesAutoplaySp,
-    withLink = _ref.withLink,
-    closeIcon = _ref.closeIcon,
-    titlePadding = _ref.titlePadding,
-    onCancel = _ref.onCancel,
-    cancelButtonProps = _ref.cancelButtonProps,
-    onConfirm = _ref.onConfirm,
-    okButtonProps = _ref.okButtonProps,
-    _ref$okType = _ref.okType,
-    okType = _ref$okType === void 0 ? 'primary' : _ref$okType,
-    hideButtons = _ref.hideButtons,
-    cancelText = _ref.cancelText,
-    okText = _ref.okText,
-    buttonsAlign = _ref.buttonsAlign,
-    disabled = _ref.disabled,
-    staticVisible = _ref.staticVisible,
-    children = _ref.children,
-    open = _ref.open,
-    onOpenChange = _ref.onOpenChange,
-    _ref$trigger = _ref.trigger,
-    trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
-    _ref$asChild = _ref.asChild,
-    asChild = _ref$asChild === void 0 ? true : _ref$asChild,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
-    overlayClassName = _ref.overlayClassName,
-    overlayStyle = _ref.overlayStyle,
-    zIndex = _ref.zIndex,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var theme = useTheme();
-  var renderImageCarousel = useMemo(function () {
-    return (images == null ? void 0 : images.length) && /*#__PURE__*/React.createElement(Carousel, {
-      autoplay: imagesAutoplay,
-      autoplaySpeed: imagesAutoplaySpeed,
-      effect: "fade"
-    }, images.map(function (image) {
-      return /*#__PURE__*/React.createElement(S.PopconfirmImage, {
-        key: image,
-        src: image
-      });
-    }));
+const Popconfirm = forwardRef(({
+  icon,
+  title,
+  description,
+  images,
+  imagesAutoplay,
+  imagesAutoplaySpeed = 5e3,
+  withLink,
+  closeIcon,
+  titlePadding,
+  onCancel,
+  cancelButtonProps,
+  onConfirm,
+  okButtonProps,
+  okType = "primary",
+  hideButtons,
+  cancelText,
+  okText,
+  buttonsAlign,
+  disabled,
+  staticVisible,
+  children,
+  open,
+  onOpenChange,
+  trigger = "click",
+  asChild = true,
+  placement = "top",
+  overlayClassName,
+  overlayStyle,
+  zIndex,
+  ...rest
+}, ref) => {
+  const theme = useTheme();
+  const renderImageCarousel = useMemo(() => {
+    return images?.length && /* @__PURE__ */ jsx(Carousel, { autoplay: imagesAutoplay, autoplaySpeed: imagesAutoplaySpeed, effect: "fade", children: images.map((image) => /* @__PURE__ */ jsx(PopconfirmImage, { src: image }, image)) });
   }, [images, imagesAutoplay, imagesAutoplaySpeed]);
-  var _useState = useState(undefined),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var floatingPlacement = getPlacement(placement);
-  useEffect(function () {
+  const [isOpen, setIsOpen] = useState(void 0);
+  const floatingPlacement = getPlacement(placement);
+  useEffect(() => {
     if (!isOpen && open) {
       setIsOpen(open);
     }
   }, [isOpen, open]);
-  var isTriggeredByClick = Array.isArray(trigger) ? trigger.includes('click') : trigger === 'click';
-  var handleOpenChange = function handleOpenChange(newState) {
+  const isTriggeredByClick = Array.isArray(trigger) ? trigger.includes("click") : trigger === "click";
+  const handleOpenChange = (newState) => {
     setIsOpen(newState);
-    onOpenChange == null || onOpenChange(newState);
+    onOpenChange?.(newState);
   };
-  var handleTriggerClick = function handleTriggerClick() {
+  const handleTriggerClick = () => {
     isTriggeredByClick && setIsOpen(!isOpen);
   };
-  return disabled ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Popover, _extends({
-    placement: floatingPlacement,
-    trigger: trigger,
-    modal: false,
-    open: isOpen,
-    onOpenChange: handleOpenChange,
-    autoUpdate: true,
-    dismissConfig: {
-      enabled: !staticVisible
-    },
-    arrowConfig: {
-      padding: 20
-    },
-    zIndex: zIndex != null ? zIndex : parseInt(theme.variables['zindex-popconfirm']),
-    offsetConfig: POPOVER_OFFSET_CONFIG,
-    getTransitionConfig: getTransitionConfig,
-    testId: "popconfirm"
-  }, rest), /*#__PURE__*/React.createElement(PopoverTrigger, {
-    ref: ref,
-    asChild: asChild,
-    onClick: handleTriggerClick
-  }, children), /*#__PURE__*/React.createElement(PopoverContent, null, /*#__PURE__*/React.createElement(S.PopconfirmContainer, {
-    className: overlayClassName,
-    style: overlayStyle
-  }, /*#__PURE__*/React.createElement(S.PopconfirmContent, {
-    buttonsAlign: buttonsAlign
-  }, /*#__PURE__*/React.createElement(S.PopconfirmWrapper, null, /*#__PURE__*/React.createElement(S.PopconfirmContentWrapper, null, /*#__PURE__*/React.createElement(S.PopconfirmHeaderWrapper, null, icon && /*#__PURE__*/React.createElement(S.PopconfirmIcon, null, icon), /*#__PURE__*/React.createElement(S.PopconfirmTitle, null, /*#__PURE__*/React.createElement(React.Fragment, null, title))), /*#__PURE__*/React.createElement(S.PopconfirmTextWrapper, null, description && /*#__PURE__*/React.createElement(S.PopconfirmDescription, {
-    titlePadding: !titlePadding
-  }, description), withLink && /*#__PURE__*/React.createElement(S.LinkWrapper, null, withLink))), closeIcon && /*#__PURE__*/React.createElement(S.PopconfirmCloseIcon, {
-    onClick: function onClick() {
-      return setIsOpen(false);
-    },
-    titlePadding: titlePadding
-  }, closeIcon)), renderImageCarousel, !hideButtons && /*#__PURE__*/React.createElement(S.PopconfirmButtonWrapper, null, /*#__PURE__*/React.createElement(S.PopconfirmButton, _extends({
-    type: "secondary"
-  }, cancelButtonProps, {
-    onClick: function onClick(event) {
-      onCancel && onCancel(event);
-      setIsOpen(false);
-      (cancelButtonProps == null ? void 0 : cancelButtonProps.onClick) && cancelButtonProps.onClick(event);
-    }
-  }), cancelText), /*#__PURE__*/React.createElement(S.PopconfirmButton, _extends({
-    type: okType
-  }, okButtonProps, {
-    onClick: function onClick(event) {
-      onConfirm && onConfirm(event);
-      setIsOpen(false);
-      (okButtonProps == null ? void 0 : okButtonProps.onClick) && okButtonProps.onClick(event);
-    }
-  }), okText)))), /*#__PURE__*/React.createElement(PopoverArrow, null, /*#__PURE__*/React.createElement(S.PopconfirmArrowWrapper, null, /*#__PURE__*/React.createElement(S.PopconfirmArrow, {
-    width: "15",
-    height: "7",
-    viewBox: "0 0 15 7",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M7.49919 7L2.15928e-05 5.96025e-07L15 1.90737e-06L7.49919 7Z",
-    fill: "currentColor"
-  }))))));
+  return disabled ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsxs(Popover, { placement: floatingPlacement, trigger, modal: false, open: isOpen, onOpenChange: handleOpenChange, autoUpdate: true, dismissConfig: {
+    enabled: !staticVisible
+  }, arrowConfig: {
+    padding: 20
+  }, zIndex: zIndex ?? parseInt(theme.variables["zindex-popconfirm"]), offsetConfig: POPOVER_OFFSET_CONFIG, getTransitionConfig, testId: "popconfirm", ...rest, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { ref, asChild, onClick: handleTriggerClick, children }),
+    /* @__PURE__ */ jsxs(PopoverContent, { children: [
+      /* @__PURE__ */ jsx(PopconfirmContainer, { className: overlayClassName, style: overlayStyle, children: /* @__PURE__ */ jsxs(PopconfirmContent, { buttonsAlign, children: [
+        /* @__PURE__ */ jsxs(PopconfirmWrapper, { children: [
+          /* @__PURE__ */ jsxs(PopconfirmContentWrapper, { children: [
+            /* @__PURE__ */ jsxs(PopconfirmHeaderWrapper, { children: [
+              icon && /* @__PURE__ */ jsx(PopconfirmIcon, { children: icon }),
+              /* @__PURE__ */ jsx(PopconfirmTitle, { children: /* @__PURE__ */ jsx(Fragment, { children: title }) })
+            ] }),
+            /* @__PURE__ */ jsxs(PopconfirmTextWrapper, { children: [
+              description && /* @__PURE__ */ jsx(PopconfirmDescription, { titlePadding: !titlePadding, children: description }),
+              withLink && /* @__PURE__ */ jsx(LinkWrapper, { children: withLink })
+            ] })
+          ] }),
+          closeIcon && /* @__PURE__ */ jsx(PopconfirmCloseIcon, { onClick: () => setIsOpen(false), titlePadding, children: closeIcon })
+        ] }),
+        renderImageCarousel,
+        !hideButtons && /* @__PURE__ */ jsxs(PopconfirmButtonWrapper, { children: [
+          /* @__PURE__ */ jsx(PopconfirmButton, { type: "secondary", ...cancelButtonProps, onClick: (event) => {
+            onCancel && onCancel(event);
+            setIsOpen(false);
+            cancelButtonProps?.onClick && cancelButtonProps.onClick(event);
+          }, children: cancelText }),
+          /* @__PURE__ */ jsx(PopconfirmButton, { type: okType, ...okButtonProps, onClick: (event) => {
+            onConfirm && onConfirm(event);
+            setIsOpen(false);
+            okButtonProps?.onClick && okButtonProps.onClick(event);
+          }, children: okText })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(PopoverArrow, { children: /* @__PURE__ */ jsx(PopconfirmArrowWrapper, { children: /* @__PURE__ */ jsx(PopconfirmArrow, { width: "15", height: "7", viewBox: "0 0 15 7", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.49919 7L2.15928e-05 5.96025e-07L15 1.90737e-06L7.49919 7Z", fill: "currentColor" }) }) }) })
+    ] })
+  ] });
 });
-
-/**
- * @deprecated - use named import instead
- *
- * import { ConfirmMessage } from @synerise/ds-popconfirm
- */
 Popconfirm.ConfirmMessage = ConfirmMessage;
-export default Popconfirm;
+export {
+  Popconfirm as default
+};

package/dist/Popconfirm.styles.d.ts

@@ -1,5 +1,5 @@
-import { type StyledComponent } from 'styled-components';
-import { type ButtonProps } from '@synerise/ds-button';
+import { StyledComponent } from 'styled-components';
+import { ButtonProps } from '@synerise/ds-button';
 export declare const PopconfirmContainer: StyledComponent<"div", any, {}, never>;
 export declare const PopconfirmContent: StyledComponent<"div", any, {
     buttonsAlign?: "left" | "right";

package/dist/Popconfirm.styles.js

@@ -1,99 +1,91 @@
-import styled from 'styled-components';
-import Button from '@synerise/ds-button';
-export var PopconfirmContainer = styled.div.withConfig({
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+const PopconfirmContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmContainer",
   componentId: "sc-19dzptq-0"
-})(["box-shadow:", ";max-width:288px;padding:16px;position:relative;z-index:1;border-radius:3px;background-color:", ";"], function (props) {
-  return props.theme.variables['box-shadow-2'];
-}, function (props) {
-  return props.theme.palette.white;
-});
-export var PopconfirmContent = styled.div.withConfig({
+})(["box-shadow:", ";max-width:288px;padding:16px;position:relative;z-index:1;border-radius:3px;background-color:", ";"], (props) => props.theme.variables["box-shadow-2"], (props) => props.theme.palette.white);
+const PopconfirmContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmContent",
   componentId: "sc-19dzptq-1"
-})(["display:flex;flex-direction:column;align-items:", ";justify-content:flex-start;margin:0px;.ant-carousel{position:relative;width:100%;margin-top:24px;.slick-track{width:100%;}.slick-dots-bottom{position:relative;bottom:0;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:24px 0 0;margin:0;li{width:8px;height:8px;border-radius:50%;margin:0 8px 0 0;display:flex;align-items:center;justify-content:center;button{box-sizing:content-box;background-color:", ";border:2px solid ", ";height:4px;width:4px;border-radius:50%;opacity:1;}}li.slick-active{button{border:2px solid ", ";background-color:", ";}}}}"], function (_ref) {
-  var buttonsAlign = _ref.buttonsAlign;
-  return buttonsAlign === 'left' ? 'flex-start' : 'flex-end';
-}, function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.theme.palette['green-600'];
-}, function (props) {
-  return "" + props.theme.palette.white;
-});
-export var PopconfirmTitle = styled.div.withConfig({
+})(["display:flex;flex-direction:column;align-items:", ";justify-content:flex-start;margin:0px;.ant-carousel{position:relative;width:100%;margin-top:24px;.slick-track{width:100%;}.slick-dots-bottom{position:relative;bottom:0;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:24px 0 0;margin:0;li{width:8px;height:8px;border-radius:50%;margin:0 8px 0 0;display:flex;align-items:center;justify-content:center;button{box-sizing:content-box;background-color:", ";border:2px solid ", ";height:4px;width:4px;border-radius:50%;opacity:1;}}li.slick-active{button{border:2px solid ", ";background-color:", ";}}}}"], ({
+  buttonsAlign
+}) => buttonsAlign === "left" ? "flex-start" : "flex-end", (props) => props.theme.palette["grey-600"], (props) => props.theme.palette.white, (props) => props.theme.palette["green-600"], (props) => `${props.theme.palette.white}`);
+const PopconfirmTitle = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmTitle",
   componentId: "sc-19dzptq-2"
-})(["font-size:14px;line-height:1.43;color:", ";font-weight:500;padding-top:2px;text-overflow:ellipsis;overflow:hidden;"], function (props) {
-  return props.theme.palette['grey-800'];
-});
-export var PopconfirmButton = styled(Button).withConfig({
+})(["font-size:14px;line-height:1.43;color:", ";font-weight:500;padding-top:2px;text-overflow:ellipsis;overflow:hidden;"], (props) => props.theme.palette["grey-800"]);
+const PopconfirmButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "Popconfirmstyles__PopconfirmButton",
   componentId: "sc-19dzptq-3"
 })(["&&{height:32px;}"]);
-export var PopconfirmButtonWrapper = styled.div.withConfig({
+const PopconfirmButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmButtonWrapper",
   componentId: "sc-19dzptq-4"
 })(["display:flex;padding-top:16px;align-items:center;justify-content:flex-start;", ":not(:first-of-type){margin-left:8px;}"], PopconfirmButton);
-export var ButtonWrapper = styled.div.withConfig({
+const ButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__ButtonWrapper",
   componentId: "sc-19dzptq-5"
 })(["margin-left:8px;"]);
-export var PopconfirmDescription = styled.div.withConfig({
+const PopconfirmDescription = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmDescription",
   componentId: "sc-19dzptq-6"
-})(["font-size:13px;line-height:1.38;font-weight:400;margin-top:", ";color:", ";"], function (props) {
-  return props.titlePadding ? '6px' : 'none';
-}, function (props) {
-  return props.theme.palette['grey-800'];
-});
-export var PopconfirmIcon = styled.div.withConfig({
+})(["font-size:13px;line-height:1.38;font-weight:400;margin-top:", ";color:", ";"], (props) => props.titlePadding ? "6px" : "none", (props) => props.theme.palette["grey-800"]);
+const PopconfirmIcon = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmIcon",
   componentId: "sc-19dzptq-7"
 })(["margin-right:8px;"]);
-export var PopconfirmCloseIcon = styled.div.withConfig({
+const PopconfirmCloseIcon = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmCloseIcon",
   componentId: "sc-19dzptq-8"
-})(["margin-left:", ";color:", ";cursor:pointer;border-radius:3px;"], function (props) {
-  return props.titlePadding ? '8px' : '6px';
-}, function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var PopconfirmWrapper = styled.div.withConfig({
+})(["margin-left:", ";color:", ";cursor:pointer;border-radius:3px;"], (props) => props.titlePadding ? "8px" : "6px", (props) => props.theme.palette["grey-600"]);
+const PopconfirmWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmWrapper",
   componentId: "sc-19dzptq-9"
 })(["display:flex;flex-direction:row;width:100%;justify-content:space-between;"]);
-export var PopconfirmArrow = styled.svg.withConfig({
+const PopconfirmArrow = /* @__PURE__ */ styled.svg.withConfig({
   displayName: "Popconfirmstyles__PopconfirmArrow",
   componentId: "sc-19dzptq-10"
 })(["position:absolute;transform:translate(-50%,0);"]);
-export var PopconfirmArrowWrapper = styled.div.withConfig({
+const PopconfirmArrowWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmArrowWrapper",
   componentId: "sc-19dzptq-11"
-})(["width:0;height:0;position:absolute;z-index:2;color:", ";&.ds-popover-arrow-bottom,&.ds-popover-arrow-bottom-end,&.ds-popover-arrow-bottom-start{top:0;transform:rotate(180deg);}&.ds-popover-arrow-top,&.ds-popover-arrow-top-end,&.ds-popover-arrow-top-start{bottom:0;}&.ds-popover-arrow-left,&.ds-popover-arrow-left-end,&.ds-popover-arrow-left-start{right:0;transform:rotate(-90deg);}&.ds-popover-arrow-right,&.ds-popover-arrow-right-end,&.ds-popover-arrow-right-start{left:0;transform:rotate(90deg);}"], function (props) {
-  return props.theme.palette['white'];
-});
-export var PopconfirmContentWrapper = styled.div.withConfig({
+})(["width:0;height:0;position:absolute;z-index:2;color:", ";&.ds-popover-arrow-bottom,&.ds-popover-arrow-bottom-end,&.ds-popover-arrow-bottom-start{top:0;transform:rotate(180deg);}&.ds-popover-arrow-top,&.ds-popover-arrow-top-end,&.ds-popover-arrow-top-start{bottom:0;}&.ds-popover-arrow-left,&.ds-popover-arrow-left-end,&.ds-popover-arrow-left-start{right:0;transform:rotate(-90deg);}&.ds-popover-arrow-right,&.ds-popover-arrow-right-end,&.ds-popover-arrow-right-start{left:0;transform:rotate(90deg);}"], (props) => props.theme.palette["white"]);
+const PopconfirmContentWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmContentWrapper",
   componentId: "sc-19dzptq-12"
 })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;"]);
-export var PopconfirmHeaderWrapper = styled.div.withConfig({
+const PopconfirmHeaderWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmHeaderWrapper",
   componentId: "sc-19dzptq-13"
 })(["display:flex;flex-direction:row;justify-content:flex-start;"]);
-export var PopconfirmTextWrapper = styled.div.withConfig({
+const PopconfirmTextWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Popconfirmstyles__PopconfirmTextWrapper",
   componentId: "sc-19dzptq-14"
 })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;"]);
-export var PopconfirmImage = styled.img.withConfig({
+const PopconfirmImage = /* @__PURE__ */ styled.img.withConfig({
   displayName: "Popconfirmstyles__PopconfirmImage",
   componentId: "sc-19dzptq-15"
 })(["display:flex;width:100%;height:auto;border-radius:8px;& > *{max-width:100%;}"]);
-export var LinkWrapper = styled.span.withConfig({
+const LinkWrapper = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Popconfirmstyles__LinkWrapper",
   componentId: "sc-19dzptq-16"
-})(["font-size:13px;line-height:1.5;font-weight:400;color:", ";text-decoration:underline;cursor:pointer;max-width:200px;text-overflow:ellipsis;overflow:hidden;"], function (props) {
-  return props.theme.palette['grey-700'];
-});
+})(["font-size:13px;line-height:1.5;font-weight:400;color:", ";text-decoration:underline;cursor:pointer;max-width:200px;text-overflow:ellipsis;overflow:hidden;"], (props) => props.theme.palette["grey-700"]);
+export {
+  ButtonWrapper,
+  LinkWrapper,
+  PopconfirmArrow,
+  PopconfirmArrowWrapper,
+  PopconfirmButton,
+  PopconfirmButtonWrapper,
+  PopconfirmCloseIcon,
+  PopconfirmContainer,
+  PopconfirmContent,
+  PopconfirmContentWrapper,
+  PopconfirmDescription,
+  PopconfirmHeaderWrapper,
+  PopconfirmIcon,
+  PopconfirmImage,
+  PopconfirmTextWrapper,
+  PopconfirmTitle,
+  PopconfirmWrapper
+};

package/dist/Popconfirm.types.d.ts

@@ -1,7 +1,7 @@
-import { type CSSProperties, type ForwardRefExoticComponent, type MouseEvent, type ReactNode, type RefAttributes } from 'react';
-import { type ButtonProps } from '@synerise/ds-button';
-import { type LegacyPopconfirmPlacement, type PopoverOptions } from '@synerise/ds-popover';
-import { type ConfirmMessageProps } from './ConfirmMessage/ConfirmMessage.types';
+import { CSSProperties, ForwardRefExoticComponent, MouseEvent, ReactNode, RefAttributes } from 'react';
+import { ButtonProps } from '@synerise/ds-button';
+import { LegacyPopconfirmPlacement, PopoverOptions } from '@synerise/ds-popover';
+import { ConfirmMessageProps } from './ConfirmMessage/ConfirmMessage.types';
 export type PopconfirmTexts = Pick<PopconfirmProps, 'okText' | 'description' | 'title' | 'cancelText'>;
 export type PopconfirmProps = {
     description?: ReactNode;

package/dist/Popconfirm.types.js

@@ -1 +1 @@
-export {};
+

package/dist/index.js

@@ -1,2 +1,6 @@
-export { default } from './Popconfirm';
-export { default as ConfirmMessage } from './ConfirmMessage/ConfirmMessage';
+import { default as default2 } from "./Popconfirm.js";
+import { ConfirmMessage } from "./ConfirmMessage/ConfirmMessage.js";
+export {
+  ConfirmMessage,
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/dist/utils/getTransitionConfig.d.ts

@@ -1,4 +1,4 @@
-import { type Placement, type UseTransitionStylesProps } from '@floating-ui/react';
+import { Placement, UseTransitionStylesProps } from '@floating-ui/react';
 export declare const getTransitionConfig: ({ placement, }: {
     placement: Placement;
 }) => Partial<UseTransitionStylesProps>;

package/dist/utils/getTransitionConfig.js

@@ -1,15 +1,19 @@
-export var getTransitionConfig = function getTransitionConfig(_ref) {
-  var placement = _ref.placement;
-  var isTop = placement.indexOf('top');
+const getTransitionConfig = ({
+  placement
+}) => {
+  const isTop = placement.indexOf("top");
   return {
     open: {
-      transform: 'scaleY(1)'
+      transform: "scaleY(1)"
     },
     initial: {
-      transform: 'scaleY(0)'
+      transform: "scaleY(0)"
     },
     common: {
-      transformOrigin: isTop ? 'top' : 'bottom'
+      transformOrigin: isTop ? "top" : "bottom"
     }
   };
-};
+};
+export {
+  getTransitionConfig
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-popconfirm",
-  "version": "1.3.8",
+  "version": "1.3.10",
   "description": "Popconfirm UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,11 +35,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.16",
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-popover": "^1.5.1",
-    "@synerise/ds-tooltip": "^1.4.8",
-    "@synerise/ds-utils": "^1.6.0"
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-popover": "^1.5.3",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "devDependencies": {
     "@floating-ui/react": "^0.27.16",
@@ -51,5 +51,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }