@synerise/ds-popover 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2025-11-06)
+
+
+### Features
+
+* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+---
+id: popover
+title: Popover
+---
+
+Popover UI Component
+
+## Installation
+```
+npm i @synerise/ds-popover
+or
+yarn add @synerise/ds-popover
+```
+
+## Usage
+```
+import Popover from '@synerise/ds-popover'
+
+<Popover />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-popover--default"></iframe>
+
+## API
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |

package/dist/Popover.const.d.ts

@@ -0,0 +1,2 @@
+export declare const HOVER_OPEN_DELAY = 100;
+export declare const HOVER_CLOSE_DELAY = 100;

package/dist/Popover.const.js

@@ -0,0 +1,2 @@
+export var HOVER_OPEN_DELAY = 100;
+export var HOVER_CLOSE_DELAY = 100;

package/dist/Popover.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { PopoverProps } from './Popover.types';
+export declare const Popover: ({ children, modal, ...restOptions }: PopoverProps) => React.JSX.Element;

package/dist/Popover.js

@@ -0,0 +1,18 @@
+var _excluded = ["children", "modal"];
+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 React from 'react';
+import { PopoverContext } from './contexts';
+import { usePopover } from './hooks';
+export var Popover = function Popover(_ref) {
+  var children = _ref.children,
+    _ref$modal = _ref.modal,
+    modal = _ref$modal === void 0 ? false : _ref$modal,
+    restOptions = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var popover = usePopover(_extends({
+    modal: modal
+  }, restOptions));
+  return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
+    value: popover
+  }, children);
+};

package/dist/Popover.types.d.ts

@@ -0,0 +1,39 @@
+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';
+export type PopoverProps = {
+    children: ReactNode;
+} & PopoverOptions;
+export type PopoverTriggerType = 'click' | 'hover';
+type SharedMiddlewareConfig = {
+    enabled?: boolean;
+};
+export type OffsetConfig = SharedMiddlewareConfig & Exclude<OffsetOptions, number>;
+export type FlipConfig = SharedMiddlewareConfig & FlipOptions;
+export type ShiftConfig = SharedMiddlewareConfig & ShiftOptions;
+export type PopoverOptions = {
+    initialOpen?: boolean;
+    placement?: Placement;
+    modal?: boolean;
+    testId?: string;
+    componentId?: string;
+    autoUpdate?: boolean | AutoUpdateOptions;
+    open?: boolean;
+    offsetConfig?: OffsetConfig;
+    flipConfig?: FlipConfig;
+    shiftConfig?: ShiftConfig;
+    dismissConfig?: UseDismissProps;
+    listNavigationConfig?: UseListNavigationProps;
+    trigger?: PopoverTriggerType | PopoverTriggerType[];
+    /**
+     * defaults to theme.variables['zindex-dropdown'],
+     */
+    zIndex?: number;
+    onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
+    onDismiss?: (event?: Event, reason?: OpenChangeReason) => void;
+    getPopupContainer?: (element: HTMLElement) => HTMLElement;
+    transitionDuration?: number;
+    getTransitionConfig?: ({ placement, }: {
+        placement: Placement;
+    }) => Partial<UseTransitionStylesProps>;
+};
+export {};

package/dist/Popover.types.js

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

package/dist/components/PopoverClose.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PopoverClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/PopoverClose.js

@@ -0,0 +1,16 @@
+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 React, { forwardRef } from 'react';
+import { usePopoverContext } from '../hooks/usePopoverContext';
+export var PopoverClose = /*#__PURE__*/forwardRef(function PopoverClose(props, ref) {
+  var _usePopoverContext = usePopoverContext(),
+    setOpen = _usePopoverContext.setOpen;
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    ref: ref
+  }, props, {
+    onClick: function onClick(event) {
+      props.onClick == null || props.onClick(event);
+      setOpen(false);
+    }
+  }));
+});

package/dist/components/PopoverContent.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/PopoverContent.js

@@ -0,0 +1,73 @@
+var _excluded = ["style"];
+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 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';
+export var PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent(_ref, propRef) {
+  var style = _ref.style,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _usePopoverContext = usePopoverContext(),
+    floatingContext = _usePopoverContext.context,
+    getPopupContainer = _usePopoverContext.getPopupContainer,
+    modal = _usePopoverContext.modal,
+    testId = _usePopoverContext.testId,
+    refs = _usePopoverContext.refs,
+    getFloatingProps = _usePopoverContext.getFloatingProps,
+    floatingStyles = _usePopoverContext.floatingStyles,
+    labelId = _usePopoverContext.labelId,
+    descriptionId = _usePopoverContext.descriptionId,
+    transitionStyles = _usePopoverContext.transitionStyles,
+    componentId = _usePopoverContext.componentId,
+    zIndex = _usePopoverContext.zIndex;
+  var theme = useTheme();
+  var _useState = useState(false),
+    transitionEnded = _useState[0],
+    setTransitionEnded = _useState[1];
+  var popupContainerRef = useRef(null);
+  var ref = useMergeRefs([refs.setFloating, propRef]);
+  useEffect(function () {
+    if (!floatingContext.open) {
+      setTransitionEnded(false);
+    }
+  }, [floatingContext.open]);
+  useEffect(function () {
+    if (getPopupContainer && refs.reference.current) {
+      popupContainerRef.current = getPopupContainer(refs.reference.current);
+    }
+  }, [getPopupContainer, refs.reference]);
+  var dataProps = useMemo(function () {
+    var propsSet = {
+      'data-testid': "popover-" + testId + "-content",
+      'data-popover-content': 'true'
+    };
+    if (componentId) {
+      propsSet["data-popover-" + componentId] = 'true';
+    }
+    return propsSet;
+  }, [componentId, testId]);
+  if (!floatingContext.open) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FloatingPortal, {
+    root: getPopupContainer ? popupContainerRef : undefined
+  }, /*#__PURE__*/React.createElement(FloatingFocusManager, {
+    initialFocus: -1,
+    context: floatingContext,
+    modal: modal
+  }, /*#__PURE__*/React.createElement("div", _extends({}, dataProps, {
+    ref: ref,
+    style: _extends({}, floatingStyles, style, {
+      zIndex: zIndex !== undefined ? "" + zIndex : theme.variables['zindex-dropdown']
+    }),
+    "aria-labelledby": labelId,
+    "aria-describedby": descriptionId
+  }, getFloatingProps(props)), transitionStyles ? /*#__PURE__*/React.createElement("div", {
+    "data-transition-state": transitionEnded ? 'ended' : 'started',
+    style: transitionStyles,
+    onTransitionEnd: function onTransitionEnd() {
+      return setTransitionEnded(true);
+    }
+  }, props.children) : props.children)));
+});

package/dist/components/PopoverTrigger.d.ts

@@ -0,0 +1,6 @@
+import React, { type ReactNode } from 'react';
+export type PopoverTriggerProps = {
+    children: ReactNode;
+    asChild?: boolean;
+};
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement> & PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/PopoverTrigger.js

@@ -0,0 +1,38 @@
+var _excluded = ["children", "asChild"];
+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 React, { cloneElement, forwardRef, isValidElement } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { usePopoverContext } from '../hooks/usePopoverContext';
+import * as S from './PopoverTrigger.styles';
+export var PopoverTrigger = /*#__PURE__*/forwardRef(function (_ref, propRef) {
+  var children = _ref.children,
+    _ref$asChild = _ref.asChild,
+    asChild = _ref$asChild === void 0 ? false : _ref$asChild,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var context = usePopoverContext();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var childrenRef = children.ref;
+  var ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+  // `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)) {
+    var referenceProps = context.getReferenceProps(_extends({
+      ref: ref,
+      'data-popover-trigger': true,
+      'data-testid': "popover-" + context.testId + "-trigger"
+    }, props, children.props, {
+      'data-state': context.open ? 'open' : 'closed'
+    }));
+    return /*#__PURE__*/cloneElement(children, _extends({}, referenceProps));
+  }
+  return /*#__PURE__*/React.createElement(S.Trigger, _extends({
+    ref: ref
+    // The user can style the trigger based on the state
+    ,
+    "data-state": context.open ? 'open' : 'closed',
+    "data-popover-trigger": true,
+    "data-testid": "popover-" + context.testId + "-trigger"
+  }, context.getReferenceProps(props)), children);
+});

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

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

