@tecsinapse/cortex-react 2.2.0-beta.5 → 2.2.1-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/ScrollableDigitSelector.js +1 -1
- package/dist/cjs/components/TimePicker/TimePickerSelector.js +2 -2
- package/dist/cjs/components/Uploader/Files.js +1 -1
- package/dist/cjs/index.js +0 -2
- package/dist/cjs/provider/ManagerContext.js +0 -3
- package/dist/cjs/styles/calendar-cell.js +3 -3
- package/dist/esm/components/ScrollableDigitSelector.js +1 -1
- package/dist/esm/components/TimePicker/TimePickerSelector.js +2 -2
- package/dist/esm/components/Uploader/Files.js +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/provider/ManagerContext.js +0 -3
- package/dist/esm/styles/calendar-cell.js +3 -3
- package/dist/types/components/index.d.ts +0 -1
- package/package.json +3 -3
- package/dist/cjs/components/Autocomplete/GroupedOptions.js +0 -27
- package/dist/cjs/components/Autocomplete/Option.js +0 -38
- package/dist/cjs/components/Autocomplete/Options.js +0 -28
- package/dist/cjs/components/Autocomplete/Popover.js +0 -34
- package/dist/cjs/components/Autocomplete/Root.js +0 -34
- package/dist/cjs/components/Autocomplete/Trigger.js +0 -48
- package/dist/cjs/components/Autocomplete/context.js +0 -9
- package/dist/cjs/components/Autocomplete/index.js +0 -19
- package/dist/esm/components/Autocomplete/GroupedOptions.js +0 -25
- package/dist/esm/components/Autocomplete/Option.js +0 -36
- package/dist/esm/components/Autocomplete/Options.js +0 -26
- package/dist/esm/components/Autocomplete/Popover.js +0 -32
- package/dist/esm/components/Autocomplete/Root.js +0 -32
- package/dist/esm/components/Autocomplete/Trigger.js +0 -46
- package/dist/esm/components/Autocomplete/context.js +0 -7
- package/dist/esm/components/Autocomplete/index.js +0 -17
- package/dist/types/components/Autocomplete/GroupedOptions.d.ts +0 -2
- package/dist/types/components/Autocomplete/Option.d.ts +0 -2
- package/dist/types/components/Autocomplete/Options.d.ts +0 -2
- package/dist/types/components/Autocomplete/Popover.d.ts +0 -2
- package/dist/types/components/Autocomplete/Root.d.ts +0 -2
- package/dist/types/components/Autocomplete/Trigger.d.ts +0 -2
- package/dist/types/components/Autocomplete/context.d.ts +0 -9
- package/dist/types/components/Autocomplete/index.d.ts +0 -9
- package/dist/types/components/Autocomplete/types.d.ts +0 -46
|
@@ -46,7 +46,7 @@ const ScrollableDigitSelector = ({
|
|
|
46
46
|
{
|
|
47
47
|
className: clsx(
|
|
48
48
|
"p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer",
|
|
49
|
-
value === val && "bg-primary-medium text-
|
|
49
|
+
value === val && "bg-primary-medium text-light"
|
|
50
50
|
),
|
|
51
51
|
children: formatValue(val)
|
|
52
52
|
}
|
|
@@ -105,7 +105,7 @@ const TimePickerSelector = ({
|
|
|
105
105
|
{
|
|
106
106
|
className: clsx(
|
|
107
107
|
dayPeriodStyle,
|
|
108
|
-
!isPM && "bg-primary-medium text-
|
|
108
|
+
!isPM && "bg-primary-medium text-light"
|
|
109
109
|
),
|
|
110
110
|
children: "AM"
|
|
111
111
|
}
|
|
@@ -122,7 +122,7 @@ const TimePickerSelector = ({
|
|
|
122
122
|
{
|
|
123
123
|
className: clsx(
|
|
124
124
|
dayPeriodStyle,
|
|
125
|
-
isPM && "bg-primary-medium text-
|
|
125
|
+
isPM && "bg-primary-medium text-light"
|
|
126
126
|
),
|
|
127
127
|
children: "PM"
|
|
128
128
|
}
|
|
@@ -10,7 +10,7 @@ const Files = ({
|
|
|
10
10
|
}) => {
|
|
11
11
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
|
|
12
12
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-mili items-center mb-deca", children: [
|
|
13
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-
|
|
13
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-light", children: `${files.length}` }),
|
|
14
14
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-md font-semibold", "data-testid": "upload-progress", children: uploadProgressText })
|
|
15
15
|
] }),
|
|
16
16
|
files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(Upload.File, { file, index, onDelete }, file.uid))
|
package/dist/cjs/index.js
CHANGED
|
@@ -44,7 +44,6 @@ var TimeFieldInput = require('./components/TimePicker/TimeFieldInput.js');
|
|
|
44
44
|
var Toggle = require('./components/Toggle.js');
|
|
45
45
|
var Tooltip = require('./components/Tooltip.js');
|
|
46
46
|
var index$7 = require('./components/Uploader/index.js');
|
|
47
|
-
var index$8 = require('./components/Autocomplete/index.js');
|
|
48
47
|
var useCalendar = require('./hooks/useCalendar.js');
|
|
49
48
|
var useCalendarCell = require('./hooks/useCalendarCell.js');
|
|
50
49
|
var useCalendarGrid = require('./hooks/useCalendarGrid.js');
|
|
@@ -128,7 +127,6 @@ exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
|
|
|
128
127
|
exports.Toggle = Toggle.Toggle;
|
|
129
128
|
exports.Tooltip = Tooltip.Tooltip;
|
|
130
129
|
exports.Uploader = index$7.Uploader;
|
|
131
|
-
exports.Autocomplete = index$8.Autocomplete;
|
|
132
130
|
exports.useCalendar = useCalendar.useCalendar;
|
|
133
131
|
exports.useCalendarCell = useCalendarCell.useCalendarCell;
|
|
134
132
|
exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;
|
|
@@ -66,9 +66,6 @@ require('../components/Tooltip.js');
|
|
|
66
66
|
require('react-icons/hi2');
|
|
67
67
|
require('react-icons/fa6');
|
|
68
68
|
require('react-dom');
|
|
69
|
-
require('../components/Autocomplete/context.js');
|
|
70
|
-
require('../components/Autocomplete/Options.js');
|
|
71
|
-
require('../components/Autocomplete/GroupedOptions.js');
|
|
72
69
|
|
|
73
70
|
const ManagerContext = React.createContext(null);
|
|
74
71
|
const ManagerProvider = ({ children }) => {
|
|
@@ -15,17 +15,17 @@ const calendarCell = tailwindVariants.tv({
|
|
|
15
15
|
},
|
|
16
16
|
isSelected: {
|
|
17
17
|
true: {
|
|
18
|
-
cell: "bg-primary-medium border-2 border-primary-medium text-
|
|
18
|
+
cell: "bg-primary-medium border-2 border-primary-medium text-light hover:bg-primary-medium"
|
|
19
19
|
}
|
|
20
20
|
},
|
|
21
21
|
isSelectionStart: {
|
|
22
22
|
true: {
|
|
23
|
-
cell: "bg-primary-medium border-2 border-primary-medium rounded-r-none text-
|
|
23
|
+
cell: "bg-primary-medium border-2 border-primary-medium rounded-r-none text-light"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
isSelectionEnd: {
|
|
27
27
|
true: {
|
|
28
|
-
cell: "bg-primary-medium border-2 border-primary-medium rounded-l-none text-
|
|
28
|
+
cell: "bg-primary-medium border-2 border-primary-medium rounded-l-none text-light"
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
inRange: {
|
|
@@ -44,7 +44,7 @@ const ScrollableDigitSelector = ({
|
|
|
44
44
|
{
|
|
45
45
|
className: clsx(
|
|
46
46
|
"p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer",
|
|
47
|
-
value === val && "bg-primary-medium text-
|
|
47
|
+
value === val && "bg-primary-medium text-light"
|
|
48
48
|
),
|
|
49
49
|
children: formatValue(val)
|
|
50
50
|
}
|
|
@@ -103,7 +103,7 @@ const TimePickerSelector = ({
|
|
|
103
103
|
{
|
|
104
104
|
className: clsx(
|
|
105
105
|
dayPeriodStyle,
|
|
106
|
-
!isPM && "bg-primary-medium text-
|
|
106
|
+
!isPM && "bg-primary-medium text-light"
|
|
107
107
|
),
|
|
108
108
|
children: "AM"
|
|
109
109
|
}
|
|
@@ -120,7 +120,7 @@ const TimePickerSelector = ({
|
|
|
120
120
|
{
|
|
121
121
|
className: clsx(
|
|
122
122
|
dayPeriodStyle,
|
|
123
|
-
isPM && "bg-primary-medium text-
|
|
123
|
+
isPM && "bg-primary-medium text-light"
|
|
124
124
|
),
|
|
125
125
|
children: "PM"
|
|
126
126
|
}
|
|
@@ -8,7 +8,7 @@ const Files = ({
|
|
|
8
8
|
}) => {
|
|
9
9
|
return /* @__PURE__ */ jsxs("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
|
|
10
10
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-mili items-center mb-deca", children: [
|
|
11
|
-
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-
|
|
11
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-light", children: `${files.length}` }),
|
|
12
12
|
/* @__PURE__ */ jsx("h2", { className: "text-md font-semibold", "data-testid": "upload-progress", children: uploadProgressText })
|
|
13
13
|
] }),
|
|
14
14
|
files.map((file, index) => /* @__PURE__ */ jsx(File, { file, index, onDelete }, file.uid))
|
package/dist/esm/index.js
CHANGED
|
@@ -42,7 +42,6 @@ export { TimeFieldInput } from './components/TimePicker/TimeFieldInput.js';
|
|
|
42
42
|
export { Toggle } from './components/Toggle.js';
|
|
43
43
|
export { Tooltip } from './components/Tooltip.js';
|
|
44
44
|
export { Uploader } from './components/Uploader/index.js';
|
|
45
|
-
export { Autocomplete } from './components/Autocomplete/index.js';
|
|
46
45
|
export { useCalendar } from './hooks/useCalendar.js';
|
|
47
46
|
export { useCalendarCell } from './hooks/useCalendarCell.js';
|
|
48
47
|
export { useCalendarGrid } from './hooks/useCalendarGrid.js';
|
|
@@ -64,9 +64,6 @@ import '../components/Tooltip.js';
|
|
|
64
64
|
import 'react-icons/hi2';
|
|
65
65
|
import 'react-icons/fa6';
|
|
66
66
|
import 'react-dom';
|
|
67
|
-
import '../components/Autocomplete/context.js';
|
|
68
|
-
import '../components/Autocomplete/Options.js';
|
|
69
|
-
import '../components/Autocomplete/GroupedOptions.js';
|
|
70
67
|
|
|
71
68
|
const ManagerContext = createContext(null);
|
|
72
69
|
const ManagerProvider = ({ children }) => {
|
|
@@ -13,17 +13,17 @@ const calendarCell = tv({
|
|
|
13
13
|
},
|
|
14
14
|
isSelected: {
|
|
15
15
|
true: {
|
|
16
|
-
cell: "bg-primary-medium border-2 border-primary-medium text-
|
|
16
|
+
cell: "bg-primary-medium border-2 border-primary-medium text-light hover:bg-primary-medium"
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
isSelectionStart: {
|
|
20
20
|
true: {
|
|
21
|
-
cell: "bg-primary-medium border-2 border-primary-medium rounded-r-none text-
|
|
21
|
+
cell: "bg-primary-medium border-2 border-primary-medium rounded-r-none text-light"
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
isSelectionEnd: {
|
|
25
25
|
true: {
|
|
26
|
-
cell: "bg-primary-medium border-2 border-primary-medium rounded-l-none text-
|
|
26
|
+
cell: "bg-primary-medium border-2 border-primary-medium rounded-l-none text-light"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
inRange: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/cortex-react",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.1-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": "3.7.0",
|
|
23
|
-
"@tecsinapse/cortex-core": "2.0.
|
|
23
|
+
"@tecsinapse/cortex-core": "2.0.2-beta.2",
|
|
24
24
|
"clsx": "2.1.1",
|
|
25
25
|
"currency.js": "2.0.4",
|
|
26
26
|
"embla-carousel-autoplay": "^8.0.0",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"react-icons": ">=5.2.0",
|
|
49
49
|
"tailwindcss": "^4.1.16"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "206d1de1e16b2cc748feff799ab53fc3306248f3"
|
|
52
52
|
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var cortexCore = require('@tecsinapse/cortex-core');
|
|
5
|
-
var Option = require('./Option.js');
|
|
6
|
-
|
|
7
|
-
const { groupedTitle, list } = cortexCore.selectVariants();
|
|
8
|
-
const AutocompleteGroupedOptions = ({
|
|
9
|
-
onSelect,
|
|
10
|
-
groupedLabelExtractor,
|
|
11
|
-
options
|
|
12
|
-
}) => {
|
|
13
|
-
return /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: [...options ?? []].map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
14
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
|
|
15
|
-
value.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
16
|
-
Option.AutocompleteOption,
|
|
17
|
-
{
|
|
18
|
-
grouped: true,
|
|
19
|
-
option,
|
|
20
|
-
onSelect
|
|
21
|
-
},
|
|
22
|
-
option.value
|
|
23
|
-
))
|
|
24
|
-
] }, key)) });
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
exports.AutocompleteGroupedOptions = AutocompleteGroupedOptions;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var cortexCore = require('@tecsinapse/cortex-core');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var context = require('./context.js');
|
|
7
|
-
|
|
8
|
-
const AutocompleteOption = ({
|
|
9
|
-
option,
|
|
10
|
-
onSelect,
|
|
11
|
-
grouped = false
|
|
12
|
-
}) => {
|
|
13
|
-
const context$1 = React.useContext(context.AutocompleteContext);
|
|
14
|
-
if (!context$1)
|
|
15
|
-
throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
|
|
16
|
-
const { setOpen } = context$1;
|
|
17
|
-
const handleSelect = React.useCallback(
|
|
18
|
-
(option2) => {
|
|
19
|
-
setOpen(false);
|
|
20
|
-
onSelect?.(option2);
|
|
21
|
-
},
|
|
22
|
-
[onSelect, setOpen]
|
|
23
|
-
);
|
|
24
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
|
-
"li",
|
|
26
|
-
{
|
|
27
|
-
onClick: () => handleSelect(option),
|
|
28
|
-
className: cortexCore.option({
|
|
29
|
-
selected: false,
|
|
30
|
-
grouped
|
|
31
|
-
}),
|
|
32
|
-
role: "option",
|
|
33
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: option.label })
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
exports.AutocompleteOption = AutocompleteOption;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var cortexCore = require('@tecsinapse/cortex-core');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var Option = require('./Option.js');
|
|
7
|
-
|
|
8
|
-
const { list } = cortexCore.selectVariants();
|
|
9
|
-
const AutocompleteOptions = ({
|
|
10
|
-
options,
|
|
11
|
-
onSelect,
|
|
12
|
-
children
|
|
13
|
-
}) => {
|
|
14
|
-
const defaultOptions = React.useMemo(
|
|
15
|
-
() => options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
16
|
-
Option.AutocompleteOption,
|
|
17
|
-
{
|
|
18
|
-
option,
|
|
19
|
-
onSelect
|
|
20
|
-
},
|
|
21
|
-
option.value
|
|
22
|
-
)) ?? [],
|
|
23
|
-
[options, onSelect]
|
|
24
|
-
);
|
|
25
|
-
return /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
exports.AutocompleteOptions = AutocompleteOptions;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var react = require('@floating-ui/react');
|
|
6
|
-
var index = require('../Popover/index.js');
|
|
7
|
-
var context = require('./context.js');
|
|
8
|
-
var clsx = require('clsx');
|
|
9
|
-
|
|
10
|
-
const AutocompletePopover = ({
|
|
11
|
-
children,
|
|
12
|
-
className
|
|
13
|
-
}) => {
|
|
14
|
-
const context$1 = React.useContext(context.AutocompleteContext);
|
|
15
|
-
if (!context$1)
|
|
16
|
-
throw new Error("AutocompletePopover must be used within AutocompleteRoot");
|
|
17
|
-
const { triggerWidth } = context$1;
|
|
18
|
-
return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
19
|
-
index.Popover.Content,
|
|
20
|
-
{
|
|
21
|
-
className: clsx(
|
|
22
|
-
"bg-white shadow-md rounded-md overflow-y-auto max-h-[30vh] outline-none z-9999",
|
|
23
|
-
className
|
|
24
|
-
),
|
|
25
|
-
style: {
|
|
26
|
-
width: triggerWidth ? `${triggerWidth}px` : "auto"
|
|
27
|
-
},
|
|
28
|
-
initialFocus: -1,
|
|
29
|
-
children
|
|
30
|
-
}
|
|
31
|
-
) });
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
exports.AutocompletePopover = AutocompletePopover;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var index = require('../Popover/index.js');
|
|
6
|
-
var context = require('./context.js');
|
|
7
|
-
|
|
8
|
-
const AutocompleteRoot = ({ children }) => {
|
|
9
|
-
const [triggerWidth, setTriggerWidth] = React.useState();
|
|
10
|
-
const [open, setOpen] = React.useState(false);
|
|
11
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12
|
-
context.AutocompleteContext.Provider,
|
|
13
|
-
{
|
|
14
|
-
value: {
|
|
15
|
-
open,
|
|
16
|
-
setOpen,
|
|
17
|
-
triggerWidth,
|
|
18
|
-
setTriggerWidth
|
|
19
|
-
},
|
|
20
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
21
|
-
index.Popover.Root,
|
|
22
|
-
{
|
|
23
|
-
placement: "bottom-start",
|
|
24
|
-
controlled: true,
|
|
25
|
-
isOpen: open,
|
|
26
|
-
setIsOpen: setOpen,
|
|
27
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full", children })
|
|
28
|
-
}
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
exports.AutocompleteRoot = AutocompleteRoot;
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var index = require('../Popover/index.js');
|
|
6
|
-
var index$1 = require('../Input/index.js');
|
|
7
|
-
var context = require('./context.js');
|
|
8
|
-
|
|
9
|
-
const AutocompleteTrigger = ({
|
|
10
|
-
inputValue,
|
|
11
|
-
onChange,
|
|
12
|
-
label,
|
|
13
|
-
disabled,
|
|
14
|
-
placeholder
|
|
15
|
-
}) => {
|
|
16
|
-
const context$1 = React.useContext(context.AutocompleteContext);
|
|
17
|
-
if (!context$1)
|
|
18
|
-
throw new Error("AutocompleteTrigger must be used within AutocompleteRoot");
|
|
19
|
-
const { setTriggerWidth, setOpen } = context$1;
|
|
20
|
-
const triggerRef = React.useRef(null);
|
|
21
|
-
React.useEffect(() => {
|
|
22
|
-
if (triggerRef.current && setTriggerWidth) {
|
|
23
|
-
const width = triggerRef.current.getBoundingClientRect().width;
|
|
24
|
-
setTriggerWidth(width);
|
|
25
|
-
}
|
|
26
|
-
}, [triggerRef.current, setTriggerWidth]);
|
|
27
|
-
const handleChange = (event) => {
|
|
28
|
-
onChange(event);
|
|
29
|
-
if (event.target.value.length > 0) {
|
|
30
|
-
setOpen(true);
|
|
31
|
-
} else {
|
|
32
|
-
setOpen(false);
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
36
|
-
index$1.Input.Root,
|
|
37
|
-
{
|
|
38
|
-
label: label ?? "Selecione uma op\xE7\xE3o",
|
|
39
|
-
value: inputValue,
|
|
40
|
-
onChange: handleChange,
|
|
41
|
-
disabled,
|
|
42
|
-
placeholder,
|
|
43
|
-
ref: triggerRef
|
|
44
|
-
}
|
|
45
|
-
) });
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
exports.AutocompleteTrigger = AutocompleteTrigger;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var Root = require('./Root.js');
|
|
4
|
-
var Trigger = require('./Trigger.js');
|
|
5
|
-
var Popover = require('./Popover.js');
|
|
6
|
-
var Options = require('./Options.js');
|
|
7
|
-
var Option = require('./Option.js');
|
|
8
|
-
var GroupedOptions = require('./GroupedOptions.js');
|
|
9
|
-
|
|
10
|
-
const Autocomplete = {
|
|
11
|
-
Root: Root.AutocompleteRoot,
|
|
12
|
-
Trigger: Trigger.AutocompleteTrigger,
|
|
13
|
-
Popover: Popover.AutocompletePopover,
|
|
14
|
-
Options: Options.AutocompleteOptions,
|
|
15
|
-
Option: Option.AutocompleteOption,
|
|
16
|
-
GroupedOptions: GroupedOptions.AutocompleteGroupedOptions
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
exports.Autocomplete = Autocomplete;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { selectVariants } from '@tecsinapse/cortex-core';
|
|
3
|
-
import { AutocompleteOption } from './Option.js';
|
|
4
|
-
|
|
5
|
-
const { groupedTitle, list } = selectVariants();
|
|
6
|
-
const AutocompleteGroupedOptions = ({
|
|
7
|
-
onSelect,
|
|
8
|
-
groupedLabelExtractor,
|
|
9
|
-
options
|
|
10
|
-
}) => {
|
|
11
|
-
return /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: [...options ?? []].map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
|
|
12
|
-
/* @__PURE__ */ jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
|
|
13
|
-
value.map((option) => /* @__PURE__ */ jsx(
|
|
14
|
-
AutocompleteOption,
|
|
15
|
-
{
|
|
16
|
-
grouped: true,
|
|
17
|
-
option,
|
|
18
|
-
onSelect
|
|
19
|
-
},
|
|
20
|
-
option.value
|
|
21
|
-
))
|
|
22
|
-
] }, key)) });
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export { AutocompleteGroupedOptions };
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { option } from '@tecsinapse/cortex-core';
|
|
3
|
-
import { useContext, useCallback } from 'react';
|
|
4
|
-
import { AutocompleteContext } from './context.js';
|
|
5
|
-
|
|
6
|
-
const AutocompleteOption = ({
|
|
7
|
-
option: option$1,
|
|
8
|
-
onSelect,
|
|
9
|
-
grouped = false
|
|
10
|
-
}) => {
|
|
11
|
-
const context = useContext(AutocompleteContext);
|
|
12
|
-
if (!context)
|
|
13
|
-
throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
|
|
14
|
-
const { setOpen } = context;
|
|
15
|
-
const handleSelect = useCallback(
|
|
16
|
-
(option2) => {
|
|
17
|
-
setOpen(false);
|
|
18
|
-
onSelect?.(option2);
|
|
19
|
-
},
|
|
20
|
-
[onSelect, setOpen]
|
|
21
|
-
);
|
|
22
|
-
return /* @__PURE__ */ jsx(
|
|
23
|
-
"li",
|
|
24
|
-
{
|
|
25
|
-
onClick: () => handleSelect(option$1),
|
|
26
|
-
className: option({
|
|
27
|
-
selected: false,
|
|
28
|
-
grouped
|
|
29
|
-
}),
|
|
30
|
-
role: "option",
|
|
31
|
-
children: /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: option$1.label })
|
|
32
|
-
}
|
|
33
|
-
);
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export { AutocompleteOption };
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { selectVariants } from '@tecsinapse/cortex-core';
|
|
3
|
-
import { useMemo } from 'react';
|
|
4
|
-
import { AutocompleteOption } from './Option.js';
|
|
5
|
-
|
|
6
|
-
const { list } = selectVariants();
|
|
7
|
-
const AutocompleteOptions = ({
|
|
8
|
-
options,
|
|
9
|
-
onSelect,
|
|
10
|
-
children
|
|
11
|
-
}) => {
|
|
12
|
-
const defaultOptions = useMemo(
|
|
13
|
-
() => options?.map((option) => /* @__PURE__ */ jsx(
|
|
14
|
-
AutocompleteOption,
|
|
15
|
-
{
|
|
16
|
-
option,
|
|
17
|
-
onSelect
|
|
18
|
-
},
|
|
19
|
-
option.value
|
|
20
|
-
)) ?? [],
|
|
21
|
-
[options, onSelect]
|
|
22
|
-
);
|
|
23
|
-
return /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
export { AutocompleteOptions };
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useContext } from 'react';
|
|
3
|
-
import { FloatingPortal } from '@floating-ui/react';
|
|
4
|
-
import { Popover } from '../Popover/index.js';
|
|
5
|
-
import { AutocompleteContext } from './context.js';
|
|
6
|
-
import clsx from 'clsx';
|
|
7
|
-
|
|
8
|
-
const AutocompletePopover = ({
|
|
9
|
-
children,
|
|
10
|
-
className
|
|
11
|
-
}) => {
|
|
12
|
-
const context = useContext(AutocompleteContext);
|
|
13
|
-
if (!context)
|
|
14
|
-
throw new Error("AutocompletePopover must be used within AutocompleteRoot");
|
|
15
|
-
const { triggerWidth } = context;
|
|
16
|
-
return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
|
|
17
|
-
Popover.Content,
|
|
18
|
-
{
|
|
19
|
-
className: clsx(
|
|
20
|
-
"bg-white shadow-md rounded-md overflow-y-auto max-h-[30vh] outline-none z-9999",
|
|
21
|
-
className
|
|
22
|
-
),
|
|
23
|
-
style: {
|
|
24
|
-
width: triggerWidth ? `${triggerWidth}px` : "auto"
|
|
25
|
-
},
|
|
26
|
-
initialFocus: -1,
|
|
27
|
-
children
|
|
28
|
-
}
|
|
29
|
-
) });
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export { AutocompletePopover };
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { Popover } from '../Popover/index.js';
|
|
4
|
-
import { AutocompleteContext } from './context.js';
|
|
5
|
-
|
|
6
|
-
const AutocompleteRoot = ({ children }) => {
|
|
7
|
-
const [triggerWidth, setTriggerWidth] = useState();
|
|
8
|
-
const [open, setOpen] = useState(false);
|
|
9
|
-
return /* @__PURE__ */ jsx(
|
|
10
|
-
AutocompleteContext.Provider,
|
|
11
|
-
{
|
|
12
|
-
value: {
|
|
13
|
-
open,
|
|
14
|
-
setOpen,
|
|
15
|
-
triggerWidth,
|
|
16
|
-
setTriggerWidth
|
|
17
|
-
},
|
|
18
|
-
children: /* @__PURE__ */ jsx(
|
|
19
|
-
Popover.Root,
|
|
20
|
-
{
|
|
21
|
-
placement: "bottom-start",
|
|
22
|
-
controlled: true,
|
|
23
|
-
isOpen: open,
|
|
24
|
-
setIsOpen: setOpen,
|
|
25
|
-
children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full", children })
|
|
26
|
-
}
|
|
27
|
-
)
|
|
28
|
-
}
|
|
29
|
-
);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export { AutocompleteRoot };
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useContext, useRef, useEffect } from 'react';
|
|
3
|
-
import { Popover } from '../Popover/index.js';
|
|
4
|
-
import { Input } from '../Input/index.js';
|
|
5
|
-
import { AutocompleteContext } from './context.js';
|
|
6
|
-
|
|
7
|
-
const AutocompleteTrigger = ({
|
|
8
|
-
inputValue,
|
|
9
|
-
onChange,
|
|
10
|
-
label,
|
|
11
|
-
disabled,
|
|
12
|
-
placeholder
|
|
13
|
-
}) => {
|
|
14
|
-
const context = useContext(AutocompleteContext);
|
|
15
|
-
if (!context)
|
|
16
|
-
throw new Error("AutocompleteTrigger must be used within AutocompleteRoot");
|
|
17
|
-
const { setTriggerWidth, setOpen } = context;
|
|
18
|
-
const triggerRef = useRef(null);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
if (triggerRef.current && setTriggerWidth) {
|
|
21
|
-
const width = triggerRef.current.getBoundingClientRect().width;
|
|
22
|
-
setTriggerWidth(width);
|
|
23
|
-
}
|
|
24
|
-
}, [triggerRef.current, setTriggerWidth]);
|
|
25
|
-
const handleChange = (event) => {
|
|
26
|
-
onChange(event);
|
|
27
|
-
if (event.target.value.length > 0) {
|
|
28
|
-
setOpen(true);
|
|
29
|
-
} else {
|
|
30
|
-
setOpen(false);
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
return /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
|
|
34
|
-
Input.Root,
|
|
35
|
-
{
|
|
36
|
-
label: label ?? "Selecione uma op\xE7\xE3o",
|
|
37
|
-
value: inputValue,
|
|
38
|
-
onChange: handleChange,
|
|
39
|
-
disabled,
|
|
40
|
-
placeholder,
|
|
41
|
-
ref: triggerRef
|
|
42
|
-
}
|
|
43
|
-
) });
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export { AutocompleteTrigger };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { AutocompleteRoot } from './Root.js';
|
|
2
|
-
import { AutocompleteTrigger } from './Trigger.js';
|
|
3
|
-
import { AutocompletePopover } from './Popover.js';
|
|
4
|
-
import { AutocompleteOptions } from './Options.js';
|
|
5
|
-
import { AutocompleteOption } from './Option.js';
|
|
6
|
-
import { AutocompleteGroupedOptions } from './GroupedOptions.js';
|
|
7
|
-
|
|
8
|
-
const Autocomplete = {
|
|
9
|
-
Root: AutocompleteRoot,
|
|
10
|
-
Trigger: AutocompleteTrigger,
|
|
11
|
-
Popover: AutocompletePopover,
|
|
12
|
-
Options: AutocompleteOptions,
|
|
13
|
-
Option: AutocompleteOption,
|
|
14
|
-
GroupedOptions: AutocompleteGroupedOptions
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export { Autocomplete };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
-
interface AutocompleteContextType {
|
|
3
|
-
open: boolean;
|
|
4
|
-
setOpen: (open: boolean) => void;
|
|
5
|
-
triggerWidth: number | undefined;
|
|
6
|
-
setTriggerWidth: Dispatch<SetStateAction<number | undefined>>;
|
|
7
|
-
}
|
|
8
|
-
export declare const AutocompleteContext: import("react").Context<AutocompleteContextType | undefined>;
|
|
9
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export declare const Autocomplete: {
|
|
2
|
-
Root: ({ children }: import("./types").AutocompleteRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
-
Trigger: ({ inputValue, onChange, label, disabled, placeholder, }: import("./types").AutocompleteTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
Popover: ({ children, className, }: import("./types").AutocompletePopoverProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
Options: ({ options, onSelect, children, }: import("./types").AutocompleteOptionsProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
-
Option: ({ option, onSelect, grouped, }: import("./types").AutocompleteOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
GroupedOptions: ({ onSelect, groupedLabelExtractor, options, }: import("./types").AutocompleteGroupedOptionsProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
};
|
|
9
|
-
export * from './types';
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import React, { ChangeEventHandler, ReactNode } from 'react';
|
|
2
|
-
export interface Option {
|
|
3
|
-
label: string;
|
|
4
|
-
value: string;
|
|
5
|
-
}
|
|
6
|
-
export interface AutocompleteRootProps {
|
|
7
|
-
children: ReactNode;
|
|
8
|
-
className?: string;
|
|
9
|
-
}
|
|
10
|
-
export interface AutocompleteTriggerProps {
|
|
11
|
-
inputValue: string;
|
|
12
|
-
onChange: ChangeEventHandler<HTMLInputElement>;
|
|
13
|
-
label?: string;
|
|
14
|
-
placeholder?: string;
|
|
15
|
-
disabled?: boolean;
|
|
16
|
-
className?: string;
|
|
17
|
-
}
|
|
18
|
-
export interface AutocompletePopoverProps {
|
|
19
|
-
children: ReactNode;
|
|
20
|
-
className?: string;
|
|
21
|
-
}
|
|
22
|
-
export interface AutocompleteOptionsProps {
|
|
23
|
-
options?: Option[];
|
|
24
|
-
onSelect?: (option: Option) => void;
|
|
25
|
-
children?: ReactNode;
|
|
26
|
-
}
|
|
27
|
-
export interface AutocompleteGroupedOptionsProps {
|
|
28
|
-
options?: Map<string, Option[]>;
|
|
29
|
-
groupedLabelExtractor: (value: string) => string;
|
|
30
|
-
onSelect?: (option: Option) => void;
|
|
31
|
-
}
|
|
32
|
-
export interface AutocompleteOptionProps {
|
|
33
|
-
option: Option;
|
|
34
|
-
onSelect?: (option: Option) => void;
|
|
35
|
-
grouped?: boolean;
|
|
36
|
-
}
|
|
37
|
-
export interface AutocompleteProps<T> {
|
|
38
|
-
inputValue: string;
|
|
39
|
-
setInputValue: React.Dispatch<React.SetStateAction<string>>;
|
|
40
|
-
onChange: ChangeEventHandler<HTMLInputElement>;
|
|
41
|
-
options: Option[];
|
|
42
|
-
onSelect?: (option: Option) => void;
|
|
43
|
-
label?: string;
|
|
44
|
-
placeholder?: string;
|
|
45
|
-
disabled?: boolean;
|
|
46
|
-
}
|