@tecsinapse/cortex-react 1.7.3 → 1.7.5-beta.0
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/Breadcrumbs/BreadcrumbItem.js +5 -1
- package/dist/cjs/components/Menubar/Categories.js +10 -1
- package/dist/cjs/components/Menubar/Left.js +10 -0
- package/dist/cjs/components/Menubar/MostUsed.js +10 -0
- package/dist/cjs/components/Menubar/Right.js +10 -0
- package/dist/cjs/components/Menubar/Search.js +8 -1
- package/dist/cjs/components/Popover/Provider.js +3 -2
- package/dist/cjs/components/Popover/Root.js +3 -2
- package/dist/cjs/hooks/useDimensions.js +26 -0
- package/dist/cjs/hooks/useFloatingElement.js +12 -8
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/utils/date.js +1 -1
- package/dist/esm/components/Breadcrumbs/BreadcrumbItem.js +5 -1
- package/dist/esm/components/Menubar/Categories.js +10 -1
- package/dist/esm/components/Menubar/Left.js +10 -0
- package/dist/esm/components/Menubar/MostUsed.js +10 -0
- package/dist/esm/components/Menubar/Right.js +10 -0
- package/dist/esm/components/Menubar/Search.js +8 -1
- package/dist/esm/components/Popover/Provider.js +3 -2
- package/dist/esm/components/Popover/Root.js +3 -2
- package/dist/esm/hooks/useDimensions.js +24 -0
- package/dist/esm/hooks/useFloatingElement.js +12 -8
- package/dist/esm/index.js +1 -0
- package/dist/esm/utils/date.js +1 -1
- package/dist/types/components/Popover/Provider.d.ts +12 -3
- package/dist/types/components/Popover/Root.d.ts +7 -2
- package/dist/types/components/Popover/index.d.ts +2 -2
- package/dist/types/hooks/index.d.ts +1 -0
- package/dist/types/hooks/useDimensions.d.ts +4 -0
- package/dist/types/hooks/useFloatingElement.d.ts +7 -5
- package/package.json +3 -3
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var clsx = require('clsx');
|
|
3
4
|
var React = require('react');
|
|
4
5
|
var md = require('react-icons/md');
|
|
5
6
|
|
|
@@ -12,7 +13,10 @@ const BreadcrumbItem = ({
|
|
|
12
13
|
return /* @__PURE__ */ React.createElement(Component, { ...componentProps, key: title }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-mili items-center" }, /* @__PURE__ */ React.createElement(
|
|
13
14
|
"p",
|
|
14
15
|
{
|
|
15
|
-
className:
|
|
16
|
+
className: clsx(
|
|
17
|
+
"no-underline",
|
|
18
|
+
isLast ? "text-secondary-medium cursor-default" : "text-secondary-xdark cursor-pointer"
|
|
19
|
+
)
|
|
16
20
|
},
|
|
17
21
|
title
|
|
18
22
|
), !isLast ? /* @__PURE__ */ React.createElement(
|
|
@@ -2,9 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var Masonry = require('../Masonry.js');
|
|
5
|
+
require('@internationalized/date');
|
|
6
|
+
require('react-aria');
|
|
7
|
+
require('react-stately');
|
|
8
|
+
require('@floating-ui/react');
|
|
9
|
+
require('currency.js');
|
|
10
|
+
require('react-dropzone');
|
|
11
|
+
require('uuid');
|
|
12
|
+
var useDimensions = require('../../hooks/useDimensions.js');
|
|
5
13
|
|
|
6
14
|
const Categories = ({ children }) => {
|
|
7
|
-
|
|
15
|
+
const { width } = useDimensions.useDimensions();
|
|
16
|
+
return /* @__PURE__ */ React.createElement(Masonry, { columns: width < 640 ? 2 : 4 }, children);
|
|
8
17
|
};
|
|
9
18
|
|
|
10
19
|
module.exports = Categories;
|
|
@@ -2,9 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var menubar = require('../../styles/menubar.js');
|
|
5
|
+
require('@internationalized/date');
|
|
6
|
+
require('react-aria');
|
|
7
|
+
require('react-stately');
|
|
8
|
+
require('@floating-ui/react');
|
|
9
|
+
require('currency.js');
|
|
10
|
+
require('react-dropzone');
|
|
11
|
+
require('uuid');
|
|
12
|
+
var useDimensions = require('../../hooks/useDimensions.js');
|
|
5
13
|
|
|
6
14
|
const { left } = menubar.menubar();
|
|
7
15
|
const Left = ({ children, ...rest }) => {
|
|
16
|
+
const { width } = useDimensions.useDimensions();
|
|
17
|
+
if (width <= 640) return /* @__PURE__ */ React.createElement(React.Fragment, null);
|
|
8
18
|
return /* @__PURE__ */ React.createElement("div", { className: left(), "data-testid": "header-left-menubar", ...rest }, children);
|
|
9
19
|
};
|
|
10
20
|
|
|
@@ -2,9 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var menubar = require('../../styles/menubar.js');
|
|
5
|
+
require('@internationalized/date');
|
|
6
|
+
require('react-aria');
|
|
7
|
+
require('react-stately');
|
|
8
|
+
require('@floating-ui/react');
|
|
9
|
+
require('currency.js');
|
|
10
|
+
require('react-dropzone');
|
|
11
|
+
require('uuid');
|
|
12
|
+
var useDimensions = require('../../hooks/useDimensions.js');
|
|
5
13
|
|
|
6
14
|
const { container, label: labelClass, containerList } = menubar.mostUsed();
|
|
7
15
|
const MostUsed = ({ label, children, ...rest }) => {
|
|
16
|
+
const { width } = useDimensions.useDimensions();
|
|
17
|
+
if (width <= 640) return /* @__PURE__ */ React.createElement(React.Fragment, null);
|
|
8
18
|
return /* @__PURE__ */ React.createElement("div", { className: container(), "data-testid": "most-used-menubar", ...rest }, /* @__PURE__ */ React.createElement("p", { className: labelClass() }, label), /* @__PURE__ */ React.createElement("div", { className: containerList() }, children));
|
|
9
19
|
};
|
|
10
20
|
|
|
@@ -2,9 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var menubar = require('../../styles/menubar.js');
|
|
5
|
+
require('@internationalized/date');
|
|
6
|
+
require('react-aria');
|
|
7
|
+
require('react-stately');
|
|
8
|
+
require('@floating-ui/react');
|
|
9
|
+
require('currency.js');
|
|
10
|
+
require('react-dropzone');
|
|
11
|
+
require('uuid');
|
|
12
|
+
var useDimensions = require('../../hooks/useDimensions.js');
|
|
5
13
|
|
|
6
14
|
const { right } = menubar.menubar();
|
|
7
15
|
const Right = ({ children, ...rest }) => {
|
|
16
|
+
const { width } = useDimensions.useDimensions();
|
|
17
|
+
if (width <= 640) return /* @__PURE__ */ React.createElement(React.Fragment, null);
|
|
8
18
|
return /* @__PURE__ */ React.createElement("div", { className: right(), "data-testid": "header-right-menubar", ...rest }, children);
|
|
9
19
|
};
|
|
10
20
|
|
|
@@ -11,17 +11,24 @@ require('@floating-ui/react');
|
|
|
11
11
|
require('currency.js');
|
|
12
12
|
require('react-dropzone');
|
|
13
13
|
require('uuid');
|
|
14
|
+
var useDimensions = require('../../hooks/useDimensions.js');
|
|
14
15
|
require('../../provider/MenubarContext.js');
|
|
15
16
|
require('../../provider/SnackbarProvider.js');
|
|
16
17
|
var useMenubar = require('../../provider/useMenubar.js');
|
|
17
18
|
|
|
18
19
|
const Search = (props) => {
|
|
19
20
|
const [show] = useMenubar.useMenubar();
|
|
21
|
+
const { width } = useDimensions.useDimensions();
|
|
20
22
|
return /* @__PURE__ */ React.createElement(
|
|
21
23
|
index.Input.Search,
|
|
22
24
|
{
|
|
23
25
|
...props,
|
|
24
|
-
className: clsx(
|
|
26
|
+
className: clsx(
|
|
27
|
+
{ "mx-deca": width <= 640 },
|
|
28
|
+
{ "mr-deca": width > 640 },
|
|
29
|
+
"flex-1",
|
|
30
|
+
menubar.animate({ show })
|
|
31
|
+
)
|
|
25
32
|
}
|
|
26
33
|
);
|
|
27
34
|
};
|
|
@@ -13,9 +13,10 @@ var Context = require('./Context.js');
|
|
|
13
13
|
const PopoverProvider = ({
|
|
14
14
|
children,
|
|
15
15
|
placement,
|
|
16
|
-
trigger
|
|
16
|
+
trigger,
|
|
17
|
+
...props
|
|
17
18
|
}) => {
|
|
18
|
-
const floatingLogic = useFloatingElement.useFloatingElement({ placement, trigger });
|
|
19
|
+
const floatingLogic = useFloatingElement.useFloatingElement({ placement, trigger, ...props });
|
|
19
20
|
return /* @__PURE__ */ React.createElement(Context.Context.Provider, { value: { ...floatingLogic } }, children);
|
|
20
21
|
};
|
|
21
22
|
|
|
@@ -6,9 +6,10 @@ var Provider = require('./Provider.js');
|
|
|
6
6
|
const PopoverRoot = ({
|
|
7
7
|
children,
|
|
8
8
|
placement,
|
|
9
|
-
trigger
|
|
9
|
+
trigger,
|
|
10
|
+
...props
|
|
10
11
|
}) => {
|
|
11
|
-
return /* @__PURE__ */ React.createElement(Provider.PopoverProvider, { placement, trigger }, children);
|
|
12
|
+
return /* @__PURE__ */ React.createElement(Provider.PopoverProvider, { placement, trigger, ...props }, children);
|
|
12
13
|
};
|
|
13
14
|
|
|
14
15
|
exports.PopoverRoot = PopoverRoot;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
const getWindowDimensions = () => {
|
|
6
|
+
const { innerWidth: width, innerHeight: height } = window;
|
|
7
|
+
return {
|
|
8
|
+
width,
|
|
9
|
+
height
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
const useDimensions = () => {
|
|
13
|
+
const [windowDimensions, setWindowDimensions] = React.useState(
|
|
14
|
+
getWindowDimensions()
|
|
15
|
+
);
|
|
16
|
+
React.useEffect(() => {
|
|
17
|
+
function handleResize() {
|
|
18
|
+
setWindowDimensions(getWindowDimensions());
|
|
19
|
+
}
|
|
20
|
+
window.addEventListener("resize", handleResize);
|
|
21
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
22
|
+
}, []);
|
|
23
|
+
return windowDimensions;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
exports.useDimensions = useDimensions;
|
|
@@ -7,15 +7,18 @@ const useFloatingElement = ({
|
|
|
7
7
|
placement,
|
|
8
8
|
trigger,
|
|
9
9
|
delay,
|
|
10
|
-
arrowRef
|
|
10
|
+
arrowRef,
|
|
11
|
+
controlled,
|
|
12
|
+
isOpen,
|
|
13
|
+
setIsOpen
|
|
11
14
|
}) => {
|
|
12
|
-
const [
|
|
15
|
+
const [openUncontrolled, onOpenChangeUncontrolled] = React.useState(false);
|
|
13
16
|
const { x, y, strategy, refs, update, context, floatingStyles } = react.useFloating(
|
|
14
17
|
{
|
|
15
18
|
placement,
|
|
16
19
|
whileElementsMounted: react.autoUpdate,
|
|
17
|
-
open: isOpen,
|
|
18
|
-
onOpenChange: setIsOpen,
|
|
20
|
+
open: controlled ? isOpen : openUncontrolled,
|
|
21
|
+
onOpenChange: controlled ? setIsOpen : onOpenChangeUncontrolled,
|
|
19
22
|
middleware: [
|
|
20
23
|
react.offset(10),
|
|
21
24
|
react.flip({
|
|
@@ -38,15 +41,16 @@ const useFloatingElement = ({
|
|
|
38
41
|
hover
|
|
39
42
|
]);
|
|
40
43
|
React.useEffect(() => {
|
|
41
|
-
if (isOpen) update();
|
|
42
|
-
|
|
44
|
+
if (controlled && isOpen) update();
|
|
45
|
+
else if (openUncontrolled) update();
|
|
46
|
+
}, [openUncontrolled, update, isOpen]);
|
|
43
47
|
const triggerProps = {
|
|
44
48
|
ref: refs.setReference,
|
|
45
49
|
...getReferenceProps()
|
|
46
50
|
};
|
|
47
51
|
return {
|
|
48
|
-
isOpen,
|
|
49
|
-
setIsOpen,
|
|
52
|
+
isOpen: controlled ? isOpen : openUncontrolled,
|
|
53
|
+
setIsOpen: controlled ? setIsOpen : onOpenChangeUncontrolled,
|
|
50
54
|
x,
|
|
51
55
|
y,
|
|
52
56
|
strategy,
|
package/dist/cjs/index.js
CHANGED
|
@@ -54,6 +54,7 @@ var useSelectGroupedOptions = require('./hooks/useSelectGroupedOptions.js');
|
|
|
54
54
|
var useSelectOptions = require('./hooks/useSelectOptions.js');
|
|
55
55
|
var useStringMask = require('./hooks/useStringMask.js');
|
|
56
56
|
var useFileUpload = require('./hooks/useFileUpload.js');
|
|
57
|
+
var useDimensions = require('./hooks/useDimensions.js');
|
|
57
58
|
var SnackbarSonner = require('./service/SnackbarSonner.js');
|
|
58
59
|
var MenubarProvider = require('./provider/MenubarProvider.js');
|
|
59
60
|
var SnackbarProvider = require('./provider/SnackbarProvider.js');
|
|
@@ -131,6 +132,7 @@ exports.getMask = useStringMask.getMask;
|
|
|
131
132
|
exports.mergeMask = useStringMask.mergeMask;
|
|
132
133
|
exports.useStringMask = useStringMask.useStringMask;
|
|
133
134
|
exports.useFileUpload = useFileUpload.useFileUpload;
|
|
135
|
+
exports.useDimensions = useDimensions.useDimensions;
|
|
134
136
|
exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;
|
|
135
137
|
exports.MenubarProvider = MenubarProvider.MenubarProvider;
|
|
136
138
|
exports.SnackbarProvider = SnackbarProvider.SnackbarProvider;
|
package/dist/cjs/utils/date.js
CHANGED
|
@@ -5,7 +5,7 @@ var date = require('@internationalized/date');
|
|
|
5
5
|
const dateToCalendarDate = (value) => {
|
|
6
6
|
return new date.CalendarDate(
|
|
7
7
|
value?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear(),
|
|
8
|
-
value?.getMonth() ? value.getMonth() + 1 : (/* @__PURE__ */ new Date()).getMonth() + 1,
|
|
8
|
+
value?.getMonth() !== void 0 ? value.getMonth() + 1 : (/* @__PURE__ */ new Date()).getMonth() + 1,
|
|
9
9
|
value?.getDate() ?? (/* @__PURE__ */ new Date()).getDate()
|
|
10
10
|
);
|
|
11
11
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
1
2
|
import React__default from 'react';
|
|
2
3
|
import { MdOutlineKeyboardDoubleArrowRight } from 'react-icons/md';
|
|
3
4
|
|
|
@@ -10,7 +11,10 @@ const BreadcrumbItem = ({
|
|
|
10
11
|
return /* @__PURE__ */ React__default.createElement(Component, { ...componentProps, key: title }, /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-x-mili items-center" }, /* @__PURE__ */ React__default.createElement(
|
|
11
12
|
"p",
|
|
12
13
|
{
|
|
13
|
-
className:
|
|
14
|
+
className: clsx(
|
|
15
|
+
"no-underline",
|
|
16
|
+
isLast ? "text-secondary-medium cursor-default" : "text-secondary-xdark cursor-pointer"
|
|
17
|
+
)
|
|
14
18
|
},
|
|
15
19
|
title
|
|
16
20
|
), !isLast ? /* @__PURE__ */ React__default.createElement(
|
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import Masonry from '../Masonry.js';
|
|
3
|
+
import '@internationalized/date';
|
|
4
|
+
import 'react-aria';
|
|
5
|
+
import 'react-stately';
|
|
6
|
+
import '@floating-ui/react';
|
|
7
|
+
import 'currency.js';
|
|
8
|
+
import 'react-dropzone';
|
|
9
|
+
import 'uuid';
|
|
10
|
+
import { useDimensions } from '../../hooks/useDimensions.js';
|
|
3
11
|
|
|
4
12
|
const Categories = ({ children }) => {
|
|
5
|
-
|
|
13
|
+
const { width } = useDimensions();
|
|
14
|
+
return /* @__PURE__ */ React__default.createElement(Masonry, { columns: width < 640 ? 2 : 4 }, children);
|
|
6
15
|
};
|
|
7
16
|
|
|
8
17
|
export { Categories as default };
|
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { menubar } from '../../styles/menubar.js';
|
|
3
|
+
import '@internationalized/date';
|
|
4
|
+
import 'react-aria';
|
|
5
|
+
import 'react-stately';
|
|
6
|
+
import '@floating-ui/react';
|
|
7
|
+
import 'currency.js';
|
|
8
|
+
import 'react-dropzone';
|
|
9
|
+
import 'uuid';
|
|
10
|
+
import { useDimensions } from '../../hooks/useDimensions.js';
|
|
3
11
|
|
|
4
12
|
const { left } = menubar();
|
|
5
13
|
const Left = ({ children, ...rest }) => {
|
|
14
|
+
const { width } = useDimensions();
|
|
15
|
+
if (width <= 640) return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
|
|
6
16
|
return /* @__PURE__ */ React__default.createElement("div", { className: left(), "data-testid": "header-left-menubar", ...rest }, children);
|
|
7
17
|
};
|
|
8
18
|
|
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { mostUsed } from '../../styles/menubar.js';
|
|
3
|
+
import '@internationalized/date';
|
|
4
|
+
import 'react-aria';
|
|
5
|
+
import 'react-stately';
|
|
6
|
+
import '@floating-ui/react';
|
|
7
|
+
import 'currency.js';
|
|
8
|
+
import 'react-dropzone';
|
|
9
|
+
import 'uuid';
|
|
10
|
+
import { useDimensions } from '../../hooks/useDimensions.js';
|
|
3
11
|
|
|
4
12
|
const { container, label: labelClass, containerList } = mostUsed();
|
|
5
13
|
const MostUsed = ({ label, children, ...rest }) => {
|
|
14
|
+
const { width } = useDimensions();
|
|
15
|
+
if (width <= 640) return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
|
|
6
16
|
return /* @__PURE__ */ React__default.createElement("div", { className: container(), "data-testid": "most-used-menubar", ...rest }, /* @__PURE__ */ React__default.createElement("p", { className: labelClass() }, label), /* @__PURE__ */ React__default.createElement("div", { className: containerList() }, children));
|
|
7
17
|
};
|
|
8
18
|
|
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { menubar } from '../../styles/menubar.js';
|
|
3
|
+
import '@internationalized/date';
|
|
4
|
+
import 'react-aria';
|
|
5
|
+
import 'react-stately';
|
|
6
|
+
import '@floating-ui/react';
|
|
7
|
+
import 'currency.js';
|
|
8
|
+
import 'react-dropzone';
|
|
9
|
+
import 'uuid';
|
|
10
|
+
import { useDimensions } from '../../hooks/useDimensions.js';
|
|
3
11
|
|
|
4
12
|
const { right } = menubar();
|
|
5
13
|
const Right = ({ children, ...rest }) => {
|
|
14
|
+
const { width } = useDimensions();
|
|
15
|
+
if (width <= 640) return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
|
|
6
16
|
return /* @__PURE__ */ React__default.createElement("div", { className: right(), "data-testid": "header-right-menubar", ...rest }, children);
|
|
7
17
|
};
|
|
8
18
|
|
|
@@ -9,17 +9,24 @@ import '@floating-ui/react';
|
|
|
9
9
|
import 'currency.js';
|
|
10
10
|
import 'react-dropzone';
|
|
11
11
|
import 'uuid';
|
|
12
|
+
import { useDimensions } from '../../hooks/useDimensions.js';
|
|
12
13
|
import '../../provider/MenubarContext.js';
|
|
13
14
|
import '../../provider/SnackbarProvider.js';
|
|
14
15
|
import { useMenubar } from '../../provider/useMenubar.js';
|
|
15
16
|
|
|
16
17
|
const Search = (props) => {
|
|
17
18
|
const [show] = useMenubar();
|
|
19
|
+
const { width } = useDimensions();
|
|
18
20
|
return /* @__PURE__ */ React__default.createElement(
|
|
19
21
|
Input.Search,
|
|
20
22
|
{
|
|
21
23
|
...props,
|
|
22
|
-
className: clsx(
|
|
24
|
+
className: clsx(
|
|
25
|
+
{ "mx-deca": width <= 640 },
|
|
26
|
+
{ "mr-deca": width > 640 },
|
|
27
|
+
"flex-1",
|
|
28
|
+
animate({ show })
|
|
29
|
+
)
|
|
23
30
|
}
|
|
24
31
|
);
|
|
25
32
|
};
|
|
@@ -11,9 +11,10 @@ import { Context } from './Context.js';
|
|
|
11
11
|
const PopoverProvider = ({
|
|
12
12
|
children,
|
|
13
13
|
placement,
|
|
14
|
-
trigger
|
|
14
|
+
trigger,
|
|
15
|
+
...props
|
|
15
16
|
}) => {
|
|
16
|
-
const floatingLogic = useFloatingElement({ placement, trigger });
|
|
17
|
+
const floatingLogic = useFloatingElement({ placement, trigger, ...props });
|
|
17
18
|
return /* @__PURE__ */ React__default.createElement(Context.Provider, { value: { ...floatingLogic } }, children);
|
|
18
19
|
};
|
|
19
20
|
|
|
@@ -4,9 +4,10 @@ import { PopoverProvider } from './Provider.js';
|
|
|
4
4
|
const PopoverRoot = ({
|
|
5
5
|
children,
|
|
6
6
|
placement,
|
|
7
|
-
trigger
|
|
7
|
+
trigger,
|
|
8
|
+
...props
|
|
8
9
|
}) => {
|
|
9
|
-
return /* @__PURE__ */ React__default.createElement(PopoverProvider, { placement, trigger }, children);
|
|
10
|
+
return /* @__PURE__ */ React__default.createElement(PopoverProvider, { placement, trigger, ...props }, children);
|
|
10
11
|
};
|
|
11
12
|
|
|
12
13
|
export { PopoverRoot };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
const getWindowDimensions = () => {
|
|
4
|
+
const { innerWidth: width, innerHeight: height } = window;
|
|
5
|
+
return {
|
|
6
|
+
width,
|
|
7
|
+
height
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
const useDimensions = () => {
|
|
11
|
+
const [windowDimensions, setWindowDimensions] = useState(
|
|
12
|
+
getWindowDimensions()
|
|
13
|
+
);
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
function handleResize() {
|
|
16
|
+
setWindowDimensions(getWindowDimensions());
|
|
17
|
+
}
|
|
18
|
+
window.addEventListener("resize", handleResize);
|
|
19
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
20
|
+
}, []);
|
|
21
|
+
return windowDimensions;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export { useDimensions };
|
|
@@ -5,15 +5,18 @@ const useFloatingElement = ({
|
|
|
5
5
|
placement,
|
|
6
6
|
trigger,
|
|
7
7
|
delay,
|
|
8
|
-
arrowRef
|
|
8
|
+
arrowRef,
|
|
9
|
+
controlled,
|
|
10
|
+
isOpen,
|
|
11
|
+
setIsOpen
|
|
9
12
|
}) => {
|
|
10
|
-
const [
|
|
13
|
+
const [openUncontrolled, onOpenChangeUncontrolled] = useState(false);
|
|
11
14
|
const { x, y, strategy, refs, update, context, floatingStyles } = useFloating(
|
|
12
15
|
{
|
|
13
16
|
placement,
|
|
14
17
|
whileElementsMounted: autoUpdate,
|
|
15
|
-
open: isOpen,
|
|
16
|
-
onOpenChange: setIsOpen,
|
|
18
|
+
open: controlled ? isOpen : openUncontrolled,
|
|
19
|
+
onOpenChange: controlled ? setIsOpen : onOpenChangeUncontrolled,
|
|
17
20
|
middleware: [
|
|
18
21
|
offset(10),
|
|
19
22
|
flip({
|
|
@@ -36,15 +39,16 @@ const useFloatingElement = ({
|
|
|
36
39
|
hover
|
|
37
40
|
]);
|
|
38
41
|
useEffect(() => {
|
|
39
|
-
if (isOpen) update();
|
|
40
|
-
|
|
42
|
+
if (controlled && isOpen) update();
|
|
43
|
+
else if (openUncontrolled) update();
|
|
44
|
+
}, [openUncontrolled, update, isOpen]);
|
|
41
45
|
const triggerProps = {
|
|
42
46
|
ref: refs.setReference,
|
|
43
47
|
...getReferenceProps()
|
|
44
48
|
};
|
|
45
49
|
return {
|
|
46
|
-
isOpen,
|
|
47
|
-
setIsOpen,
|
|
50
|
+
isOpen: controlled ? isOpen : openUncontrolled,
|
|
51
|
+
setIsOpen: controlled ? setIsOpen : onOpenChangeUncontrolled,
|
|
48
52
|
x,
|
|
49
53
|
y,
|
|
50
54
|
strategy,
|
package/dist/esm/index.js
CHANGED
|
@@ -52,6 +52,7 @@ export { useSelectGroupedOptions } from './hooks/useSelectGroupedOptions.js';
|
|
|
52
52
|
export { useSelectOptions } from './hooks/useSelectOptions.js';
|
|
53
53
|
export { getMask, mergeMask, useStringMask } from './hooks/useStringMask.js';
|
|
54
54
|
export { useFileUpload } from './hooks/useFileUpload.js';
|
|
55
|
+
export { useDimensions } from './hooks/useDimensions.js';
|
|
55
56
|
export { SnackbarSonner } from './service/SnackbarSonner.js';
|
|
56
57
|
export { MenubarProvider } from './provider/MenubarProvider.js';
|
|
57
58
|
export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';
|
package/dist/esm/utils/date.js
CHANGED
|
@@ -3,7 +3,7 @@ import { CalendarDate, getLocalTimeZone } from '@internationalized/date';
|
|
|
3
3
|
const dateToCalendarDate = (value) => {
|
|
4
4
|
return new CalendarDate(
|
|
5
5
|
value?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear(),
|
|
6
|
-
value?.getMonth() ? value.getMonth() + 1 : (/* @__PURE__ */ new Date()).getMonth() + 1,
|
|
6
|
+
value?.getMonth() !== void 0 ? value.getMonth() + 1 : (/* @__PURE__ */ new Date()).getMonth() + 1,
|
|
7
7
|
value?.getDate() ?? (/* @__PURE__ */ new Date()).getDate()
|
|
8
8
|
);
|
|
9
9
|
};
|
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
import { Placement } from '@floating-ui/react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
-
export interface
|
|
2
|
+
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
|
3
|
+
export interface ControlledProps {
|
|
4
|
+
controlled: true;
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
setIsOpen: Dispatch<SetStateAction<boolean>>;
|
|
7
|
+
}
|
|
8
|
+
export interface UncontrolledProviderProps {
|
|
4
9
|
children: ReactNode;
|
|
5
10
|
placement?: Placement;
|
|
6
11
|
trigger?: 'hover' | 'click';
|
|
12
|
+
controlled?: false;
|
|
13
|
+
}
|
|
14
|
+
export interface ControlledPopoverProviderProps extends Omit<UncontrolledProviderProps, 'controlled'>, ControlledProps {
|
|
7
15
|
}
|
|
8
|
-
export
|
|
16
|
+
export type PopoverProviderProps = UncontrolledProviderProps | ControlledPopoverProviderProps;
|
|
17
|
+
export declare const PopoverProvider: ({ children, placement, trigger, ...props }: PopoverProviderProps) => JSX.Element;
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Placement } from '@floating-ui/react';
|
|
3
|
-
|
|
3
|
+
import { ControlledProps } from './Provider';
|
|
4
|
+
export interface UncontrolledPopoverProps {
|
|
4
5
|
children: React.ReactNode;
|
|
5
6
|
placement?: Placement;
|
|
6
7
|
trigger?: 'hover' | 'click';
|
|
8
|
+
controlled?: false;
|
|
7
9
|
}
|
|
8
|
-
export
|
|
10
|
+
export interface ControlledPopoverProps extends Omit<UncontrolledPopoverProps, 'controlled'>, ControlledProps {
|
|
11
|
+
}
|
|
12
|
+
export type PopoverRootProps = UncontrolledPopoverProps | ControlledPopoverProps;
|
|
13
|
+
export declare const PopoverRoot: ({ children, placement, trigger, ...props }: PopoverRootProps) => JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const Popover: {
|
|
3
|
-
Root: ({ children, placement, trigger, }: import("./Root").PopoverRootProps) => JSX.Element;
|
|
3
|
+
Root: ({ children, placement, trigger, ...props }: import("./Root").PopoverRootProps) => JSX.Element;
|
|
4
4
|
Trigger: ({ children }: import("./Trigger").PopoverTriggerProps) => import("react").FunctionComponentElement<any>;
|
|
5
5
|
Content: ({ children, className, }: import("./Content").PopoverContentProps) => JSX.Element;
|
|
6
|
-
Provider: ({ children, placement, trigger, }: import("./Provider").PopoverProviderProps) => JSX.Element;
|
|
6
|
+
Provider: ({ children, placement, trigger, ...props }: import("./Provider").PopoverProviderProps) => JSX.Element;
|
|
7
7
|
};
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
import { Placement } from '@floating-ui/react';
|
|
2
|
-
import { RefObject } from 'react';
|
|
2
|
+
import { Dispatch, RefObject, SetStateAction } from 'react';
|
|
3
3
|
export type Delay = number | {
|
|
4
4
|
open?: number;
|
|
5
5
|
close?: number;
|
|
6
6
|
};
|
|
7
|
-
interface FloatingElementProps {
|
|
7
|
+
export interface FloatingElementProps {
|
|
8
8
|
placement?: Placement;
|
|
9
9
|
trigger?: 'hover' | 'click';
|
|
10
10
|
delay?: Delay;
|
|
11
11
|
arrowRef?: RefObject<SVGSVGElement>;
|
|
12
|
+
controlled?: boolean;
|
|
13
|
+
isOpen?: boolean;
|
|
14
|
+
setIsOpen?: Dispatch<SetStateAction<boolean>> | undefined;
|
|
12
15
|
}
|
|
13
|
-
export declare const useFloatingElement: ({ placement, trigger, delay, arrowRef, }: FloatingElementProps) => {
|
|
16
|
+
export declare const useFloatingElement: ({ placement, trigger, delay, arrowRef, controlled, isOpen, setIsOpen, }: FloatingElementProps) => {
|
|
14
17
|
isOpen: boolean;
|
|
15
|
-
setIsOpen:
|
|
18
|
+
setIsOpen: Dispatch<SetStateAction<boolean>>;
|
|
16
19
|
x: number;
|
|
17
20
|
y: number;
|
|
18
21
|
strategy: import("@floating-ui/utils").Strategy;
|
|
@@ -47,4 +50,3 @@ export declare const useFloatingElement: ({ placement, trigger, delay, arrowRef,
|
|
|
47
50
|
getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
|
|
48
51
|
getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
|
|
49
52
|
};
|
|
50
|
-
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/cortex-react",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.5-beta.0",
|
|
4
4
|
"description": "React components based in @tecsinapse/cortex-core",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@floating-ui/react": "^0.26.18",
|
|
22
22
|
"@internationalized/date": "*",
|
|
23
|
-
"@tecsinapse/cortex-core": "0.4.
|
|
23
|
+
"@tecsinapse/cortex-core": "0.4.3-beta.0",
|
|
24
24
|
"clsx": "*",
|
|
25
25
|
"currency.js": "~2.0.4",
|
|
26
26
|
"react-aria": "^3.33.1",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"react-dom": ">=18.0.0",
|
|
49
49
|
"tailwind": ">=3.3.0"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "ba3d543a95c8a5cd7023adfdf96ca7c8504f876e"
|
|
52
52
|
}
|