@tecsinapse/cortex-react 2.2.0-beta.6 → 2.2.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/Autocomplete/GroupedOptions.js +11 -1
- package/dist/cjs/components/Autocomplete/Option.js +5 -3
- package/dist/cjs/components/Autocomplete/Options.js +17 -12
- package/dist/cjs/components/Autocomplete/Root.js +8 -2
- package/dist/cjs/components/Autocomplete/Trigger.js +3 -4
- package/dist/cjs/components/Autocomplete/context.js +1 -3
- package/dist/cjs/components/PhoneInput/FlagIcon.js +46 -0
- package/dist/cjs/components/PhoneInput/Option.js +29 -0
- package/dist/cjs/components/PhoneInput/Options.js +121 -0
- package/dist/cjs/components/PhoneInput/Popover.js +22 -0
- package/dist/cjs/components/PhoneInput/Root.js +61 -0
- package/dist/cjs/components/PhoneInput/Trigger.js +115 -0
- package/dist/cjs/components/PhoneInput/context.js +19 -0
- package/dist/cjs/components/PhoneInput/index.js +17 -0
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/provider/ManagerContext.js +5 -0
- package/dist/cjs/service/SnackbarSonner.js +32 -0
- package/dist/esm/components/Autocomplete/GroupedOptions.js +11 -1
- package/dist/esm/components/Autocomplete/Option.js +5 -3
- package/dist/esm/components/Autocomplete/Options.js +18 -13
- package/dist/esm/components/Autocomplete/Root.js +8 -2
- package/dist/esm/components/Autocomplete/Trigger.js +3 -4
- package/dist/esm/components/Autocomplete/context.js +1 -3
- package/dist/esm/components/PhoneInput/FlagIcon.js +25 -0
- package/dist/esm/components/PhoneInput/Option.js +27 -0
- package/dist/esm/components/PhoneInput/Options.js +119 -0
- package/dist/esm/components/PhoneInput/Popover.js +20 -0
- package/dist/esm/components/PhoneInput/Root.js +59 -0
- package/dist/esm/components/PhoneInput/Trigger.js +113 -0
- package/dist/esm/components/PhoneInput/context.js +16 -0
- package/dist/esm/components/PhoneInput/index.js +15 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/provider/ManagerContext.js +5 -0
- package/dist/esm/service/SnackbarSonner.js +32 -0
- package/dist/types/components/Autocomplete/GroupedOptions.d.ts +1 -1
- package/dist/types/components/Autocomplete/Option.d.ts +1 -1
- package/dist/types/components/Autocomplete/Options.d.ts +1 -1
- package/dist/types/components/Autocomplete/Root.d.ts +1 -1
- package/dist/types/components/Autocomplete/context.d.ts +4 -3
- package/dist/types/components/Autocomplete/index.d.ts +4 -4
- package/dist/types/components/Autocomplete/types.d.ts +17 -13
- package/dist/types/components/PhoneInput/FlagIcon.d.ts +8 -0
- package/dist/types/components/PhoneInput/Option.d.ts +6 -0
- package/dist/types/components/PhoneInput/Options.d.ts +3 -0
- package/dist/types/components/PhoneInput/Popover.d.ts +4 -0
- package/dist/types/components/PhoneInput/Root.d.ts +2 -0
- package/dist/types/components/PhoneInput/Trigger.d.ts +2 -0
- package/dist/types/components/PhoneInput/context.d.ts +15 -0
- package/dist/types/components/PhoneInput/index.d.ts +16 -0
- package/dist/types/components/PhoneInput/types.d.ts +13 -0
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/hooks/useAutocompleteGroupedOptions.d.ts +4 -5
- package/dist/types/hooks/useAutocompleteOptions.d.ts +4 -5
- package/dist/types/hooks/useFileUpload.d.ts +4 -4
- package/dist/types/provider/ManagerContext.d.ts +1 -1
- package/dist/types/service/SnackbarSonner.d.ts +19 -0
- package/package.json +5 -3
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var cortexCore = require('@tecsinapse/cortex-core');
|
|
5
|
+
var React = require('react');
|
|
5
6
|
var Option = require('./Option.js');
|
|
6
7
|
var useAutocompleteGroupedOptions = require('../../hooks/useAutocompleteGroupedOptions.js');
|
|
7
8
|
var SkeletonOptions = require('../Select/SkeletonOptions.js');
|
|
9
|
+
var context = require('./context.js');
|
|
8
10
|
|
|
9
11
|
const { groupedTitle, list } = cortexCore.selectVariants();
|
|
10
12
|
const AutocompleteGroupedOptions = ({
|
|
@@ -15,6 +17,14 @@ const AutocompleteGroupedOptions = ({
|
|
|
15
17
|
const { options: _options, isLoading } = useAutocompleteGroupedOptions.useAutocompleteGroupedOptions({
|
|
16
18
|
options
|
|
17
19
|
});
|
|
20
|
+
const context$1 = React.useContext(
|
|
21
|
+
context.AutocompleteContext
|
|
22
|
+
);
|
|
23
|
+
if (!context$1)
|
|
24
|
+
throw new Error(
|
|
25
|
+
"AutocompleteGroupedOptions must be used within AutocompleteRoot"
|
|
26
|
+
);
|
|
27
|
+
const { keyExtractor } = context$1;
|
|
18
28
|
return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
19
29
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
|
|
20
30
|
value.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -24,7 +34,7 @@ const AutocompleteGroupedOptions = ({
|
|
|
24
34
|
option,
|
|
25
35
|
onSelect
|
|
26
36
|
},
|
|
27
|
-
option
|
|
37
|
+
keyExtractor(option)
|
|
28
38
|
))
|
|
29
39
|
] }, key)) });
|
|
30
40
|
};
|
|
@@ -10,10 +10,12 @@ const AutocompleteOption = ({
|
|
|
10
10
|
onSelect,
|
|
11
11
|
grouped = false
|
|
12
12
|
}) => {
|
|
13
|
-
const context$1 = React.useContext(
|
|
13
|
+
const context$1 = React.useContext(
|
|
14
|
+
context.AutocompleteContext
|
|
15
|
+
);
|
|
14
16
|
if (!context$1)
|
|
15
17
|
throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
|
|
16
|
-
const { setOpen } = context$1;
|
|
18
|
+
const { setOpen, labelExtractor } = context$1;
|
|
17
19
|
const handleSelect = React.useCallback(
|
|
18
20
|
(option2) => {
|
|
19
21
|
setOpen(false);
|
|
@@ -30,7 +32,7 @@ const AutocompleteOption = ({
|
|
|
30
32
|
grouped
|
|
31
33
|
}),
|
|
32
34
|
role: "option",
|
|
33
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: option
|
|
35
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: labelExtractor(option) })
|
|
34
36
|
}
|
|
35
37
|
);
|
|
36
38
|
};
|
|
@@ -6,6 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var Option = require('./Option.js');
|
|
7
7
|
var useAutocompleteOptions = require('../../hooks/useAutocompleteOptions.js');
|
|
8
8
|
var SkeletonOptions = require('../Select/SkeletonOptions.js');
|
|
9
|
+
var context = require('./context.js');
|
|
9
10
|
|
|
10
11
|
const { list } = cortexCore.selectVariants();
|
|
11
12
|
const AutocompleteOptions = ({
|
|
@@ -13,19 +14,23 @@ const AutocompleteOptions = ({
|
|
|
13
14
|
onSelect,
|
|
14
15
|
children
|
|
15
16
|
}) => {
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
() => _options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
19
|
-
Option.AutocompleteOption,
|
|
20
|
-
{
|
|
21
|
-
option,
|
|
22
|
-
onSelect
|
|
23
|
-
},
|
|
24
|
-
option.value
|
|
25
|
-
)) ?? [],
|
|
26
|
-
[_options, onSelect]
|
|
17
|
+
const context$1 = React.useContext(
|
|
18
|
+
context.AutocompleteContext
|
|
27
19
|
);
|
|
28
|
-
|
|
20
|
+
if (!context$1)
|
|
21
|
+
throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
|
|
22
|
+
const { keyExtractor } = context$1;
|
|
23
|
+
const { options: _options, isLoading } = useAutocompleteOptions.useAutocompleteOptions({
|
|
24
|
+
options
|
|
25
|
+
});
|
|
26
|
+
return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: children ?? _options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
|
+
Option.AutocompleteOption,
|
|
28
|
+
{
|
|
29
|
+
option,
|
|
30
|
+
onSelect
|
|
31
|
+
},
|
|
32
|
+
keyExtractor(option)
|
|
33
|
+
)) });
|
|
29
34
|
};
|
|
30
35
|
|
|
31
36
|
exports.AutocompleteOptions = AutocompleteOptions;
|
|
@@ -5,7 +5,11 @@ var React = require('react');
|
|
|
5
5
|
var index = require('../Popover/index.js');
|
|
6
6
|
var context = require('./context.js');
|
|
7
7
|
|
|
8
|
-
const AutocompleteRoot = ({
|
|
8
|
+
const AutocompleteRoot = ({
|
|
9
|
+
keyExtractor,
|
|
10
|
+
labelExtractor,
|
|
11
|
+
children
|
|
12
|
+
}) => {
|
|
9
13
|
const [triggerWidth, setTriggerWidth] = React.useState();
|
|
10
14
|
const [open, setOpen] = React.useState(false);
|
|
11
15
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -15,7 +19,9 @@ const AutocompleteRoot = ({ children }) => {
|
|
|
15
19
|
open,
|
|
16
20
|
setOpen,
|
|
17
21
|
triggerWidth,
|
|
18
|
-
setTriggerWidth
|
|
22
|
+
setTriggerWidth,
|
|
23
|
+
keyExtractor,
|
|
24
|
+
labelExtractor
|
|
19
25
|
},
|
|
20
26
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
21
27
|
index.Popover.Root,
|
|
@@ -32,17 +32,16 @@ const AutocompleteTrigger = ({
|
|
|
32
32
|
setOpen(false);
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
|
-
return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
36
36
|
index$1.Input.Root,
|
|
37
37
|
{
|
|
38
38
|
label: label ?? "Selecione uma op\xE7\xE3o",
|
|
39
39
|
value: inputValue,
|
|
40
40
|
onChange: handleChange,
|
|
41
41
|
disabled,
|
|
42
|
-
placeholder
|
|
43
|
-
ref: triggerRef
|
|
42
|
+
placeholder
|
|
44
43
|
}
|
|
45
|
-
) });
|
|
44
|
+
) }) });
|
|
46
45
|
};
|
|
47
46
|
|
|
48
47
|
exports.AutocompleteTrigger = AutocompleteTrigger;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var Flags = require('country-flag-icons/react/3x2');
|
|
5
|
+
|
|
6
|
+
function _interopNamespaceDefault(e) {
|
|
7
|
+
var n = Object.create(null);
|
|
8
|
+
if (e) {
|
|
9
|
+
Object.keys(e).forEach(function (k) {
|
|
10
|
+
if (k !== 'default') {
|
|
11
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
12
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () { return e[k]; }
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
n.default = e;
|
|
20
|
+
return Object.freeze(n);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
var Flags__namespace = /*#__PURE__*/_interopNamespaceDefault(Flags);
|
|
24
|
+
|
|
25
|
+
const FlagIcon = ({
|
|
26
|
+
countryCode,
|
|
27
|
+
className = "w-[25px]",
|
|
28
|
+
title
|
|
29
|
+
}) => {
|
|
30
|
+
if (!countryCode) return null;
|
|
31
|
+
const upperCode = countryCode.toUpperCase();
|
|
32
|
+
const FlagComponent = Flags__namespace[upperCode];
|
|
33
|
+
if (!FlagComponent) {
|
|
34
|
+
return null;
|
|
35
|
+
}
|
|
36
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
37
|
+
FlagComponent,
|
|
38
|
+
{
|
|
39
|
+
className,
|
|
40
|
+
title: title || upperCode,
|
|
41
|
+
"aria-label": `Flag of ${upperCode}`
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
exports.FlagIcon = FlagIcon;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
|
|
5
|
+
const PhoneInputOption = ({
|
|
6
|
+
country,
|
|
7
|
+
handleSelectCountry,
|
|
8
|
+
disableClick = false
|
|
9
|
+
}) => {
|
|
10
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
11
|
+
"button",
|
|
12
|
+
{
|
|
13
|
+
className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-secondary-xlight bg-inherit",
|
|
14
|
+
onClick: () => {
|
|
15
|
+
handleSelectCountry(country);
|
|
16
|
+
},
|
|
17
|
+
disabled: disableClick,
|
|
18
|
+
children: [
|
|
19
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: country?.name }),
|
|
20
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-secondary-light text-sm", children: [
|
|
21
|
+
"+",
|
|
22
|
+
country?.dialCode
|
|
23
|
+
] })
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
exports.PhoneInputOption = PhoneInputOption;
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var Divider = require('../Divider.js');
|
|
6
|
+
var context = require('./context.js');
|
|
7
|
+
var Option = require('./Option.js');
|
|
8
|
+
require('clsx');
|
|
9
|
+
require('../Accordion/context.js');
|
|
10
|
+
require('react-icons/lia');
|
|
11
|
+
require('@internationalized/date');
|
|
12
|
+
require('../Badge.js');
|
|
13
|
+
require('react-icons/md');
|
|
14
|
+
require('@tecsinapse/cortex-core');
|
|
15
|
+
require('react-aria');
|
|
16
|
+
require('react-stately');
|
|
17
|
+
require('../../provider/MenubarContext.js');
|
|
18
|
+
require('../../provider/SnackbarProvider.js');
|
|
19
|
+
require('../../provider/CalendarProvider.js');
|
|
20
|
+
require('../../provider/ManagerContext.js');
|
|
21
|
+
require('../Popover/Context.js');
|
|
22
|
+
require('react-dropzone');
|
|
23
|
+
require('uuid');
|
|
24
|
+
require('@floating-ui/react');
|
|
25
|
+
require('currency.js');
|
|
26
|
+
require('../Calendar/CalendarCell.js');
|
|
27
|
+
require('react-icons/fa');
|
|
28
|
+
require('react-icons/io');
|
|
29
|
+
require('embla-carousel-react');
|
|
30
|
+
require('embla-carousel-autoplay');
|
|
31
|
+
require('../ColorPicker.js');
|
|
32
|
+
require('../DatePicker/DateSegment.js');
|
|
33
|
+
require('../DatePicker/DatePickerInputBase.js');
|
|
34
|
+
require('../GroupButton.js');
|
|
35
|
+
var index = require('../Input/index.js');
|
|
36
|
+
require('../Menubar/Left.js');
|
|
37
|
+
require('../../styles/menubar.js');
|
|
38
|
+
require('../Menubar/Right.js');
|
|
39
|
+
require('../Menubar/Dropdown.js');
|
|
40
|
+
require('../Menubar/MostUsed.js');
|
|
41
|
+
require('../Menubar/MostUsedItem.js');
|
|
42
|
+
require('../Menubar/Header.js');
|
|
43
|
+
require('../Menubar/Item.js');
|
|
44
|
+
require('../../provider/CategoriesContext.js');
|
|
45
|
+
require('../Menubar/SubItem.js');
|
|
46
|
+
require('../ProgressBar/Progress.js');
|
|
47
|
+
require('../RadioButton.js');
|
|
48
|
+
require('../Select/GroupedOptions.js');
|
|
49
|
+
require('../Select/context.js');
|
|
50
|
+
require('../Select/MultiGroupedOptions.js');
|
|
51
|
+
require('../Select/MultiOptions.js');
|
|
52
|
+
require('../Select/Options.js');
|
|
53
|
+
require('../Select/Trigger.js');
|
|
54
|
+
require('../../styles/stepNodeVariants.js');
|
|
55
|
+
require('../TextArea/Box.js');
|
|
56
|
+
require('../TextArea/Face.js');
|
|
57
|
+
require('../TextArea/Left.js');
|
|
58
|
+
require('../TextArea/Right.js');
|
|
59
|
+
require('../TextArea/Root.js');
|
|
60
|
+
require('../TimePicker/TimeFieldInput.js');
|
|
61
|
+
require('../Tooltip.js');
|
|
62
|
+
require('react-icons/hi2');
|
|
63
|
+
require('react-icons/fa6');
|
|
64
|
+
require('react-dom');
|
|
65
|
+
require('react-icons/io5');
|
|
66
|
+
require('../Autocomplete/context.js');
|
|
67
|
+
require('../Autocomplete/Options.js');
|
|
68
|
+
require('../Autocomplete/GroupedOptions.js');
|
|
69
|
+
var reactInternationalPhone = require('react-international-phone');
|
|
70
|
+
require('country-flag-icons/react/3x2');
|
|
71
|
+
|
|
72
|
+
const countries = reactInternationalPhone.defaultCountries.map((c) => {
|
|
73
|
+
return reactInternationalPhone.parseCountry(c);
|
|
74
|
+
});
|
|
75
|
+
const PhoneInputOptions = ({
|
|
76
|
+
hasSearch = true
|
|
77
|
+
}) => {
|
|
78
|
+
const { country, setCountry, setIsOpen } = context.usePhoneContext();
|
|
79
|
+
const [searchText, setSearchText] = React.useState("");
|
|
80
|
+
const filteredCountries = React.useMemo(() => {
|
|
81
|
+
return countries.filter(
|
|
82
|
+
(c) => c.iso2 !== country?.iso2 && (c.name.toLowerCase().includes(searchText.toLowerCase()) || c.dialCode.includes(searchText))
|
|
83
|
+
);
|
|
84
|
+
}, [country, searchText]);
|
|
85
|
+
const handleSelect = (country2) => {
|
|
86
|
+
setCountry?.(country2.iso2);
|
|
87
|
+
setIsOpen?.(false);
|
|
88
|
+
};
|
|
89
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col overflow-y-auto", children: [
|
|
90
|
+
hasSearch ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
91
|
+
index.Input.Search,
|
|
92
|
+
{
|
|
93
|
+
onChange: (e) => setSearchText(e.target.value),
|
|
94
|
+
variants: { className: "mx-deca my-centi outline-none" }
|
|
95
|
+
}
|
|
96
|
+
) : null,
|
|
97
|
+
country ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
98
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
99
|
+
Option.PhoneInputOption,
|
|
100
|
+
{
|
|
101
|
+
country,
|
|
102
|
+
handleSelectCountry: handleSelect,
|
|
103
|
+
disableClick: true
|
|
104
|
+
}
|
|
105
|
+
),
|
|
106
|
+
/* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, {})
|
|
107
|
+
] }) : null,
|
|
108
|
+
filteredCountries.map((country2) => {
|
|
109
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
110
|
+
Option.PhoneInputOption,
|
|
111
|
+
{
|
|
112
|
+
country: country2,
|
|
113
|
+
handleSelectCountry: handleSelect
|
|
114
|
+
},
|
|
115
|
+
`${country2.dialCode} ${country2.iso2}`
|
|
116
|
+
);
|
|
117
|
+
})
|
|
118
|
+
] });
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
exports.PhoneInputOptions = PhoneInputOptions;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('@floating-ui/react');
|
|
5
|
+
var index = require('../Popover/index.js');
|
|
6
|
+
var context = require('./context.js');
|
|
7
|
+
|
|
8
|
+
const PhoneInputPopover = ({ children }) => {
|
|
9
|
+
const { triggerWidth } = context.usePhoneContext();
|
|
10
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
11
|
+
index.Popover.Content,
|
|
12
|
+
{
|
|
13
|
+
className: "bg-white shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none z-9999",
|
|
14
|
+
style: {
|
|
15
|
+
width: triggerWidth ? `${triggerWidth}px` : "auto"
|
|
16
|
+
},
|
|
17
|
+
children
|
|
18
|
+
}
|
|
19
|
+
) });
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
exports.PhoneInputPopover = PhoneInputPopover;
|
|
@@ -0,0 +1,61 @@
|
|
|
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 clsx = require('clsx');
|
|
7
|
+
var reactInternationalPhone = require('react-international-phone');
|
|
8
|
+
var context = require('./context.js');
|
|
9
|
+
|
|
10
|
+
const PhoneInputRoot = ({
|
|
11
|
+
children,
|
|
12
|
+
className,
|
|
13
|
+
onChange,
|
|
14
|
+
...rest
|
|
15
|
+
}) => {
|
|
16
|
+
const [triggerWidth, setTriggerWidth] = React.useState();
|
|
17
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
18
|
+
const {
|
|
19
|
+
country,
|
|
20
|
+
handlePhoneValueChange,
|
|
21
|
+
inputRef,
|
|
22
|
+
inputValue,
|
|
23
|
+
phone,
|
|
24
|
+
setCountry
|
|
25
|
+
} = reactInternationalPhone.usePhoneInput({
|
|
26
|
+
countries: reactInternationalPhone.defaultCountries,
|
|
27
|
+
onChange: ({ phone: phone2, ...rest2 }) => {
|
|
28
|
+
onChange?.(phone2, { ...rest2 });
|
|
29
|
+
},
|
|
30
|
+
...rest
|
|
31
|
+
});
|
|
32
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
33
|
+
index.Popover.Root,
|
|
34
|
+
{
|
|
35
|
+
placement: "bottom-start",
|
|
36
|
+
controlled: true,
|
|
37
|
+
isOpen,
|
|
38
|
+
setIsOpen,
|
|
39
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
40
|
+
context.PhoneInputContext.Provider,
|
|
41
|
+
{
|
|
42
|
+
value: {
|
|
43
|
+
triggerWidth,
|
|
44
|
+
setTriggerWidth,
|
|
45
|
+
isOpen,
|
|
46
|
+
setIsOpen,
|
|
47
|
+
country,
|
|
48
|
+
setCountry,
|
|
49
|
+
handlePhoneValueChange,
|
|
50
|
+
inputValue,
|
|
51
|
+
phone,
|
|
52
|
+
inputRef
|
|
53
|
+
},
|
|
54
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("relative w-full h-full", className), children })
|
|
55
|
+
}
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
exports.PhoneInputRoot = PhoneInputRoot;
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var io5 = require('react-icons/io5');
|
|
5
|
+
require('clsx');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
require('../Accordion/context.js');
|
|
8
|
+
require('react-icons/lia');
|
|
9
|
+
require('@internationalized/date');
|
|
10
|
+
require('../Badge.js');
|
|
11
|
+
require('react-icons/md');
|
|
12
|
+
require('@tecsinapse/cortex-core');
|
|
13
|
+
require('react-aria');
|
|
14
|
+
require('react-stately');
|
|
15
|
+
require('../../provider/MenubarContext.js');
|
|
16
|
+
require('../../provider/SnackbarProvider.js');
|
|
17
|
+
require('../../provider/CalendarProvider.js');
|
|
18
|
+
require('../../provider/ManagerContext.js');
|
|
19
|
+
require('../Popover/Context.js');
|
|
20
|
+
require('react-dropzone');
|
|
21
|
+
require('uuid');
|
|
22
|
+
require('@floating-ui/react');
|
|
23
|
+
require('currency.js');
|
|
24
|
+
require('../Calendar/CalendarCell.js');
|
|
25
|
+
require('react-icons/fa');
|
|
26
|
+
require('react-icons/io');
|
|
27
|
+
require('embla-carousel-react');
|
|
28
|
+
require('embla-carousel-autoplay');
|
|
29
|
+
require('../ColorPicker.js');
|
|
30
|
+
require('../DatePicker/DateSegment.js');
|
|
31
|
+
var index = require('../Popover/index.js');
|
|
32
|
+
require('../DatePicker/DatePickerInputBase.js');
|
|
33
|
+
require('../GroupButton.js');
|
|
34
|
+
var index$1 = require('../Input/index.js');
|
|
35
|
+
require('../Menubar/Left.js');
|
|
36
|
+
require('../../styles/menubar.js');
|
|
37
|
+
require('../Menubar/Right.js');
|
|
38
|
+
require('../Menubar/Dropdown.js');
|
|
39
|
+
require('../Menubar/MostUsed.js');
|
|
40
|
+
require('../Menubar/MostUsedItem.js');
|
|
41
|
+
require('../Menubar/Header.js');
|
|
42
|
+
require('../Menubar/Item.js');
|
|
43
|
+
require('../../provider/CategoriesContext.js');
|
|
44
|
+
require('../Menubar/SubItem.js');
|
|
45
|
+
require('../ProgressBar/Progress.js');
|
|
46
|
+
require('../RadioButton.js');
|
|
47
|
+
require('../Select/GroupedOptions.js');
|
|
48
|
+
require('../Select/context.js');
|
|
49
|
+
require('../Select/MultiGroupedOptions.js');
|
|
50
|
+
require('../Select/MultiOptions.js');
|
|
51
|
+
require('../Select/Options.js');
|
|
52
|
+
require('../Select/Trigger.js');
|
|
53
|
+
require('../../styles/stepNodeVariants.js');
|
|
54
|
+
require('../TextArea/Box.js');
|
|
55
|
+
require('../TextArea/Face.js');
|
|
56
|
+
require('../TextArea/Left.js');
|
|
57
|
+
require('../TextArea/Right.js');
|
|
58
|
+
require('../TextArea/Root.js');
|
|
59
|
+
require('../TimePicker/TimeFieldInput.js');
|
|
60
|
+
require('../Tooltip.js');
|
|
61
|
+
require('react-icons/hi2');
|
|
62
|
+
require('react-icons/fa6');
|
|
63
|
+
require('react-dom');
|
|
64
|
+
require('../Autocomplete/context.js');
|
|
65
|
+
require('../Autocomplete/Options.js');
|
|
66
|
+
require('../Autocomplete/GroupedOptions.js');
|
|
67
|
+
require('./Options.js');
|
|
68
|
+
var context = require('./context.js');
|
|
69
|
+
require('react-international-phone');
|
|
70
|
+
var FlagIcon = require('./FlagIcon.js');
|
|
71
|
+
|
|
72
|
+
const PhoneInputTrigger = ({
|
|
73
|
+
disabled = false,
|
|
74
|
+
label,
|
|
75
|
+
...rest
|
|
76
|
+
}) => {
|
|
77
|
+
const {
|
|
78
|
+
setIsOpen,
|
|
79
|
+
setTriggerWidth,
|
|
80
|
+
country,
|
|
81
|
+
handlePhoneValueChange,
|
|
82
|
+
inputValue
|
|
83
|
+
} = context.usePhoneContext();
|
|
84
|
+
const triggerRef = React.useRef(null);
|
|
85
|
+
React.useEffect(() => {
|
|
86
|
+
if (triggerRef.current && setTriggerWidth) {
|
|
87
|
+
const width = triggerRef.current.getBoundingClientRect().width;
|
|
88
|
+
setTriggerWidth(width);
|
|
89
|
+
}
|
|
90
|
+
}, [triggerRef.current, setTriggerWidth]);
|
|
91
|
+
return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Input.Face, { ref: triggerRef, children: [
|
|
92
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
93
|
+
index$1.Input.Box,
|
|
94
|
+
{
|
|
95
|
+
value: inputValue,
|
|
96
|
+
onChange: handlePhoneValueChange,
|
|
97
|
+
label: label ?? "Insert a phone number",
|
|
98
|
+
...rest
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
/* @__PURE__ */ jsxRuntime.jsx(index$1.Input.Right, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
102
|
+
"div",
|
|
103
|
+
{
|
|
104
|
+
className: "flex items-center gap-1 cursor-pointer w-full",
|
|
105
|
+
onClick: () => setIsOpen?.(true),
|
|
106
|
+
children: [
|
|
107
|
+
country ? /* @__PURE__ */ jsxRuntime.jsx(FlagIcon.FlagIcon, { countryCode: country.iso2, className: "w-[25px]" }) : null,
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronDown, { className: "h-full text-md" })
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
) })
|
|
112
|
+
] }) });
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
exports.PhoneInputTrigger = PhoneInputTrigger;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
const PhoneInputContext = React.createContext(
|
|
6
|
+
null
|
|
7
|
+
);
|
|
8
|
+
const usePhoneContext = () => {
|
|
9
|
+
const context = React.useContext(PhoneInputContext);
|
|
10
|
+
if (!context) {
|
|
11
|
+
throw new Error(
|
|
12
|
+
"usePhoneInputContext must be used within a usePhoneInputProvider"
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
return context;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
exports.PhoneInputContext = PhoneInputContext;
|
|
19
|
+
exports.usePhoneContext = usePhoneContext;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var Option = require('./Option.js');
|
|
4
|
+
var Options = require('./Options.js');
|
|
5
|
+
var Popover = require('./Popover.js');
|
|
6
|
+
var Root = require('./Root.js');
|
|
7
|
+
var Trigger = require('./Trigger.js');
|
|
8
|
+
|
|
9
|
+
const PhoneInput = {
|
|
10
|
+
Root: Root.PhoneInputRoot,
|
|
11
|
+
Popover: Popover.PhoneInputPopover,
|
|
12
|
+
Trigger: Trigger.PhoneInputTrigger,
|
|
13
|
+
Option: Option.PhoneInputOption,
|
|
14
|
+
Options: Options.PhoneInputOptions
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
exports.PhoneInput = PhoneInput;
|
package/dist/cjs/index.js
CHANGED
|
@@ -45,6 +45,7 @@ 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
47
|
var index$8 = require('./components/Autocomplete/index.js');
|
|
48
|
+
var index$9 = require('./components/PhoneInput/index.js');
|
|
48
49
|
var useCalendar = require('./hooks/useCalendar.js');
|
|
49
50
|
var useCalendarCell = require('./hooks/useCalendarCell.js');
|
|
50
51
|
var useCalendarGrid = require('./hooks/useCalendarGrid.js');
|
|
@@ -129,6 +130,7 @@ exports.Toggle = Toggle.Toggle;
|
|
|
129
130
|
exports.Tooltip = Tooltip.Tooltip;
|
|
130
131
|
exports.Uploader = index$7.Uploader;
|
|
131
132
|
exports.Autocomplete = index$8.Autocomplete;
|
|
133
|
+
exports.PhoneInput = index$9.PhoneInput;
|
|
132
134
|
exports.useCalendar = useCalendar.useCalendar;
|
|
133
135
|
exports.useCalendarCell = useCalendarCell.useCalendarCell;
|
|
134
136
|
exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;
|
|
@@ -69,6 +69,11 @@ require('react-dom');
|
|
|
69
69
|
require('../components/Autocomplete/context.js');
|
|
70
70
|
require('../components/Autocomplete/Options.js');
|
|
71
71
|
require('../components/Autocomplete/GroupedOptions.js');
|
|
72
|
+
require('../components/PhoneInput/Options.js');
|
|
73
|
+
require('../components/PhoneInput/context.js');
|
|
74
|
+
require('react-international-phone');
|
|
75
|
+
require('react-icons/io5');
|
|
76
|
+
require('country-flag-icons/react/3x2');
|
|
72
77
|
|
|
73
78
|
const ManagerContext = React.createContext(null);
|
|
74
79
|
const ManagerProvider = ({ children }) => {
|
|
@@ -35,6 +35,38 @@ class SnackbarSonner {
|
|
|
35
35
|
{ ...this._options, ...options }
|
|
36
36
|
);
|
|
37
37
|
}
|
|
38
|
+
async promise(promise, config) {
|
|
39
|
+
const { loading, success, error } = config;
|
|
40
|
+
const id = this.show(loading.type ?? "info", loading.message, {
|
|
41
|
+
...loading.options,
|
|
42
|
+
duration: loading.options?.duration ?? Infinity
|
|
43
|
+
});
|
|
44
|
+
try {
|
|
45
|
+
await promise;
|
|
46
|
+
if (!success) {
|
|
47
|
+
sonner.toast.dismiss(id);
|
|
48
|
+
} else {
|
|
49
|
+
const msg = success?.message ?? "Opera\xE7\xE3o conclu\xEDda com sucesso.";
|
|
50
|
+
this.show(success?.type ?? "success", msg, {
|
|
51
|
+
...success?.options,
|
|
52
|
+
id,
|
|
53
|
+
duration: success?.options?.duration ?? this._options?.duration ?? 5e3
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
} catch (err) {
|
|
57
|
+
if (!error) {
|
|
58
|
+
sonner.toast.dismiss(id);
|
|
59
|
+
} else {
|
|
60
|
+
const msg = error?.message ?? "Ocorreu um erro inesperado.";
|
|
61
|
+
this.show(error?.type ?? "error", msg, {
|
|
62
|
+
...error?.options,
|
|
63
|
+
id,
|
|
64
|
+
duration: error?.options?.duration ?? this._options?.duration ?? 5e3
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return promise;
|
|
69
|
+
}
|
|
38
70
|
}
|
|
39
71
|
|
|
40
72
|
exports.SnackbarSonner = SnackbarSonner;
|