@consumidor-positivo/aurora 0.0.148 → 0.0.150
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/components/Alert/index.es.js +1 -1
- package/dist/components/Calendar/index.es.js +2 -2
- package/dist/components/CalendarHeader/index.es.js +2 -2
- package/dist/components/Checkbox/index.es.js +1 -1
- package/dist/components/Datepicker/index.es.js +3 -3
- package/dist/components/Modal/index.d.ts +9 -0
- package/dist/components/Modal/index.es.js +26 -0
- package/dist/components/Modal/index.es.js.map +1 -0
- package/dist/components/Modal/styles.css +1 -0
- package/dist/components/PortalHolder/index.es.js +1 -1
- package/dist/components/Segment/index.es.js +1 -1
- package/dist/components/SelectField/index.es.js +190 -94
- package/dist/components/SelectField/index.es.js.map +1 -1
- package/dist/components/SelectField/styles.css +1 -1
- package/dist/components/Tag/index.es.js +1 -1
- package/dist/components/form/SelectField/hook.d.ts +2 -1
- package/dist/components/form/SelectField/index.d.ts +1 -1
- package/dist/components/form/SelectField/types.d.ts +1 -0
- package/dist/{index-BDy8i79S.js → index-CXayTd35.js} +2 -2
- package/dist/{index-BDy8i79S.js.map → index-CXayTd35.js.map} +1 -1
- package/dist/{index-B9cLhrrb.js → index-Cn20y-Ji.js} +2 -2
- package/dist/{index-B9cLhrrb.js.map → index-Cn20y-Ji.js.map} +1 -1
- package/dist/{index-C9HFx59f.js → index-piVJ4mle.js} +3 -3
- package/dist/{index-C9HFx59f.js.map → index-piVJ4mle.js.map} +1 -1
- package/dist/main.d.ts +1 -0
- package/dist/main.es.js +2 -0
- package/dist/main.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -8,9 +8,9 @@ import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
|
8
8
|
import { IconClock } from "../icons/IconClock/index.es.js";
|
|
9
9
|
import { IconInfo } from "../icons/IconInfo/index.es.js";
|
|
10
10
|
import { IconX } from "../icons/IconX/index.es.js";
|
|
11
|
+
import { h as COLOR_NEUTRAL_70, C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, W as COLOR_WARNING_50, a1 as COLOR_INFO_50 } from "../../tokens-BwvPtuyb.js";
|
|
11
12
|
import { Conditional } from "../Conditional/index.es.js";
|
|
12
13
|
import { Text } from "../Text/index.es.js";
|
|
13
|
-
import { h as COLOR_NEUTRAL_70, C as COLOR_SUCCESS_50, b as COLOR_ERROR_50, W as COLOR_WARNING_50, a1 as COLOR_INFO_50 } from "../../tokens-BwvPtuyb.js";
|
|
14
14
|
import './styles.css';const Alert = ({
|
|
15
15
|
showIcon = true,
|
|
16
16
|
status = "info",
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "../../index-CweZ_OcN.js";
|
|
3
|
-
import "../../index-
|
|
3
|
+
import "../../index-Cn20y-Ji.js";
|
|
4
4
|
import "../Button/index.es.js";
|
|
5
5
|
import "../PortalHolder/index.es.js";
|
|
6
|
-
import { a } from "../../index-
|
|
6
|
+
import { a } from "../../index-piVJ4mle.js";
|
|
7
7
|
export {
|
|
8
8
|
a as DatepickerCalendar
|
|
9
9
|
};
|
|
@@ -3,8 +3,8 @@ import "../../index-CweZ_OcN.js";
|
|
|
3
3
|
import "../Icon/index.es.js";
|
|
4
4
|
import "../icons/IconChevronLeft/index.es.js";
|
|
5
5
|
import "../icons/IconChevronRight/index.es.js";
|
|
6
|
-
import "../../index-
|
|
7
|
-
import { C } from "../../index-
|
|
6
|
+
import "../../index-CXayTd35.js";
|
|
7
|
+
import { C } from "../../index-Cn20y-Ji.js";
|
|
8
8
|
export {
|
|
9
9
|
C as CalendarHeader
|
|
10
10
|
};
|
|
@@ -3,8 +3,8 @@ import $dbSRa$react__default, { useState, useEffect } from "react";
|
|
|
3
3
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
4
4
|
import "../Icon/index.es.js";
|
|
5
5
|
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
6
|
-
import { F as Field } from "../../index-ZE6zszxw.js";
|
|
7
6
|
import { n as COLOR_NEUTRAL_00 } from "../../tokens-BwvPtuyb.js";
|
|
7
|
+
import { F as Field } from "../../index-ZE6zszxw.js";
|
|
8
8
|
import { Conditional } from "../Conditional/index.es.js";
|
|
9
9
|
import { Text } from "../Text/index.es.js";
|
|
10
10
|
import './styles.css';const CheckboxField = ({
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { B as BREAKPOINT_MD, c as COLOR_NEUTRAL_40 } from "../../tokens-BwvPtuyb.js";
|
|
2
3
|
import "../../index-CweZ_OcN.js";
|
|
3
4
|
import "../Icon/index.es.js";
|
|
4
5
|
import { IconCalendar } from "../icons/IconCalendar/index.es.js";
|
|
5
6
|
import { InputField } from "../InputField/index.es.js";
|
|
6
|
-
import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-
|
|
7
|
+
import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-piVJ4mle.js";
|
|
7
8
|
import { useRef, useState, useMemo, useEffect } from "react";
|
|
8
9
|
import { a as above } from "../../screen-DfYo7XQ_.js";
|
|
9
|
-
import { u as useOutsideClick } from "../../index-
|
|
10
|
-
import { B as BREAKPOINT_MD, c as COLOR_NEUTRAL_40 } from "../../tokens-BwvPtuyb.js";
|
|
10
|
+
import { u as useOutsideClick } from "../../index-CXayTd35.js";
|
|
11
11
|
import './styles.css';function useDatepicker({
|
|
12
12
|
value,
|
|
13
13
|
defaultValue = "empty",
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
|
|
2
|
+
type ModalProps = {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
onClose?: () => void;
|
|
5
|
+
headerContent?: React.ReactNode | string | JSX.Element | JSX.Element[];
|
|
6
|
+
content?: React.ReactNode | string | JSX.Element | JSX.Element[];
|
|
7
|
+
};
|
|
8
|
+
export declare const Modal: ({ isOpen, onClose, headerContent, content, }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
|
+
import "../Icon/index.es.js";
|
|
4
|
+
import { IconX } from "../icons/IconX/index.es.js";
|
|
5
|
+
import './styles.css';const Modal = ({
|
|
6
|
+
isOpen,
|
|
7
|
+
onClose,
|
|
8
|
+
headerContent,
|
|
9
|
+
content
|
|
10
|
+
}) => {
|
|
11
|
+
if (!isOpen) return null;
|
|
12
|
+
const modalClasses = classNames("au-modal", {
|
|
13
|
+
"au-modal--is-open": isOpen
|
|
14
|
+
});
|
|
15
|
+
return /* @__PURE__ */ jsx("div", { className: modalClasses, children: /* @__PURE__ */ jsxs("div", { className: "au-modal__container", children: [
|
|
16
|
+
/* @__PURE__ */ jsxs("div", { className: "au-modal__header", children: [
|
|
17
|
+
/* @__PURE__ */ jsx("div", { className: "au-modal__header-close", onClick: onClose, children: /* @__PURE__ */ jsx(IconX, {}) }),
|
|
18
|
+
headerContent
|
|
19
|
+
] }),
|
|
20
|
+
/* @__PURE__ */ jsx("div", { className: "au-modal__content", children: content })
|
|
21
|
+
] }) });
|
|
22
|
+
};
|
|
23
|
+
export {
|
|
24
|
+
Modal
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Modal/index.tsx"],"sourcesContent":["import { IconX } from '@components/icons'\nimport classNames from 'classnames'\n\nimport './styles.scss'\n\ntype ModalProps = {\n isOpen: boolean\n onClose?: () => void\n headerContent?: React.ReactNode | string | JSX.Element | JSX.Element[]\n content?: React.ReactNode | string | JSX.Element | JSX.Element[]\n}\n\nexport const Modal = ({\n isOpen,\n onClose,\n headerContent,\n content,\n}: ModalProps) => {\n if (!isOpen) return null\n\n const modalClasses = classNames('au-modal', {\n 'au-modal--is-open': isOpen,\n })\n\n return (\n <div className={modalClasses}>\n <div className=\"au-modal__container\">\n <div className=\"au-modal__header\">\n <div className=\"au-modal__header-close\" onClick={onClose}>\n <IconX />\n </div>\n {headerContent}\n </div>\n <div className=\"au-modal__content\">{content}</div>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":";;;;AAYO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AACZ,MAAA,CAAC,OAAe,QAAA;AAEd,QAAA,eAAe,WAAW,YAAY;AAAA,IAC1C,qBAAqB;AAAA,EAAA,CACtB;AAED,6BACG,OAAI,EAAA,WAAW,cACd,UAAC,qBAAA,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,oBAAC,SAAI,WAAU,0BAAyB,SAAS,SAC/C,UAAA,oBAAC,SAAM,EACT,CAAA;AAAA,MACC;AAAA,IAAA,GACH;AAAA,IACC,oBAAA,OAAA,EAAI,WAAU,qBAAqB,UAAQ,SAAA;AAAA,EAAA,EAC9C,CAAA,EACF,CAAA;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.au-modal{height:100vh;width:100vw;position:fixed;top:0;left:0;bottom:0;right:0;background-color:#16181dcc;opacity:0;visibility:hidden;pointer-events:none;transition:all .3s ease;z-index:5}@keyframes slideInY{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInX{0%{transform:translate(100%)}to{transform:translate(0)}}.au-modal--is-open{opacity:1;visibility:visible;pointer-events:all}.au-modal--is-open .au-modal__container{animation:slideInY .3s ease forwards}@media (min-width: 600px){.au-modal--is-open .au-modal__container{animation:slideInX .3s ease forwards}}.au-modal__container{background-color:#fff;border-radius:16px 16px 0 0;padding:16px;width:100%;height:100%;max-height:90vh;position:fixed;z-index:6;bottom:0}@media (min-width: 600px){.au-modal__container{border-radius:16px 0 0 16px;box-shadow:0 24px 56px #7686ad14,0 12px 12px #0048db0a;top:0;right:0;margin:0;height:100vh;height:100dvh;max-width:414px;max-height:100vh}}.au-modal__header{position:relative}.au-modal__header-close{cursor:pointer;display:flex;justify-content:end;width:100%}.au-modal__content{height:calc(100% - 150px);overflow-y:auto}.au-modal__content::-webkit-scrollbar{width:16px}.au-modal__content::-webkit-scrollbar-track{background:#f4f7fb;border-radius:32px}.au-modal__content::-webkit-scrollbar-thumb{background:#0048db;border-radius:8px;border:4px solid #f4f7fb}.au-modal__content::-webkit-scrollbar-thumb:hover{background:#1737a4;transition:all .3s ease}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { a as above } from "../../screen-DfYo7XQ_.js";
|
|
3
|
-
import { Portal } from "../Portal/index.es.js";
|
|
4
3
|
import { B as BREAKPOINT_MD } from "../../tokens-BwvPtuyb.js";
|
|
4
|
+
import { Portal } from "../Portal/index.es.js";
|
|
5
5
|
const PortalHolder = ({ withPortal, children }) => {
|
|
6
6
|
const shouldUsePortal = !above(BREAKPOINT_MD) && withPortal;
|
|
7
7
|
if (shouldUsePortal) return /* @__PURE__ */ jsx(Portal, { children });
|
|
@@ -4,7 +4,7 @@ import "../Icon/index.es.js";
|
|
|
4
4
|
import "../icons/IconChevronDown/index.es.js";
|
|
5
5
|
import "../icons/IconChevronLeft/index.es.js";
|
|
6
6
|
import "../icons/IconX/index.es.js";
|
|
7
|
-
import { S } from "../../index-
|
|
7
|
+
import { S } from "../../index-CXayTd35.js";
|
|
8
8
|
export {
|
|
9
9
|
S as Segment
|
|
10
10
|
};
|
|
@@ -1,12 +1,18 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createPortal } from "react-dom";
|
|
2
3
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
4
|
import "../Icon/index.es.js";
|
|
4
5
|
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
5
6
|
import { IconChevronDown } from "../icons/IconChevronDown/index.es.js";
|
|
7
|
+
import { IconSearch } from "../icons/IconSearch/index.es.js";
|
|
6
8
|
import { IconSlash } from "../icons/IconSlash/index.es.js";
|
|
9
|
+
import { Modal } from "../Modal/index.es.js";
|
|
10
|
+
import { Text } from "../Text/index.es.js";
|
|
11
|
+
import { Conditional } from "../Conditional/index.es.js";
|
|
12
|
+
import { c as COLOR_NEUTRAL_40 } from "../../tokens-BwvPtuyb.js";
|
|
7
13
|
import { F as Field } from "../../index-ZE6zszxw.js";
|
|
8
14
|
import { useState, useRef, useEffect } from "react";
|
|
9
|
-
import './styles.css';const useSelectField = (options, initialValue, onChange, onBlur, disabled, register, autocomplete = false) => {
|
|
15
|
+
import './styles.css';const useSelectField = (options, initialValue, onChange, onBlur, disabled, register, autocomplete = false, fullScreenOptions = false) => {
|
|
10
16
|
var _a;
|
|
11
17
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
12
18
|
const [selectedOption, setSelectedOption] = useState({
|
|
@@ -21,7 +27,7 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, o
|
|
|
21
27
|
const selectElementRef = useRef(null);
|
|
22
28
|
const [searchValue, setSearchValue] = useState("");
|
|
23
29
|
const activeOptionRef = useRef(null);
|
|
24
|
-
const filteredOptions = autocomplete ? options.filter(
|
|
30
|
+
const filteredOptions = autocomplete || fullScreenOptions ? options.filter(
|
|
25
31
|
(option) => option.label.toLowerCase().includes(searchValue.toLowerCase())
|
|
26
32
|
) : options;
|
|
27
33
|
useEffect(() => {
|
|
@@ -47,7 +53,8 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, o
|
|
|
47
53
|
}, [activeOptionIndex]);
|
|
48
54
|
useEffect(() => {
|
|
49
55
|
const handleClickOutside = (event) => {
|
|
50
|
-
|
|
56
|
+
const isClickedOutside = selectRef.current && !selectRef.current.contains(event.target) && activeOptionRef.current;
|
|
57
|
+
if (isClickedOutside) {
|
|
51
58
|
setIsDropdownOpen(false);
|
|
52
59
|
}
|
|
53
60
|
};
|
|
@@ -144,8 +151,8 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, o
|
|
|
144
151
|
setSelectedOption({ value: option.value, label: option.label });
|
|
145
152
|
}
|
|
146
153
|
setActiveOptionIndex(null);
|
|
147
|
-
setIsDropdownOpen(false);
|
|
148
154
|
setSearchValue("");
|
|
155
|
+
setTimeout(() => setIsDropdownOpen(false), 500);
|
|
149
156
|
if (onChange) {
|
|
150
157
|
onChange(optionValue);
|
|
151
158
|
}
|
|
@@ -177,6 +184,9 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, o
|
|
|
177
184
|
}, 200);
|
|
178
185
|
}
|
|
179
186
|
};
|
|
187
|
+
const onCloseOptions = () => {
|
|
188
|
+
setIsDropdownOpen(false);
|
|
189
|
+
};
|
|
180
190
|
return {
|
|
181
191
|
isDropdownOpen,
|
|
182
192
|
selectRef,
|
|
@@ -194,7 +204,8 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, o
|
|
|
194
204
|
dropdownMaxHeight,
|
|
195
205
|
selectedOption,
|
|
196
206
|
setSelectedOption,
|
|
197
|
-
handleOnBlur
|
|
207
|
+
handleOnBlur,
|
|
208
|
+
onCloseOptions
|
|
198
209
|
};
|
|
199
210
|
};
|
|
200
211
|
const SelectField = ({
|
|
@@ -215,7 +226,8 @@ const SelectField = ({
|
|
|
215
226
|
register,
|
|
216
227
|
onBlur,
|
|
217
228
|
autocomplete = false,
|
|
218
|
-
EmptyText = "Nada encontrado"
|
|
229
|
+
EmptyText = "Nada encontrado",
|
|
230
|
+
fullScreenOptions = false
|
|
219
231
|
}) => {
|
|
220
232
|
const {
|
|
221
233
|
isDropdownOpen,
|
|
@@ -232,7 +244,8 @@ const SelectField = ({
|
|
|
232
244
|
selectedOption,
|
|
233
245
|
handleInputChange,
|
|
234
246
|
dropdownMaxHeight,
|
|
235
|
-
handleOnBlur
|
|
247
|
+
handleOnBlur,
|
|
248
|
+
onCloseOptions
|
|
236
249
|
} = useSelectField(
|
|
237
250
|
options,
|
|
238
251
|
value,
|
|
@@ -240,82 +253,184 @@ const SelectField = ({
|
|
|
240
253
|
onBlur,
|
|
241
254
|
disabled,
|
|
242
255
|
register,
|
|
243
|
-
autocomplete
|
|
256
|
+
autocomplete,
|
|
257
|
+
fullScreenOptions
|
|
244
258
|
);
|
|
245
|
-
const
|
|
259
|
+
const selectClasses = classNames("au-field__select", {
|
|
246
260
|
"au-field__select--disabled": disabled,
|
|
247
261
|
"au-field__select--open": isDropdownOpen,
|
|
248
262
|
"au-field__select--required": required,
|
|
249
263
|
"au-field__select--error": error,
|
|
250
264
|
[className]: className
|
|
251
265
|
});
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
266
|
+
const optionsClasses = classNames("au-field__select-options", {
|
|
267
|
+
"au-field__select-options--open": isDropdownOpen
|
|
268
|
+
});
|
|
269
|
+
const optionClasses = (option, index) => classNames("au-field__select-option", {
|
|
270
|
+
"au-field__select-option--highlighted": activeOptionIndex === index,
|
|
271
|
+
"au-field__select-option--selected": option.value === selectedOption.value,
|
|
272
|
+
"au-field__select-option--disabled": option.disabled
|
|
273
|
+
});
|
|
274
|
+
const fullScreenOptionClasses = (option, index) => classNames("au-field__fullscreen-options-select-option", {
|
|
275
|
+
"au-field__fullscreen-options-select-option--highlighted": activeOptionIndex === index,
|
|
276
|
+
"au-field__fullscreen-options-select-option--selected": option.value === selectedOption.value,
|
|
277
|
+
"au-field__fullscreen-options-select-option--disabled": option.disabled
|
|
278
|
+
});
|
|
279
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
280
|
+
/* @__PURE__ */ jsxs(
|
|
281
|
+
Field.Root,
|
|
282
|
+
{
|
|
283
|
+
style,
|
|
284
|
+
customclass: className,
|
|
285
|
+
error,
|
|
286
|
+
disabled,
|
|
287
|
+
children: [
|
|
288
|
+
/* @__PURE__ */ jsx(
|
|
289
|
+
Field.Label,
|
|
273
290
|
{
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
"
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
291
|
+
text: label,
|
|
292
|
+
showOptionalLabel,
|
|
293
|
+
required,
|
|
294
|
+
error,
|
|
295
|
+
disabled
|
|
296
|
+
}
|
|
297
|
+
),
|
|
298
|
+
/* @__PURE__ */ jsxs("div", { className: selectClasses, children: [
|
|
299
|
+
/* @__PURE__ */ jsxs(
|
|
300
|
+
"div",
|
|
301
|
+
{
|
|
302
|
+
className: "au-field__select-wrapper",
|
|
303
|
+
onClick: toggleDropdown,
|
|
304
|
+
onKeyDown: onKeyDownDropdown,
|
|
305
|
+
tabIndex: disabled ? -1 : 0,
|
|
306
|
+
ref: selectRef,
|
|
307
|
+
role: "combobox",
|
|
308
|
+
"aria-haspopup": "listbox",
|
|
309
|
+
"aria-expanded": isDropdownOpen,
|
|
310
|
+
"aria-labelledby": "select-label",
|
|
311
|
+
"aria-activedescendant": activeOptionIndex !== null && filteredOptions[activeOptionIndex] ? filteredOptions[activeOptionIndex].value : void 0,
|
|
312
|
+
onBlur: handleOnBlur,
|
|
313
|
+
children: [
|
|
314
|
+
/* @__PURE__ */ jsx(
|
|
315
|
+
"input",
|
|
316
|
+
{
|
|
317
|
+
className: "au-field__select-input",
|
|
318
|
+
value: searchValue || selectedOption.label,
|
|
319
|
+
placeholder: placeholder || "Selecionar...",
|
|
320
|
+
onChange: handleInputChange,
|
|
321
|
+
readOnly: !autocomplete,
|
|
322
|
+
disabled
|
|
323
|
+
}
|
|
324
|
+
),
|
|
325
|
+
/* @__PURE__ */ jsx("div", { className: "au-field__select-icon", children: /* @__PURE__ */ jsx(IconChevronDown, {}) })
|
|
326
|
+
]
|
|
327
|
+
}
|
|
328
|
+
),
|
|
329
|
+
/* @__PURE__ */ jsx(
|
|
330
|
+
Conditional,
|
|
331
|
+
{
|
|
332
|
+
condition: !fullScreenOptions,
|
|
333
|
+
renderIf: /* @__PURE__ */ jsx(
|
|
334
|
+
"ul",
|
|
288
335
|
{
|
|
289
|
-
className:
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
336
|
+
className: optionsClasses,
|
|
337
|
+
role: "listbox",
|
|
338
|
+
"aria-live": "polite",
|
|
339
|
+
tabIndex: -1,
|
|
340
|
+
style: {
|
|
341
|
+
maxHeight: `${dropdownMaxHeight}px`,
|
|
342
|
+
overflowY: "auto"
|
|
343
|
+
},
|
|
344
|
+
children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("li", { className: "au-field__select-option au-field__select-option--empty", children: EmptyText }) : filteredOptions.map((option, index) => /* @__PURE__ */ jsxs(
|
|
345
|
+
"li",
|
|
346
|
+
{
|
|
347
|
+
className: optionClasses(option, index),
|
|
348
|
+
ref: activeOptionIndex === index ? activeOptionRef : null,
|
|
349
|
+
role: "option",
|
|
350
|
+
"aria-selected": option.value === selectedOption.value,
|
|
351
|
+
"aria-disabled": option.disabled,
|
|
352
|
+
onPointerUp: () => selectOption(option.value, option.disabled),
|
|
353
|
+
onMouseEnter: () => setActiveOptionIndex(index),
|
|
354
|
+
children: [
|
|
355
|
+
option.label,
|
|
356
|
+
option.disabled ? /* @__PURE__ */ jsx(IconSlash, {}) : option.value === selectedOption.value ? /* @__PURE__ */ jsx(IconCheck, {}) : null
|
|
357
|
+
]
|
|
358
|
+
},
|
|
359
|
+
index
|
|
360
|
+
))
|
|
295
361
|
}
|
|
296
|
-
)
|
|
297
|
-
|
|
298
|
-
|
|
362
|
+
)
|
|
363
|
+
}
|
|
364
|
+
),
|
|
365
|
+
/* @__PURE__ */ jsx(
|
|
366
|
+
"select",
|
|
367
|
+
{
|
|
368
|
+
hidden: true,
|
|
369
|
+
disabled,
|
|
370
|
+
value: selectedOption.value,
|
|
371
|
+
onChange: (e) => selectOption(e.target.value),
|
|
372
|
+
ref: selectElementRef,
|
|
373
|
+
name,
|
|
374
|
+
children: options.map((option, index) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, index))
|
|
375
|
+
}
|
|
376
|
+
)
|
|
377
|
+
] }),
|
|
378
|
+
/* @__PURE__ */ jsx(
|
|
379
|
+
Field.Message,
|
|
380
|
+
{
|
|
381
|
+
hasError: !!error,
|
|
382
|
+
errorMessage,
|
|
383
|
+
helpMessage
|
|
299
384
|
}
|
|
300
|
-
)
|
|
385
|
+
)
|
|
386
|
+
]
|
|
387
|
+
}
|
|
388
|
+
),
|
|
389
|
+
/* @__PURE__ */ jsx(
|
|
390
|
+
Conditional,
|
|
391
|
+
{
|
|
392
|
+
condition: fullScreenOptions,
|
|
393
|
+
renderIf: /* @__PURE__ */ jsx(Fragment, { children: createPortal(
|
|
301
394
|
/* @__PURE__ */ jsx(
|
|
302
|
-
|
|
395
|
+
Modal,
|
|
303
396
|
{
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
397
|
+
isOpen: isDropdownOpen,
|
|
398
|
+
onClose: onCloseOptions,
|
|
399
|
+
headerContent: /* @__PURE__ */ jsxs("div", { children: [
|
|
400
|
+
/* @__PURE__ */ jsx(Text, { as: "label", variant: "heading-small", weight: "bold", children: label }),
|
|
401
|
+
/* @__PURE__ */ jsxs(
|
|
402
|
+
"div",
|
|
403
|
+
{
|
|
404
|
+
className: "au-field__fullscreen-options-select-search-bar",
|
|
405
|
+
onKeyDown: onKeyDownDropdown,
|
|
406
|
+
tabIndex: disabled ? -1 : 0,
|
|
407
|
+
ref: selectRef,
|
|
408
|
+
role: "combobox",
|
|
409
|
+
"aria-haspopup": "listbox",
|
|
410
|
+
"aria-expanded": isDropdownOpen,
|
|
411
|
+
"aria-labelledby": "select-label",
|
|
412
|
+
"aria-activedescendant": activeOptionIndex !== null && filteredOptions[activeOptionIndex] ? filteredOptions[activeOptionIndex].value : void 0,
|
|
413
|
+
onBlur: handleOnBlur,
|
|
414
|
+
children: [
|
|
415
|
+
/* @__PURE__ */ jsx(
|
|
416
|
+
"input",
|
|
417
|
+
{
|
|
418
|
+
className: "au-field__select-input",
|
|
419
|
+
value: searchValue || selectedOption.label,
|
|
420
|
+
placeholder: "Buscar",
|
|
421
|
+
onChange: handleInputChange,
|
|
422
|
+
disabled
|
|
423
|
+
}
|
|
424
|
+
),
|
|
425
|
+
/* @__PURE__ */ jsx("div", { className: "au-field__select-icon", children: /* @__PURE__ */ jsx(IconSearch, { rawColor: COLOR_NEUTRAL_40 }) })
|
|
426
|
+
]
|
|
427
|
+
}
|
|
428
|
+
)
|
|
429
|
+
] }),
|
|
430
|
+
content: /* @__PURE__ */ jsx("div", { className: "au-field__fullscreen-options-select-options", children: filteredOptions.map((option, index) => /* @__PURE__ */ jsxs(
|
|
312
431
|
"li",
|
|
313
432
|
{
|
|
314
|
-
className:
|
|
315
|
-
"au-field__select-option--highlighted": activeOptionIndex === index,
|
|
316
|
-
"au-field__select-option--selected": option.value === selectedOption.value,
|
|
317
|
-
"au-field__select-option--disabled": option.disabled
|
|
318
|
-
}),
|
|
433
|
+
className: fullScreenOptionClasses(option, index),
|
|
319
434
|
ref: activeOptionIndex === index ? activeOptionRef : null,
|
|
320
435
|
role: "option",
|
|
321
436
|
"aria-selected": option.value === selectedOption.value,
|
|
@@ -328,33 +443,14 @@ const SelectField = ({
|
|
|
328
443
|
]
|
|
329
444
|
},
|
|
330
445
|
index
|
|
331
|
-
))
|
|
446
|
+
)) })
|
|
332
447
|
}
|
|
333
448
|
),
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
value: selectedOption.value,
|
|
340
|
-
onChange: (e) => selectOption(e.target.value),
|
|
341
|
-
ref: selectElementRef,
|
|
342
|
-
name,
|
|
343
|
-
children: options.map((option, index) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, index))
|
|
344
|
-
}
|
|
345
|
-
)
|
|
346
|
-
] }),
|
|
347
|
-
/* @__PURE__ */ jsx(
|
|
348
|
-
Field.Message,
|
|
349
|
-
{
|
|
350
|
-
hasError: !!error,
|
|
351
|
-
errorMessage,
|
|
352
|
-
helpMessage
|
|
353
|
-
}
|
|
354
|
-
)
|
|
355
|
-
]
|
|
356
|
-
}
|
|
357
|
-
);
|
|
449
|
+
document.body
|
|
450
|
+
) })
|
|
451
|
+
}
|
|
452
|
+
)
|
|
453
|
+
] });
|
|
358
454
|
};
|
|
359
455
|
export {
|
|
360
456
|
SelectField
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/SelectField/hook.ts","../../../lib/components/form/SelectField/index.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react'\nimport { OptionProps } from './types'\n\nexport const useSelectField = (\n options: OptionProps[],\n initialValue?: string,\n onChange?: (value: string) => void,\n onBlur?: React.FocusEventHandler,\n disabled?: boolean,\n register?: (instance: HTMLSelectElement | null) => void,\n autocomplete: boolean = false,\n) => {\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n const [selectedOption, setSelectedOption] = useState<OptionProps>({\n value: initialValue || '',\n label: initialValue\n ? options.find((option) => option.value === initialValue)?.label || ''\n : '',\n })\n const [activeOptionIndex, setActiveOptionIndex] = useState<number | null>(\n null,\n )\n const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number>(0)\n const selectRef = useRef<HTMLDivElement>(null)\n const selectElementRef = useRef<HTMLSelectElement>(null)\n const [searchValue, setSearchValue] = useState<string>('')\n const activeOptionRef = useRef<HTMLLIElement | null>(null)\n\n const filteredOptions = autocomplete\n ? options.filter((option) =>\n option.label.toLowerCase().includes(searchValue.toLowerCase()),\n )\n : options\n\n useEffect(() => {\n if (initialValue) {\n const option = options.find((option) => option.value === initialValue)\n if (option) {\n setSelectedOption({ value: option.value, label: option.label })\n }\n }\n }, [initialValue, options])\n\n useEffect(() => {\n if (register && selectElementRef.current) {\n register(selectElementRef.current)\n }\n }, [register])\n\n useEffect(() => {\n if (activeOptionRef.current) {\n activeOptionRef.current.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n })\n }\n }, [activeOptionIndex])\n\n useEffect(() => {\n const handleClickOutside = (event: PointerEvent) => {\n if (\n selectRef.current &&\n !selectRef.current.contains(event.target as Node)\n ) {\n setIsDropdownOpen(false)\n }\n }\n\n if (isDropdownOpen) {\n document.addEventListener('pointerup', handleClickOutside)\n } else {\n document.removeEventListener('pointerup', handleClickOutside)\n }\n\n return () => {\n document.removeEventListener('pointerup', handleClickOutside)\n }\n }, [isDropdownOpen])\n\n const toggleDropdown = () => {\n if (!isDropdownOpen && selectRef.current) {\n const { bottom } = selectRef.current.getBoundingClientRect()\n let totalPadding = 0\n let parentElement: HTMLElement | null = selectRef.current.parentElement\n\n while (parentElement) {\n const parentPaddingBottom = parseFloat(\n window.getComputedStyle(parentElement).paddingBottom || '0',\n )\n totalPadding += parentPaddingBottom\n parentElement = parentElement.parentElement\n }\n\n const availableSpaceBelow = window.innerHeight - bottom - totalPadding\n const minDropdownHeight = 212\n const calculatedHeight = Math.max(availableSpaceBelow, minDropdownHeight)\n\n setDropdownMaxHeight(calculatedHeight)\n }\n\n setIsDropdownOpen((prev) => {\n if (!prev) {\n const selectedIndex = options.findIndex(\n (option) => option.value === selectedOption.value,\n )\n setActiveOptionIndex(selectedIndex !== -1 ? selectedIndex : null)\n }\n return !prev\n })\n }\n\n const _findNextAvailableIndex = (\n currentIndex: number,\n direction: 'down' | 'up',\n ) => {\n const step = direction === 'down' ? 1 : -1\n let nextIndex =\n (currentIndex + step + filteredOptions.length) % filteredOptions.length\n\n while (filteredOptions[nextIndex]?.disabled) {\n nextIndex =\n (nextIndex + step + filteredOptions.length) % filteredOptions.length\n }\n\n return nextIndex\n }\n\n const onKeyDownDropdown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return\n\n const _actions: Record<string, () => void> = {\n Enter: () => {\n if (!isDropdownOpen) {\n toggleDropdown()\n return\n }\n if (\n activeOptionIndex !== null &&\n !filteredOptions[activeOptionIndex].disabled\n ) {\n e.preventDefault()\n selectOption(\n filteredOptions[activeOptionIndex].value,\n filteredOptions[activeOptionIndex].disabled,\n )\n }\n },\n ArrowDown: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(prev !== null ? prev : -1, 'down'),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n ArrowUp: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(\n prev !== null ? prev : filteredOptions.length,\n 'up',\n ),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n Escape: () => {\n setIsDropdownOpen(false)\n },\n }\n\n if (_actions[e.key]) {\n _actions[e.key]()\n }\n }\n\n const selectOption = (optionValue: string, optionDisabled?: boolean) => {\n if (optionDisabled) return\n\n const option = options.find((option) => option.value === optionValue)\n if (option) {\n setSelectedOption({ value: option.value, label: option.label })\n }\n\n setActiveOptionIndex(null)\n setIsDropdownOpen(false)\n setSearchValue('')\n if (onChange) {\n onChange(optionValue)\n }\n }\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value\n setSearchValue(value)\n\n if (onChange) {\n onChange(value)\n }\n\n if (value === '') {\n setSelectedOption({ value: '', label: '' })\n }\n\n if (!isDropdownOpen) {\n setIsDropdownOpen(true)\n }\n }\n\n const handleOnBlur = (event?: React.FocusEvent<Element>) => {\n if (onBlur) {\n setTimeout(() => {\n const getOptionByLabel = (label: string) =>\n options.find((option) => option.label === label)\n\n const elementValue = (event?.target as HTMLInputElement).value\n const selectedOptionFromElement = getOptionByLabel(elementValue)\n\n const targetValue = selectedOption?.value\n ? selectedOption\n : selectedOptionFromElement || { value: elementValue, label: '' }\n\n onBlur({\n ...event,\n target: targetValue,\n } as React.FocusEvent<Element> & {\n target: OptionProps\n })\n }, 200)\n }\n }\n\n return {\n isDropdownOpen,\n selectRef,\n activeOptionRef,\n selectElementRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n filteredOptions,\n searchValue,\n setSearchValue,\n handleInputChange,\n dropdownMaxHeight,\n selectedOption,\n setSelectedOption,\n handleOnBlur,\n }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconSlash, IconCheck } from '@components/icons'\nimport Field from '../Field'\nimport { SelectFieldProps } from './types'\nimport { useSelectField } from './hook'\nimport './styles.scss'\n\nexport const SelectField = ({\n label,\n options,\n showOptionalLabel,\n error,\n errorMessage,\n helpMessage,\n disabled,\n required,\n value,\n onChange,\n style,\n className,\n placeholder,\n name,\n register,\n onBlur,\n autocomplete = false,\n EmptyText = 'Nada encontrado',\n}: SelectFieldProps) => {\n const {\n isDropdownOpen,\n selectRef,\n selectElementRef,\n activeOptionRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n filteredOptions,\n searchValue,\n selectedOption,\n handleInputChange,\n dropdownMaxHeight,\n handleOnBlur\n } = useSelectField(\n options,\n value,\n onChange,\n onBlur,\n disabled,\n register,\n autocomplete,\n )\n\n const dropdownClasses = classNames('au-field__select', {\n 'au-field__select--disabled': disabled,\n 'au-field__select--open': isDropdownOpen,\n 'au-field__select--required': required,\n 'au-field__select--error': error,\n [className!]: className,\n })\n\n return (\n <Field.Root\n style={style}\n customclass={className}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n showOptionalLabel={showOptionalLabel}\n required={required}\n error={error}\n disabled={disabled}\n />\n <div className={dropdownClasses}>\n <div\n className=\"au-field__select-wrapper\"\n onClick={toggleDropdown}\n onKeyDown={onKeyDownDropdown}\n tabIndex={disabled ? -1 : 0}\n ref={selectRef}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isDropdownOpen}\n aria-labelledby=\"select-label\"\n aria-activedescendant={\n activeOptionIndex !== null && filteredOptions[activeOptionIndex]\n ? filteredOptions[activeOptionIndex].value\n : undefined\n }\n onBlur={handleOnBlur}>\n <input\n className=\"au-field__select-input\"\n value={searchValue || selectedOption.label}\n placeholder={placeholder || 'Selecionar...'}\n onChange={handleInputChange}\n readOnly={!autocomplete}\n disabled={disabled}\n />\n <div className=\"au-field__select-icon\">\n <IconChevronDown />\n </div>\n </div>\n <ul\n className={classNames('au-field__select-options', {\n 'au-field__select-options--open': isDropdownOpen,\n })}\n role=\"listbox\"\n aria-live=\"polite\"\n tabIndex={-1}\n style={{ maxHeight: `${dropdownMaxHeight}px`, overflowY: 'auto' }}>\n {filteredOptions.length === 0 ? (\n <li className=\"au-field__select-option au-field__select-option--empty\">\n {EmptyText}\n </li>\n ) : (\n filteredOptions.map((option, index) => (\n <li\n key={index}\n className={classNames('au-field__select-option', {\n 'au-field__select-option--highlighted':\n activeOptionIndex === index,\n 'au-field__select-option--selected':\n option.value === selectedOption.value,\n 'au-field__select-option--disabled': option.disabled,\n })}\n ref={activeOptionIndex === index ? activeOptionRef : null}\n role=\"option\"\n aria-selected={option.value === selectedOption.value}\n aria-disabled={option.disabled}\n onPointerUp={() => selectOption(option.value, option.disabled)}\n onMouseEnter={() => setActiveOptionIndex(index)}>\n {option.label}\n {option.disabled ? (\n <IconSlash />\n ) : option.value === selectedOption.value ? (\n <IconCheck />\n ) : null}\n </li>\n ))\n )}\n </ul>\n\n <select\n hidden\n disabled={disabled}\n value={selectedOption.value}\n onChange={(e) => selectOption(e.target.value)}\n ref={selectElementRef}\n name={name}>\n {options.map((option, index) => (\n <option key={index} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n <Field.Message\n hasError={!!error}\n errorMessage={errorMessage}\n helpMessage={helpMessage}\n />\n </Field.Root>\n )\n}\n"],"names":["option","_a"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/SelectField/hook.ts","../../../lib/components/form/SelectField/index.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react'\nimport { OptionProps } from './types'\n\nexport const useSelectField = (\n options: OptionProps[],\n initialValue?: string,\n onChange?: (value: string) => void,\n onBlur?: React.FocusEventHandler,\n disabled?: boolean,\n register?: (instance: HTMLSelectElement | null) => void,\n autocomplete: boolean = false,\n fullScreenOptions: boolean = false,\n) => {\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n const [selectedOption, setSelectedOption] = useState<OptionProps>({\n value: initialValue || '',\n label: initialValue\n ? options.find((option) => option.value === initialValue)?.label || ''\n : '',\n })\n const [activeOptionIndex, setActiveOptionIndex] = useState<number | null>(\n null,\n )\n const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number>(0)\n const selectRef = useRef<HTMLDivElement>(null)\n const selectElementRef = useRef<HTMLSelectElement>(null)\n const [searchValue, setSearchValue] = useState<string>('')\n const activeOptionRef = useRef<HTMLLIElement | null>(null)\n\n const filteredOptions = autocomplete || fullScreenOptions\n ? options.filter((option) =>\n option.label.toLowerCase().includes(searchValue.toLowerCase()),\n )\n : options\n\n useEffect(() => {\n if (initialValue) {\n const option = options.find((option) => option.value === initialValue)\n if (option) {\n setSelectedOption({ value: option.value, label: option.label })\n }\n }\n }, [initialValue, options])\n\n useEffect(() => {\n if (register && selectElementRef.current) {\n register(selectElementRef.current)\n }\n }, [register])\n\n useEffect(() => {\n if (activeOptionRef.current) {\n activeOptionRef.current.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n })\n }\n }, [activeOptionIndex])\n\n useEffect(() => {\n const handleClickOutside = (event: PointerEvent) => {\n const isClickedOutside =\n selectRef.current &&\n !selectRef.current.contains(event.target as Node) &&\n activeOptionRef.current\n\n if (isClickedOutside) {\n setIsDropdownOpen(false)\n }\n }\n\n if (isDropdownOpen) {\n document.addEventListener('pointerup', handleClickOutside)\n } else {\n document.removeEventListener('pointerup', handleClickOutside)\n }\n\n return () => {\n document.removeEventListener('pointerup', handleClickOutside)\n }\n }, [isDropdownOpen])\n\n const toggleDropdown = () => {\n if (!isDropdownOpen && selectRef.current) {\n const { bottom } = selectRef.current.getBoundingClientRect()\n let totalPadding = 0\n let parentElement: HTMLElement | null = selectRef.current.parentElement\n\n while (parentElement) {\n const parentPaddingBottom = parseFloat(\n window.getComputedStyle(parentElement).paddingBottom || '0',\n )\n totalPadding += parentPaddingBottom\n parentElement = parentElement.parentElement\n }\n\n const availableSpaceBelow = window.innerHeight - bottom - totalPadding\n const minDropdownHeight = 212\n const calculatedHeight = Math.max(availableSpaceBelow, minDropdownHeight)\n\n setDropdownMaxHeight(calculatedHeight)\n }\n\n setIsDropdownOpen((prev) => {\n if (!prev) {\n const selectedIndex = options.findIndex(\n (option) => option.value === selectedOption.value,\n )\n setActiveOptionIndex(selectedIndex !== -1 ? selectedIndex : null)\n }\n return !prev\n })\n }\n\n const _findNextAvailableIndex = (\n currentIndex: number,\n direction: 'down' | 'up',\n ) => {\n const step = direction === 'down' ? 1 : -1\n let nextIndex =\n (currentIndex + step + filteredOptions.length) % filteredOptions.length\n\n while (filteredOptions[nextIndex]?.disabled) {\n nextIndex =\n (nextIndex + step + filteredOptions.length) % filteredOptions.length\n }\n\n return nextIndex\n }\n\n const onKeyDownDropdown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return\n\n const _actions: Record<string, () => void> = {\n Enter: () => {\n if (!isDropdownOpen) {\n toggleDropdown()\n return\n }\n if (\n activeOptionIndex !== null &&\n !filteredOptions[activeOptionIndex].disabled\n ) {\n e.preventDefault()\n selectOption(\n filteredOptions[activeOptionIndex].value,\n filteredOptions[activeOptionIndex].disabled,\n )\n }\n },\n ArrowDown: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(prev !== null ? prev : -1, 'down'),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n ArrowUp: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(\n prev !== null ? prev : filteredOptions.length,\n 'up',\n ),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n Escape: () => {\n setIsDropdownOpen(false)\n },\n }\n\n if (_actions[e.key]) {\n _actions[e.key]()\n }\n }\n\n const selectOption = (optionValue: string, optionDisabled?: boolean) => {\n if (optionDisabled) return\n\n const option = options.find((option) => option.value === optionValue)\n if (option) {\n setSelectedOption({ value: option.value, label: option.label })\n }\n\n setActiveOptionIndex(null)\n setSearchValue('')\n setTimeout(() => setIsDropdownOpen(false), 500)\n\n if (onChange) {\n onChange(optionValue)\n }\n }\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value\n setSearchValue(value)\n\n if (onChange) {\n onChange(value)\n }\n\n if (value === '') {\n setSelectedOption({ value: '', label: '' })\n }\n\n if (!isDropdownOpen) {\n setIsDropdownOpen(true)\n }\n }\n\n const handleOnBlur = (event?: React.FocusEvent<Element>) => {\n if (onBlur) {\n setTimeout(() => {\n const getOptionByLabel = (label: string) =>\n options.find((option) => option.label === label)\n\n const elementValue = (event?.target as HTMLInputElement).value\n const selectedOptionFromElement = getOptionByLabel(elementValue)\n\n const targetValue = selectedOption?.value\n ? selectedOption\n : selectedOptionFromElement || { value: elementValue, label: '' }\n\n onBlur({\n ...event,\n target: targetValue,\n } as React.FocusEvent<Element> & {\n target: OptionProps\n })\n }, 200)\n }\n }\n\n const onCloseOptions = () => {\n setIsDropdownOpen(false)\n }\n\n return {\n isDropdownOpen,\n selectRef,\n activeOptionRef,\n selectElementRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n filteredOptions,\n searchValue,\n setSearchValue,\n handleInputChange,\n dropdownMaxHeight,\n selectedOption,\n setSelectedOption,\n handleOnBlur,\n onCloseOptions,\n }\n}\n","import { createPortal } from 'react-dom'\nimport classNames from 'classnames'\nimport {\n IconChevronDown,\n IconSlash,\n IconCheck,\n IconSearch,\n} from '@components/icons'\nimport { Modal } from '@components/Modal'\nimport { Text } from '@components/Text'\nimport { Conditional } from '@components/misc'\nimport { COLOR_NEUTRAL_40 } from '@core/tokens'\n\nimport Field from '../Field'\nimport { OptionProps, SelectFieldProps } from './types'\nimport { useSelectField } from './hook'\nimport './styles.scss'\n\nexport const SelectField = ({\n label,\n options,\n showOptionalLabel,\n error,\n errorMessage,\n helpMessage,\n disabled,\n required,\n value,\n onChange,\n style,\n className,\n placeholder,\n name,\n register,\n onBlur,\n autocomplete = false,\n EmptyText = 'Nada encontrado',\n fullScreenOptions = false,\n}: SelectFieldProps) => {\n const {\n isDropdownOpen,\n selectRef,\n selectElementRef,\n activeOptionRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n filteredOptions,\n searchValue,\n selectedOption,\n handleInputChange,\n dropdownMaxHeight,\n handleOnBlur,\n onCloseOptions\n } = useSelectField(\n options,\n value,\n onChange,\n onBlur,\n disabled,\n register,\n autocomplete,\n fullScreenOptions,\n )\n\n const selectClasses = classNames('au-field__select', {\n 'au-field__select--disabled': disabled,\n 'au-field__select--open': isDropdownOpen,\n 'au-field__select--required': required,\n 'au-field__select--error': error,\n [className!]: className,\n })\n\n const optionsClasses = classNames('au-field__select-options', {\n 'au-field__select-options--open': isDropdownOpen,\n })\n\n const optionClasses = (option: OptionProps, index: number) =>\n classNames('au-field__select-option', {\n 'au-field__select-option--highlighted': activeOptionIndex === index,\n 'au-field__select-option--selected':\n option.value === selectedOption.value,\n 'au-field__select-option--disabled': option.disabled,\n })\n\n const fullScreenOptionClasses = (option: OptionProps, index: number) =>\n classNames('au-field__fullscreen-options-select-option', {\n 'au-field__fullscreen-options-select-option--highlighted':\n activeOptionIndex === index,\n 'au-field__fullscreen-options-select-option--selected':\n option.value === selectedOption.value,\n 'au-field__fullscreen-options-select-option--disabled': option.disabled,\n })\n\n return (\n <>\n <Field.Root\n style={style}\n customclass={className}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n showOptionalLabel={showOptionalLabel}\n required={required}\n error={error}\n disabled={disabled}\n />\n <div className={selectClasses}>\n <div\n className=\"au-field__select-wrapper\"\n onClick={toggleDropdown}\n onKeyDown={onKeyDownDropdown}\n tabIndex={disabled ? -1 : 0}\n ref={selectRef}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isDropdownOpen}\n aria-labelledby=\"select-label\"\n aria-activedescendant={\n activeOptionIndex !== null && filteredOptions[activeOptionIndex]\n ? filteredOptions[activeOptionIndex].value\n : undefined\n }\n onBlur={handleOnBlur}>\n <input\n className=\"au-field__select-input\"\n value={searchValue || selectedOption.label}\n placeholder={placeholder || 'Selecionar...'}\n onChange={handleInputChange}\n readOnly={!autocomplete}\n disabled={disabled}\n />\n <div className=\"au-field__select-icon\">\n <IconChevronDown />\n </div>\n </div>\n <Conditional\n condition={!fullScreenOptions}\n renderIf={\n <ul\n className={optionsClasses}\n role=\"listbox\"\n aria-live=\"polite\"\n tabIndex={-1}\n style={{\n maxHeight: `${dropdownMaxHeight}px`,\n overflowY: 'auto',\n }}>\n {filteredOptions.length === 0 ? (\n <li className=\"au-field__select-option au-field__select-option--empty\">\n {EmptyText}\n </li>\n ) : (\n filteredOptions.map((option, index) => (\n <li\n key={index}\n className={optionClasses(option, index)}\n ref={activeOptionIndex === index ? activeOptionRef : null}\n role=\"option\"\n aria-selected={option.value === selectedOption.value}\n aria-disabled={option.disabled}\n onPointerUp={() =>\n selectOption(option.value, option.disabled)\n }\n onMouseEnter={() => setActiveOptionIndex(index)}>\n {option.label}\n {option.disabled ? (\n <IconSlash />\n ) : option.value === selectedOption.value ? (\n <IconCheck />\n ) : null}\n </li>\n ))\n )}\n </ul>\n }\n />\n\n <select\n hidden\n disabled={disabled}\n value={selectedOption.value}\n onChange={(e) => selectOption(e.target.value)}\n ref={selectElementRef}\n name={name}>\n {options.map((option, index) => (\n <option key={index} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n <Field.Message\n hasError={!!error}\n errorMessage={errorMessage}\n helpMessage={helpMessage}\n />\n </Field.Root>\n\n <Conditional\n condition={fullScreenOptions}\n renderIf={\n <>\n {createPortal(\n <Modal\n isOpen={isDropdownOpen}\n onClose={onCloseOptions}\n headerContent={\n <div>\n <Text as=\"label\" variant=\"heading-small\" weight=\"bold\">\n {label}\n </Text>\n <div\n className=\"au-field__fullscreen-options-select-search-bar\"\n onKeyDown={onKeyDownDropdown}\n tabIndex={disabled ? -1 : 0}\n ref={selectRef}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isDropdownOpen}\n aria-labelledby=\"select-label\"\n aria-activedescendant={\n activeOptionIndex !== null &&\n filteredOptions[activeOptionIndex]\n ? filteredOptions[activeOptionIndex].value\n : undefined\n }\n onBlur={handleOnBlur}>\n <input\n className=\"au-field__select-input\"\n value={searchValue || selectedOption.label}\n placeholder={'Buscar'}\n onChange={handleInputChange}\n disabled={disabled}\n />\n <div className=\"au-field__select-icon\">\n <IconSearch rawColor={COLOR_NEUTRAL_40} />\n </div>\n </div>\n </div>\n }\n content={\n <div className=\"au-field__fullscreen-options-select-options\">\n {filteredOptions.map((option, index) => (\n <li\n key={index}\n className={fullScreenOptionClasses(option, index)}\n ref={\n activeOptionIndex === index ? activeOptionRef : null\n }\n role=\"option\"\n aria-selected={option.value === selectedOption.value}\n aria-disabled={option.disabled}\n onPointerUp={() =>\n selectOption(option.value, option.disabled)\n }\n onMouseEnter={() => setActiveOptionIndex(index)}>\n {option.label}\n {option.disabled ? (\n <IconSlash />\n ) : option.value === selectedOption.value ? (\n <IconCheck />\n ) : null}\n </li>\n ))}\n </div>\n }\n />,\n document.body,\n )}\n </>\n }\n />\n </>\n )\n}\n"],"names":["option","_a"],"mappings":"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"}
|