colibri-ui 0.8.65 → 0.8.66
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/Dropdown/index.js +26 -17
- package/Dropdown/index.props.d.ts +7 -6
- package/esm/Dropdown/index.js +27 -18
- package/esm/Dropdown/index.props.d.ts +7 -6
- package/package.json +1 -1
package/Dropdown/index.js
CHANGED
|
@@ -23,6 +23,8 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
23
23
|
zIndex = _ref.zIndex,
|
|
24
24
|
fontSize = _ref.fontSize,
|
|
25
25
|
disabled = _ref.disabled,
|
|
26
|
+
_ref$defaultVisible = _ref.defaultVisible,
|
|
27
|
+
defaultVisible = _ref$defaultVisible === void 0 ? false : _ref$defaultVisible,
|
|
26
28
|
onVisibleChange = _ref.onVisibleChange,
|
|
27
29
|
overlay = _ref.overlay,
|
|
28
30
|
_ref$placement = _ref.placement,
|
|
@@ -31,8 +33,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
31
33
|
strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
|
|
32
34
|
_ref$trigger = _ref.trigger,
|
|
33
35
|
trigger = _ref$trigger === void 0 ? ["hover"] : _ref$trigger,
|
|
34
|
-
|
|
35
|
-
visibleProp = _ref$visible === void 0 ? true : _ref$visible,
|
|
36
|
+
visibleProp = _ref.visible,
|
|
36
37
|
_ref$preventOverflow = _ref.preventOverflow,
|
|
37
38
|
preventOverflow = _ref$preventOverflow === void 0 ? false : _ref$preventOverflow,
|
|
38
39
|
_ref$preventAutoClose = _ref.preventAutoClose,
|
|
@@ -42,14 +43,23 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
42
43
|
_ref$samewidth = _ref.samewidth,
|
|
43
44
|
samewidth = _ref$samewidth === void 0 ? false : _ref$samewidth;
|
|
44
45
|
var _a;
|
|
45
|
-
var _useState = React.useState(
|
|
46
|
+
var _useState = React.useState(defaultVisible),
|
|
46
47
|
_useState2 = _slicedToArray__default.default(_useState, 2),
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
var
|
|
48
|
+
internalVisible = _useState2[0],
|
|
49
|
+
setInternalVisible = _useState2[1];
|
|
50
|
+
var isControlled = visibleProp !== undefined;
|
|
51
|
+
var visible = isControlled ? visibleProp : internalVisible;
|
|
52
|
+
var isVisible = visible && !disabled;
|
|
53
|
+
var setOpen = React.useCallback(function (nextVisible) {
|
|
54
|
+
if (disabled && nextVisible) return;
|
|
55
|
+
if (!isControlled) {
|
|
56
|
+
setInternalVisible(nextVisible);
|
|
57
|
+
}
|
|
58
|
+
onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible);
|
|
59
|
+
}, [disabled, isControlled, onVisibleChange]);
|
|
50
60
|
var _useFloating = react.useFloating({
|
|
51
61
|
open: isVisible,
|
|
52
|
-
onOpenChange:
|
|
62
|
+
onOpenChange: setOpen,
|
|
53
63
|
placement: placement,
|
|
54
64
|
strategy: strategy,
|
|
55
65
|
whileElementsMounted: react.autoUpdate,
|
|
@@ -61,15 +71,17 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
61
71
|
update = _useFloating.update,
|
|
62
72
|
finalPlacement = _useFloating.placement;
|
|
63
73
|
var hover = react.useHover(context, {
|
|
64
|
-
enabled: trigger.includes("hover")
|
|
74
|
+
enabled: !disabled && trigger.includes("hover")
|
|
65
75
|
});
|
|
66
76
|
var click = react.useClick(context, {
|
|
67
|
-
enabled: trigger.includes("click")
|
|
77
|
+
enabled: !disabled && trigger.includes("click")
|
|
68
78
|
});
|
|
69
79
|
var focus = react.useFocus(context, {
|
|
70
|
-
enabled: trigger.includes("focus")
|
|
80
|
+
enabled: !disabled && trigger.includes("focus")
|
|
81
|
+
});
|
|
82
|
+
var dismiss = react.useDismiss(context, {
|
|
83
|
+
outsidePress: false
|
|
71
84
|
});
|
|
72
|
-
var dismiss = react.useDismiss(context);
|
|
73
85
|
var role = react.useRole(context, {
|
|
74
86
|
role: "menu"
|
|
75
87
|
});
|
|
@@ -84,12 +96,9 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
84
96
|
var onClickOverlay = React.useCallback(function (event) {
|
|
85
97
|
event.stopPropagation();
|
|
86
98
|
if (!preventAutoClose) {
|
|
87
|
-
|
|
99
|
+
setOpen(false);
|
|
88
100
|
}
|
|
89
|
-
}, [preventAutoClose]);
|
|
90
|
-
React.useEffect(function () {
|
|
91
|
-
if (onVisibleChange) onVisibleChange(visible);
|
|
92
|
-
}, [onVisibleChange, visible]);
|
|
101
|
+
}, [preventAutoClose, setOpen]);
|
|
93
102
|
React.useEffect(function () {
|
|
94
103
|
if (update) update();
|
|
95
104
|
}, [update, visible]);
|
|
@@ -98,7 +107,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
98
107
|
tabIndex: 0
|
|
99
108
|
}, getReferenceProps(reference.props))), isVisible && (/*#__PURE__*/React__default.default.createElement(react.FloatingPortal, null, /*#__PURE__*/React__default.default.createElement(index.default, {
|
|
100
109
|
onClick: function onClick() {
|
|
101
|
-
return
|
|
110
|
+
return setOpen(false);
|
|
102
111
|
}
|
|
103
112
|
}, /*#__PURE__*/React__default.default.createElement("div", Object.assign({
|
|
104
113
|
ref: refs.setFloating,
|
|
@@ -2,17 +2,18 @@ import type { ReactNode } from "react";
|
|
|
2
2
|
import type { Placement, Strategy } from "@floating-ui/react";
|
|
3
3
|
export type Trigger = "click" | "hover" | "focus";
|
|
4
4
|
export type DropdownProps = {
|
|
5
|
-
|
|
6
|
-
fontSize?: number;
|
|
5
|
+
defaultVisible?: boolean;
|
|
7
6
|
disabled?: boolean;
|
|
7
|
+
flip?: boolean;
|
|
8
|
+
fontSize?: number;
|
|
8
9
|
onVisibleChange?: (visible: boolean) => void;
|
|
9
10
|
overlay: ReactNode;
|
|
10
11
|
placement?: Placement;
|
|
11
|
-
strategy?: Strategy;
|
|
12
|
-
trigger?: [Trigger, ...Trigger[]];
|
|
13
|
-
visible?: boolean;
|
|
14
12
|
preventOverflow?: boolean;
|
|
15
13
|
preventAutoClose?: boolean;
|
|
16
|
-
flip?: boolean;
|
|
17
14
|
samewidth?: boolean;
|
|
15
|
+
strategy?: Strategy;
|
|
16
|
+
trigger?: [Trigger, ...Trigger[]];
|
|
17
|
+
visible?: boolean;
|
|
18
|
+
zIndex?: number;
|
|
18
19
|
};
|
package/esm/Dropdown/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
2
2
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
3
|
-
import React__default, { useState, useMemo, Children,
|
|
3
|
+
import React__default, { useState, useCallback, useMemo, Children, useEffect } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useFloating, autoUpdate, offset, flip, shift, useHover, useClick, useFocus, useDismiss, useRole, useInteractions, FloatingPortal } from '@floating-ui/react';
|
|
6
6
|
import ClickOutside from '../ClickOutside/index.js';
|
|
@@ -11,6 +11,8 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
11
11
|
zIndex = _ref.zIndex,
|
|
12
12
|
fontSize = _ref.fontSize,
|
|
13
13
|
disabled = _ref.disabled,
|
|
14
|
+
_ref$defaultVisible = _ref.defaultVisible,
|
|
15
|
+
defaultVisible = _ref$defaultVisible === void 0 ? false : _ref$defaultVisible,
|
|
14
16
|
onVisibleChange = _ref.onVisibleChange,
|
|
15
17
|
overlay = _ref.overlay,
|
|
16
18
|
_ref$placement = _ref.placement,
|
|
@@ -19,8 +21,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
19
21
|
strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
|
|
20
22
|
_ref$trigger = _ref.trigger,
|
|
21
23
|
trigger = _ref$trigger === void 0 ? ["hover"] : _ref$trigger,
|
|
22
|
-
|
|
23
|
-
visibleProp = _ref$visible === void 0 ? true : _ref$visible,
|
|
24
|
+
visibleProp = _ref.visible,
|
|
24
25
|
_ref$preventOverflow = _ref.preventOverflow,
|
|
25
26
|
preventOverflow = _ref$preventOverflow === void 0 ? false : _ref$preventOverflow,
|
|
26
27
|
_ref$preventAutoClose = _ref.preventAutoClose,
|
|
@@ -30,14 +31,23 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
30
31
|
_ref$samewidth = _ref.samewidth,
|
|
31
32
|
samewidth = _ref$samewidth === void 0 ? false : _ref$samewidth;
|
|
32
33
|
var _a;
|
|
33
|
-
var _useState = useState(
|
|
34
|
+
var _useState = useState(defaultVisible),
|
|
34
35
|
_useState2 = _slicedToArray(_useState, 2),
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
var
|
|
36
|
+
internalVisible = _useState2[0],
|
|
37
|
+
setInternalVisible = _useState2[1];
|
|
38
|
+
var isControlled = visibleProp !== undefined;
|
|
39
|
+
var visible = isControlled ? visibleProp : internalVisible;
|
|
40
|
+
var isVisible = visible && !disabled;
|
|
41
|
+
var setOpen = useCallback(function (nextVisible) {
|
|
42
|
+
if (disabled && nextVisible) return;
|
|
43
|
+
if (!isControlled) {
|
|
44
|
+
setInternalVisible(nextVisible);
|
|
45
|
+
}
|
|
46
|
+
onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible);
|
|
47
|
+
}, [disabled, isControlled, onVisibleChange]);
|
|
38
48
|
var _useFloating = useFloating({
|
|
39
49
|
open: isVisible,
|
|
40
|
-
onOpenChange:
|
|
50
|
+
onOpenChange: setOpen,
|
|
41
51
|
placement: placement,
|
|
42
52
|
strategy: strategy,
|
|
43
53
|
whileElementsMounted: autoUpdate,
|
|
@@ -49,15 +59,17 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
49
59
|
update = _useFloating.update,
|
|
50
60
|
finalPlacement = _useFloating.placement;
|
|
51
61
|
var hover = useHover(context, {
|
|
52
|
-
enabled: trigger.includes("hover")
|
|
62
|
+
enabled: !disabled && trigger.includes("hover")
|
|
53
63
|
});
|
|
54
64
|
var click = useClick(context, {
|
|
55
|
-
enabled: trigger.includes("click")
|
|
65
|
+
enabled: !disabled && trigger.includes("click")
|
|
56
66
|
});
|
|
57
67
|
var focus = useFocus(context, {
|
|
58
|
-
enabled: trigger.includes("focus")
|
|
68
|
+
enabled: !disabled && trigger.includes("focus")
|
|
69
|
+
});
|
|
70
|
+
var dismiss = useDismiss(context, {
|
|
71
|
+
outsidePress: false
|
|
59
72
|
});
|
|
60
|
-
var dismiss = useDismiss(context);
|
|
61
73
|
var role = useRole(context, {
|
|
62
74
|
role: "menu"
|
|
63
75
|
});
|
|
@@ -72,12 +84,9 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
72
84
|
var onClickOverlay = useCallback(function (event) {
|
|
73
85
|
event.stopPropagation();
|
|
74
86
|
if (!preventAutoClose) {
|
|
75
|
-
|
|
87
|
+
setOpen(false);
|
|
76
88
|
}
|
|
77
|
-
}, [preventAutoClose]);
|
|
78
|
-
useEffect(function () {
|
|
79
|
-
if (onVisibleChange) onVisibleChange(visible);
|
|
80
|
-
}, [onVisibleChange, visible]);
|
|
89
|
+
}, [preventAutoClose, setOpen]);
|
|
81
90
|
useEffect(function () {
|
|
82
91
|
if (update) update();
|
|
83
92
|
}, [update, visible]);
|
|
@@ -86,7 +95,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
86
95
|
tabIndex: 0
|
|
87
96
|
}, getReferenceProps(reference.props))), isVisible && (/*#__PURE__*/React__default.createElement(FloatingPortal, null, /*#__PURE__*/React__default.createElement(ClickOutside, {
|
|
88
97
|
onClick: function onClick() {
|
|
89
|
-
return
|
|
98
|
+
return setOpen(false);
|
|
90
99
|
}
|
|
91
100
|
}, /*#__PURE__*/React__default.createElement("div", Object.assign({
|
|
92
101
|
ref: refs.setFloating,
|
|
@@ -2,17 +2,18 @@ import type { ReactNode } from "react";
|
|
|
2
2
|
import type { Placement, Strategy } from "@floating-ui/react";
|
|
3
3
|
export type Trigger = "click" | "hover" | "focus";
|
|
4
4
|
export type DropdownProps = {
|
|
5
|
-
|
|
6
|
-
fontSize?: number;
|
|
5
|
+
defaultVisible?: boolean;
|
|
7
6
|
disabled?: boolean;
|
|
7
|
+
flip?: boolean;
|
|
8
|
+
fontSize?: number;
|
|
8
9
|
onVisibleChange?: (visible: boolean) => void;
|
|
9
10
|
overlay: ReactNode;
|
|
10
11
|
placement?: Placement;
|
|
11
|
-
strategy?: Strategy;
|
|
12
|
-
trigger?: [Trigger, ...Trigger[]];
|
|
13
|
-
visible?: boolean;
|
|
14
12
|
preventOverflow?: boolean;
|
|
15
13
|
preventAutoClose?: boolean;
|
|
16
|
-
flip?: boolean;
|
|
17
14
|
samewidth?: boolean;
|
|
15
|
+
strategy?: Strategy;
|
|
16
|
+
trigger?: [Trigger, ...Trigger[]];
|
|
17
|
+
visible?: boolean;
|
|
18
|
+
zIndex?: number;
|
|
18
19
|
};
|