package/dist/components/PopoverTrigger.styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var Trigger = styled.span.withConfig({
+  displayName: "PopoverTriggerstyles__Trigger",
+  componentId: "sc-1irht31-0"
+})(["display:flex;"]);

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/contexts/PopoverContext.d.ts

@@ -0,0 +1,7 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import { type usePopover } from '../hooks';
+export type ContextType = (ReturnType<typeof usePopover> & {
+    setLabelId: Dispatch<SetStateAction<string | undefined>>;
+    setDescriptionId: Dispatch<SetStateAction<string | undefined>>;
+}) | null;
+export declare const PopoverContext: import("react").Context<ContextType>;

package/dist/contexts/PopoverContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var PopoverContext = /*#__PURE__*/createContext(null);

package/dist/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './PopoverContext';

package/dist/contexts/index.js

@@ -0,0 +1 @@
+export * from './PopoverContext';

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usePopover';
+export * from './usePopoverContext';

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './usePopover';
+export * from './usePopoverContext';

package/dist/hooks/useListNavigationConfig.d.ts

@@ -0,0 +1,24 @@
+import { type UseListNavigationProps } from '@floating-ui/react';
+export declare const useListNavigationConfig: (listNavigationConfig?: UseListNavigationProps) => {
+    listRef: React.MutableRefObject<Array<HTMLElement | null>>;
+    activeIndex: number | null;
+    onNavigate?: (activeIndex: number | null) => void;
+    enabled: boolean;
+    selectedIndex?: number | null;
+    focusItemOnOpen?: boolean | "auto";
+    focusItemOnHover?: boolean;
+    openOnArrowKeyDown?: boolean;
+    disabledIndices?: Array<number> | ((index: number) => boolean);
+    allowEscape?: boolean;
+    loop?: boolean;
+    nested?: boolean;
+    parentOrientation?: UseListNavigationProps["orientation"];
+    rtl?: boolean;
+    virtual?: boolean;
+    orientation?: "vertical" | "horizontal" | "both";
+    cols?: number;
+    scrollItemIntoView?: boolean | ScrollIntoViewOptions;
+    virtualItemRef?: React.MutableRefObject<HTMLElement | null>;
+    itemSizes?: import("@floating-ui/utils").Dimensions[];
+    dense?: boolean;
+};

