@synerise/ds-popover 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -3,20 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-popover@1.1.0...@synerise/ds-popover@1.1.1) (2025-11-13)
+# [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
 
-### Bug Fixes
+- **popconfirm:** migrate to popover ([f14f74e](https://github.com/Synerise/synerise-design/commit/f14f74e1f9879ddd8264dc2614723a298b656d2f))
 
-* **date-picker:** dropdown state ([e16e4ce](https://github.com/Synerise/synerise-design/commit/e16e4ce8374c374512d0dc59a2361000ab89c8b9))
+## [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
 
+## [1.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-popover@1.1.0...@synerise/ds-popover@1.1.1) (2025-11-13)
 
+### Bug Fixes
 
+- **date-picker:** dropdown state ([e16e4ce](https://github.com/Synerise/synerise-design/commit/e16e4ce8374c374512d0dc59a2361000ab89c8b9))
 
 # 1.1.0 (2025-11-06)
 
-
 ### Features
 
-* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
+- **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))

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 ReactNode } from 'react';
-import { type AutoUpdateOptions, type FlipOptions, type OffsetOptions, type OpenChangeReason, type Placement, type ShiftOptions, type UseDismissProps, 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[];
@@ -33,7 +34,7 @@ export type PopoverOptions = {
      * defaults to theme.variables['zindex-dropdown'],
      */
     zIndex?: number;
-    onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
+    onOpenChange?: OpenChangeFn;
     onDismiss?: (event?: Event, reason?: OpenChangeReason) => void;
     getPopupContainer?: (element: HTMLElement) => HTMLElement;
     transitionDuration?: number;
@@ -41,4 +42,24 @@ export type PopoverOptions = {
         placement: Placement;
     }) => Partial<UseTransitionStylesProps>;
 };
+type OpenChangeFn = (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
+export type UsePopoverReturn = Omit<UseFloatingReturn, 'open'> & UseInteractionsReturn & {
+    open: boolean;
+    setOpen: OpenChangeFn;
+    transitionStyles: CSSProperties | undefined;
+    modal: boolean | undefined;
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: Dispatch<SetStateAction<string | undefined>>;
+    setDescriptionId: Dispatch<SetStateAction<string | undefined>>;
+    getPopupContainer?: (element: HTMLElement) => HTMLElement;
+    testId: string;
+    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/contexts/PopoverContext.d.ts

@@ -1,6 +1,6 @@
 import { type Dispatch, type SetStateAction } from 'react';
-import { type usePopover } from '../hooks';
-export type ContextType = (ReturnType<typeof usePopover> & {
+import { type UsePopoverReturn } from '../Popover.types';
+export type ContextType = (UsePopoverReturn & {
     setLabelId: Dispatch<SetStateAction<string | undefined>>;
     setDescriptionId: Dispatch<SetStateAction<string | undefined>>;
 }) | null;

package/dist/hooks/useListNavigationConfig.d.ts

@@ -19,6 +19,6 @@ export declare const useListNavigationConfig: (listNavigationConfig?: UseListNav
     cols?: number;
     scrollItemIntoView?: boolean | ScrollIntoViewOptions;
     virtualItemRef?: React.MutableRefObject<HTMLElement | null>;
-    itemSizes?: import("@floating-ui/utils").Dimensions[];
+    itemSizes?: import("@floating-ui/react").Dimensions[];
     dense?: boolean;
 };

package/dist/hooks/usePopover.d.ts

@@ -1,59 +1,2 @@
-import { type OpenChangeReason } from '@floating-ui/react';
-import { type PopoverOptions } 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) => {
-    modal: boolean | undefined;
-    labelId: string | undefined;
-    getPopupContainer: ((element: HTMLElement) => HTMLElement) | undefined;
-    descriptionId: string | undefined;
-    setLabelId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
-    setDescriptionId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
-    testId: string;
-    zIndex: number | undefined;
-    returnFocus: boolean | undefined;
-    componentId: string | undefined;
-    placement: import("@floating-ui/utils").Placement;
-    strategy: import("@floating-ui/utils").Strategy;
-    middlewareData: import("@floating-ui/core").MiddlewareData;
-    x: number;
-    y: number;
-    isPositioned: boolean;
-    update: () => void;
-    floatingStyles: React.CSSProperties;
-    refs: {
-        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
-        floating: React.MutableRefObject<HTMLElement | null>;
-        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
-        setFloating: (node: HTMLElement | null) => void;
-    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-    elements: {
-        reference: import("@floating-ui/react-dom").ReferenceType | null;
-        floating: HTMLElement | null;
-    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    context: {
-        x: number;
-        y: number;
-        placement: import("@floating-ui/utils").Placement;
-        strategy: import("@floating-ui/utils").Strategy;
-        middlewareData: import("@floating-ui/core").MiddlewareData;
-        isPositioned: boolean;
-        update: () => void;
-        floatingStyles: React.CSSProperties;
-        open: boolean;
-        onOpenChange: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
-        events: import("@floating-ui/react").FloatingEvents;
-        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
-        nodeId: string | undefined;
-        floatingId: string | undefined;
-        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    };
-    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
-    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
-    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
-        active?: boolean;
-        selected?: boolean;
-    }) => Record<string, unknown>;
-    open: boolean;
-    setOpen: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
-    transitionStyles: import("react").CSSProperties | undefined;
-};
+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, 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/hooks/usePopoverContext.d.ts

@@ -1,60 +1,2 @@
-export declare const usePopoverContext: () => {
-    modal: boolean | undefined;
-    labelId: string | undefined;
-    getPopupContainer: ((element: HTMLElement) => HTMLElement) | undefined;
-    descriptionId: string | undefined;
-    setLabelId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
-    setDescriptionId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
-    testId: string;
-    zIndex: number | undefined;
-    returnFocus: boolean | undefined;
-    componentId: string | undefined;
-    placement: import("@floating-ui/utils").Placement;
-    strategy: import("@floating-ui/utils").Strategy;
-    middlewareData: import("@floating-ui/core").MiddlewareData;
-    x: number;
-    y: number;
-    isPositioned: boolean;
-    update: () => void;
-    floatingStyles: React.CSSProperties;
-    refs: {
-        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
-        floating: React.MutableRefObject<HTMLElement | null>;
-        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
-        setFloating: (node: HTMLElement | null) => void;
-    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-    elements: {
-        reference: import("@floating-ui/react-dom").ReferenceType | null;
-        floating: HTMLElement | null;
-    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    context: {
-        x: number;
-        y: number;
-        placement: import("@floating-ui/utils").Placement;
-        strategy: import("@floating-ui/utils").Strategy;
-        middlewareData: import("@floating-ui/core").MiddlewareData;
-        isPositioned: boolean;
-        update: () => void;
-        floatingStyles: React.CSSProperties;
-        open: boolean;
-        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
-        events: import("@floating-ui/react").FloatingEvents;
-        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
-        nodeId: string | undefined;
-        floatingId: string | undefined;
-        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    };
-    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
-    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
-    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
-        active?: boolean;
-        selected?: boolean;
-    }) => Record<string, unknown>;
-    open: boolean;
-    setOpen: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
-    transitionStyles: import("react").CSSProperties | undefined;
-} & {
-    setLabelId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
-    setDescriptionId: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
-};
+import { type ContextType } from '../contexts';
+export declare const usePopoverContext: () => Exclude<ContextType, null>;

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,12 +1,14 @@
+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/dom").MiddlewareState) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
+    fn: (state: import("@floating-ui/react").MiddlewareState) => import("@floating-ui/react").MiddlewareReturn | Promise<import("@floating-ui/react").MiddlewareReturn>;
 }[];
 export {};

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.1",
+  "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.13"
+    "@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": "085189e79075b23a8fb86ce9b7d930f6ac7b3d23"
+  "gitHead": "c638fc7e1af8aea55d466a643329fe499b2b3383"
 }