@consumidor-positivo/aurora 0.0.127 → 0.0.129
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/EmailField/index.es.js +155 -0
- package/dist/components/EmailField/index.es.js.map +1 -0
- package/dist/components/EmailField/styles.css +1 -0
- package/dist/components/form/EmailField/hook.d.ts +9 -0
- package/dist/components/form/EmailField/index.d.ts +14 -0
- 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
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { F as Field } from "../../index-ZE6zszxw.js";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
5
|
+
import './styles.css';const emailDomains = [
|
|
6
|
+
"gmail.com",
|
|
7
|
+
"hotmail.com",
|
|
8
|
+
"yahoo.com",
|
|
9
|
+
"outlook.com",
|
|
10
|
+
"yahoo.com.br",
|
|
11
|
+
"uol.com.br",
|
|
12
|
+
"ig.com.br",
|
|
13
|
+
"terra.com.br",
|
|
14
|
+
"aol.com",
|
|
15
|
+
"live.com",
|
|
16
|
+
"msn.com"
|
|
17
|
+
];
|
|
18
|
+
const useEmailAutocomplete = () => {
|
|
19
|
+
const [inputValue, setInputValue] = useState("");
|
|
20
|
+
const [suggestions, setSuggestions] = useState([]);
|
|
21
|
+
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
22
|
+
const handleChange = (e) => {
|
|
23
|
+
const value = e.target.value;
|
|
24
|
+
if (inputValue === value) return;
|
|
25
|
+
setInputValue(value);
|
|
26
|
+
const atIndex = value.indexOf("@");
|
|
27
|
+
if (atIndex > -1) {
|
|
28
|
+
const domainPart = value.slice(atIndex + 1);
|
|
29
|
+
const filteredDomains = emailDomains.filter(
|
|
30
|
+
(domain) => domain.startsWith(domainPart)
|
|
31
|
+
);
|
|
32
|
+
setSuggestions(filteredDomains);
|
|
33
|
+
setIsDropdownOpen(filteredDomains.length > 0);
|
|
34
|
+
} else {
|
|
35
|
+
setSuggestions([]);
|
|
36
|
+
setIsDropdownOpen(false);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
const handleSuggestionClick = (suggestion) => {
|
|
40
|
+
const atIndex = inputValue.indexOf("@");
|
|
41
|
+
if (atIndex > -1) {
|
|
42
|
+
setInputValue(inputValue.slice(0, atIndex + 1) + suggestion);
|
|
43
|
+
}
|
|
44
|
+
setSuggestions([]);
|
|
45
|
+
setIsDropdownOpen(false);
|
|
46
|
+
};
|
|
47
|
+
return {
|
|
48
|
+
inputValue,
|
|
49
|
+
setInputValue,
|
|
50
|
+
suggestions,
|
|
51
|
+
isDropdownOpen,
|
|
52
|
+
handleChange,
|
|
53
|
+
handleSuggestionClick
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
const EmailField = ({
|
|
57
|
+
showOptionalLabel,
|
|
58
|
+
requiredInput,
|
|
59
|
+
success,
|
|
60
|
+
error,
|
|
61
|
+
errorMessage,
|
|
62
|
+
helpMessage,
|
|
63
|
+
label,
|
|
64
|
+
id,
|
|
65
|
+
disabled,
|
|
66
|
+
style,
|
|
67
|
+
className,
|
|
68
|
+
inputStyle,
|
|
69
|
+
rightSlot,
|
|
70
|
+
inputRef,
|
|
71
|
+
...props
|
|
72
|
+
}) => {
|
|
73
|
+
const {
|
|
74
|
+
inputValue,
|
|
75
|
+
suggestions,
|
|
76
|
+
isDropdownOpen,
|
|
77
|
+
handleChange,
|
|
78
|
+
handleSuggestionClick
|
|
79
|
+
} = useEmailAutocomplete();
|
|
80
|
+
return /* @__PURE__ */ jsxs(
|
|
81
|
+
Field.Root,
|
|
82
|
+
{
|
|
83
|
+
style,
|
|
84
|
+
customclass: className,
|
|
85
|
+
success,
|
|
86
|
+
error,
|
|
87
|
+
disabled,
|
|
88
|
+
children: [
|
|
89
|
+
/* @__PURE__ */ jsx(
|
|
90
|
+
Field.Label,
|
|
91
|
+
{
|
|
92
|
+
text: label,
|
|
93
|
+
id,
|
|
94
|
+
showOptionalLabel,
|
|
95
|
+
required: requiredInput,
|
|
96
|
+
success,
|
|
97
|
+
error,
|
|
98
|
+
disabled
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
/* @__PURE__ */ jsxs(Field.InputHolder, { rightSideSlot: rightSlot, children: [
|
|
102
|
+
/* @__PURE__ */ jsx(
|
|
103
|
+
Field.Input,
|
|
104
|
+
{
|
|
105
|
+
id,
|
|
106
|
+
type: "email",
|
|
107
|
+
inputRef,
|
|
108
|
+
value: inputValue,
|
|
109
|
+
onChange: handleChange,
|
|
110
|
+
disabled,
|
|
111
|
+
style: inputStyle,
|
|
112
|
+
...props
|
|
113
|
+
}
|
|
114
|
+
),
|
|
115
|
+
/* @__PURE__ */ jsx(
|
|
116
|
+
"ul",
|
|
117
|
+
{
|
|
118
|
+
className: classNames("au-field__input-autocomplete", {
|
|
119
|
+
"au-field__input-autocomplete--open": isDropdownOpen
|
|
120
|
+
}),
|
|
121
|
+
tabIndex: -1,
|
|
122
|
+
role: "listbox",
|
|
123
|
+
"aria-expanded": isDropdownOpen,
|
|
124
|
+
style: {
|
|
125
|
+
overflowY: "auto"
|
|
126
|
+
},
|
|
127
|
+
children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
|
|
128
|
+
"li",
|
|
129
|
+
{
|
|
130
|
+
className: "au-field__input-option",
|
|
131
|
+
onClick: () => handleSuggestionClick(suggestion),
|
|
132
|
+
role: "option",
|
|
133
|
+
children: suggestion
|
|
134
|
+
},
|
|
135
|
+
index
|
|
136
|
+
))
|
|
137
|
+
}
|
|
138
|
+
)
|
|
139
|
+
] }),
|
|
140
|
+
/* @__PURE__ */ jsx(
|
|
141
|
+
Field.Message,
|
|
142
|
+
{
|
|
143
|
+
hasError: !!error,
|
|
144
|
+
errorMessage,
|
|
145
|
+
helpMessage
|
|
146
|
+
}
|
|
147
|
+
)
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
);
|
|
151
|
+
};
|
|
152
|
+
export {
|
|
153
|
+
EmailField
|
|
154
|
+
};
|
|
155
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/EmailField/hook.ts","../../../lib/components/form/EmailField/index.tsx"],"sourcesContent":["import { useState } from 'react'\n\nconst emailDomains = [\n 'gmail.com',\n 'hotmail.com',\n 'yahoo.com',\n 'outlook.com',\n 'yahoo.com.br',\n 'uol.com.br',\n 'ig.com.br',\n 'terra.com.br',\n 'aol.com',\n 'live.com',\n 'msn.com',\n]\n\nexport const useEmailAutocomplete = () => {\n const [inputValue, setInputValue] = useState('')\n const [suggestions, setSuggestions] = useState<string[]>([])\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value\n if (inputValue === value) return\n setInputValue(value)\n\n const atIndex = value.indexOf('@')\n if (atIndex > -1) {\n const domainPart = value.slice(atIndex + 1)\n const filteredDomains = emailDomains.filter((domain) =>\n domain.startsWith(domainPart),\n )\n setSuggestions(filteredDomains)\n setIsDropdownOpen(filteredDomains.length > 0)\n } else {\n setSuggestions([])\n setIsDropdownOpen(false)\n }\n }\n\n const handleSuggestionClick = (suggestion: string) => {\n const atIndex = inputValue.indexOf('@')\n if (atIndex > -1) {\n setInputValue(inputValue.slice(0, atIndex + 1) + suggestion)\n }\n setSuggestions([])\n setIsDropdownOpen(false)\n }\n\n return {\n inputValue,\n setInputValue,\n suggestions,\n isDropdownOpen,\n handleChange,\n handleSuggestionClick,\n }\n}\n","import Field from '../Field'\nimport { useEmailAutocomplete } from './hook'\nimport classNames from 'classnames'\nimport './styles.scss'\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n showOptionalLabel?: boolean\n requiredInput?: boolean\n success?: boolean\n error?: boolean\n errorMessage?: string\n helpMessage?: string\n rightSlot?: React.ReactNode\n label?: string\n inputStyle?: React.CSSProperties\n inputRef?: React.RefObject<HTMLInputElement>\n}\n\nexport const EmailField = ({\n showOptionalLabel,\n requiredInput,\n success,\n error,\n errorMessage,\n helpMessage,\n label,\n id,\n disabled,\n style,\n className,\n inputStyle,\n rightSlot,\n inputRef,\n ...props\n}: InputProps) => {\n const {\n inputValue,\n suggestions,\n isDropdownOpen,\n handleChange,\n handleSuggestionClick,\n } = useEmailAutocomplete()\n\n return (\n <Field.Root\n style={style}\n customclass={className}\n success={success}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n id={id}\n showOptionalLabel={showOptionalLabel}\n required={requiredInput}\n success={success}\n error={error}\n disabled={disabled}\n />\n <Field.InputHolder rightSideSlot={rightSlot}>\n <Field.Input\n id={id}\n type=\"email\"\n inputRef={inputRef}\n value={inputValue}\n onChange={handleChange}\n disabled={disabled}\n style={inputStyle}\n {...props}\n />\n <ul\n className={classNames('au-field__input-autocomplete', {\n 'au-field__input-autocomplete--open': isDropdownOpen,\n })}\n tabIndex={-1}\n role=\"listbox\"\n aria-expanded={isDropdownOpen}\n style={{\n overflowY: 'auto',\n }}>\n {suggestions.map((suggestion, index) => (\n <li\n className=\"au-field__input-option\"\n onClick={() => handleSuggestionClick(suggestion)}\n role=\"option\"\n key={index}>\n {suggestion}\n </li>\n ))}\n </ul>\n </Field.InputHolder>\n <Field.Message\n hasError={!!error}\n errorMessage={errorMessage}\n helpMessage={helpMessage}\n />\n </Field.Root>\n )\n}\n"],"names":[],"mappings":";;;;AAEA,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,uBAAuB,MAAM;AACxC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAmB,CAAE,CAAA;AAC3D,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAEpD,QAAA,eAAe,CAAC,MAA2C;AACzD,UAAA,QAAQ,EAAE,OAAO;AACvB,QAAI,eAAe,MAAO;AAC1B,kBAAc,KAAK;AAEb,UAAA,UAAU,MAAM,QAAQ,GAAG;AACjC,QAAI,UAAU,IAAI;AAChB,YAAM,aAAa,MAAM,MAAM,UAAU,CAAC;AAC1C,YAAM,kBAAkB,aAAa;AAAA,QAAO,CAAC,WAC3C,OAAO,WAAW,UAAU;AAAA,MAAA;AAE9B,qBAAe,eAAe;AACZ,wBAAA,gBAAgB,SAAS,CAAC;AAAA,IAAA,OACvC;AACL,qBAAe,CAAE,CAAA;AACjB,wBAAkB,KAAK;AAAA,IACzB;AAAA,EAAA;AAGI,QAAA,wBAAwB,CAAC,eAAuB;AAC9C,UAAA,UAAU,WAAW,QAAQ,GAAG;AACtC,QAAI,UAAU,IAAI;AAChB,oBAAc,WAAW,MAAM,GAAG,UAAU,CAAC,IAAI,UAAU;AAAA,IAC7D;AACA,mBAAe,CAAE,CAAA;AACjB,sBAAkB,KAAK;AAAA,EAAA;AAGlB,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;ACvCO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkB;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,qBAAqB;AAGvB,SAAA;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAA;AAAA,QAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACC,qBAAA,MAAM,aAAN,EAAkB,eAAe,WAChC,UAAA;AAAA,UAAA;AAAA,YAAC,MAAM;AAAA,YAAN;AAAA,cACC;AAAA,cACA,MAAK;AAAA,cACL;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV;AAAA,cACA,OAAO;AAAA,cACN,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,WAAW,gCAAgC;AAAA,gBACpD,sCAAsC;AAAA,cAAA,CACvC;AAAA,cACD,UAAU;AAAA,cACV,MAAK;AAAA,cACL,iBAAe;AAAA,cACf,OAAO;AAAA,gBACL,WAAW;AAAA,cACb;AAAA,cACC,UAAY,YAAA,IAAI,CAAC,YAAY,UAC5B;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,SAAS,MAAM,sBAAsB,UAAU;AAAA,kBAC/C,MAAK;AAAA,kBAEJ,UAAA;AAAA,gBAAA;AAAA,gBADI;AAAA,cAAA,CAGR;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,GACF;AAAA,QACA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,UAAU,CAAC,CAAC;AAAA,YACZ;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.au-field__input-autocomplete{display:flex;flex-direction:column;width:100%;max-height:212px;margin-top:16px;padding-inline-start:0;box-sizing:border-box;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__input-autocomplete--open{transform:scaleY(1);opacity:1;visibility:visible;transition:transform .2s,opacity .2s}.au-field__input-autocomplete::-webkit-scrollbar{width:16px}.au-field__input-autocomplete::-webkit-scrollbar-thumb{background-color:#135df5;border:4px solid #ffffff;border-radius:8px}.au-field__input-autocomplete::-webkit-scrollbar-track{background-color:#fff;border-radius:8px}.au-field__input-option{display:flex;justify-content:space-between;padding:16px 24px;cursor:pointer}.au-field__input-option:hover{background-color:#f6f7fa;color:#16181d}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const useEmailAutocomplete: () => {
|
|
3
|
+
inputValue: string;
|
|
4
|
+
setInputValue: import('react').Dispatch<import('react').SetStateAction<string>>;
|
|
5
|
+
suggestions: string[];
|
|
6
|
+
isDropdownOpen: boolean;
|
|
7
|
+
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
8
|
+
handleSuggestionClick: (suggestion: string) => void;
|
|
9
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
|
|
2
|
+
export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
3
|
+
showOptionalLabel?: boolean;
|
|
4
|
+
requiredInput?: boolean;
|
|
5
|
+
success?: boolean;
|
|
6
|
+
error?: boolean;
|
|
7
|
+
errorMessage?: string;
|
|
8
|
+
helpMessage?: string;
|
|
9
|
+
rightSlot?: React.ReactNode;
|
|
10
|
+
label?: string;
|
|
11
|
+
inputStyle?: React.CSSProperties;
|
|
12
|
+
inputRef?: React.RefObject<HTMLInputElement>;
|
|
13
|
+
};
|
|
14
|
+
export declare const EmailField: ({ showOptionalLabel, requiredInput, success, error, errorMessage, helpMessage, label, id, disabled, style, className, inputStyle, rightSlot, inputRef, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
package/dist/main.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export { ProfileNav } from './components/ProfileNav';
|
|
|
10
10
|
export { Text } from './components/Text';
|
|
11
11
|
export { Footer } from './components/Footer';
|
|
12
12
|
export { InputField } from './components/form/InputField';
|
|
13
|
+
export { EmailField } from './components/form/EmailField';
|
|
13
14
|
export { TokenField } from './components/form/TokenField';
|
|
14
15
|
export { SelectField } from './components/form/SelectField';
|
|
15
16
|
export { PasswordField } from './components/form/PasswordField';
|
package/dist/main.es.js
CHANGED
|
@@ -9,6 +9,7 @@ import { ProfileNav } from "./components/ProfileNav/index.es.js";
|
|
|
9
9
|
import { Text } from "./components/Text/index.es.js";
|
|
10
10
|
import { Footer } from "./components/Footer/index.es.js";
|
|
11
11
|
import { InputField } from "./components/InputField/index.es.js";
|
|
12
|
+
import { EmailField } from "./components/EmailField/index.es.js";
|
|
12
13
|
import { TokenField } from "./components/TokenField/index.es.js";
|
|
13
14
|
import { SelectField } from "./components/SelectField/index.es.js";
|
|
14
15
|
import { PasswordField } from "./components/PasswordField/index.es.js";
|
|
@@ -428,6 +429,7 @@ export {
|
|
|
428
429
|
Conditional,
|
|
429
430
|
DatepickerField,
|
|
430
431
|
Drawer,
|
|
432
|
+
EmailField,
|
|
431
433
|
av as FONT_BODY,
|
|
432
434
|
aA as FONT_SIZE_H1,
|
|
433
435
|
aB as FONT_SIZE_H2,
|
package/dist/main.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.es.js","sources":["../lib/components/Drawer/hooks.ts"],"sourcesContent":["import { useState } from 'react'\n\ntype UseDrawerProps = Record<string, boolean>\n\nexport function useDrawer(props: UseDrawerProps) {\n const [drawerOpen, setDrawerOpen] = useState<UseDrawerProps>(props)\n\n function handleOpenDrawer(name: string) {\n setDrawerOpen((prev) => {\n return {\n ...prev,\n [name]: !prev[name],\n }\n })\n }\n\n return {\n handleOpenDrawer,\n drawerOpen,\n }\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"main.es.js","sources":["../lib/components/Drawer/hooks.ts"],"sourcesContent":["import { useState } from 'react'\n\ntype UseDrawerProps = Record<string, boolean>\n\nexport function useDrawer(props: UseDrawerProps) {\n const [drawerOpen, setDrawerOpen] = useState<UseDrawerProps>(props)\n\n function handleOpenDrawer(name: string) {\n setDrawerOpen((prev) => {\n return {\n ...prev,\n [name]: !prev[name],\n }\n })\n }\n\n return {\n handleOpenDrawer,\n drawerOpen,\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,SAAS,UAAU,OAAuB;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAyB,KAAK;AAElE,WAAS,iBAAiB,MAAc;AACtC,kBAAc,CAAC,SAAS;AACf,aAAA;AAAA,QACL,GAAG;AAAA,QACH,CAAC,IAAI,GAAG,CAAC,KAAK,IAAI;AAAA,MAAA;AAAA,IACpB,CACD;AAAA,EACH;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;"}
|