package/dist/hooks/useListNavigationConfig.js

@@ -0,0 +1,10 @@
+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 { useRef } from 'react';
+export var useListNavigationConfig = function useListNavigationConfig(listNavigationConfig) {
+  var listRef = useRef([]);
+  return _extends({
+    activeIndex: null,
+    enabled: false,
+    listRef: listRef
+  }, listNavigationConfig);
+};

package/dist/hooks/usePopover.d.ts

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

package/dist/hooks/usePopover.js

@@ -0,0 +1,117 @@
+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 { 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';
+import { useListNavigationConfig } from './useListNavigationConfig';
+export var usePopover = function usePopover(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    _ref$initialOpen = _ref.initialOpen,
+    initialOpen = _ref$initialOpen === void 0 ? false : _ref$initialOpen,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+    modal = _ref.modal,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
+    controlledOpen = _ref.open,
+    setControlledOpen = _ref.onOpenChange,
+    onDismiss = _ref.onDismiss,
+    transitionDuration = _ref.transitionDuration,
+    getPopupContainer = _ref.getPopupContainer,
+    autoUpdateWhileMounted = _ref.autoUpdate,
+    _ref$dismissConfig = _ref.dismissConfig,
+    dismissConfig = _ref$dismissConfig === void 0 ? {} : _ref$dismissConfig,
+    _ref$offsetConfig = _ref.offsetConfig,
+    offsetConfig = _ref$offsetConfig === void 0 ? {} : _ref$offsetConfig,
+    _ref$flipConfig = _ref.flipConfig,
+    flipConfig = _ref$flipConfig === void 0 ? {} : _ref$flipConfig,
+    _ref$shiftConfig = _ref.shiftConfig,
+    shiftConfig = _ref$shiftConfig === void 0 ? {} : _ref$shiftConfig,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'noTestId' : _ref$testId,
+    componentId = _ref.componentId,
+    listNavigationConfig = _ref.listNavigationConfig,
+    _ref$getTransitionCon = _ref.getTransitionConfig,
+    getTransitionConfig = _ref$getTransitionCon === void 0 ? getDefaultTransitionConfig : _ref$getTransitionCon,
+    zIndex = _ref.zIndex;
+  var _useState = useState(initialOpen),
+    uncontrolledOpen = _useState[0],
+    setUncontrolledOpen = _useState[1];
+  var _useState2 = useState(),
+    labelId = _useState2[0],
+    setLabelId = _useState2[1];
+  var _useState3 = useState(),
+    descriptionId = _useState3[0],
+    setDescriptionId = _useState3[1];
+  var open = controlledOpen != null ? controlledOpen : uncontrolledOpen;
+  var setOpen = setControlledOpen != null ? setControlledOpen : setUncontrolledOpen;
+  var triggerArray = Array.isArray(trigger) ? trigger : [trigger];
+  var whileElementsMounted = useMemo(function () {
+    if (!autoUpdateWhileMounted) {
+      return undefined;
+    }
+    if (autoUpdateWhileMounted === true) {
+      return autoUpdate;
+    }
+    return function (referenceEl, floatingEl, update) {
+      var cleanup = autoUpdate(referenceEl, floatingEl, update, autoUpdateWhileMounted);
+      return cleanup;
+    };
+  }, [autoUpdateWhileMounted]);
+  var data = useFloating({
+    placement: placement,
+    open: open,
+    onOpenChange: function onOpenChange(newState, event, reason) {
+      setOpen(newState, event, reason);
+      if (dismissConfig.enabled !== false && (reason === 'escape-key' || reason === 'outside-press')) {
+        onDismiss == null || onDismiss(event, reason);
+      }
+    },
+    whileElementsMounted: whileElementsMounted,
+    middleware: getMiddleware({
+      offsetConfig: offsetConfig,
+      flipConfig: flipConfig,
+      shiftConfig: shiftConfig
+    })
+  });
+  var context = data.context;
+  var isClickEnabled = triggerArray.includes('click');
+  var isHoverEnabled = triggerArray.includes('hover');
+  var listNavConfig = useListNavigationConfig(listNavigationConfig);
+  var listNav = useListNavigation(context, listNavConfig);
+  var click = useClick(context, {
+    enabled: isClickEnabled && controlledOpen === undefined
+  });
+  var hover = useHover(context, {
+    enabled: isHoverEnabled,
+    delay: {
+      open: HOVER_OPEN_DELAY,
+      close: HOVER_CLOSE_DELAY
+    }
+  });
+  var dismiss = useDismiss(context, dismissConfig);
+  var role = useRole(context);
+  var interactions = useInteractions([click, hover, dismiss, role, listNav]);
+  var _useTransitionStyles = useTransitionStyles(context, _extends({
+      duration: transitionDuration
+    }, getTransitionConfig(data))),
+    styles = _useTransitionStyles.styles,
+    isMounted = _useTransitionStyles.isMounted;
+  return useMemo(function () {
+    return _extends({
+      open: isMounted,
+      setOpen: setOpen,
+      transitionStyles: typeof transitionDuration === 'number' ? styles : undefined
+    }, interactions, data, {
+      modal: modal,
+      labelId: labelId,
+      getPopupContainer: getPopupContainer,
+      descriptionId: descriptionId,
+      setLabelId: setLabelId,
+      setDescriptionId: setDescriptionId,
+      testId: testId,
+      zIndex: zIndex,
+      componentId: componentId
+    });
+  }, [getPopupContainer, isMounted, setOpen, transitionDuration, styles, interactions, data, modal, labelId, descriptionId, zIndex, testId, componentId]);
+};

package/dist/hooks/usePopoverContext.d.ts

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

package/dist/hooks/usePopoverContext.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { PopoverContext } from '../contexts';
+export var usePopoverContext = function usePopoverContext() {
+  var context = useContext(PopoverContext);
+  if (context === null) {
+    throw new Error('Popover components must be wrapped in <Popover />');
+  }
+  return context;
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Popover';
+export * from './components';
+export { Popover as default } from './Popover';
+export * from './Popover.types';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './Popover';
+export * from './components';
+export { Popover as default } from './Popover';
+export * from './Popover.types';

package/dist/modules.d.js

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

package/dist/utils/getDefaultTransitionConfig.d.ts

@@ -0,0 +1,2 @@
+import { type UseTransitionStylesProps } from '@floating-ui/react';
+export declare const getDefaultTransitionConfig: () => Partial<UseTransitionStylesProps>;

package/dist/utils/getDefaultTransitionConfig.js

@@ -0,0 +1,10 @@
+export var getDefaultTransitionConfig = function getDefaultTransitionConfig() {
+  return {
+    open: {
+      opacity: 1
+    },
+    initial: {
+      opacity: 0
+    }
+  };
+};

package/dist/utils/getMiddleware.d.ts

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

package/dist/utils/getMiddleware.js

@@ -0,0 +1,33 @@
+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';
+export var getMiddleware = function getMiddleware(_ref) {
+  var offsetConfig = _ref.offsetConfig,
+    flipConfig = _ref.flipConfig,
+    shiftConfig = _ref.shiftConfig;
+  var middleware = [];
+  var _ref2 = offsetConfig || {},
+    _ref2$enabled = _ref2.enabled,
+    offsetEnabled = _ref2$enabled === void 0 ? true : _ref2$enabled,
+    offsetOptions = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  var _ref3 = flipConfig || {},
+    _ref3$enabled = _ref3.enabled,
+    flipEnabled = _ref3$enabled === void 0 ? true : _ref3$enabled,
+    flipOptions = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  var _ref4 = shiftConfig || {},
+    _ref4$enabled = _ref4.enabled,
+    shiftEnabled = _ref4$enabled === void 0 ? true : _ref4$enabled,
+    shiftOptions = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+  if (offsetEnabled) {
+    middleware.push(offset(offsetOptions));
+  }
+  if (flipEnabled) {
+    middleware.push(flip(flipOptions));
+  }
+  if (shiftEnabled) {
+    middleware.push(shift(shiftOptions));
+  }
+  return middleware;
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './getDefaultTransitionConfig';
+export * from './getMiddleware';

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export * from './getDefaultTransitionConfig';
+export * from './getMiddleware';

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@synerise/ds-popover",
+  "version": "1.1.0",
+  "description": "Popover UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "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": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "prepublish": "npm run build",
+    "types": "tsc --noEmit",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@floating-ui/react": "^0.27.13"
+  },
+  "devDependencies": {
+    "@testing-library/user-event": "^14"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1"
+  },
+  "gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
+}