@synerise/ds-popover 1.5.2 → 1.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/dist/Popover.const.d.ts +2 -2
- package/dist/Popover.const.js +23 -18
- package/dist/Popover.d.ts +2 -2
- package/dist/Popover.js +23 -31
- package/dist/Popover.types.d.ts +2 -2
- package/dist/Popover.types.js +1 -1
- package/dist/components/PopoverArrow.d.ts +3 -3
- package/dist/components/PopoverArrow.js +28 -23
- package/dist/components/PopoverClose.d.ts +1 -1
- package/dist/components/PopoverClose.js +15 -16
- package/dist/components/PopoverContent.d.ts +1 -1
- package/dist/components/PopoverContent.js +48 -61
- package/dist/components/PopoverContent.styles.d.ts +1 -1
- package/dist/components/PopoverContent.styles.js +5 -2
- package/dist/components/PopoverTrigger.d.ts +1 -1
- package/dist/components/PopoverTrigger.js +46 -44
- package/dist/components/PopoverTrigger.styles.d.ts +2 -2
- package/dist/components/PopoverTrigger.styles.js +8 -4
- package/dist/components/index.js +10 -4
- package/dist/contexts/PopoverContext.d.ts +3 -3
- package/dist/contexts/PopoverContext.js +5 -2
- package/dist/contexts/index.js +4 -1
- package/dist/hooks/index.js +6 -2
- package/dist/hooks/useListNavigationConfig.d.ts +2 -2
- package/dist/hooks/useListNavigationConfig.js +11 -8
- package/dist/hooks/usePopover.d.ts +1 -1
- package/dist/hooks/usePopover.js +102 -112
- package/dist/hooks/usePopoverContext.d.ts +1 -1
- package/dist/hooks/usePopoverContext.js +9 -6
- package/dist/index.js +22 -7
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/dist/utils/getDefaultTransitionConfig.d.ts +1 -1
- package/dist/utils/getDefaultTransitionConfig.js +5 -2
- package/dist/utils/getMiddleware.d.ts +3 -3
- package/dist/utils/getMiddleware.js +25 -25
- package/dist/utils/getPlacement.d.ts +2 -2
- package/dist/utils/getPlacement.js +6 -3
- package/dist/utils/index.js +6 -2
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.5.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-popover@1.5.2...@synerise/ds-popover@1.5.3) (2026-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-popover
|
|
9
|
+
|
|
6
10
|
## [1.5.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-popover@1.5.1...@synerise/ds-popover@1.5.2) (2026-03-20)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @synerise/ds-popover
|
package/dist/Popover.const.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { Placement } from '@floating-ui/react';
|
|
2
|
+
import { LegacyPlacement } from './Popover.types';
|
|
3
3
|
export declare const HOVER_OPEN_DELAY = 100;
|
|
4
4
|
export declare const HOVER_CLOSE_DELAY = 100;
|
|
5
5
|
export declare const PLACEMENT_MAP: Record<LegacyPlacement, Placement>;
|
package/dist/Popover.const.js
CHANGED
|
@@ -1,18 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
top:
|
|
5
|
-
bottom:
|
|
6
|
-
left:
|
|
7
|
-
right:
|
|
8
|
-
leftTop:
|
|
9
|
-
leftBottom:
|
|
10
|
-
rightTop:
|
|
11
|
-
rightBottom:
|
|
12
|
-
topRight:
|
|
13
|
-
topLeft:
|
|
14
|
-
topCenter:
|
|
15
|
-
bottomCenter:
|
|
16
|
-
bottomLeft:
|
|
17
|
-
bottomRight:
|
|
18
|
-
};
|
|
1
|
+
const HOVER_OPEN_DELAY = 100;
|
|
2
|
+
const HOVER_CLOSE_DELAY = 100;
|
|
3
|
+
const PLACEMENT_MAP = {
|
|
4
|
+
top: "top",
|
|
5
|
+
bottom: "bottom",
|
|
6
|
+
left: "left",
|
|
7
|
+
right: "right",
|
|
8
|
+
leftTop: "left-start",
|
|
9
|
+
leftBottom: "left-end",
|
|
10
|
+
rightTop: "right-start",
|
|
11
|
+
rightBottom: "right-end",
|
|
12
|
+
topRight: "top-end",
|
|
13
|
+
topLeft: "top-start",
|
|
14
|
+
topCenter: "top",
|
|
15
|
+
bottomCenter: "bottom",
|
|
16
|
+
bottomLeft: "bottom-start",
|
|
17
|
+
bottomRight: "bottom-end"
|
|
18
|
+
};
|
|
19
|
+
export {
|
|
20
|
+
HOVER_CLOSE_DELAY,
|
|
21
|
+
HOVER_OPEN_DELAY,
|
|
22
|
+
PLACEMENT_MAP
|
|
23
|
+
};
|
package/dist/Popover.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { PopoverProps } from './Popover.types';
|
|
3
3
|
export declare const Popover: (props: PopoverProps) => React.JSX.Element;
|
package/dist/Popover.js
CHANGED
|
@@ -1,34 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
modal: modal
|
|
17
|
-
}, restOptions));
|
|
18
|
-
return /*#__PURE__*/React.createElement(FloatingNode, {
|
|
19
|
-
id: popover.context.nodeId
|
|
20
|
-
}, /*#__PURE__*/React.createElement(PopoverContext.Provider, {
|
|
21
|
-
value: popover
|
|
22
|
-
}, children));
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useFloatingParentNodeId, FloatingTree, FloatingNode } from "@floating-ui/react";
|
|
3
|
+
import { PopoverContext } from "./contexts/PopoverContext.js";
|
|
4
|
+
import { usePopover } from "./hooks/usePopover.js";
|
|
5
|
+
import "react";
|
|
6
|
+
const PopoverContent = ({
|
|
7
|
+
children,
|
|
8
|
+
modal = false,
|
|
9
|
+
...restOptions
|
|
10
|
+
}) => {
|
|
11
|
+
const popover = usePopover({
|
|
12
|
+
modal,
|
|
13
|
+
...restOptions
|
|
14
|
+
});
|
|
15
|
+
return /* @__PURE__ */ jsx(FloatingNode, { id: popover.context.nodeId, children: /* @__PURE__ */ jsx(PopoverContext.Provider, { value: popover, children }) });
|
|
23
16
|
};
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
export var Popover = function Popover(props) {
|
|
27
|
-
var parentId = useFloatingParentNodeId();
|
|
28
|
-
|
|
29
|
-
// If there's no parent node, wrap with FloatingTree for nested popover support
|
|
17
|
+
const Popover = (props) => {
|
|
18
|
+
const parentId = useFloatingParentNodeId();
|
|
30
19
|
if (parentId === null) {
|
|
31
|
-
return
|
|
20
|
+
return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(PopoverContent, { ...props }) });
|
|
32
21
|
}
|
|
33
|
-
return
|
|
34
|
-
};
|
|
22
|
+
return /* @__PURE__ */ jsx(PopoverContent, { ...props });
|
|
23
|
+
};
|
|
24
|
+
export {
|
|
25
|
+
Popover
|
|
26
|
+
};
|
package/dist/Popover.types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { CSSProperties, Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
|
|
2
|
+
import { ArrowOptions, AutoUpdateOptions, Delay, FlipOptions, OffsetOptions, OpenChangeReason, Placement, ShiftOptions, UseDismissProps, UseFloatingReturn, UseHoverProps, UseInteractionsReturn, UseListNavigationProps, UseTransitionStylesProps } from '@floating-ui/react';
|
|
3
3
|
export type PopoverProps = {
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
} & PopoverOptions;
|
package/dist/Popover.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { Placement } from '@floating-ui/react';
|
|
3
3
|
export declare const PopoverArrow: ({ children, getClassNameFromPlacement, }: {
|
|
4
4
|
children?: ReactElement;
|
|
5
5
|
getClassNameFromPlacement?: (placement: Placement) => string;
|
|
6
|
-
}) => ReactElement<any, string | import(
|
|
6
|
+
}) => ReactElement<any, string | import('react').JSXElementConstructor<any>> | undefined;
|
|
@@ -1,31 +1,36 @@
|
|
|
1
|
-
import classNames from
|
|
2
|
-
import {
|
|
3
|
-
import { useTheme } from
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import classNames from "classnames";
|
|
2
|
+
import { isValidElement, cloneElement } from "react";
|
|
3
|
+
import { useTheme } from "@synerise/ds-core";
|
|
4
|
+
import "@floating-ui/react";
|
|
5
|
+
import { usePopoverContext } from "../hooks/usePopoverContext.js";
|
|
6
|
+
const PopoverArrow = ({
|
|
7
|
+
children,
|
|
8
|
+
getClassNameFromPlacement
|
|
9
|
+
}) => {
|
|
10
|
+
const theme = useTheme();
|
|
11
|
+
const {
|
|
12
|
+
arrowRef,
|
|
13
|
+
placement,
|
|
14
|
+
zIndex,
|
|
15
|
+
middlewareData
|
|
16
|
+
} = usePopoverContext();
|
|
17
|
+
const placementClassName = getClassNameFromPlacement?.(placement) || `ds-popover-arrow-${placement}`;
|
|
18
|
+
if (isValidElement(children)) {
|
|
19
|
+
return cloneElement(children, {
|
|
18
20
|
// @ts-expect-error ref unknown
|
|
19
21
|
ref: arrowRef,
|
|
20
22
|
// @ts-expect-error props.className may not exist
|
|
21
|
-
className: classNames(placementClassName,
|
|
23
|
+
className: classNames(placementClassName, children.props?.className),
|
|
22
24
|
style: {
|
|
23
|
-
zIndex: zIndex !==
|
|
24
|
-
position:
|
|
25
|
-
left:
|
|
26
|
-
top:
|
|
25
|
+
zIndex: zIndex !== void 0 ? `${zIndex}` : theme.variables["zindex-dropdown"],
|
|
26
|
+
position: "absolute",
|
|
27
|
+
left: middlewareData.arrow?.x,
|
|
28
|
+
top: middlewareData.arrow?.y
|
|
27
29
|
}
|
|
28
30
|
});
|
|
29
31
|
}
|
|
30
32
|
return children;
|
|
31
|
-
};
|
|
33
|
+
};
|
|
34
|
+
export {
|
|
35
|
+
PopoverArrow
|
|
36
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import { default as React } from 'react';
|
|
2
2
|
export declare const PopoverClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import { usePopoverContext } from
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
setOpen
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
});
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { usePopoverContext } from "../hooks/usePopoverContext.js";
|
|
4
|
+
const PopoverClose = forwardRef(function PopoverClose2(props, ref) {
|
|
5
|
+
const {
|
|
6
|
+
setOpen
|
|
7
|
+
} = usePopoverContext();
|
|
8
|
+
return /* @__PURE__ */ jsx("button", { type: "button", ref, ...props, onClick: (event) => {
|
|
9
|
+
props.onClick?.(event);
|
|
10
|
+
setOpen(false);
|
|
11
|
+
} });
|
|
12
|
+
});
|
|
13
|
+
export {
|
|
14
|
+
PopoverClose
|
|
15
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import { default as React } from 'react';
|
|
2
2
|
export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,77 +1,64 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
var popupContainerRef = useRef(null);
|
|
32
|
-
var ref = useMergeRefs([refs.setFloating, propRef]);
|
|
33
|
-
useEffect(function () {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useState, useRef, useEffect, useMemo } from "react";
|
|
3
|
+
import { useMergeRefs, FloatingPortal, FloatingFocusManager } from "@floating-ui/react";
|
|
4
|
+
import { useTheme } from "@synerise/ds-core";
|
|
5
|
+
import { usePopoverContext } from "../hooks/usePopoverContext.js";
|
|
6
|
+
import { GlobalStyles } from "./PopoverContent.styles.js";
|
|
7
|
+
const PopoverContent = forwardRef(function PopoverContent2({
|
|
8
|
+
style,
|
|
9
|
+
...props
|
|
10
|
+
}, propRef) {
|
|
11
|
+
const {
|
|
12
|
+
context: floatingContext,
|
|
13
|
+
getPopupContainer,
|
|
14
|
+
modal,
|
|
15
|
+
testId,
|
|
16
|
+
refs,
|
|
17
|
+
getFloatingProps,
|
|
18
|
+
floatingStyles,
|
|
19
|
+
labelId,
|
|
20
|
+
descriptionId,
|
|
21
|
+
transitionStyles,
|
|
22
|
+
componentId,
|
|
23
|
+
returnFocus = true,
|
|
24
|
+
zIndex
|
|
25
|
+
} = usePopoverContext();
|
|
26
|
+
const theme = useTheme();
|
|
27
|
+
const [transitionEnded, setTransitionEnded] = useState(false);
|
|
28
|
+
const popupContainerRef = useRef(null);
|
|
29
|
+
const ref = useMergeRefs([refs.setFloating, propRef]);
|
|
30
|
+
useEffect(() => {
|
|
34
31
|
if (!floatingContext.open) {
|
|
35
32
|
setTransitionEnded(false);
|
|
36
33
|
}
|
|
37
34
|
}, [floatingContext.open]);
|
|
38
|
-
useEffect(
|
|
35
|
+
useEffect(() => {
|
|
39
36
|
if (getPopupContainer && refs.reference.current) {
|
|
40
37
|
popupContainerRef.current = getPopupContainer(refs.reference.current);
|
|
41
38
|
}
|
|
42
39
|
}, [getPopupContainer, refs.reference]);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
40
|
+
const dataProps = useMemo(() => {
|
|
41
|
+
const propsSet = {
|
|
42
|
+
"data-testid": `popover-${testId}-content`,
|
|
43
|
+
"data-popover-content": "true"
|
|
47
44
|
};
|
|
48
45
|
if (componentId) {
|
|
49
|
-
propsSet[
|
|
46
|
+
propsSet[`data-popover-${componentId}`] = "true";
|
|
50
47
|
}
|
|
51
48
|
return propsSet;
|
|
52
49
|
}, [componentId, testId]);
|
|
53
50
|
if (!floatingContext.open) {
|
|
54
51
|
return null;
|
|
55
52
|
}
|
|
56
|
-
return
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
"aria-labelledby": labelId,
|
|
69
|
-
"aria-describedby": descriptionId
|
|
70
|
-
}, getFloatingProps(props)), transitionStyles ? /*#__PURE__*/React.createElement("div", {
|
|
71
|
-
"data-transition-state": transitionEnded ? 'ended' : 'started',
|
|
72
|
-
style: transitionStyles,
|
|
73
|
-
onTransitionEnd: function onTransitionEnd() {
|
|
74
|
-
return setTransitionEnded(true);
|
|
75
|
-
}
|
|
76
|
-
}, props.children) : props.children)));
|
|
77
|
-
});
|
|
53
|
+
return /* @__PURE__ */ jsxs(FloatingPortal, { root: getPopupContainer ? popupContainerRef : void 0, children: [
|
|
54
|
+
/* @__PURE__ */ jsx(GlobalStyles, {}),
|
|
55
|
+
/* @__PURE__ */ jsx(FloatingFocusManager, { initialFocus: -1, context: floatingContext, modal, returnFocus, children: /* @__PURE__ */ jsx("div", { ...dataProps, ref, style: {
|
|
56
|
+
...floatingStyles,
|
|
57
|
+
...style,
|
|
58
|
+
zIndex: zIndex !== void 0 ? `${zIndex}` : theme.variables["zindex-dropdown"]
|
|
59
|
+
}, "aria-labelledby": labelId, "aria-describedby": descriptionId, ...getFloatingProps(props), children: transitionStyles ? /* @__PURE__ */ jsx("div", { "data-transition-state": transitionEnded ? "ended" : "started", style: transitionStyles, onTransitionEnd: () => setTransitionEnded(true), children: props.children }) : props.children }) })
|
|
60
|
+
] });
|
|
61
|
+
});
|
|
62
|
+
export {
|
|
63
|
+
PopoverContent
|
|
64
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const GlobalStyles: import(
|
|
1
|
+
export declare const GlobalStyles: import('styled-components').GlobalStyleComponent<{}, import('styled-components').DefaultTheme>;
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
import { createGlobalStyle } from
|
|
2
|
-
|
|
1
|
+
import { createGlobalStyle } from "styled-components";
|
|
2
|
+
const GlobalStyles = /* @__PURE__ */ createGlobalStyle(["[data-popover-trigger] ~ span[aria-hidden],div[data-floating-ui-portal]{display:contents;}"]);
|
|
3
|
+
export {
|
|
4
|
+
GlobalStyles
|
|
5
|
+
};
|
|
@@ -1,46 +1,48 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var renderAsChild = asChild && /*#__PURE__*/isValidElement(children);
|
|
17
|
-
var refsArray = [propRef, childrenRef, !renderAsChild && context.refs.setReference];
|
|
18
|
-
var ref = useMergeRefs(refsArray.filter(Boolean));
|
|
19
|
-
// `asChild` allows the user to pass any element as the anchor
|
|
20
|
-
// if the child is a component it needs to forward the ref to a html element
|
|
21
|
-
// so that the Popover can position itself correctly.
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, isValidElement, cloneElement } from "react";
|
|
3
|
+
import { useMergeRefs } from "@floating-ui/react";
|
|
4
|
+
import { usePopoverContext } from "../hooks/usePopoverContext.js";
|
|
5
|
+
import { TriggerAnchor, Trigger } from "./PopoverTrigger.styles.js";
|
|
6
|
+
const PopoverTrigger = forwardRef(({
|
|
7
|
+
children,
|
|
8
|
+
asChild = false,
|
|
9
|
+
...props
|
|
10
|
+
}, propRef) => {
|
|
11
|
+
const context = usePopoverContext();
|
|
12
|
+
const childrenRef = children.ref;
|
|
13
|
+
const renderAsChild = asChild && isValidElement(children);
|
|
14
|
+
const refsArray = [propRef, childrenRef, !renderAsChild && context.refs.setReference];
|
|
15
|
+
const ref = useMergeRefs(refsArray.filter(Boolean));
|
|
22
16
|
if (renderAsChild) {
|
|
23
|
-
|
|
24
|
-
ref
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
hidden: true,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
17
|
+
const referenceProps = context.getReferenceProps({
|
|
18
|
+
ref,
|
|
19
|
+
"data-popover-trigger": true,
|
|
20
|
+
"data-testid": `popover-${context.testId}-trigger`,
|
|
21
|
+
...props,
|
|
22
|
+
...children.props,
|
|
23
|
+
"data-state": context.open ? "open" : "closed"
|
|
24
|
+
});
|
|
25
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
26
|
+
/* @__PURE__ */ jsx(TriggerAnchor, { "aria-hidden": "true", hidden: true, ref: (node) => {
|
|
27
|
+
context.refs.setReference(node?.nextElementSibling || null);
|
|
28
|
+
} }),
|
|
29
|
+
cloneElement(children, {
|
|
30
|
+
...referenceProps
|
|
31
|
+
})
|
|
32
|
+
] });
|
|
37
33
|
}
|
|
38
|
-
return
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
34
|
+
return /* @__PURE__ */ jsx(
|
|
35
|
+
Trigger,
|
|
36
|
+
{
|
|
37
|
+
ref,
|
|
38
|
+
"data-state": context.open ? "open" : "closed",
|
|
39
|
+
"data-popover-trigger": true,
|
|
40
|
+
"data-testid": `popover-${context.testId}-trigger`,
|
|
41
|
+
...context.getReferenceProps(props),
|
|
42
|
+
children
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
});
|
|
46
|
+
export {
|
|
47
|
+
PopoverTrigger
|
|
48
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const Trigger: import(
|
|
2
|
-
export declare const TriggerAnchor: import(
|
|
1
|
+
export declare const Trigger: import('styled-components').StyledComponent<"span", any, {}, never>;
|
|
2
|
+
export declare const TriggerAnchor: import('styled-components').StyledComponent<"span", any, {}, never>;
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const Trigger = /* @__PURE__ */ styled.span.withConfig({
|
|
3
3
|
displayName: "PopoverTriggerstyles__Trigger",
|
|
4
4
|
componentId: "sc-1irht31-0"
|
|
5
5
|
})(["display:flex;min-width:0;"]);
|
|
6
|
-
|
|
6
|
+
const TriggerAnchor = /* @__PURE__ */ styled.span.withConfig({
|
|
7
7
|
displayName: "PopoverTriggerstyles__TriggerAnchor",
|
|
8
8
|
componentId: "sc-1irht31-1"
|
|
9
|
-
})(["display:contents !important;"]);
|
|
9
|
+
})(["display:contents !important;"]);
|
|
10
|
+
export {
|
|
11
|
+
Trigger,
|
|
12
|
+
TriggerAnchor
|
|
13
|
+
};
|
package/dist/components/index.js
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { PopoverTrigger } from "./PopoverTrigger.js";
|
|
2
|
+
import { PopoverClose } from "./PopoverClose.js";
|
|
3
|
+
import { PopoverContent } from "./PopoverContent.js";
|
|
4
|
+
import { PopoverArrow } from "./PopoverArrow.js";
|
|
5
|
+
export {
|
|
6
|
+
PopoverArrow,
|
|
7
|
+
PopoverClose,
|
|
8
|
+
PopoverContent,
|
|
9
|
+
PopoverTrigger
|
|
10
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
import { UsePopoverReturn } from '../Popover.types';
|
|
3
3
|
export type ContextType = (UsePopoverReturn & {
|
|
4
4
|
setLabelId: Dispatch<SetStateAction<string | undefined>>;
|
|
5
5
|
setDescriptionId: Dispatch<SetStateAction<string | undefined>>;
|
|
6
6
|
}) | null;
|
|
7
|
-
export declare const PopoverContext: import(
|
|
7
|
+
export declare const PopoverContext: import('react').Context<ContextType>;
|
package/dist/contexts/index.js
CHANGED
package/dist/hooks/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { UseListNavigationProps } from '@floating-ui/react';
|
|
2
2
|
export declare const useListNavigationConfig: (listNavigationConfig?: UseListNavigationProps) => {
|
|
3
3
|
listRef: React.MutableRefObject<Array<HTMLElement | null>>;
|
|
4
4
|
activeIndex: number | null;
|
|
@@ -19,6 +19,6 @@ export declare const useListNavigationConfig: (listNavigationConfig?: UseListNav
|
|
|
19
19
|
cols?: number;
|
|
20
20
|
scrollItemIntoView?: boolean | ScrollIntoViewOptions;
|
|
21
21
|
virtualItemRef?: React.MutableRefObject<HTMLElement | null>;
|
|
22
|
-
itemSizes?: import(
|
|
22
|
+
itemSizes?: import('@floating-ui/react').Dimensions[];
|
|
23
23
|
dense?: boolean;
|
|
24
24
|
};
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return _extends({
|
|
1
|
+
import { useRef } from "react";
|
|
2
|
+
const useListNavigationConfig = (listNavigationConfig) => {
|
|
3
|
+
const listRef = useRef([]);
|
|
4
|
+
return {
|
|
6
5
|
activeIndex: null,
|
|
7
6
|
enabled: false,
|
|
8
|
-
listRef
|
|
9
|
-
|
|
10
|
-
};
|
|
7
|
+
listRef,
|
|
8
|
+
...listNavigationConfig
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
useListNavigationConfig
|
|
13
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PopoverOptions, UsePopoverReturn } from '../Popover.types';
|
|
2
2
|
export declare const usePopover: ({ initialOpen, placement, modal, trigger, open: controlledOpen, onOpenChange: setControlledOpen, onDismiss, transitionDuration, getPopupContainer, autoUpdate: autoUpdateWhileMounted, dismissConfig, offsetConfig, flipConfig, shiftConfig, arrowConfig, hoverConfig, testId, componentId, returnFocus, listNavigationConfig, getTransitionConfig, zIndex, }?: PopoverOptions) => UsePopoverReturn;
|
package/dist/hooks/usePopover.js
CHANGED
|
@@ -1,101 +1,86 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { useListNavigationConfig } from
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
getTransitionConfig = _ref$getTransitionCon === void 0 ? getDefaultTransitionConfig : _ref$getTransitionCon,
|
|
41
|
-
zIndex = _ref.zIndex;
|
|
42
|
-
var _useState = useState(initialOpen),
|
|
43
|
-
uncontrolledOpen = _useState[0],
|
|
44
|
-
setUncontrolledOpen = _useState[1];
|
|
45
|
-
var _useState2 = useState(),
|
|
46
|
-
labelId = _useState2[0],
|
|
47
|
-
setLabelId = _useState2[1];
|
|
48
|
-
var _useState3 = useState(),
|
|
49
|
-
descriptionId = _useState3[0],
|
|
50
|
-
setDescriptionId = _useState3[1];
|
|
51
|
-
var open = controlledOpen != null ? controlledOpen : uncontrolledOpen;
|
|
52
|
-
var setOpen = setControlledOpen != null ? setControlledOpen : setUncontrolledOpen;
|
|
53
|
-
var arrowRef = useRef(null);
|
|
54
|
-
var nodeId = useFloatingNodeId();
|
|
55
|
-
var triggerArray = Array.isArray(trigger) ? trigger : [trigger];
|
|
56
|
-
var whileElementsMounted = useMemo(function () {
|
|
1
|
+
import { useState, useRef, useMemo } from "react";
|
|
2
|
+
import { useFloatingNodeId, autoUpdate, useFloating, useListNavigation, useClick, useDelayGroup, useHover, useDismiss, useRole, useInteractions, useTransitionStyles } from "@floating-ui/react";
|
|
3
|
+
import { HOVER_CLOSE_DELAY, HOVER_OPEN_DELAY } from "../Popover.const.js";
|
|
4
|
+
import { getDefaultTransitionConfig } from "../utils/getDefaultTransitionConfig.js";
|
|
5
|
+
import { getMiddleware } from "../utils/getMiddleware.js";
|
|
6
|
+
import { useListNavigationConfig } from "./useListNavigationConfig.js";
|
|
7
|
+
const usePopover = ({
|
|
8
|
+
initialOpen = false,
|
|
9
|
+
placement = "bottom",
|
|
10
|
+
modal,
|
|
11
|
+
trigger = "click",
|
|
12
|
+
open: controlledOpen,
|
|
13
|
+
onOpenChange: setControlledOpen,
|
|
14
|
+
onDismiss,
|
|
15
|
+
transitionDuration,
|
|
16
|
+
getPopupContainer,
|
|
17
|
+
autoUpdate: autoUpdateWhileMounted,
|
|
18
|
+
dismissConfig = {},
|
|
19
|
+
offsetConfig = {},
|
|
20
|
+
flipConfig = {},
|
|
21
|
+
shiftConfig = {},
|
|
22
|
+
arrowConfig = {},
|
|
23
|
+
hoverConfig = {},
|
|
24
|
+
testId = "noTestId",
|
|
25
|
+
componentId,
|
|
26
|
+
returnFocus,
|
|
27
|
+
listNavigationConfig,
|
|
28
|
+
getTransitionConfig = getDefaultTransitionConfig,
|
|
29
|
+
zIndex
|
|
30
|
+
} = {}) => {
|
|
31
|
+
const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
|
|
32
|
+
const [labelId, setLabelId] = useState();
|
|
33
|
+
const [descriptionId, setDescriptionId] = useState();
|
|
34
|
+
const open = controlledOpen ?? uncontrolledOpen;
|
|
35
|
+
const setOpen = setControlledOpen ?? setUncontrolledOpen;
|
|
36
|
+
const arrowRef = useRef(null);
|
|
37
|
+
const nodeId = useFloatingNodeId();
|
|
38
|
+
const triggerArray = Array.isArray(trigger) ? trigger : [trigger];
|
|
39
|
+
const whileElementsMounted = useMemo(() => {
|
|
57
40
|
if (!autoUpdateWhileMounted) {
|
|
58
|
-
return
|
|
41
|
+
return void 0;
|
|
59
42
|
}
|
|
60
43
|
if (autoUpdateWhileMounted === true) {
|
|
61
44
|
return autoUpdate;
|
|
62
45
|
}
|
|
63
|
-
return
|
|
64
|
-
|
|
46
|
+
return (referenceEl, floatingEl, update) => {
|
|
47
|
+
const cleanup = autoUpdate(referenceEl, floatingEl, update, autoUpdateWhileMounted);
|
|
65
48
|
return cleanup;
|
|
66
49
|
};
|
|
67
50
|
}, [autoUpdateWhileMounted]);
|
|
68
|
-
|
|
69
|
-
nodeId
|
|
70
|
-
placement
|
|
71
|
-
open
|
|
72
|
-
onOpenChange:
|
|
51
|
+
const data = useFloating({
|
|
52
|
+
nodeId,
|
|
53
|
+
placement,
|
|
54
|
+
open,
|
|
55
|
+
onOpenChange: (newState, event, reason) => {
|
|
73
56
|
setOpen(newState, event, reason);
|
|
74
|
-
if (dismissConfig.enabled !== false && (reason ===
|
|
75
|
-
onDismiss
|
|
57
|
+
if (dismissConfig.enabled !== false && (reason === "escape-key" || reason === "outside-press")) {
|
|
58
|
+
onDismiss?.(event, reason);
|
|
76
59
|
}
|
|
77
60
|
},
|
|
78
|
-
whileElementsMounted
|
|
61
|
+
whileElementsMounted,
|
|
79
62
|
middleware: getMiddleware({
|
|
80
|
-
offsetConfig
|
|
81
|
-
flipConfig
|
|
82
|
-
shiftConfig
|
|
83
|
-
arrowConfig:
|
|
63
|
+
offsetConfig,
|
|
64
|
+
flipConfig,
|
|
65
|
+
shiftConfig,
|
|
66
|
+
arrowConfig: {
|
|
67
|
+
...arrowConfig,
|
|
84
68
|
element: arrowRef.current
|
|
85
|
-
}
|
|
69
|
+
}
|
|
86
70
|
})
|
|
87
71
|
});
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
enabled: isClickEnabled && controlledOpen ===
|
|
72
|
+
const context = data.context;
|
|
73
|
+
const isClickEnabled = triggerArray.includes("click");
|
|
74
|
+
const isHoverEnabled = triggerArray.includes("hover");
|
|
75
|
+
const listNavConfig = useListNavigationConfig(listNavigationConfig);
|
|
76
|
+
const listNav = useListNavigation(context, listNavConfig);
|
|
77
|
+
const click = useClick(context, {
|
|
78
|
+
enabled: isClickEnabled && controlledOpen === void 0
|
|
95
79
|
});
|
|
96
|
-
|
|
97
|
-
groupDelay
|
|
98
|
-
|
|
80
|
+
const {
|
|
81
|
+
delay: groupDelay
|
|
82
|
+
} = useDelayGroup(context);
|
|
83
|
+
const hover = useHover(context, {
|
|
99
84
|
enabled: isHoverEnabled,
|
|
100
85
|
// All hover popovers use their local FloatingDelayGroup delay
|
|
101
86
|
// Nested components should wrap content in their own FloatingDelayGroup for isolation
|
|
@@ -103,33 +88,38 @@ export var usePopover = function usePopover(_temp) {
|
|
|
103
88
|
delay: groupDelay || {
|
|
104
89
|
open: HOVER_OPEN_DELAY,
|
|
105
90
|
close: HOVER_CLOSE_DELAY
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
91
|
+
},
|
|
92
|
+
...hoverConfig
|
|
93
|
+
});
|
|
94
|
+
const dismiss = useDismiss(context, dismissConfig);
|
|
95
|
+
const role = useRole(context);
|
|
96
|
+
const interactions = useInteractions([click, hover, dismiss, role, listNav]);
|
|
97
|
+
const {
|
|
98
|
+
styles,
|
|
99
|
+
isMounted
|
|
100
|
+
} = useTransitionStyles(context, {
|
|
101
|
+
duration: transitionDuration,
|
|
102
|
+
...getTransitionConfig(data)
|
|
103
|
+
});
|
|
104
|
+
return useMemo(() => ({
|
|
105
|
+
open: isMounted,
|
|
106
|
+
setOpen,
|
|
107
|
+
transitionStyles: typeof transitionDuration === "number" ? styles : void 0,
|
|
108
|
+
...interactions,
|
|
109
|
+
...data,
|
|
110
|
+
modal,
|
|
111
|
+
labelId,
|
|
112
|
+
getPopupContainer,
|
|
113
|
+
descriptionId,
|
|
114
|
+
setLabelId,
|
|
115
|
+
setDescriptionId,
|
|
116
|
+
testId,
|
|
117
|
+
zIndex,
|
|
118
|
+
returnFocus,
|
|
119
|
+
componentId,
|
|
120
|
+
arrowRef
|
|
121
|
+
}), [getPopupContainer, isMounted, setOpen, transitionDuration, styles, interactions, data, modal, labelId, descriptionId, zIndex, testId, returnFocus, componentId]);
|
|
122
|
+
};
|
|
123
|
+
export {
|
|
124
|
+
usePopover
|
|
125
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ContextType } from '../contexts';
|
|
2
2
|
export declare const usePopoverContext: () => Exclude<ContextType, null>;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
import { useContext } from
|
|
2
|
-
import { PopoverContext } from
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { useContext } from "react";
|
|
2
|
+
import { PopoverContext } from "../contexts/PopoverContext.js";
|
|
3
|
+
const usePopoverContext = () => {
|
|
4
|
+
const context = useContext(PopoverContext);
|
|
5
5
|
if (context === null) {
|
|
6
|
-
throw new Error(
|
|
6
|
+
throw new Error("Popover components must be wrapped in <Popover />");
|
|
7
7
|
}
|
|
8
8
|
return context;
|
|
9
|
-
};
|
|
9
|
+
};
|
|
10
|
+
export {
|
|
11
|
+
usePopoverContext
|
|
12
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { Popover, Popover as Popover2 } from "./Popover.js";
|
|
2
|
+
import { PopoverTrigger } from "./components/PopoverTrigger.js";
|
|
3
|
+
import { PopoverClose } from "./components/PopoverClose.js";
|
|
4
|
+
import { PopoverContent } from "./components/PopoverContent.js";
|
|
5
|
+
import { PopoverArrow } from "./components/PopoverArrow.js";
|
|
6
|
+
import { FloatingDelayGroup, limitShift } from "@floating-ui/react";
|
|
7
|
+
import { getPlacement } from "./utils/getPlacement.js";
|
|
8
|
+
import { HOVER_CLOSE_DELAY, HOVER_OPEN_DELAY, PLACEMENT_MAP } from "./Popover.const.js";
|
|
9
|
+
export {
|
|
10
|
+
FloatingDelayGroup,
|
|
11
|
+
HOVER_CLOSE_DELAY,
|
|
12
|
+
HOVER_OPEN_DELAY,
|
|
13
|
+
PLACEMENT_MAP,
|
|
14
|
+
Popover,
|
|
15
|
+
PopoverArrow,
|
|
16
|
+
PopoverClose,
|
|
17
|
+
PopoverContent,
|
|
18
|
+
PopoverTrigger,
|
|
19
|
+
Popover2 as default,
|
|
20
|
+
getPlacement,
|
|
21
|
+
limitShift
|
|
22
|
+
};
|
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
File without changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { UseTransitionStylesProps } from '@floating-ui/react';
|
|
2
2
|
export declare const getDefaultTransitionConfig: () => Partial<UseTransitionStylesProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
const getDefaultTransitionConfig = () => {
|
|
2
2
|
return {
|
|
3
3
|
open: {
|
|
4
4
|
opacity: 1
|
|
@@ -7,4 +7,7 @@ export var getDefaultTransitionConfig = function getDefaultTransitionConfig() {
|
|
|
7
7
|
opacity: 0
|
|
8
8
|
}
|
|
9
9
|
};
|
|
10
|
-
};
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
getDefaultTransitionConfig
|
|
13
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { ArrowOptions } from '@floating-ui/react';
|
|
2
|
+
import { FlipConfig, OffsetConfig, ShiftConfig } from '../Popover.types';
|
|
3
3
|
type GetMiddleware = {
|
|
4
4
|
offsetConfig: OffsetConfig;
|
|
5
5
|
flipConfig: FlipConfig;
|
|
@@ -9,6 +9,6 @@ type GetMiddleware = {
|
|
|
9
9
|
export declare const getMiddleware: ({ offsetConfig, flipConfig, shiftConfig, arrowConfig, }: GetMiddleware) => {
|
|
10
10
|
name: string;
|
|
11
11
|
options?: any;
|
|
12
|
-
fn: (state: import(
|
|
12
|
+
fn: (state: import('@floating-ui/react').MiddlewareState) => import('@floating-ui/react').MiddlewareReturn | Promise<import('@floating-ui/react').MiddlewareReturn>;
|
|
13
13
|
}[];
|
|
14
14
|
export {};
|
|
@@ -1,26 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
_ref4$enabled = _ref4.enabled,
|
|
22
|
-
shiftEnabled = _ref4$enabled === void 0 ? true : _ref4$enabled,
|
|
23
|
-
shiftOptions = _objectWithoutPropertiesLoose(_ref4, _excluded3);
|
|
1
|
+
import { offset, flip, shift, arrow } from "@floating-ui/react";
|
|
2
|
+
const getMiddleware = ({
|
|
3
|
+
offsetConfig,
|
|
4
|
+
flipConfig,
|
|
5
|
+
shiftConfig,
|
|
6
|
+
arrowConfig
|
|
7
|
+
}) => {
|
|
8
|
+
const middleware = [];
|
|
9
|
+
const {
|
|
10
|
+
enabled: offsetEnabled = true,
|
|
11
|
+
...offsetOptions
|
|
12
|
+
} = offsetConfig || {};
|
|
13
|
+
const {
|
|
14
|
+
enabled: flipEnabled = true,
|
|
15
|
+
...flipOptions
|
|
16
|
+
} = flipConfig || {};
|
|
17
|
+
const {
|
|
18
|
+
enabled: shiftEnabled = true,
|
|
19
|
+
...shiftOptions
|
|
20
|
+
} = shiftConfig || {};
|
|
24
21
|
if (offsetEnabled) {
|
|
25
22
|
middleware.push(offset(offsetOptions));
|
|
26
23
|
}
|
|
@@ -30,8 +27,11 @@ export var getMiddleware = function getMiddleware(_ref) {
|
|
|
30
27
|
if (shiftEnabled) {
|
|
31
28
|
middleware.push(shift(shiftOptions));
|
|
32
29
|
}
|
|
33
|
-
if (arrowConfig
|
|
30
|
+
if (arrowConfig?.element) {
|
|
34
31
|
middleware.push(arrow(arrowConfig));
|
|
35
32
|
}
|
|
36
33
|
return middleware;
|
|
37
|
-
};
|
|
34
|
+
};
|
|
35
|
+
export {
|
|
36
|
+
getMiddleware
|
|
37
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { Placement } from '@floating-ui/react';
|
|
2
|
+
import { LegacyPlacement } from '../Popover.types';
|
|
3
3
|
export declare const getPlacement: (placement: LegacyPlacement) => Placement;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import { PLACEMENT_MAP } from
|
|
2
|
-
|
|
1
|
+
import { PLACEMENT_MAP } from "../Popover.const.js";
|
|
2
|
+
const getPlacement = (placement) => {
|
|
3
3
|
return PLACEMENT_MAP[placement];
|
|
4
|
-
};
|
|
4
|
+
};
|
|
5
|
+
export {
|
|
6
|
+
getPlacement
|
|
7
|
+
};
|
package/dist/utils/index.js
CHANGED
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { getDefaultTransitionConfig } from "./getDefaultTransitionConfig.js";
|
|
2
|
+
import { getMiddleware } from "./getMiddleware.js";
|
|
3
|
+
export {
|
|
4
|
+
getDefaultTransitionConfig,
|
|
5
|
+
getMiddleware
|
|
6
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-popover",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.3",
|
|
4
4
|
"description": "Popover UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"prepublish": "pnpm run build",
|
|
25
25
|
"types": "tsc --noEmit",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"react": ">=16.9.0 <= 18.3.1",
|
|
46
46
|
"styled-components": "^5.3.3"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
|
|
49
49
|
}
|