@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.
Files changed (39) hide show
  1. package/dist/cjs/components/ScrollableDigitSelector.js +1 -1
  2. package/dist/cjs/components/TimePicker/TimePickerSelector.js +2 -2
  3. package/dist/cjs/components/Uploader/Files.js +1 -1
  4. package/dist/cjs/index.js +0 -2
  5. package/dist/cjs/provider/ManagerContext.js +0 -3
  6. package/dist/cjs/styles/calendar-cell.js +3 -3
  7. package/dist/esm/components/ScrollableDigitSelector.js +1 -1
  8. package/dist/esm/components/TimePicker/TimePickerSelector.js +2 -2
  9. package/dist/esm/components/Uploader/Files.js +1 -1
  10. package/dist/esm/index.js +0 -1
  11. package/dist/esm/provider/ManagerContext.js +0 -3
  12. package/dist/esm/styles/calendar-cell.js +3 -3
  13. package/dist/types/components/index.d.ts +0 -1
  14. package/package.json +3 -3
  15. package/dist/cjs/components/Autocomplete/GroupedOptions.js +0 -27
  16. package/dist/cjs/components/Autocomplete/Option.js +0 -38
  17. package/dist/cjs/components/Autocomplete/Options.js +0 -28
  18. package/dist/cjs/components/Autocomplete/Popover.js +0 -34
  19. package/dist/cjs/components/Autocomplete/Root.js +0 -34
  20. package/dist/cjs/components/Autocomplete/Trigger.js +0 -48
  21. package/dist/cjs/components/Autocomplete/context.js +0 -9
  22. package/dist/cjs/components/Autocomplete/index.js +0 -19
  23. package/dist/esm/components/Autocomplete/GroupedOptions.js +0 -25
  24. package/dist/esm/components/Autocomplete/Option.js +0 -36
  25. package/dist/esm/components/Autocomplete/Options.js +0 -26
  26. package/dist/esm/components/Autocomplete/Popover.js +0 -32
  27. package/dist/esm/components/Autocomplete/Root.js +0 -32
  28. package/dist/esm/components/Autocomplete/Trigger.js +0 -46
  29. package/dist/esm/components/Autocomplete/context.js +0 -7
  30. package/dist/esm/components/Autocomplete/index.js +0 -17
  31. package/dist/types/components/Autocomplete/GroupedOptions.d.ts +0 -2
  32. package/dist/types/components/Autocomplete/Option.d.ts +0 -2
  33. package/dist/types/components/Autocomplete/Options.d.ts +0 -2
  34. package/dist/types/components/Autocomplete/Popover.d.ts +0 -2
  35. package/dist/types/components/Autocomplete/Root.d.ts +0 -2
  36. package/dist/types/components/Autocomplete/Trigger.d.ts +0 -2
  37. package/dist/types/components/Autocomplete/context.d.ts +0 -9
  38. package/dist/types/components/Autocomplete/index.d.ts +0 -9
  39. 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-white"
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-white"
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-white"
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-white", children: `${files.length}` }),
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-white hover:bg-primary-medium"
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-white"
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-white"
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-white"
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-white"
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-white"
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-white", children: `${files.length}` }),
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-white hover:bg-primary-medium"
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-white"
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-white"
26
+ cell: "bg-primary-medium border-2 border-primary-medium rounded-l-none text-light"
27
27
  }
28
28
  },
29
29
  inRange: {
@@ -32,4 +32,3 @@ export * from './TimePicker';
32
32
  export * from './Toggle';
33
33
  export * from './Tooltip';
34
34
  export * from './Uploader';
35
- export * from './Autocomplete';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tecsinapse/cortex-react",
3
- "version": "2.2.0-beta.5",
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.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": "bd4d4157b201d85cbbbe653fb1e080ca1034cebc"
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,9 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
-
5
- const AutocompleteContext = React.createContext(
6
- void 0
7
- );
8
-
9
- exports.AutocompleteContext = AutocompleteContext;
@@ -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,7 +0,0 @@
1
- import { createContext } from 'react';
2
-
3
- const AutocompleteContext = createContext(
4
- void 0
5
- );
6
-
7
- export { AutocompleteContext };
@@ -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,2 +0,0 @@
1
- import { AutocompleteGroupedOptionsProps } from './types';
2
- export declare const AutocompleteGroupedOptions: ({ onSelect, groupedLabelExtractor, options, }: AutocompleteGroupedOptionsProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +0,0 @@
1
- import { AutocompleteOptionProps } from './types';
2
- export declare const AutocompleteOption: ({ option, onSelect, grouped, }: AutocompleteOptionProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +0,0 @@
1
- import { AutocompleteOptionsProps } from './types';
2
- export declare const AutocompleteOptions: ({ options, onSelect, children, }: AutocompleteOptionsProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +0,0 @@
1
- import { AutocompletePopoverProps } from './types';
2
- export declare const AutocompletePopover: ({ children, className, }: AutocompletePopoverProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +0,0 @@
1
- import { AutocompleteRootProps } from './types';
2
- export declare const AutocompleteRoot: ({ children }: AutocompleteRootProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +0,0 @@
1
- import { AutocompleteTriggerProps } from './types';
2
- export declare const AutocompleteTrigger: ({ inputValue, onChange, label, disabled, placeholder, }: AutocompleteTriggerProps) => import("react/jsx-runtime").JSX.Element;
@@ -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
- }