@tecsinapse/cortex-react 1.3.0-beta.2 → 1.3.0-beta.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/dist/cjs/components/Calendar.js +1 -0
- package/dist/cjs/components/CalendarCell.js +1 -0
- package/dist/cjs/components/CalendarGrid.js +1 -0
- package/dist/cjs/components/DatePickerInput.js +1 -0
- package/dist/cjs/components/DatePickerInputBase.js +2 -2
- package/dist/cjs/components/DateRangePickerInput.js +1 -0
- package/dist/cjs/components/Input/Box.js +32 -0
- package/dist/cjs/components/Input/Face.js +30 -0
- package/dist/cjs/components/Input/Left.js +12 -0
- package/dist/cjs/components/Input/Right.js +12 -0
- package/dist/cjs/components/Input/Root.js +13 -0
- package/dist/cjs/components/Input/Search.js +25 -0
- package/dist/cjs/components/Input/index.js +19 -0
- package/dist/cjs/components/Popover/Popover.js +13 -0
- package/dist/cjs/components/Popover/PopoverContent.js +28 -0
- package/dist/cjs/components/Popover/PopoverContext.js +29 -0
- package/dist/cjs/components/Popover/PopoverRoot.js +10 -0
- package/dist/cjs/components/Popover/PopoverTrigger.js +11 -0
- package/dist/cjs/components/RangeCalendar.js +1 -0
- package/dist/cjs/components/Select/Root.js +1 -0
- package/dist/cjs/components/TimeFieldInput.js +2 -2
- package/dist/cjs/components/Tooltip.js +47 -0
- package/dist/cjs/hooks/useFloatingLogic.js +53 -0
- package/dist/cjs/index.js +23 -27
- package/dist/cjs/service/SnackbarSonner.js +9 -4
- package/dist/esm/components/Calendar.js +1 -0
- package/dist/esm/components/CalendarCell.js +1 -0
- package/dist/esm/components/CalendarGrid.js +1 -0
- package/dist/esm/components/DatePickerInput.js +1 -0
- package/dist/esm/components/DatePickerInputBase.js +1 -1
- package/dist/esm/components/DateRangePickerInput.js +1 -0
- package/dist/esm/components/Input/Box.js +30 -0
- package/dist/esm/components/Input/Face.js +28 -0
- package/dist/esm/components/Input/Left.js +10 -0
- package/dist/esm/components/Input/Right.js +10 -0
- package/dist/esm/components/Input/Root.js +11 -0
- package/dist/esm/components/Input/Search.js +23 -0
- package/dist/esm/components/Input/index.js +17 -0
- package/dist/esm/components/Popover/Popover.js +11 -0
- package/dist/esm/components/Popover/PopoverContent.js +26 -0
- package/dist/esm/components/Popover/PopoverContext.js +26 -0
- package/dist/esm/components/Popover/PopoverRoot.js +8 -0
- package/dist/esm/components/Popover/PopoverTrigger.js +9 -0
- package/dist/esm/components/RangeCalendar.js +1 -0
- package/dist/esm/components/Select/Root.js +1 -0
- package/dist/esm/components/TimeFieldInput.js +1 -1
- package/dist/esm/components/Tooltip.js +45 -0
- package/dist/esm/hooks/useFloatingLogic.js +51 -0
- package/dist/esm/index.js +11 -12
- package/dist/esm/service/SnackbarSonner.js +9 -4
- package/dist/types/components/Input/Box.d.ts +3 -0
- package/dist/types/components/Input/Face.d.ts +3 -0
- package/dist/types/components/Input/Left.d.ts +3 -0
- package/dist/types/components/Input/Right.d.ts +3 -0
- package/dist/types/components/Input/Root.d.ts +3 -0
- package/dist/types/components/Input/Search.d.ts +3 -0
- package/dist/types/components/Input/index.d.ts +9 -0
- package/dist/types/components/Input/types.d.ts +20 -0
- package/dist/types/components/Popover/Popover.d.ts +5 -0
- package/dist/types/components/Popover/PopoverContent.d.ts +7 -0
- package/dist/types/components/Popover/PopoverContext.d.ts +22 -0
- package/dist/types/components/Popover/PopoverRoot.d.ts +9 -0
- package/dist/types/components/Popover/PopoverTrigger.d.ts +6 -0
- package/dist/types/components/Popover/index.d.ts +3 -0
- package/dist/types/components/Tooltip.d.ts +13 -0
- package/dist/types/components/index.d.ts +9 -1
- package/dist/types/hooks/index.d.ts +1 -0
- package/dist/types/hooks/useFloatingLogic.d.ts +46 -0
- package/dist/types/tests/Input/Left.test.d.ts +1 -0
- package/dist/types/tests/Input/Right.test.d.ts +1 -0
- package/dist/types/tests/Input/Root.test.d.ts +1 -0
- package/dist/types/tests/Input/Search.test.d.ts +1 -0
- package/dist/types/tests/Popover.test.d.ts +1 -0
- package/dist/types/tests/Tooltip.test.d.ts +1 -0
- package/package.json +4 -3
- package/dist/cjs/components/Input.js +0 -81
- package/dist/esm/components/Input.js +0 -74
- package/dist/types/components/Input.d.ts +0 -34
- package/dist/types/components/SearchInput.d.ts +0 -11
- /package/dist/types/tests/{Input.test.d.ts → Input/Box.test.d.ts} +0 -0
- /package/dist/types/tests/{SearchInput.test.d.ts → Input/Face.test.d.ts} +0 -0
|
@@ -5,6 +5,7 @@ var useCalendar = require('../hooks/useCalendar.js');
|
|
|
5
5
|
require('@internationalized/date');
|
|
6
6
|
require('react-aria');
|
|
7
7
|
require('react-stately');
|
|
8
|
+
require('@floating-ui/react');
|
|
8
9
|
var CalendarGrid = require('./CalendarGrid.js');
|
|
9
10
|
var CalendarHeader = require('./CalendarHeader.js');
|
|
10
11
|
|
|
@@ -5,6 +5,7 @@ require('@internationalized/date');
|
|
|
5
5
|
require('react-aria');
|
|
6
6
|
require('react-stately');
|
|
7
7
|
var useCalendarCell = require('../hooks/useCalendarCell.js');
|
|
8
|
+
require('@floating-ui/react');
|
|
8
9
|
var calendarCell = require('../styles/calendar-cell.js');
|
|
9
10
|
require('../styles/groupButton.js');
|
|
10
11
|
require('../styles/progressBar.js');
|
|
@@ -5,6 +5,7 @@ require('@internationalized/date');
|
|
|
5
5
|
require('react-aria');
|
|
6
6
|
require('react-stately');
|
|
7
7
|
var useCalendarGrid = require('../hooks/useCalendarGrid.js');
|
|
8
|
+
require('@floating-ui/react');
|
|
8
9
|
var CalendarGridBodyRows = require('./CalendarGridBodyRows.js');
|
|
9
10
|
var CalendarGridHeaderRow = require('./CalendarGridHeaderRow.js');
|
|
10
11
|
|
|
@@ -6,6 +6,7 @@ require('react-aria');
|
|
|
6
6
|
require('react-stately');
|
|
7
7
|
var utils = require('./utils.js');
|
|
8
8
|
var useDatePickerInput = require('../hooks/useDatePickerInput.js');
|
|
9
|
+
require('@floating-ui/react');
|
|
9
10
|
var Calendar = require('./Calendar.js');
|
|
10
11
|
var DateField = require('./DateField.js');
|
|
11
12
|
var DatePickerInputBase = require('./DatePickerInputBase.js');
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var cortexCore = require('@tecsinapse/cortex-core');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var lia = require('react-icons/lia');
|
|
6
|
-
var
|
|
6
|
+
var index = require('./Input/index.js');
|
|
7
7
|
|
|
8
8
|
const DatePickerInputBase = ({
|
|
9
9
|
children,
|
|
@@ -11,7 +11,7 @@ const DatePickerInputBase = ({
|
|
|
11
11
|
label,
|
|
12
12
|
onClickCalendar
|
|
13
13
|
}) => {
|
|
14
|
-
return /* @__PURE__ */ React.createElement(
|
|
14
|
+
return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label) }, children), /* @__PURE__ */ React.createElement(index.Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
|
|
15
15
|
lia.LiaCalendar,
|
|
16
16
|
{
|
|
17
17
|
className: "cursor-pointer mt-centi",
|
|
@@ -6,6 +6,7 @@ require('react-aria');
|
|
|
6
6
|
require('react-stately');
|
|
7
7
|
var utils = require('./utils.js');
|
|
8
8
|
var useDateRangePickerInput = require('../hooks/useDateRangePickerInput.js');
|
|
9
|
+
require('@floating-ui/react');
|
|
9
10
|
var DateField = require('./DateField.js');
|
|
10
11
|
var DatePickerInputBase = require('./DatePickerInputBase.js');
|
|
11
12
|
var RangeCalendar = require('./RangeCalendar.js');
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var cortexCore = require('@tecsinapse/cortex-core');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
|
|
7
|
+
const InputBox = React.forwardRef(
|
|
8
|
+
({ id, name, variants, label, placeholder, className, ...rest }, ref) => {
|
|
9
|
+
return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
|
|
10
|
+
"input",
|
|
11
|
+
{
|
|
12
|
+
id: id ?? name,
|
|
13
|
+
name,
|
|
14
|
+
placeholder: placeholder ?? " ",
|
|
15
|
+
className: clsx(cortexCore.inputBox(placeholder, label, className)),
|
|
16
|
+
...rest,
|
|
17
|
+
ref,
|
|
18
|
+
"data-testid": "input-box"
|
|
19
|
+
}
|
|
20
|
+
), /* @__PURE__ */ React.createElement(
|
|
21
|
+
"label",
|
|
22
|
+
{
|
|
23
|
+
htmlFor: id ?? name,
|
|
24
|
+
className: cortexCore.labelStyle({ intent: variants?.intent, placeholder }),
|
|
25
|
+
"data-testid": "input-label"
|
|
26
|
+
},
|
|
27
|
+
label
|
|
28
|
+
));
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
exports.InputBox = InputBox;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var cortexCore = require('@tecsinapse/cortex-core');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
|
|
7
|
+
const getValidChildren = (children) => {
|
|
8
|
+
return React.Children.toArray(children).filter(
|
|
9
|
+
(el) => React.isValidElement(el)
|
|
10
|
+
);
|
|
11
|
+
};
|
|
12
|
+
const InputFace = React.forwardRef(
|
|
13
|
+
({ children, variants, className, ...rest }, ref) => {
|
|
14
|
+
const clones = getValidChildren(children).map((el) => {
|
|
15
|
+
return React.cloneElement(el, { ...el.props, variants });
|
|
16
|
+
});
|
|
17
|
+
return /* @__PURE__ */ React.createElement(
|
|
18
|
+
"div",
|
|
19
|
+
{
|
|
20
|
+
"data-testid": "input-face",
|
|
21
|
+
...rest,
|
|
22
|
+
className: clsx(cortexCore.input(variants), className),
|
|
23
|
+
ref
|
|
24
|
+
},
|
|
25
|
+
clones
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
|
|
30
|
+
exports.InputFace = InputFace;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var clsx = require('clsx');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
|
|
6
|
+
const InputLeft = React.forwardRef(
|
|
7
|
+
({ children, className, ...rest }, ref) => {
|
|
8
|
+
return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
|
|
9
|
+
}
|
|
10
|
+
);
|
|
11
|
+
|
|
12
|
+
exports.InputLeft = InputLeft;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var clsx = require('clsx');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
|
|
6
|
+
const InputRight = React.forwardRef(
|
|
7
|
+
({ children, className, ...rest }, ref) => {
|
|
8
|
+
return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
|
|
9
|
+
}
|
|
10
|
+
);
|
|
11
|
+
|
|
12
|
+
exports.InputRight = InputRight;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var Box = require('./Box.js');
|
|
5
|
+
var Face = require('./Face.js');
|
|
6
|
+
|
|
7
|
+
const InputRoot = React.forwardRef(
|
|
8
|
+
({ variants, className, ...rest }, ref) => {
|
|
9
|
+
return /* @__PURE__ */ React.createElement(Face.InputFace, { variants, className }, /* @__PURE__ */ React.createElement(Box.InputBox, { ...rest, ref }));
|
|
10
|
+
}
|
|
11
|
+
);
|
|
12
|
+
|
|
13
|
+
exports.InputRoot = InputRoot;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var io5 = require('react-icons/io5');
|
|
5
|
+
var index = require('./index.js');
|
|
6
|
+
require('@internationalized/date');
|
|
7
|
+
require('react-aria');
|
|
8
|
+
require('react-stately');
|
|
9
|
+
var useDebouncedState = require('../../hooks/useDebouncedState.js');
|
|
10
|
+
require('@floating-ui/react');
|
|
11
|
+
|
|
12
|
+
const InputSearch = React.forwardRef(
|
|
13
|
+
({ bounceTimeout = 1e3, variants, className, onChange, ...rest }, ref) => {
|
|
14
|
+
const [bouncedTextEvent, setBouncedTextEvent] = React.useState();
|
|
15
|
+
const [searchInputEvent, setSearchInputEvent] = useDebouncedState.useDebouncedState(void 0, setBouncedTextEvent, bounceTimeout);
|
|
16
|
+
React.useEffect(() => {
|
|
17
|
+
if (onChange && searchInputEvent) {
|
|
18
|
+
onChange(searchInputEvent);
|
|
19
|
+
}
|
|
20
|
+
}, [bouncedTextEvent]);
|
|
21
|
+
return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, className }, /* @__PURE__ */ React.createElement(index.Input.Left, null, /* @__PURE__ */ React.createElement(io5.IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(index.Input.Box, { ...rest, ref, onChange: (e) => setSearchInputEvent(e) }));
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
exports.InputSearch = InputSearch;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var Box = require('./Box.js');
|
|
4
|
+
var Face = require('./Face.js');
|
|
5
|
+
var Left = require('./Left.js');
|
|
6
|
+
var Right = require('./Right.js');
|
|
7
|
+
var Root = require('./Root.js');
|
|
8
|
+
var Search = require('./Search.js');
|
|
9
|
+
|
|
10
|
+
const Input = {
|
|
11
|
+
Root: Root.InputRoot,
|
|
12
|
+
Face: Face.InputFace,
|
|
13
|
+
Box: Box.InputBox,
|
|
14
|
+
Left: Left.InputLeft,
|
|
15
|
+
Right: Right.InputRight,
|
|
16
|
+
Search: Search.InputSearch
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
exports.Input = Input;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var PopoverRoot = require('./PopoverRoot.js');
|
|
4
|
+
var PopoverTrigger = require('./PopoverTrigger.js');
|
|
5
|
+
var PopoverContent = require('./PopoverContent.js');
|
|
6
|
+
|
|
7
|
+
const Popover = {
|
|
8
|
+
Root: PopoverRoot,
|
|
9
|
+
Trigger: PopoverTrigger,
|
|
10
|
+
Content: PopoverContent
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
exports.Popover = Popover;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var PopoverContext = require('./PopoverContext.js');
|
|
6
|
+
|
|
7
|
+
const PopoverContent = ({ children, className }) => {
|
|
8
|
+
const { isOpen, x, y, strategy, floatingStyles, refs } = PopoverContext.usePopoverContext();
|
|
9
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(
|
|
10
|
+
"div",
|
|
11
|
+
{
|
|
12
|
+
ref: refs.setFloating,
|
|
13
|
+
className: clsx(
|
|
14
|
+
"border border-gray-200 bg-black text-white p-4 rounded-md shadow-lg z-50",
|
|
15
|
+
className
|
|
16
|
+
),
|
|
17
|
+
style: {
|
|
18
|
+
position: strategy,
|
|
19
|
+
top: y ?? 0,
|
|
20
|
+
left: x ?? 0,
|
|
21
|
+
...floatingStyles
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
children
|
|
25
|
+
) : /* @__PURE__ */ React.createElement(React.Fragment, null));
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
module.exports = PopoverContent;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
require('@internationalized/date');
|
|
5
|
+
require('react-aria');
|
|
6
|
+
require('react-stately');
|
|
7
|
+
var useFloatingLogic = require('../../hooks/useFloatingLogic.js');
|
|
8
|
+
|
|
9
|
+
const PopoverContext = React.createContext(
|
|
10
|
+
void 0
|
|
11
|
+
);
|
|
12
|
+
const usePopoverContext = () => {
|
|
13
|
+
const context = React.useContext(PopoverContext);
|
|
14
|
+
if (!context) {
|
|
15
|
+
throw new Error("usePopoverContext must be used within a PopoverProvider");
|
|
16
|
+
}
|
|
17
|
+
return context;
|
|
18
|
+
};
|
|
19
|
+
const PopoverProvider = ({
|
|
20
|
+
children,
|
|
21
|
+
placement,
|
|
22
|
+
trigger
|
|
23
|
+
}) => {
|
|
24
|
+
const floatingLogic = useFloatingLogic.useFloatingLogic({ placement, trigger });
|
|
25
|
+
return /* @__PURE__ */ React.createElement(PopoverContext.Provider, { value: { ...floatingLogic } }, children);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
exports.PopoverProvider = PopoverProvider;
|
|
29
|
+
exports.usePopoverContext = usePopoverContext;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var PopoverContext = require('./PopoverContext.js');
|
|
5
|
+
|
|
6
|
+
const PopoverRoot = ({ children, placement, trigger }) => {
|
|
7
|
+
return /* @__PURE__ */ React.createElement(PopoverContext.PopoverProvider, { placement, trigger }, children);
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
module.exports = PopoverRoot;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var PopoverContext = require('./PopoverContext.js');
|
|
5
|
+
|
|
6
|
+
const PopoverTrigger = ({ children }) => {
|
|
7
|
+
const { triggerProps } = PopoverContext.usePopoverContext();
|
|
8
|
+
return React.cloneElement(children, triggerProps);
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
module.exports = PopoverTrigger;
|
|
@@ -5,6 +5,7 @@ require('@internationalized/date');
|
|
|
5
5
|
require('react-aria');
|
|
6
6
|
require('react-stately');
|
|
7
7
|
var useRangeCalendar = require('../hooks/useRangeCalendar.js');
|
|
8
|
+
require('@floating-ui/react');
|
|
8
9
|
var CalendarGrid = require('./CalendarGrid.js');
|
|
9
10
|
var CalendarHeader = require('./CalendarHeader.js');
|
|
10
11
|
|
|
@@ -5,6 +5,7 @@ require('@internationalized/date');
|
|
|
5
5
|
require('react-aria');
|
|
6
6
|
require('react-stately');
|
|
7
7
|
var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
|
|
8
|
+
require('@floating-ui/react');
|
|
8
9
|
var context = require('./context.js');
|
|
9
10
|
|
|
10
11
|
const SelectRoot = ({
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var
|
|
4
|
+
var index = require('./Input/index.js');
|
|
5
5
|
var cortexCore = require('@tecsinapse/cortex-core');
|
|
6
6
|
var TimeField = require('./TimeField.js');
|
|
7
7
|
|
|
8
8
|
const TimeFieldInput = (props) => {
|
|
9
9
|
const { onChange, value, label, variants } = props;
|
|
10
10
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
11
|
-
|
|
11
|
+
index.Input.Face,
|
|
12
12
|
{
|
|
13
13
|
variants,
|
|
14
14
|
className: "flex flex-row",
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var react = require('@floating-ui/react');
|
|
5
|
+
require('@internationalized/date');
|
|
6
|
+
require('react-aria');
|
|
7
|
+
require('react-stately');
|
|
8
|
+
var useFloatingLogic = require('../hooks/useFloatingLogic.js');
|
|
9
|
+
|
|
10
|
+
React.forwardRef((props, ref) => {
|
|
11
|
+
const {
|
|
12
|
+
children,
|
|
13
|
+
text,
|
|
14
|
+
trigger = "hover",
|
|
15
|
+
placement = "top",
|
|
16
|
+
width,
|
|
17
|
+
height
|
|
18
|
+
} = props;
|
|
19
|
+
const arrowRef = React.useRef(null);
|
|
20
|
+
const {
|
|
21
|
+
isOpen,
|
|
22
|
+
triggerProps,
|
|
23
|
+
x,
|
|
24
|
+
y,
|
|
25
|
+
strategy,
|
|
26
|
+
refs,
|
|
27
|
+
context,
|
|
28
|
+
floatingStyles
|
|
29
|
+
} = useFloatingLogic.useFloatingLogic({ placement, arrowRef, trigger });
|
|
30
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, React.cloneElement(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
|
|
31
|
+
"div",
|
|
32
|
+
{
|
|
33
|
+
ref: ref || refs.setFloating,
|
|
34
|
+
className: "bg-black text-white p-2 rounded z-50 shadow-md text-justify",
|
|
35
|
+
style: {
|
|
36
|
+
position: strategy,
|
|
37
|
+
top: y ?? 0,
|
|
38
|
+
left: x ?? 0,
|
|
39
|
+
width,
|
|
40
|
+
height,
|
|
41
|
+
...floatingStyles
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
text,
|
|
45
|
+
/* @__PURE__ */ React.createElement(react.FloatingArrow, { ref: arrowRef, context, fill: "black" })
|
|
46
|
+
) : /* @__PURE__ */ React.createElement(React.Fragment, null));
|
|
47
|
+
});
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var react = require('@floating-ui/react');
|
|
5
|
+
|
|
6
|
+
const useFloatingLogic = ({
|
|
7
|
+
placement,
|
|
8
|
+
trigger,
|
|
9
|
+
arrowRef
|
|
10
|
+
}) => {
|
|
11
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
12
|
+
const { x, y, strategy, refs, update, context, floatingStyles } = react.useFloating(
|
|
13
|
+
{
|
|
14
|
+
placement,
|
|
15
|
+
whileElementsMounted: react.autoUpdate,
|
|
16
|
+
middleware: [
|
|
17
|
+
react.offset(10),
|
|
18
|
+
react.flip({
|
|
19
|
+
flipAlignment: true,
|
|
20
|
+
fallbackPlacements: ["right", "bottom", "left", "top"]
|
|
21
|
+
}),
|
|
22
|
+
react.shift(),
|
|
23
|
+
...arrowRef ? [react.arrow({ element: arrowRef })] : []
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
React.useEffect(() => {
|
|
28
|
+
if (isOpen) update();
|
|
29
|
+
}, [isOpen, update]);
|
|
30
|
+
const triggerProps = {
|
|
31
|
+
ref: refs.setReference,
|
|
32
|
+
...trigger === "hover" && {
|
|
33
|
+
onMouseEnter: () => setIsOpen(true),
|
|
34
|
+
onMouseLeave: () => setIsOpen(false)
|
|
35
|
+
},
|
|
36
|
+
...trigger === "click" && {
|
|
37
|
+
onClick: () => setIsOpen((prev) => !prev)
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
return {
|
|
41
|
+
isOpen,
|
|
42
|
+
setIsOpen,
|
|
43
|
+
x,
|
|
44
|
+
y,
|
|
45
|
+
strategy,
|
|
46
|
+
refs,
|
|
47
|
+
context,
|
|
48
|
+
floatingStyles,
|
|
49
|
+
triggerProps
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
exports.useFloatingLogic = useFloatingLogic;
|
package/dist/cjs/index.js
CHANGED
|
@@ -13,14 +13,19 @@ var DefaultSnack = require('./components/DefaultSnack.js');
|
|
|
13
13
|
var Drawer = require('./components/Drawer.js');
|
|
14
14
|
var GroupButton = require('./components/GroupButton.js');
|
|
15
15
|
var Hint = require('./components/Hint.js');
|
|
16
|
-
var
|
|
16
|
+
var index = require('./components/Input/index.js');
|
|
17
17
|
var Modal = require('./components/Modal.js');
|
|
18
18
|
var ProgressBar = require('./components/ProgressBar.js');
|
|
19
19
|
var RangeCalendar = require('./components/RangeCalendar.js');
|
|
20
|
-
require('
|
|
21
|
-
require('
|
|
22
|
-
require('
|
|
23
|
-
require('
|
|
20
|
+
var index$1 = require('./components/Select/index.js');
|
|
21
|
+
var Skeleton = require('./components/Skeleton.js');
|
|
22
|
+
var Table = require('./components/Table.js');
|
|
23
|
+
var Tag = require('./components/Tag.js');
|
|
24
|
+
var TextArea = require('./components/TextArea.js');
|
|
25
|
+
var TimeFieldInput = require('./components/TimeFieldInput.js');
|
|
26
|
+
var Toggle = require('./components/Toggle.js');
|
|
27
|
+
require('./components/Tooltip.js');
|
|
28
|
+
var Popover = require('./components/Popover/Popover.js');
|
|
24
29
|
var useCalendar = require('./hooks/useCalendar.js');
|
|
25
30
|
var useCalendarCell = require('./hooks/useCalendarCell.js');
|
|
26
31
|
var useCalendarGrid = require('./hooks/useCalendarGrid.js');
|
|
@@ -29,13 +34,7 @@ var useDateRangePickerInput = require('./hooks/useDateRangePickerInput.js');
|
|
|
29
34
|
var useDebouncedState = require('./hooks/useDebouncedState.js');
|
|
30
35
|
var useOutsideClickListener = require('./hooks/useOutsideClickListener.js');
|
|
31
36
|
var useRangeCalendar = require('./hooks/useRangeCalendar.js');
|
|
32
|
-
var
|
|
33
|
-
var Skeleton = require('./components/Skeleton.js');
|
|
34
|
-
var Table = require('./components/Table.js');
|
|
35
|
-
var Tag = require('./components/Tag.js');
|
|
36
|
-
var TextArea = require('./components/TextArea.js');
|
|
37
|
-
var TimeFieldInput = require('./components/TimeFieldInput.js');
|
|
38
|
-
var Toggle = require('./components/Toggle.js');
|
|
37
|
+
var useFloatingLogic = require('./hooks/useFloatingLogic.js');
|
|
39
38
|
var SnackbarSonner = require('./service/SnackbarSonner.js');
|
|
40
39
|
|
|
41
40
|
|
|
@@ -54,24 +53,11 @@ exports.DefaultSnack = DefaultSnack.DefaultSnack;
|
|
|
54
53
|
exports.Drawer = Drawer.Drawer;
|
|
55
54
|
exports.GroupButton = GroupButton.GroupButton;
|
|
56
55
|
exports.Hint = Hint.Hint;
|
|
57
|
-
exports.Input =
|
|
58
|
-
exports.InputBox = Input.InputBox;
|
|
59
|
-
exports.InputFace = Input.InputFace;
|
|
60
|
-
exports.InputLeft = Input.InputLeft;
|
|
61
|
-
exports.InputRight = Input.InputRight;
|
|
62
|
-
exports.InputRoot = Input.InputRoot;
|
|
56
|
+
exports.Input = index.Input;
|
|
63
57
|
exports.Modal = Modal.Modal;
|
|
64
58
|
exports.ProgressBar = ProgressBar.ProgressBar;
|
|
65
59
|
exports.RangeCalendar = RangeCalendar.RangeCalendar;
|
|
66
|
-
exports.
|
|
67
|
-
exports.useCalendarCell = useCalendarCell.useCalendarCell;
|
|
68
|
-
exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;
|
|
69
|
-
exports.useDatePickerInput = useDatePickerInput.useDatePickerInput;
|
|
70
|
-
exports.useDateRangePickerInput = useDateRangePickerInput.useDateRangePickerInput;
|
|
71
|
-
exports.useDebouncedState = useDebouncedState.useDebouncedState;
|
|
72
|
-
exports.useOutsideClickListener = useOutsideClickListener.useOutsideClickListener;
|
|
73
|
-
exports.useRangeCalendar = useRangeCalendar.useRangeCalendar;
|
|
74
|
-
exports.Select = index.Select;
|
|
60
|
+
exports.Select = index$1.Select;
|
|
75
61
|
exports.Skeleton = Skeleton.Skeleton;
|
|
76
62
|
exports.TCell = Table.TCell;
|
|
77
63
|
exports.TFoot = Table.TFoot;
|
|
@@ -85,4 +71,14 @@ exports.Tag = Tag.Tag;
|
|
|
85
71
|
exports.TextArea = TextArea.TextArea;
|
|
86
72
|
exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
|
|
87
73
|
exports.Toggle = Toggle.Toggle;
|
|
74
|
+
exports.Popover = Popover.Popover;
|
|
75
|
+
exports.useCalendar = useCalendar.useCalendar;
|
|
76
|
+
exports.useCalendarCell = useCalendarCell.useCalendarCell;
|
|
77
|
+
exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;
|
|
78
|
+
exports.useDatePickerInput = useDatePickerInput.useDatePickerInput;
|
|
79
|
+
exports.useDateRangePickerInput = useDateRangePickerInput.useDateRangePickerInput;
|
|
80
|
+
exports.useDebouncedState = useDebouncedState.useDebouncedState;
|
|
81
|
+
exports.useOutsideClickListener = useOutsideClickListener.useOutsideClickListener;
|
|
82
|
+
exports.useRangeCalendar = useRangeCalendar.useRangeCalendar;
|
|
83
|
+
exports.useFloatingLogic = useFloatingLogic.useFloatingLogic;
|
|
88
84
|
exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;
|
|
@@ -11,11 +11,17 @@ require('../components/Card.js');
|
|
|
11
11
|
require('../components/Button.js');
|
|
12
12
|
require('react-aria');
|
|
13
13
|
require('react-stately');
|
|
14
|
+
require('@floating-ui/react');
|
|
14
15
|
require('../components/CalendarCell.js');
|
|
15
16
|
require('@tecsinapse/cortex-core');
|
|
16
17
|
require('react-icons/fa');
|
|
17
18
|
require('react-icons/lia');
|
|
18
|
-
require('../components/Input.js');
|
|
19
|
+
require('../components/Input/Box.js');
|
|
20
|
+
require('../components/Input/Face.js');
|
|
21
|
+
require('../components/Input/Left.js');
|
|
22
|
+
require('../components/Input/Right.js');
|
|
23
|
+
require('../components/Input/Root.js');
|
|
24
|
+
require('../components/Input/Search.js');
|
|
19
25
|
var DefaultSnack = require('../components/DefaultSnack.js');
|
|
20
26
|
require('../components/GroupButton.js');
|
|
21
27
|
require('../components/Hint.js');
|
|
@@ -23,9 +29,6 @@ require('../components/Modal.js');
|
|
|
23
29
|
require('../styles/calendar-cell.js');
|
|
24
30
|
require('../styles/groupButton.js');
|
|
25
31
|
require('../styles/progressBar.js');
|
|
26
|
-
require('react-icons/ai');
|
|
27
|
-
require('react-icons/io5');
|
|
28
|
-
require('tailwind-merge');
|
|
29
32
|
require('../components/Select/GroupedOptions.js');
|
|
30
33
|
require('../components/Select/context.js');
|
|
31
34
|
require('../components/Select/Popover.js');
|
|
@@ -33,6 +36,8 @@ require('../components/Select/Trigger.js');
|
|
|
33
36
|
require('../components/Tag.js');
|
|
34
37
|
require('../components/TextArea.js');
|
|
35
38
|
require('../components/Toggle.js');
|
|
39
|
+
require('../components/Tooltip.js');
|
|
40
|
+
require('../components/Popover/PopoverContext.js');
|
|
36
41
|
|
|
37
42
|
class SnackbarSonner {
|
|
38
43
|
custom(Component, options) {
|
|
@@ -3,6 +3,7 @@ import { useCalendar } from '../hooks/useCalendar.js';
|
|
|
3
3
|
import '@internationalized/date';
|
|
4
4
|
import 'react-aria';
|
|
5
5
|
import 'react-stately';
|
|
6
|
+
import '@floating-ui/react';
|
|
6
7
|
import { CalendarGrid } from './CalendarGrid.js';
|
|
7
8
|
import { CalendarHeader } from './CalendarHeader.js';
|
|
8
9
|
|
|
@@ -3,6 +3,7 @@ import '@internationalized/date';
|
|
|
3
3
|
import 'react-aria';
|
|
4
4
|
import 'react-stately';
|
|
5
5
|
import { useCalendarCell } from '../hooks/useCalendarCell.js';
|
|
6
|
+
import '@floating-ui/react';
|
|
6
7
|
import { calendarCell } from '../styles/calendar-cell.js';
|
|
7
8
|
import '../styles/groupButton.js';
|
|
8
9
|
import '../styles/progressBar.js';
|
|
@@ -3,6 +3,7 @@ import '@internationalized/date';
|
|
|
3
3
|
import 'react-aria';
|
|
4
4
|
import 'react-stately';
|
|
5
5
|
import { useCalendarGrid } from '../hooks/useCalendarGrid.js';
|
|
6
|
+
import '@floating-ui/react';
|
|
6
7
|
import { CalendarGridBodyRows } from './CalendarGridBodyRows.js';
|
|
7
8
|
import { CalendarGridHeaderRow } from './CalendarGridHeaderRow.js';
|
|
8
9
|
|
|
@@ -4,6 +4,7 @@ import 'react-aria';
|
|
|
4
4
|
import 'react-stately';
|
|
5
5
|
import { dateToCalendarDate } from './utils.js';
|
|
6
6
|
import { useDatePickerInput } from '../hooks/useDatePickerInput.js';
|
|
7
|
+
import '@floating-ui/react';
|
|
7
8
|
import { Calendar } from './Calendar.js';
|
|
8
9
|
import { DateField } from './DateField.js';
|
|
9
10
|
import { DatePickerInputBase } from './DatePickerInputBase.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { LiaCalendar } from 'react-icons/lia';
|
|
4
|
-
import { Input } from './Input.js';
|
|
4
|
+
import { Input } from './Input/index.js';
|
|
5
5
|
|
|
6
6
|
const DatePickerInputBase = ({
|
|
7
7
|
children,
|
|
@@ -4,6 +4,7 @@ import 'react-aria';
|
|
|
4
4
|
import 'react-stately';
|
|
5
5
|
import { dateToCalendarDate } from './utils.js';
|
|
6
6
|
import { useDateRangePickerInput } from '../hooks/useDateRangePickerInput.js';
|
|
7
|
+
import '@floating-ui/react';
|
|
7
8
|
import { DateField } from './DateField.js';
|
|
8
9
|
import { DatePickerInputBase } from './DatePickerInputBase.js';
|
|
9
10
|
import { RangeCalendar } from './RangeCalendar.js';
|