@consumidor-positivo/aurora 0.0.60 → 0.0.62
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/Calendar/index.es.js +2 -2
- package/dist/components/CalendarHeader/index.es.js +2 -2
- package/dist/components/CheckboxField/index.es.js +1 -1
- package/dist/components/Datepicker/index.es.js +3 -3
- package/dist/components/NotificationsBar/index.d.ts +1 -1
- package/dist/components/NotificationsBar/index.es.js +1 -1
- package/dist/components/NotificationsBar/index.es.js.map +1 -1
- 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 +122 -38
- package/dist/components/SelectField/index.es.js.map +1 -1
- package/dist/components/SelectField/styles.css +1 -1
- package/dist/components/form/SelectField/hook.d.ts +11 -8
- package/dist/components/form/SelectField/index.d.ts +2 -22
- package/dist/components/form/SelectField/types.d.ts +23 -0
- package/dist/{index-CLq9qZyb.js → index-BnnDZOqb.js} +2 -2
- package/dist/{index-CLq9qZyb.js.map → index-BnnDZOqb.js.map} +1 -1
- package/dist/{index-DYVmC1NO.js → index-DVoyQGyf.js} +3 -3
- package/dist/{index-DYVmC1NO.js.map → index-DVoyQGyf.js.map} +1 -1
- package/dist/{index-CvHQPF4S.js → index-olB3e5l9.js} +2 -2
- package/dist/{index-CvHQPF4S.js.map → index-olB3e5l9.js.map} +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "../../index-CweZ_OcN.js";
|
|
3
|
-
import "../../index-
|
|
3
|
+
import "../../index-olB3e5l9.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-DVoyQGyf.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-BnnDZOqb.js";
|
|
7
|
+
import { C } from "../../index-olB3e5l9.js";
|
|
8
8
|
export {
|
|
9
9
|
C as CalendarHeader
|
|
10
10
|
};
|
|
@@ -2,8 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import "../Icon/index.es.js";
|
|
4
4
|
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
5
|
-
import { k as COLOR_NEUTRAL_00 } from "../../tokens-TYOJv1j5.js";
|
|
6
5
|
import Field from "../Field/index.es.js";
|
|
6
|
+
import { k as COLOR_NEUTRAL_00 } from "../../tokens-TYOJv1j5.js";
|
|
7
7
|
import './styles.css';const CheckboxField = ({
|
|
8
8
|
label,
|
|
9
9
|
error,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { B as BREAKPOINT_MD, g as COLOR_NEUTRAL_40 } from "../../tokens-TYOJv1j5.js";
|
|
3
2
|
import "../../index-CweZ_OcN.js";
|
|
4
3
|
import "../Icon/index.es.js";
|
|
5
4
|
import { IconCalendar } from "../icons/IconCalendar/index.es.js";
|
|
6
5
|
import { InputField } from "../InputField/index.es.js";
|
|
7
|
-
import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-
|
|
6
|
+
import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-DVoyQGyf.js";
|
|
8
7
|
import { useRef, useState, useEffect } from "react";
|
|
9
|
-
import { u as useOutsideClick } from "../../index-
|
|
8
|
+
import { u as useOutsideClick } from "../../index-BnnDZOqb.js";
|
|
9
|
+
import { B as BREAKPOINT_MD, g as COLOR_NEUTRAL_40 } from "../../tokens-TYOJv1j5.js";
|
|
10
10
|
import './styles.css';function useDatepicker({
|
|
11
11
|
value,
|
|
12
12
|
defaultValue = "empty",
|
|
@@ -7,7 +7,7 @@ type NotificationsBarWrapProps = {
|
|
|
7
7
|
type NotificationsBarListProps = {
|
|
8
8
|
title: string;
|
|
9
9
|
dataSource: NotificationBarListDataProps[];
|
|
10
|
-
renderItem: (item: NotificationBarListDataProps) => ReactNode | string | JSX.Element | JSX.Element[];
|
|
10
|
+
renderItem: (item: NotificationBarListDataProps, idx?: number) => ReactNode | string | JSX.Element | JSX.Element[];
|
|
11
11
|
};
|
|
12
12
|
type NotificationBarListDataProps = {
|
|
13
13
|
title: string;
|
|
@@ -17,7 +17,7 @@ const NotificationsBarList = ({
|
|
|
17
17
|
}) => {
|
|
18
18
|
return /* @__PURE__ */ jsxs("div", { className: "au-notifications-bar__section", children: [
|
|
19
19
|
/* @__PURE__ */ jsx(Text, { as: "h3", variant: "body-medium", weight: "bold", children: title }),
|
|
20
|
-
/* @__PURE__ */ jsx("div", { className: "au-notifications-bar__list", children: dataSource == null ? void 0 : dataSource.map((item) => renderItem(item)) })
|
|
20
|
+
/* @__PURE__ */ jsx("div", { className: "au-notifications-bar__list", children: dataSource == null ? void 0 : dataSource.map((item, idx) => renderItem(item, idx)) })
|
|
21
21
|
] });
|
|
22
22
|
};
|
|
23
23
|
const NotificationsBarLink = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/NotificationsBar/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { Text } from '../Text'\nimport { Conditional } from '../misc'\nimport './styles.scss'\n\ntype NotificationsBarWrapProps = {\n renderRecents?: () => ReactNode | string | JSX.Element | JSX.Element[]\n renderOlds?: () => ReactNode | string | JSX.Element | JSX.Element[]\n}\n\ntype NotificationsBarListProps = {\n title: string\n dataSource: NotificationBarListDataProps[]\n renderItem: (\n item: NotificationBarListDataProps,\n ) => ReactNode | string | JSX.Element | JSX.Element[]\n}\n\ntype NotificationBarListDataProps = {\n title: string\n Icon?: ReactNode | string | JSX.Element | JSX.Element[]\n onClick: () => void\n onDelete?: () => void\n createdAt?: string\n}\n\ntype NotificationsBarLinkProps = {\n title: string\n onClick: () => void\n onDelete?: () => void\n Icon?: ReactNode | string | JSX.Element | JSX.Element[]\n createdAt?: string\n}\n\nexport const NotificationsBarWrap = ({\n renderRecents,\n renderOlds,\n}: NotificationsBarWrapProps) => {\n return (\n <div className=\"au-notifications-bar\">\n {renderRecents && renderRecents()}\n {renderOlds && renderOlds()}\n </div>\n )\n}\n\nexport const NotificationsBarList = ({\n title,\n dataSource,\n renderItem,\n}: NotificationsBarListProps) => {\n return (\n <div className=\"au-notifications-bar__section\">\n <Text as=\"h3\" variant=\"body-medium\" weight=\"bold\">\n {title}\n </Text>\n <div className=\"au-notifications-bar__list\">\n {dataSource?.map((item) => renderItem(item))}\n </div>\n </div>\n )\n}\n\nexport const NotificationsBarLink = ({\n Icon,\n onClick,\n title,\n createdAt,\n onDelete,\n}: NotificationsBarLinkProps) => {\n return (\n <div className=\"au-notifications-bar__item\">\n <Text\n as=\"a\"\n variant=\"body-medium\"\n weight=\"regular\"\n className=\"au-notifications-bar__link\"\n onClick={onClick}>\n <Conditional condition={!!Icon} renderIf={Icon} />\n {title}\n </Text>\n <div className=\"au-notifications-bar__actions\">\n <Text as=\"span\" variant=\"body-small\">\n {createdAt}\n </Text>\n <Conditional\n condition={!!onDelete}\n renderIf={\n <Text\n as=\"a\"\n variant=\"body-small\"\n weight=\"semibold\"\n onClick={onDelete}>\n Excluir\n </Text>\n }\n />\n </div>\n </div>\n )\n}\n\nconst components = {\n Root: NotificationsBarWrap,\n List: NotificationsBarList,\n Link: NotificationsBarLink,\n}\n\nexport { components as NotificationsBar }\n"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/NotificationsBar/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { Text } from '../Text'\nimport { Conditional } from '../misc'\nimport './styles.scss'\n\ntype NotificationsBarWrapProps = {\n renderRecents?: () => ReactNode | string | JSX.Element | JSX.Element[]\n renderOlds?: () => ReactNode | string | JSX.Element | JSX.Element[]\n}\n\ntype NotificationsBarListProps = {\n title: string\n dataSource: NotificationBarListDataProps[]\n renderItem: (\n item: NotificationBarListDataProps,\n idx?: number\n ) => ReactNode | string | JSX.Element | JSX.Element[]\n}\n\ntype NotificationBarListDataProps = {\n title: string\n Icon?: ReactNode | string | JSX.Element | JSX.Element[]\n onClick: () => void\n onDelete?: () => void\n createdAt?: string\n}\n\ntype NotificationsBarLinkProps = {\n title: string\n onClick: () => void\n onDelete?: () => void\n Icon?: ReactNode | string | JSX.Element | JSX.Element[]\n createdAt?: string\n}\n\nexport const NotificationsBarWrap = ({\n renderRecents,\n renderOlds,\n}: NotificationsBarWrapProps) => {\n return (\n <div className=\"au-notifications-bar\">\n {renderRecents && renderRecents()}\n {renderOlds && renderOlds()}\n </div>\n )\n}\n\nexport const NotificationsBarList = ({\n title,\n dataSource,\n renderItem,\n}: NotificationsBarListProps) => {\n return (\n <div className=\"au-notifications-bar__section\">\n <Text as=\"h3\" variant=\"body-medium\" weight=\"bold\">\n {title}\n </Text>\n <div className=\"au-notifications-bar__list\">\n {dataSource?.map((item, idx) => renderItem(item, idx))}\n </div>\n </div>\n )\n}\n\nexport const NotificationsBarLink = ({\n Icon,\n onClick,\n title,\n createdAt,\n onDelete,\n}: NotificationsBarLinkProps) => {\n return (\n <div className=\"au-notifications-bar__item\">\n <Text\n as=\"a\"\n variant=\"body-medium\"\n weight=\"regular\"\n className=\"au-notifications-bar__link\"\n onClick={onClick}>\n <Conditional condition={!!Icon} renderIf={Icon} />\n {title}\n </Text>\n <div className=\"au-notifications-bar__actions\">\n <Text as=\"span\" variant=\"body-small\">\n {createdAt}\n </Text>\n <Conditional\n condition={!!onDelete}\n renderIf={\n <Text\n as=\"a\"\n variant=\"body-small\"\n weight=\"semibold\"\n onClick={onDelete}>\n Excluir\n </Text>\n }\n />\n </div>\n </div>\n )\n}\n\nconst components = {\n Root: NotificationsBarWrap,\n List: NotificationsBarList,\n Link: NotificationsBarLink,\n}\n\nexport { components as NotificationsBar }\n"],"names":[],"mappings":";;;AAmCO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AACF,MAAiC;AAE7B,SAAA,qBAAC,OAAI,EAAA,WAAU,wBACZ,UAAA;AAAA,IAAA,iBAAiB,cAAc;AAAA,IAC/B,cAAc,WAAW;AAAA,EAC5B,EAAA,CAAA;AAEJ;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAiC;AAE7B,SAAA,qBAAC,OAAI,EAAA,WAAU,iCACb,UAAA;AAAA,IAAA,oBAAC,QAAK,IAAG,MAAK,SAAQ,eAAc,QAAO,QACxC,UACH,MAAA,CAAA;AAAA,IACC,oBAAA,OAAA,EAAI,WAAU,8BACZ,UAAY,yCAAA,IAAI,CAAC,MAAM,QAAQ,WAAW,MAAM,GAAG,GACtD,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiC;AAE7B,SAAA,qBAAC,OAAI,EAAA,WAAU,8BACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,SAAQ;AAAA,QACR,QAAO;AAAA,QACP,WAAU;AAAA,QACV;AAAA,QACA,UAAA;AAAA,UAAA,oBAAC,eAAY,WAAW,CAAC,CAAC,MAAM,UAAU,MAAM;AAAA,UAC/C;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,IACA,qBAAC,OAAI,EAAA,WAAU,iCACb,UAAA;AAAA,MAAA,oBAAC,MAAK,EAAA,IAAG,QAAO,SAAQ,cACrB,UACH,WAAA;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,CAAC,CAAC;AAAA,UACb,UACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,SAAQ;AAAA,cACR,QAAO;AAAA,cACP,SAAS;AAAA,cAAU,UAAA;AAAA,YAAA;AAAA,UAErB;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEA,MAAM,aAAa;AAAA,EACjB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;"}
|
|
@@ -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 { B as BREAKPOINT_MD } from "../../tokens-TYOJv1j5.js";
|
|
4
3
|
import { Portal } from "../Portal/index.es.js";
|
|
4
|
+
import { B as BREAKPOINT_MD } from "../../tokens-TYOJv1j5.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-BnnDZOqb.js";
|
|
8
8
|
export {
|
|
9
9
|
S as Segment
|
|
10
10
|
};
|
|
@@ -6,45 +6,78 @@ import { IconChevronDown } from "../icons/IconChevronDown/index.es.js";
|
|
|
6
6
|
import { IconSlash } from "../icons/IconSlash/index.es.js";
|
|
7
7
|
import Field from "../Field/index.es.js";
|
|
8
8
|
import { useState, useRef, useEffect } from "react";
|
|
9
|
-
import './styles.css';const useSelectField = (options, initialValue, onChange, disabled, register) => {
|
|
9
|
+
import './styles.css';const useSelectField = (options, initialValue, onChange, disabled, register, autocomplete = false) => {
|
|
10
|
+
var _a;
|
|
10
11
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
11
|
-
const [
|
|
12
|
+
const [selectedOption, setSelectedOption] = useState({
|
|
13
|
+
value: initialValue || "",
|
|
14
|
+
label: initialValue ? ((_a = options.find((option) => option.value === initialValue)) == null ? void 0 : _a.label) || "" : ""
|
|
15
|
+
});
|
|
12
16
|
const [activeOptionIndex, setActiveOptionIndex] = useState(
|
|
13
17
|
null
|
|
14
18
|
);
|
|
19
|
+
const [dropdownMaxHeight, setDropdownMaxHeight] = useState(0);
|
|
15
20
|
const selectRef = useRef(null);
|
|
16
21
|
const selectElementRef = useRef(null);
|
|
22
|
+
const [searchValue, setSearchValue] = useState("");
|
|
23
|
+
const activeOptionRef = useRef(null);
|
|
24
|
+
const filteredOptions = autocomplete ? options.filter(
|
|
25
|
+
(option) => option.label.toLowerCase().includes(searchValue.toLowerCase())
|
|
26
|
+
) : options;
|
|
17
27
|
useEffect(() => {
|
|
18
28
|
if (initialValue) {
|
|
19
|
-
|
|
29
|
+
const option = options.find((option2) => option2.value === initialValue);
|
|
30
|
+
if (option) {
|
|
31
|
+
setSelectedOption({ value: option.value, label: option.label });
|
|
32
|
+
}
|
|
20
33
|
}
|
|
21
|
-
}, [initialValue]);
|
|
34
|
+
}, [initialValue, options]);
|
|
22
35
|
useEffect(() => {
|
|
23
36
|
if (register && selectElementRef.current) {
|
|
24
37
|
register(selectElementRef.current);
|
|
25
38
|
}
|
|
26
39
|
}, [register]);
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
if (activeOptionRef.current) {
|
|
42
|
+
activeOptionRef.current.scrollIntoView({
|
|
43
|
+
behavior: "smooth",
|
|
44
|
+
block: "nearest"
|
|
45
|
+
});
|
|
32
46
|
}
|
|
33
|
-
};
|
|
34
|
-
const
|
|
35
|
-
if (
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
47
|
+
}, [activeOptionIndex]);
|
|
48
|
+
const toggleDropdown = () => {
|
|
49
|
+
if (!isDropdownOpen && selectRef.current) {
|
|
50
|
+
const { bottom } = selectRef.current.getBoundingClientRect();
|
|
51
|
+
let totalPadding = 0;
|
|
52
|
+
let parentElement = selectRef.current.parentElement;
|
|
53
|
+
while (parentElement) {
|
|
54
|
+
const parentPaddingBottom = parseFloat(
|
|
55
|
+
window.getComputedStyle(parentElement).paddingBottom || "0"
|
|
56
|
+
);
|
|
57
|
+
totalPadding += parentPaddingBottom;
|
|
58
|
+
parentElement = parentElement.parentElement;
|
|
59
|
+
}
|
|
60
|
+
const availableSpaceBelow = window.innerHeight - bottom - totalPadding;
|
|
61
|
+
const minDropdownHeight = 150;
|
|
62
|
+
const calculatedHeight = Math.max(availableSpaceBelow, minDropdownHeight);
|
|
63
|
+
setDropdownMaxHeight(calculatedHeight);
|
|
40
64
|
}
|
|
65
|
+
setIsDropdownOpen((prev) => {
|
|
66
|
+
if (!prev) {
|
|
67
|
+
const selectedIndex = options.findIndex(
|
|
68
|
+
(option) => option.value === selectedOption.value
|
|
69
|
+
);
|
|
70
|
+
setActiveOptionIndex(selectedIndex !== -1 ? selectedIndex : null);
|
|
71
|
+
}
|
|
72
|
+
return !prev;
|
|
73
|
+
});
|
|
41
74
|
};
|
|
42
75
|
const _findNextAvailableIndex = (currentIndex, direction) => {
|
|
43
|
-
var
|
|
76
|
+
var _a2;
|
|
44
77
|
const step = direction === "down" ? 1 : -1;
|
|
45
|
-
let nextIndex = (currentIndex + step +
|
|
46
|
-
while ((
|
|
47
|
-
nextIndex = (nextIndex + step +
|
|
78
|
+
let nextIndex = (currentIndex + step + filteredOptions.length) % filteredOptions.length;
|
|
79
|
+
while ((_a2 = filteredOptions[nextIndex]) == null ? void 0 : _a2.disabled) {
|
|
80
|
+
nextIndex = (nextIndex + step + filteredOptions.length) % filteredOptions.length;
|
|
48
81
|
}
|
|
49
82
|
return nextIndex;
|
|
50
83
|
};
|
|
@@ -56,11 +89,11 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, d
|
|
|
56
89
|
toggleDropdown();
|
|
57
90
|
return;
|
|
58
91
|
}
|
|
59
|
-
if (activeOptionIndex !== null && !
|
|
92
|
+
if (activeOptionIndex !== null && !filteredOptions[activeOptionIndex].disabled) {
|
|
60
93
|
e.preventDefault();
|
|
61
94
|
selectOption(
|
|
62
|
-
|
|
63
|
-
|
|
95
|
+
filteredOptions[activeOptionIndex].value,
|
|
96
|
+
filteredOptions[activeOptionIndex].disabled
|
|
64
97
|
);
|
|
65
98
|
}
|
|
66
99
|
},
|
|
@@ -74,7 +107,10 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, d
|
|
|
74
107
|
ArrowUp: () => {
|
|
75
108
|
e.preventDefault();
|
|
76
109
|
setActiveOptionIndex(
|
|
77
|
-
(prev) => _findNextAvailableIndex(
|
|
110
|
+
(prev) => _findNextAvailableIndex(
|
|
111
|
+
prev !== null ? prev : filteredOptions.length,
|
|
112
|
+
"up"
|
|
113
|
+
)
|
|
78
114
|
);
|
|
79
115
|
if (!isDropdownOpen) toggleDropdown();
|
|
80
116
|
},
|
|
@@ -86,16 +122,46 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, d
|
|
|
86
122
|
_actions[e.key]();
|
|
87
123
|
}
|
|
88
124
|
};
|
|
125
|
+
const selectOption = (optionValue, optionDisabled) => {
|
|
126
|
+
if (optionDisabled) return;
|
|
127
|
+
const option = options.find((option2) => option2.value === optionValue);
|
|
128
|
+
if (option) {
|
|
129
|
+
setSelectedOption({ value: option.value, label: option.label });
|
|
130
|
+
}
|
|
131
|
+
setActiveOptionIndex(null);
|
|
132
|
+
setIsDropdownOpen(false);
|
|
133
|
+
setSearchValue("");
|
|
134
|
+
if (onChange) {
|
|
135
|
+
onChange(optionValue);
|
|
136
|
+
}
|
|
137
|
+
};
|
|
138
|
+
const handleInputChange = (e) => {
|
|
139
|
+
const value = e.target.value;
|
|
140
|
+
setSearchValue(value);
|
|
141
|
+
if (value === "") {
|
|
142
|
+
setSelectedOption({ value: "", label: "" });
|
|
143
|
+
}
|
|
144
|
+
if (!isDropdownOpen) {
|
|
145
|
+
setIsDropdownOpen(true);
|
|
146
|
+
}
|
|
147
|
+
};
|
|
89
148
|
return {
|
|
90
149
|
isDropdownOpen,
|
|
91
|
-
currentValue,
|
|
92
150
|
selectRef,
|
|
151
|
+
activeOptionRef,
|
|
93
152
|
selectElementRef,
|
|
94
153
|
toggleDropdown,
|
|
95
154
|
selectOption,
|
|
96
155
|
onKeyDownDropdown,
|
|
97
156
|
setActiveOptionIndex,
|
|
98
|
-
activeOptionIndex
|
|
157
|
+
activeOptionIndex,
|
|
158
|
+
filteredOptions,
|
|
159
|
+
searchValue,
|
|
160
|
+
setSearchValue,
|
|
161
|
+
handleInputChange,
|
|
162
|
+
dropdownMaxHeight,
|
|
163
|
+
selectedOption,
|
|
164
|
+
setSelectedOption
|
|
99
165
|
};
|
|
100
166
|
};
|
|
101
167
|
const SelectField = ({
|
|
@@ -113,20 +179,26 @@ const SelectField = ({
|
|
|
113
179
|
placeholder,
|
|
114
180
|
name,
|
|
115
181
|
register,
|
|
116
|
-
onBlur
|
|
182
|
+
onBlur,
|
|
183
|
+
autocomplete = false,
|
|
184
|
+
EmptyText = "Nada encontrado"
|
|
117
185
|
}) => {
|
|
118
|
-
var _a;
|
|
119
186
|
const {
|
|
120
187
|
isDropdownOpen,
|
|
121
|
-
currentValue,
|
|
122
188
|
selectRef,
|
|
123
189
|
selectElementRef,
|
|
190
|
+
activeOptionRef,
|
|
124
191
|
toggleDropdown,
|
|
125
192
|
selectOption,
|
|
126
193
|
onKeyDownDropdown,
|
|
127
194
|
setActiveOptionIndex,
|
|
128
|
-
activeOptionIndex
|
|
129
|
-
|
|
195
|
+
activeOptionIndex,
|
|
196
|
+
filteredOptions,
|
|
197
|
+
searchValue,
|
|
198
|
+
selectedOption,
|
|
199
|
+
handleInputChange,
|
|
200
|
+
dropdownMaxHeight
|
|
201
|
+
} = useSelectField(options, value, onChange, disabled, register, autocomplete);
|
|
130
202
|
const dropdownClasses = classNames("au-field__select", {
|
|
131
203
|
"au-field__select--disabled": disabled,
|
|
132
204
|
"au-field__select--open": isDropdownOpen,
|
|
@@ -165,10 +237,20 @@ const SelectField = ({
|
|
|
165
237
|
"aria-haspopup": "listbox",
|
|
166
238
|
"aria-expanded": isDropdownOpen,
|
|
167
239
|
"aria-labelledby": "select-label",
|
|
168
|
-
"aria-activedescendant": activeOptionIndex !== null ?
|
|
240
|
+
"aria-activedescendant": activeOptionIndex !== null && filteredOptions[activeOptionIndex] ? filteredOptions[activeOptionIndex].value : void 0,
|
|
169
241
|
onBlur,
|
|
170
242
|
children: [
|
|
171
|
-
/* @__PURE__ */ jsx(
|
|
243
|
+
/* @__PURE__ */ jsx(
|
|
244
|
+
"input",
|
|
245
|
+
{
|
|
246
|
+
className: "au-field__select-input",
|
|
247
|
+
value: searchValue || selectedOption.label,
|
|
248
|
+
placeholder: placeholder || "Selecionar...",
|
|
249
|
+
onChange: handleInputChange,
|
|
250
|
+
readOnly: !autocomplete,
|
|
251
|
+
disabled
|
|
252
|
+
}
|
|
253
|
+
),
|
|
172
254
|
/* @__PURE__ */ jsx("div", { className: "au-field__select-icon", children: /* @__PURE__ */ jsx(IconChevronDown, {}) })
|
|
173
255
|
]
|
|
174
256
|
}
|
|
@@ -182,22 +264,24 @@ const SelectField = ({
|
|
|
182
264
|
role: "listbox",
|
|
183
265
|
"aria-live": "polite",
|
|
184
266
|
tabIndex: -1,
|
|
185
|
-
|
|
267
|
+
style: { maxHeight: `${dropdownMaxHeight}px`, overflowY: "auto" },
|
|
268
|
+
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(
|
|
186
269
|
"li",
|
|
187
270
|
{
|
|
188
271
|
className: classNames("au-field__select-option", {
|
|
189
272
|
"au-field__select-option--highlighted": activeOptionIndex === index,
|
|
190
|
-
"au-field__select-option--selected": option.value ===
|
|
273
|
+
"au-field__select-option--selected": option.value === selectedOption.value,
|
|
191
274
|
"au-field__select-option--disabled": option.disabled
|
|
192
275
|
}),
|
|
276
|
+
ref: activeOptionIndex === index ? activeOptionRef : null,
|
|
193
277
|
role: "option",
|
|
194
|
-
"aria-selected": option.value ===
|
|
278
|
+
"aria-selected": option.value === selectedOption.value,
|
|
195
279
|
"aria-disabled": option.disabled,
|
|
196
280
|
onClick: () => selectOption(option.value, option.disabled),
|
|
197
281
|
onMouseEnter: () => setActiveOptionIndex(index),
|
|
198
282
|
children: [
|
|
199
283
|
option.label,
|
|
200
|
-
option.disabled ? /* @__PURE__ */ jsx(IconSlash, {}) : option.value ===
|
|
284
|
+
option.disabled ? /* @__PURE__ */ jsx(IconSlash, {}) : option.value === selectedOption.value ? /* @__PURE__ */ jsx(IconCheck, {}) : null
|
|
201
285
|
]
|
|
202
286
|
},
|
|
203
287
|
option.value
|
|
@@ -209,7 +293,7 @@ const SelectField = ({
|
|
|
209
293
|
{
|
|
210
294
|
hidden: true,
|
|
211
295
|
disabled,
|
|
212
|
-
value:
|
|
296
|
+
value: selectedOption.value,
|
|
213
297
|
onChange: (e) => selectOption(e.target.value),
|
|
214
298
|
ref: selectElementRef,
|
|
215
299
|
name,
|
|
@@ -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'\n\ntype OptionProps = {\n value: string\n disabled?: boolean\n}\n\nexport const useSelectField = (\n options: OptionProps[],\n initialValue?: string,\n onChange?: (value: string) => void,\n disabled?: boolean,\n register?: (instance: HTMLSelectElement | null) => void,\n) => {\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n const [currentValue, setCurrentValue] = useState<string>(initialValue || '')\n const [activeOptionIndex, setActiveOptionIndex] = useState<number | null>(\n null,\n )\n const selectRef = useRef<HTMLDivElement>(null)\n const selectElementRef = useRef<HTMLSelectElement>(null)\n\n useEffect(() => {\n if (initialValue) {\n setCurrentValue(initialValue)\n }\n }, [initialValue])\n\n useEffect(() => {\n if (register && selectElementRef.current) {\n register(selectElementRef.current)\n }\n }, [register])\n\n const toggleDropdown = () => {\n setIsDropdownOpen((prev) => !prev)\n setActiveOptionIndex(null)\n if (selectRef.current) {\n selectRef.current.focus()\n }\n }\n\n const selectOption = (optionValue: string, optionDisabled?: boolean) => {\n if (optionDisabled) return\n\n setCurrentValue(optionValue)\n setIsDropdownOpen(false)\n\n if (onChange) {\n onChange(optionValue)\n }\n }\n\n const _findNextAvailableIndex = (\n currentIndex: number,\n direction: 'down' | 'up',\n ) => {\n const step = direction === 'down' ? 1 : -1\n let nextIndex = (currentIndex + step + options.length) % options.length\n\n while (options[nextIndex]?.disabled) {\n nextIndex = (nextIndex + step + options.length) % options.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 !options[activeOptionIndex].disabled\n ) {\n e.preventDefault()\n selectOption(\n options[activeOptionIndex].value,\n options[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(prev !== null ? prev : options.length, 'up'),\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 return {\n isDropdownOpen,\n currentValue,\n selectRef,\n selectElementRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconSlash, IconCheck } from '@components/icons'\nimport Field from '../Field'\n\nimport { useSelectField } from './hook'\nimport './styles.scss'\n\ntype OptionProps = {\n value: string\n label: string\n disabled?: boolean\n}\n\ntype SelectFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string\n options: OptionProps[]\n optional?: boolean\n disabled?: boolean\n required?: boolean\n error?: boolean\n errorMessage?: string\n placeholder?: string\n value?: string\n onChange?: (value: string) => void\n onBlur?: () => void\n name?: string\n register?: (instance: HTMLSelectElement | null) => void\n}\n\nexport const SelectField = ({\n label,\n options,\n optional,\n error,\n errorMessage,\n disabled,\n required,\n value,\n onChange,\n style,\n className,\n placeholder,\n name,\n register,\n onBlur,\n}: SelectFieldProps) => {\n const {\n isDropdownOpen,\n currentValue,\n selectRef,\n selectElementRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n } = useSelectField(options, value, onChange, disabled, register)\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 optional={optional}\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\n ? options[activeOptionIndex].value\n : undefined\n }\n onBlur={onBlur}>\n <div className=\"au-field__select-display\">\n {options.find((option) => option.value === currentValue)?.label ||\n placeholder ||\n 'Selecionar...'}\n </div>\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 {options.map((option, index) => (\n <li\n key={option.value}\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 === currentValue,\n 'au-field__select-option--disabled': option.disabled,\n })}\n role=\"option\"\n aria-selected={option.value === currentValue}\n aria-disabled={option.disabled}\n onClick={() => selectOption(option.value, option.disabled)}\n onMouseEnter={() => setActiveOptionIndex(index)}>\n {option.label}\n {option.disabled ? (\n <IconSlash />\n ) : option.value === currentValue ? (\n <IconCheck />\n ) : null}\n </li>\n ))}\n </ul>\n <select\n hidden\n disabled={disabled}\n value={currentValue}\n onChange={(e) => selectOption(e.target.value)}\n ref={selectElementRef}\n name={name}\n onBlur={onBlur}>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n </Field.Root>\n )\n}\n"],"names":[],"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 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 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 = 150\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 (value === '') {\n setSelectedOption({ value: '', label: '' })\n }\n\n if (!isDropdownOpen) {\n setIsDropdownOpen(true)\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 }\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 optional,\n error,\n errorMessage,\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 } = useSelectField(options, value, onChange, disabled, register, autocomplete)\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 optional={optional}\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={onBlur}>\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={option.value}\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 onClick={() => 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 onBlur={onBlur}>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n </Field.Root>\n )\n}\n"],"names":["option","_a"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.au-field__select{position:relative}.au-field__select-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;
|
|
1
|
+
.au-field__select{position:relative}.au-field__select-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;font-size:16px;line-height:22px;overflow:hidden}.au-field__select-wrapper:focus-within{border:2px solid #0048db}.au-field__select-input{width:100%;height:100%;border:none;padding:16px;font-family:inherit;font-size:16px;line-height:22px}.au-field__select-input:read-only{cursor:pointer}.au-field__select-icon{position:absolute;right:16px;transition:transform .2s ease}.au-field__select-options{display:flex;flex-direction:column;width:100%;margin-top:16px;border:1px solid #0048db;background:#fff;border-radius:8px;overflow:hidden;cursor:auto;position:absolute;transform-origin:top left;transform:scaleY(0);opacity:0;visibility:hidden;transition:transform .2s,opacity .2s,visibility 0s .2s;z-index:1}.au-field__select-options--open{transform:scaleY(1);opacity:1;visibility:visible;transition:transform .2s,opacity .2s}.au-field__select-option{display:flex;justify-content:space-between;padding:16px 24px;cursor:pointer}.au-field__select-option:not(.au-field__select-option--selected):hover,.au-field__select-option--highlighted:not(.au-field__select-option--selected){background-color:#f6f7fa;color:#16181d}.au-field__select-option--selected{background-color:#0048db;color:#fff;font-weight:700}.au-field__select-option--selected .au-icon>svg{color:#fff}.au-field__select-option--disabled{pointer-events:none;cursor:not-allowed;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--disabled .au-icon>svg{color:#5e6573}.au-field__select-option--empty{cursor:default;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--empty:hover{background-color:#e2e4e9}.au-field__select--open .au-field__select-wrapper{border:2px solid #0048db}.au-field__select--open .au-field__select-wrapper .au-field__select-icon{transform:rotate(180deg)}.au-field__select--disabled{pointer-events:none;cursor:not-allowed}.au-field__select--disabled .au-field__select-wrapper{background-color:#e2e4e9}.au-field__select--disabled .au-field__select-wrapper .au-icon>svg{color:#5e6573}.au-field__select--error .au-field__select-wrapper{background-color:#f5eff0;border-color:#991717}.au-field__select--error .au-field__select-wrapper:focus{border-color:#0048db}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__header-label{color:#0048db}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper,.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper:focus-within{border-width:1px}
|
|
@@ -1,17 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
disabled?: boolean;
|
|
5
|
-
};
|
|
6
|
-
export declare const useSelectField: (options: OptionProps[], initialValue?: string, onChange?: ((value: string) => void) | undefined, disabled?: boolean, register?: ((instance: HTMLSelectElement | null) => void) | undefined) => {
|
|
1
|
+
import { OptionProps } from './types';
|
|
2
|
+
|
|
3
|
+
export declare const useSelectField: (options: OptionProps[], initialValue?: string, onChange?: ((value: string) => void) | undefined, disabled?: boolean, register?: ((instance: HTMLSelectElement | null) => void) | undefined, autocomplete?: boolean) => {
|
|
7
4
|
isDropdownOpen: boolean;
|
|
8
|
-
currentValue: string;
|
|
9
5
|
selectRef: import('react').RefObject<HTMLDivElement>;
|
|
6
|
+
activeOptionRef: import('react').MutableRefObject<HTMLLIElement | null>;
|
|
10
7
|
selectElementRef: import('react').RefObject<HTMLSelectElement>;
|
|
11
8
|
toggleDropdown: () => void;
|
|
12
9
|
selectOption: (optionValue: string, optionDisabled?: boolean) => void;
|
|
13
10
|
onKeyDownDropdown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
14
11
|
setActiveOptionIndex: import('react').Dispatch<import('react').SetStateAction<number | null>>;
|
|
15
12
|
activeOptionIndex: number | null;
|
|
13
|
+
filteredOptions: OptionProps[];
|
|
14
|
+
searchValue: string;
|
|
15
|
+
setSearchValue: import('react').Dispatch<import('react').SetStateAction<string>>;
|
|
16
|
+
handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
17
|
+
dropdownMaxHeight: number;
|
|
18
|
+
selectedOption: OptionProps;
|
|
19
|
+
setSelectedOption: import('react').Dispatch<import('react').SetStateAction<OptionProps>>;
|
|
16
20
|
};
|
|
17
|
-
export {};
|
|
@@ -1,23 +1,3 @@
|
|
|
1
|
+
import { SelectFieldProps } from './types';
|
|
1
2
|
|
|
2
|
-
|
|
3
|
-
value: string;
|
|
4
|
-
label: string;
|
|
5
|
-
disabled?: boolean;
|
|
6
|
-
};
|
|
7
|
-
type SelectFieldProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
8
|
-
label?: string;
|
|
9
|
-
options: OptionProps[];
|
|
10
|
-
optional?: boolean;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
required?: boolean;
|
|
13
|
-
error?: boolean;
|
|
14
|
-
errorMessage?: string;
|
|
15
|
-
placeholder?: string;
|
|
16
|
-
value?: string;
|
|
17
|
-
onChange?: (value: string) => void;
|
|
18
|
-
onBlur?: () => void;
|
|
19
|
-
name?: string;
|
|
20
|
-
register?: (instance: HTMLSelectElement | null) => void;
|
|
21
|
-
};
|
|
22
|
-
export declare const SelectField: ({ label, options, optional, error, errorMessage, disabled, required, value, onChange, style, className, placeholder, name, register, onBlur, }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
export {};
|
|
3
|
+
export declare const SelectField: ({ label, options, optional, error, errorMessage, disabled, required, value, onChange, style, className, placeholder, name, register, onBlur, autocomplete, EmptyText, }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export type OptionProps = {
|
|
3
|
+
value: string;
|
|
4
|
+
label: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
};
|
|
7
|
+
export type SelectFieldProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
8
|
+
label?: string;
|
|
9
|
+
options: OptionProps[];
|
|
10
|
+
optional?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
required?: boolean;
|
|
13
|
+
error?: boolean;
|
|
14
|
+
errorMessage?: string;
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
value?: string;
|
|
17
|
+
onChange?: (value: string) => void;
|
|
18
|
+
onBlur?: () => void;
|
|
19
|
+
name?: string;
|
|
20
|
+
register?: (instance: HTMLSelectElement | null) => void;
|
|
21
|
+
autocomplete?: boolean;
|
|
22
|
+
EmptyText?: string;
|
|
23
|
+
};
|
|
@@ -5,8 +5,8 @@ import { IconChevronDown } from "./components/icons/IconChevronDown/index.es.js"
|
|
|
5
5
|
import { IconChevronLeft } from "./components/icons/IconChevronLeft/index.es.js";
|
|
6
6
|
import { IconX } from "./components/icons/IconX/index.es.js";
|
|
7
7
|
import { useState, useRef, useEffect } from "react";
|
|
8
|
-
import { B as BREAKPOINT_MD } from "./tokens-TYOJv1j5.js";
|
|
9
8
|
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
9
|
+
import { B as BREAKPOINT_MD } from "./tokens-TYOJv1j5.js";
|
|
10
10
|
import './components/index/styles2.css';function useOutsideClick({
|
|
11
11
|
rootEl,
|
|
12
12
|
breakpoint,
|
|
@@ -138,4 +138,4 @@ export {
|
|
|
138
138
|
Segment as S,
|
|
139
139
|
useOutsideClick as u
|
|
140
140
|
};
|
|
141
|
-
//# sourceMappingURL=index-
|
|
141
|
+
//# sourceMappingURL=index-BnnDZOqb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-BnnDZOqb.js","sources":["../lib/core/hooks/useOutsideClick.ts","../lib/components/form/Datepicker/Segment/hook.ts","../lib/components/form/Datepicker/Segment/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { above } from '../utils/screen'\n\ntype UseOutsideClickProps = {\n rootEl: React.RefObject<HTMLDivElement>\n breakpoint?: string\n onLoseFocusCB: () => void\n}\n\nexport function useOutsideClick({\n rootEl,\n breakpoint,\n onLoseFocusCB,\n}: UseOutsideClickProps) {\n const [setupListener, setSetupListener] = useState(false)\n\n function listenOutsideClick() {\n if (breakpoint && !above(breakpoint)) return\n document.addEventListener('mousedown', handleLoseFocus)\n setSetupListener(true)\n }\n\n function clearOutsideClickListenner() {\n if (setupListener) {\n document.removeEventListener('mousedown', handleLoseFocus)\n setSetupListener(false)\n }\n }\n\n function handleLoseFocus(ev: MouseEvent | FocusEvent) {\n if (!rootEl.current) return\n\n const clickedOutside = !rootEl.current.contains(ev.target as Node)\n\n if (clickedOutside) {\n onLoseFocusCB()\n clearOutsideClickListenner()\n }\n }\n\n return {\n listenOutsideClick,\n }\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { BREAKPOINT_MD } from '@core/tokens'\nimport { useOutsideClick } from '@core/hooks/useOutsideClick'\n\nimport { SegmentItem } from '../types'\n\ntype UseSegmentProps = {\n options: SegmentItem[]\n currentValue: string | number\n onSelect: (option: SegmentItem) => void\n}\n\nexport function useSegment({\n options,\n currentValue,\n onSelect,\n}: UseSegmentProps) {\n const [isListOpen, setIsListOpen] = useState(false)\n const rootEl = useRef<HTMLDivElement>(null)\n const selectedItem = useRef<HTMLLIElement>(null)\n const currentItem = options.find((item) => item.value === currentValue)\n const { listenOutsideClick } = useOutsideClick({\n rootEl,\n breakpoint: BREAKPOINT_MD,\n onLoseFocusCB: closeList,\n })\n\n useEffect(() => {\n if (selectedItem.current && isListOpen) {\n selectedItem.current.scrollIntoView({ block: 'center', inline: 'center' })\n }\n }, [isListOpen])\n\n function openList() {\n setIsListOpen(true)\n listenOutsideClick()\n }\n\n function closeList() {\n setIsListOpen(false)\n }\n\n function handleSelectItem(option: SegmentItem) {\n onSelect(option)\n setIsListOpen(false)\n }\n\n return {\n openList,\n closeList,\n isListOpen,\n rootEl,\n currentItem,\n handleSelectItem,\n selectedItem,\n }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconChevronLeft, IconX } from '@components/icons'\n\nimport { useSegment } from './hook'\nimport { SegmentItem } from '../types'\nimport './styles.scss'\n\ntype SegmentProps = {\n mobileTitle: string\n options: SegmentItem[]\n onSelect: (option: SegmentItem) => void\n currentValue: string | number\n minValue?: Date\n maxValue?: Date\n}\n\nexport const Segment = ({\n currentValue,\n options,\n mobileTitle,\n onSelect,\n}: SegmentProps) => {\n const {\n rootEl,\n isListOpen,\n openList,\n closeList,\n currentItem,\n handleSelectItem,\n selectedItem,\n } = useSegment({\n options,\n currentValue,\n onSelect,\n })\n\n return (\n <div\n ref={rootEl}\n tabIndex={0}\n className={classNames('au-datepicker__segment', {\n 'au-datepicker__segment--open': isListOpen,\n })}>\n <div className=\"au-datepicker__segment-input\" onClick={openList}>\n {currentItem?.label}\n <IconChevronDown />\n </div>\n <div className=\"au-datepicker__segment-list-holder\">\n <div className=\"au-datepicker__segment-list-header\">\n <div onClick={closeList}>\n <IconChevronLeft />\n </div>\n <h4 className=\"au-datepicker__segment-title\">{mobileTitle}</h4>\n <div onClick={closeList}>\n <IconX />\n </div>\n </div>\n <ul className=\"au-datepicker__segment-list\">\n {options.map((option, idx) => {\n const isSelectedItem = option.value === currentValue\n return (\n <li\n key={`au-datepicker-segment-li-${option.value}-${idx}`}\n onClick={() => handleSelectItem(option)}\n ref={isSelectedItem ? selectedItem : null}\n className={classNames('au-datepicker__segment-list-item', {\n 'au-datepicker__segment-list-item--active': isSelectedItem,\n })}>\n {option.label}\n </li>\n )\n })}\n </ul>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { c as classNames } from "./index-CweZ_OcN.js";
|
|
3
|
-
import { $ as $35ea8db9cb2ccb90$export$99faa760c7908e4f, a as $dfd62f934fc76fed$export$e1aef45b828286de, C as CalendarHeader, b as $dfd62f934fc76fed$export$5bd780d491cfc46c, c as $dfd62f934fc76fed$export$22e2d15eaa4d2377, d as $dfd62f934fc76fed$export$ad2135cac3a11b3d, e as $dfd62f934fc76fed$export$e11f8ba65d857bff, f as $dfd62f934fc76fed$export$5d847498420df57b } from "./index-
|
|
3
|
+
import { $ as $35ea8db9cb2ccb90$export$99faa760c7908e4f, a as $dfd62f934fc76fed$export$e1aef45b828286de, C as CalendarHeader, b as $dfd62f934fc76fed$export$5bd780d491cfc46c, c as $dfd62f934fc76fed$export$22e2d15eaa4d2377, d as $dfd62f934fc76fed$export$ad2135cac3a11b3d, e as $dfd62f934fc76fed$export$e11f8ba65d857bff, f as $dfd62f934fc76fed$export$5d847498420df57b } from "./index-olB3e5l9.js";
|
|
4
4
|
import { Button } from "./components/Button/index.es.js";
|
|
5
5
|
import { PortalHolder } from "./components/PortalHolder/index.es.js";
|
|
6
6
|
import { useRef, useState, useEffect } from "react";
|
|
7
|
-
import { B as BREAKPOINT_MD } from "./tokens-TYOJv1j5.js";
|
|
8
7
|
import { a as above } from "./screen-DfYo7XQ_.js";
|
|
8
|
+
import { B as BREAKPOINT_MD } from "./tokens-TYOJv1j5.js";
|
|
9
9
|
import './components/index/styles.css';const DDMMYYYY = {
|
|
10
10
|
placeholder: "DD/MM/YYYY",
|
|
11
11
|
/** Apply DD/MM/YYYY to a field text while typing */
|
|
@@ -238,4 +238,4 @@ export {
|
|
|
238
238
|
DatepickerCalendar as a,
|
|
239
239
|
getDefaultDate as g
|
|
240
240
|
};
|
|
241
|
-
//# sourceMappingURL=index-
|
|
241
|
+
//# sourceMappingURL=index-DVoyQGyf.js.map
|