@festo-ui/react 9.0.0-dev.657 → 9.0.0-dev.661
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.
|
@@ -6,6 +6,7 @@ export interface PopoverProps extends ClassNamePropsWithChildren {
|
|
|
6
6
|
popoverContent: React.ReactNode;
|
|
7
7
|
position?: Placement;
|
|
8
8
|
fallbackPositions?: Placement[];
|
|
9
|
+
defaultOpen?: boolean;
|
|
9
10
|
open?: boolean;
|
|
10
11
|
onStatusChange?: (status: boolean) => void;
|
|
11
12
|
wrapper?: (children: React.ReactNode) => React.ReactNode;
|
|
@@ -13,6 +14,7 @@ export interface PopoverProps extends ClassNamePropsWithChildren {
|
|
|
13
14
|
containerClassName?: string;
|
|
14
15
|
stopPropagation?: boolean;
|
|
15
16
|
arrow?: boolean;
|
|
17
|
+
onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
16
18
|
}
|
|
17
|
-
declare function Popover({ popoverContent, children, position, fallbackPositions, open, onStatusChange, wrapper, className, flip, containerClassName, stopPropagation, arrow, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
declare function Popover({ popoverContent, children, position, fallbackPositions, defaultOpen, open, onStatusChange, wrapper, className, flip, containerClassName, stopPropagation, arrow, onClick, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
18
20
|
export default Popover;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useRef, useState } from "react";
|
|
2
2
|
import { usePopper } from "react-popper";
|
|
3
3
|
import classNames from "classnames";
|
|
4
4
|
import useOnClickOutside from "../../../helper/useOnClickOutside.js";
|
|
5
5
|
import useForkRef from "../../../helper/useForkRef.js";
|
|
6
|
+
import useControlled from "../../../helper/useControlled.js";
|
|
6
7
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
7
8
|
function Popover(_ref) {
|
|
8
9
|
let {
|
|
@@ -10,28 +11,27 @@ function Popover(_ref) {
|
|
|
10
11
|
children,
|
|
11
12
|
position,
|
|
12
13
|
fallbackPositions,
|
|
13
|
-
|
|
14
|
+
defaultOpen = false,
|
|
15
|
+
open,
|
|
14
16
|
onStatusChange,
|
|
15
17
|
wrapper,
|
|
16
18
|
className,
|
|
17
19
|
flip = true,
|
|
18
20
|
containerClassName,
|
|
19
21
|
stopPropagation,
|
|
20
|
-
arrow = true
|
|
22
|
+
arrow = true,
|
|
23
|
+
onClick
|
|
21
24
|
} = _ref;
|
|
22
|
-
const [showPopper, setShowPopper] =
|
|
25
|
+
const [showPopper, setShowPopper] = useControlled({
|
|
26
|
+
controlled: open,
|
|
27
|
+
default: defaultOpen
|
|
28
|
+
});
|
|
23
29
|
const [popperElement, setPopperElement] = useState(null);
|
|
24
30
|
const [arrowElement, setArrowElement] = useState(null);
|
|
25
31
|
const referenceElement = useRef(null);
|
|
26
32
|
const popperElRef = useRef(null);
|
|
27
33
|
const combinedRef = useForkRef(popperElRef, setPopperElement);
|
|
28
34
|
const classes = classNames(className);
|
|
29
|
-
const isControlled = onStatusChange !== undefined;
|
|
30
|
-
useEffect(() => {
|
|
31
|
-
if (isControlled) {
|
|
32
|
-
setShowPopper(open);
|
|
33
|
-
}
|
|
34
|
-
}, [open, isControlled]);
|
|
35
35
|
const {
|
|
36
36
|
styles,
|
|
37
37
|
attributes
|
|
@@ -59,9 +59,7 @@ function Popover(_ref) {
|
|
|
59
59
|
e?.stopPropagation();
|
|
60
60
|
e?.preventDefault();
|
|
61
61
|
}
|
|
62
|
-
|
|
63
|
-
setShowPopper(status);
|
|
64
|
-
}
|
|
62
|
+
setShowPopper(status);
|
|
65
63
|
onStatusChange?.(status);
|
|
66
64
|
};
|
|
67
65
|
function closePopover(event) {
|
|
@@ -81,6 +79,14 @@ function Popover(_ref) {
|
|
|
81
79
|
handleChange(undefined, true);
|
|
82
80
|
}
|
|
83
81
|
}
|
|
82
|
+
function handleTriggerClick(event) {
|
|
83
|
+
onClick?.(event);
|
|
84
|
+
if (event.defaultPrevented) {
|
|
85
|
+
setShowPopper(!showPopper);
|
|
86
|
+
} else {
|
|
87
|
+
handleChange(event, !showPopper);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
84
90
|
const childrenWrapper = /*#__PURE__*/_jsx("div", {
|
|
85
91
|
tabIndex: 0,
|
|
86
92
|
role: "button",
|
|
@@ -88,7 +94,7 @@ function Popover(_ref) {
|
|
|
88
94
|
ref: referenceElement,
|
|
89
95
|
onKeyDown: handleKeyDown,
|
|
90
96
|
onKeyUp: handleKeyUp,
|
|
91
|
-
onClick:
|
|
97
|
+
onClick: handleTriggerClick,
|
|
92
98
|
children: children
|
|
93
99
|
});
|
|
94
100
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
@@ -9,6 +9,7 @@ var _reactPopper = require("react-popper");
|
|
|
9
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
10
|
var _useOnClickOutside = _interopRequireDefault(require("../../../helper/useOnClickOutside.js"));
|
|
11
11
|
var _useForkRef = _interopRequireDefault(require("../../../helper/useForkRef.js"));
|
|
12
|
+
var _useControlled = _interopRequireDefault(require("../../../helper/useControlled.js"));
|
|
12
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
@@ -19,28 +20,27 @@ function Popover(_ref) {
|
|
|
19
20
|
children,
|
|
20
21
|
position,
|
|
21
22
|
fallbackPositions,
|
|
22
|
-
|
|
23
|
+
defaultOpen = false,
|
|
24
|
+
open,
|
|
23
25
|
onStatusChange,
|
|
24
26
|
wrapper,
|
|
25
27
|
className,
|
|
26
28
|
flip = true,
|
|
27
29
|
containerClassName,
|
|
28
30
|
stopPropagation,
|
|
29
|
-
arrow = true
|
|
31
|
+
arrow = true,
|
|
32
|
+
onClick
|
|
30
33
|
} = _ref;
|
|
31
|
-
const [showPopper, setShowPopper] = (0,
|
|
34
|
+
const [showPopper, setShowPopper] = (0, _useControlled.default)({
|
|
35
|
+
controlled: open,
|
|
36
|
+
default: defaultOpen
|
|
37
|
+
});
|
|
32
38
|
const [popperElement, setPopperElement] = (0, _react.useState)(null);
|
|
33
39
|
const [arrowElement, setArrowElement] = (0, _react.useState)(null);
|
|
34
40
|
const referenceElement = (0, _react.useRef)(null);
|
|
35
41
|
const popperElRef = (0, _react.useRef)(null);
|
|
36
42
|
const combinedRef = (0, _useForkRef.default)(popperElRef, setPopperElement);
|
|
37
43
|
const classes = (0, _classnames.default)(className);
|
|
38
|
-
const isControlled = onStatusChange !== undefined;
|
|
39
|
-
(0, _react.useEffect)(() => {
|
|
40
|
-
if (isControlled) {
|
|
41
|
-
setShowPopper(open);
|
|
42
|
-
}
|
|
43
|
-
}, [open, isControlled]);
|
|
44
44
|
const {
|
|
45
45
|
styles,
|
|
46
46
|
attributes
|
|
@@ -68,9 +68,7 @@ function Popover(_ref) {
|
|
|
68
68
|
e?.stopPropagation();
|
|
69
69
|
e?.preventDefault();
|
|
70
70
|
}
|
|
71
|
-
|
|
72
|
-
setShowPopper(status);
|
|
73
|
-
}
|
|
71
|
+
setShowPopper(status);
|
|
74
72
|
onStatusChange?.(status);
|
|
75
73
|
};
|
|
76
74
|
function closePopover(event) {
|
|
@@ -90,6 +88,14 @@ function Popover(_ref) {
|
|
|
90
88
|
handleChange(undefined, true);
|
|
91
89
|
}
|
|
92
90
|
}
|
|
91
|
+
function handleTriggerClick(event) {
|
|
92
|
+
onClick?.(event);
|
|
93
|
+
if (event.defaultPrevented) {
|
|
94
|
+
setShowPopper(!showPopper);
|
|
95
|
+
} else {
|
|
96
|
+
handleChange(event, !showPopper);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
93
99
|
const childrenWrapper = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
94
100
|
tabIndex: 0,
|
|
95
101
|
role: "button",
|
|
@@ -97,7 +103,7 @@ function Popover(_ref) {
|
|
|
97
103
|
ref: referenceElement,
|
|
98
104
|
onKeyDown: handleKeyDown,
|
|
99
105
|
onKeyUp: handleKeyUp,
|
|
100
|
-
onClick:
|
|
106
|
+
onClick: handleTriggerClick,
|
|
101
107
|
children: children
|
|
102
108
|
});
|
|
103
109
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
package/package.json
CHANGED