@tecsinapse/cortex-react 1.3.0-beta.5 → 1.3.0-beta.7
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/dist/cjs/components/Select/Content.js +5 -4
- package/dist/cjs/components/Select/Popover.js +1 -1
- package/dist/cjs/components/Tooltip.js +45 -38
- package/dist/cjs/hooks/useOutsideClickListener.js +1 -3
- package/dist/cjs/index.js +2 -1
- package/dist/esm/components/Select/Content.js +6 -5
- package/dist/esm/components/Select/Popover.js +1 -1
- package/dist/esm/components/Tooltip.js +42 -38
- package/dist/esm/hooks/useOutsideClickListener.js +1 -3
- package/dist/esm/index.js +1 -1
- package/dist/types/components/Tooltip.d.ts +1 -1
- package/package.json +2 -2
|
@@ -6,8 +6,8 @@ require('react-aria');
|
|
|
6
6
|
require('react-stately');
|
|
7
7
|
var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
|
|
8
8
|
require('@floating-ui/react');
|
|
9
|
-
var context = require('./context.js');
|
|
10
9
|
var Context = require('../Popover/Context.js');
|
|
10
|
+
var context = require('./context.js');
|
|
11
11
|
|
|
12
12
|
const Content = ({
|
|
13
13
|
children,
|
|
@@ -15,12 +15,13 @@ const Content = ({
|
|
|
15
15
|
labelExtractor,
|
|
16
16
|
value
|
|
17
17
|
}) => {
|
|
18
|
-
const { setIsOpen
|
|
18
|
+
const { setIsOpen } = Context.usePopoverContext();
|
|
19
|
+
const ref = React.useRef(null);
|
|
19
20
|
useOutsideClickListener.useOutsideClickListener({
|
|
20
|
-
ref
|
|
21
|
+
ref,
|
|
21
22
|
onClickOutside: () => setIsOpen(false)
|
|
22
23
|
});
|
|
23
|
-
return /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white" }, children));
|
|
24
|
+
return /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children));
|
|
24
25
|
};
|
|
25
26
|
|
|
26
27
|
module.exports = Content;
|
|
@@ -4,7 +4,7 @@ var React = require('react');
|
|
|
4
4
|
var index = require('../Popover/index.js');
|
|
5
5
|
|
|
6
6
|
const SelectPopover = ({ children }) => {
|
|
7
|
-
return /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll" }, children);
|
|
7
|
+
return /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col" }, children);
|
|
8
8
|
};
|
|
9
9
|
|
|
10
10
|
exports.SelectPopover = SelectPopover;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
6
|
var react = require('@floating-ui/react');
|
|
5
7
|
require('@internationalized/date');
|
|
@@ -7,41 +9,46 @@ require('react-aria');
|
|
|
7
9
|
require('react-stately');
|
|
8
10
|
var useFloatingLogic = require('../hooks/useFloatingLogic.js');
|
|
9
11
|
|
|
10
|
-
React.forwardRef(
|
|
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
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
12
|
+
const Tooltip = React.forwardRef(
|
|
13
|
+
(props, ref) => {
|
|
14
|
+
const {
|
|
15
|
+
children,
|
|
16
|
+
text,
|
|
17
|
+
trigger = "hover",
|
|
18
|
+
placement = "top",
|
|
19
|
+
width,
|
|
20
|
+
height
|
|
21
|
+
} = props;
|
|
22
|
+
const arrowRef = React.useRef(null);
|
|
23
|
+
const {
|
|
24
|
+
isOpen,
|
|
25
|
+
triggerProps,
|
|
26
|
+
x,
|
|
27
|
+
y,
|
|
28
|
+
strategy,
|
|
29
|
+
refs,
|
|
30
|
+
context,
|
|
31
|
+
floatingStyles
|
|
32
|
+
} = useFloatingLogic.useFloatingLogic({ placement, arrowRef, trigger });
|
|
33
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, React.cloneElement(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
|
|
34
|
+
"div",
|
|
35
|
+
{
|
|
36
|
+
ref: ref || refs.setFloating,
|
|
37
|
+
className: "bg-black text-white p-2 rounded z-50 shadow-md text-justify",
|
|
38
|
+
style: {
|
|
39
|
+
position: strategy,
|
|
40
|
+
top: y ?? 0,
|
|
41
|
+
left: x ?? 0,
|
|
42
|
+
width,
|
|
43
|
+
height,
|
|
44
|
+
...floatingStyles
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
text,
|
|
48
|
+
/* @__PURE__ */ React.createElement(react.FloatingArrow, { ref: arrowRef, context, fill: "black" })
|
|
49
|
+
) : /* @__PURE__ */ React.createElement(React.Fragment, null));
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
|
|
53
|
+
exports.Tooltip = Tooltip;
|
|
54
|
+
exports.default = Tooltip;
|
|
@@ -8,9 +8,7 @@ const useOutsideClickListener = ({
|
|
|
8
8
|
}) => {
|
|
9
9
|
const handleClickOutside = React.useCallback((event) => {
|
|
10
10
|
if (ref.current && !ref.current.contains(event.target)) {
|
|
11
|
-
|
|
12
|
-
onClickOutside?.();
|
|
13
|
-
}, 10);
|
|
11
|
+
onClickOutside?.();
|
|
14
12
|
}
|
|
15
13
|
}, []);
|
|
16
14
|
React.useEffect(() => {
|
package/dist/cjs/index.js
CHANGED
|
@@ -24,7 +24,7 @@ var Tag = require('./components/Tag.js');
|
|
|
24
24
|
var TextArea = require('./components/TextArea.js');
|
|
25
25
|
var TimeFieldInput = require('./components/TimeFieldInput.js');
|
|
26
26
|
var Toggle = require('./components/Toggle.js');
|
|
27
|
-
require('./components/Tooltip.js');
|
|
27
|
+
var Tooltip = require('./components/Tooltip.js');
|
|
28
28
|
var index$2 = require('./components/Popover/index.js');
|
|
29
29
|
var index$3 = require('./components/Menubar/index.js');
|
|
30
30
|
var useCalendar = require('./hooks/useCalendar.js');
|
|
@@ -72,6 +72,7 @@ exports.Tag = Tag.Tag;
|
|
|
72
72
|
exports.TextArea = TextArea.TextArea;
|
|
73
73
|
exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
|
|
74
74
|
exports.Toggle = Toggle.Toggle;
|
|
75
|
+
exports.Tooltip = Tooltip.Tooltip;
|
|
75
76
|
exports.Popover = index$2.Popover;
|
|
76
77
|
exports.Menubar = index$3.Menubar;
|
|
77
78
|
exports.useCalendar = useCalendar.useCalendar;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
2
|
import '@internationalized/date';
|
|
3
3
|
import 'react-aria';
|
|
4
4
|
import 'react-stately';
|
|
5
5
|
import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
|
|
6
6
|
import '@floating-ui/react';
|
|
7
|
-
import { SelectContext } from './context.js';
|
|
8
7
|
import { usePopoverContext } from '../Popover/Context.js';
|
|
8
|
+
import { SelectContext } from './context.js';
|
|
9
9
|
|
|
10
10
|
const Content = ({
|
|
11
11
|
children,
|
|
@@ -13,12 +13,13 @@ const Content = ({
|
|
|
13
13
|
labelExtractor,
|
|
14
14
|
value
|
|
15
15
|
}) => {
|
|
16
|
-
const { setIsOpen
|
|
16
|
+
const { setIsOpen } = usePopoverContext();
|
|
17
|
+
const ref = useRef(null);
|
|
17
18
|
useOutsideClickListener({
|
|
18
|
-
ref
|
|
19
|
+
ref,
|
|
19
20
|
onClickOutside: () => setIsOpen(false)
|
|
20
21
|
});
|
|
21
|
-
return /* @__PURE__ */ React.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white" }, children));
|
|
22
|
+
return /* @__PURE__ */ React.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children));
|
|
22
23
|
};
|
|
23
24
|
|
|
24
25
|
export { Content as default };
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { Popover } from '../Popover/index.js';
|
|
3
3
|
|
|
4
4
|
const SelectPopover = ({ children }) => {
|
|
5
|
-
return /* @__PURE__ */ React.createElement(Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll" }, children);
|
|
5
|
+
return /* @__PURE__ */ React.createElement(Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col" }, children);
|
|
6
6
|
};
|
|
7
7
|
|
|
8
8
|
export { SelectPopover };
|
|
@@ -5,41 +5,45 @@ import 'react-aria';
|
|
|
5
5
|
import 'react-stately';
|
|
6
6
|
import { useFloatingLogic } from '../hooks/useFloatingLogic.js';
|
|
7
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
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
8
|
+
const Tooltip = forwardRef(
|
|
9
|
+
(props, ref) => {
|
|
10
|
+
const {
|
|
11
|
+
children,
|
|
12
|
+
text,
|
|
13
|
+
trigger = "hover",
|
|
14
|
+
placement = "top",
|
|
15
|
+
width,
|
|
16
|
+
height
|
|
17
|
+
} = props;
|
|
18
|
+
const arrowRef = useRef(null);
|
|
19
|
+
const {
|
|
20
|
+
isOpen,
|
|
21
|
+
triggerProps,
|
|
22
|
+
x,
|
|
23
|
+
y,
|
|
24
|
+
strategy,
|
|
25
|
+
refs,
|
|
26
|
+
context,
|
|
27
|
+
floatingStyles
|
|
28
|
+
} = useFloatingLogic({ placement, arrowRef, trigger });
|
|
29
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, React.cloneElement(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
ref: ref || refs.setFloating,
|
|
33
|
+
className: "bg-black text-white p-2 rounded z-50 shadow-md text-justify",
|
|
34
|
+
style: {
|
|
35
|
+
position: strategy,
|
|
36
|
+
top: y ?? 0,
|
|
37
|
+
left: x ?? 0,
|
|
38
|
+
width,
|
|
39
|
+
height,
|
|
40
|
+
...floatingStyles
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
text,
|
|
44
|
+
/* @__PURE__ */ React.createElement(FloatingArrow, { ref: arrowRef, context, fill: "black" })
|
|
45
|
+
) : /* @__PURE__ */ React.createElement(React.Fragment, null));
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
export { Tooltip, Tooltip as default };
|
|
@@ -6,9 +6,7 @@ const useOutsideClickListener = ({
|
|
|
6
6
|
}) => {
|
|
7
7
|
const handleClickOutside = useCallback((event) => {
|
|
8
8
|
if (ref.current && !ref.current.contains(event.target)) {
|
|
9
|
-
|
|
10
|
-
onClickOutside?.();
|
|
11
|
-
}, 10);
|
|
9
|
+
onClickOutside?.();
|
|
12
10
|
}
|
|
13
11
|
}, []);
|
|
14
12
|
useEffect(() => {
|
package/dist/esm/index.js
CHANGED
|
@@ -22,7 +22,7 @@ export { Tag } from './components/Tag.js';
|
|
|
22
22
|
export { TextArea } from './components/TextArea.js';
|
|
23
23
|
export { TimeFieldInput } from './components/TimeFieldInput.js';
|
|
24
24
|
export { Toggle } from './components/Toggle.js';
|
|
25
|
-
|
|
25
|
+
export { Tooltip } from './components/Tooltip.js';
|
|
26
26
|
export { Popover } from './components/Popover/index.js';
|
|
27
27
|
export { Menubar } from './components/Menubar/index.js';
|
|
28
28
|
export { useCalendar } from './hooks/useCalendar.js';
|
|
@@ -9,5 +9,5 @@ interface TooltipProps {
|
|
|
9
9
|
height?: number;
|
|
10
10
|
style?: React.CSSProperties;
|
|
11
11
|
}
|
|
12
|
-
declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
|
|
13
13
|
export default Tooltip;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/cortex-react",
|
|
3
|
-
"version": "1.3.0-beta.
|
|
3
|
+
"version": "1.3.0-beta.7",
|
|
4
4
|
"description": "React components based in @tecsinapse/cortex-core",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"react-dom": ">=18.0.0",
|
|
43
43
|
"tailwind": ">=3.3.0"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "cb9069b439abdea0331a49cb6666d93a148ab1df"
|
|
46
46
|
}
|