pge-front-common 14.2.25 → 14.2.26
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/README.md +3 -3
- package/lib/components/Upload/FileUpload.stories.d.ts +1 -0
- package/lib/components/Upload/index.d.ts +3 -0
- package/lib/components/Upload/index.type.d.ts +3 -0
- package/lib/index.d.ts +16 -13
- package/lib/index.esm.js +7 -5
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +7 -5
- package/lib/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# 🖼️ Biblioteca de componentes da PGE
|
|
2
2
|
|
|
3
|
-
[](https://badge.fury.io/js/my-component-library) [](https://
|
|
3
|
+
[](https://badge.fury.io/js/my-component-library) [](https://componentes-dev.in.pge.rj.gov.br/)
|
|
4
4
|
|
|
5
5
|
Essa biblioteca consiste de componentes reutilizáveis entre os diversos projetos da PGE-RJ. Oferecendo componentes reutilizáveis e testados para ajudar a acelerar o desenvolvimento de interfaces de usuário.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
O Storybook desta biblioteca é publicado no ambiente de desenvolvimento: [https://componentes-dev.in.pge.rj.gov.br/](https://componentes-dev.in.pge.rj.gov.br/)
|
|
8
8
|
|
|
9
9
|
## Índice
|
|
10
10
|
|
|
@@ -80,7 +80,7 @@ Inicie o Storybook para visualizar e desenvolver componentes:
|
|
|
80
80
|
npm run storybook
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
-
O Storybook estará disponível em http://localhost:6006.
|
|
83
|
+
O Storybook estará disponível em http://localhost:6006. A versão implantada no ambiente de desenvolvimento fica em [https://componentes-dev.in.pge.rj.gov.br/](https://componentes-dev.in.pge.rj.gov.br/).
|
|
84
84
|
|
|
85
85
|
## 🖌️ FIGMA
|
|
86
86
|
|
|
@@ -11,6 +11,9 @@ export declare const FileUpload: React.ForwardRefExoticComponent<{
|
|
|
11
11
|
noSelectedFileText?: string;
|
|
12
12
|
maxFileSize?: `${number}KB` | `${number}MB` | `${number}GB`;
|
|
13
13
|
helperText?: React.ReactNode;
|
|
14
|
+
rightIcon?: React.ReactNode;
|
|
15
|
+
isDownloadable?: boolean;
|
|
16
|
+
onDownload?: () => void;
|
|
14
17
|
} & {
|
|
15
18
|
disabled?: boolean | undefined | undefined;
|
|
16
19
|
form?: string | undefined | undefined;
|
|
@@ -12,6 +12,9 @@ export type UploadFileProps = {
|
|
|
12
12
|
noSelectedFileText?: string;
|
|
13
13
|
maxFileSize?: `${number}KB` | `${number}MB` | `${number}GB`;
|
|
14
14
|
helperText?: ReactNode;
|
|
15
|
+
rightIcon?: React.ReactNode;
|
|
16
|
+
isDownloadable?: boolean;
|
|
17
|
+
onDownload?: () => void;
|
|
15
18
|
} & ButtonAttrs;
|
|
16
19
|
export type FileUploadHandle = {
|
|
17
20
|
reset: () => void;
|
package/lib/index.d.ts
CHANGED
|
@@ -91,7 +91,23 @@ declare const FileUpload: React__default.ForwardRefExoticComponent<{
|
|
|
91
91
|
noSelectedFileText?: string;
|
|
92
92
|
maxFileSize?: `${number}KB` | `${number}MB` | `${number}GB`;
|
|
93
93
|
helperText?: React__default.ReactNode;
|
|
94
|
+
rightIcon?: React__default.ReactNode;
|
|
95
|
+
isDownloadable?: boolean;
|
|
96
|
+
onDownload?: () => void;
|
|
94
97
|
} & {
|
|
98
|
+
style?: React__default.CSSProperties | undefined;
|
|
99
|
+
disabled?: boolean | undefined | undefined;
|
|
100
|
+
className?: string | undefined | undefined;
|
|
101
|
+
value?: string | number | readonly string[] | undefined;
|
|
102
|
+
form?: string | undefined | undefined;
|
|
103
|
+
formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
|
|
104
|
+
formEncType?: string | undefined | undefined;
|
|
105
|
+
formMethod?: string | undefined | undefined;
|
|
106
|
+
formNoValidate?: boolean | undefined | undefined;
|
|
107
|
+
formTarget?: string | undefined | undefined;
|
|
108
|
+
name?: string | undefined | undefined;
|
|
109
|
+
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
110
|
+
onChange?: React__default.FormEventHandler<HTMLButtonElement> | undefined;
|
|
95
111
|
defaultChecked?: boolean | undefined | undefined;
|
|
96
112
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
97
113
|
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
@@ -99,7 +115,6 @@ declare const FileUpload: React__default.ForwardRefExoticComponent<{
|
|
|
99
115
|
accessKey?: string | undefined | undefined;
|
|
100
116
|
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
|
|
101
117
|
autoFocus?: boolean | undefined | undefined;
|
|
102
|
-
className?: string | undefined | undefined;
|
|
103
118
|
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
104
119
|
contextMenu?: string | undefined | undefined;
|
|
105
120
|
dir?: string | undefined | undefined;
|
|
@@ -111,7 +126,6 @@ declare const FileUpload: React__default.ForwardRefExoticComponent<{
|
|
|
111
126
|
nonce?: string | undefined | undefined;
|
|
112
127
|
slot?: string | undefined | undefined;
|
|
113
128
|
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
114
|
-
style?: React__default.CSSProperties | undefined;
|
|
115
129
|
tabIndex?: number | undefined | undefined;
|
|
116
130
|
translate?: "yes" | "no" | undefined | undefined;
|
|
117
131
|
radioGroup?: string | undefined | undefined;
|
|
@@ -219,7 +233,6 @@ declare const FileUpload: React__default.ForwardRefExoticComponent<{
|
|
|
219
233
|
onFocusCapture?: React__default.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
220
234
|
onBlur?: React__default.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
221
235
|
onBlurCapture?: React__default.FocusEventHandler<HTMLButtonElement> | undefined;
|
|
222
|
-
onChange?: React__default.FormEventHandler<HTMLButtonElement> | undefined;
|
|
223
236
|
onChangeCapture?: React__default.FormEventHandler<HTMLButtonElement> | undefined;
|
|
224
237
|
onBeforeInput?: React__default.InputEventHandler<HTMLButtonElement> | undefined;
|
|
225
238
|
onBeforeInputCapture?: React__default.FormEventHandler<HTMLButtonElement> | undefined;
|
|
@@ -388,16 +401,6 @@ declare const FileUpload: React__default.ForwardRefExoticComponent<{
|
|
|
388
401
|
'data-pr-hidedelay'?: number | undefined | undefined;
|
|
389
402
|
'data-pr-autohide'?: boolean | undefined | undefined;
|
|
390
403
|
'data-pr-showondisabled'?: boolean | undefined | undefined;
|
|
391
|
-
disabled?: boolean | undefined | undefined;
|
|
392
|
-
form?: string | undefined | undefined;
|
|
393
|
-
formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
|
|
394
|
-
formEncType?: string | undefined | undefined;
|
|
395
|
-
formMethod?: string | undefined | undefined;
|
|
396
|
-
formNoValidate?: boolean | undefined | undefined;
|
|
397
|
-
formTarget?: string | undefined | undefined;
|
|
398
|
-
name?: string | undefined | undefined;
|
|
399
|
-
type?: "submit" | "reset" | "button" | undefined | undefined;
|
|
400
|
-
value?: string | number | readonly string[] | undefined;
|
|
401
404
|
} & React__default.RefAttributes<FileUploadHandle>>;
|
|
402
405
|
|
|
403
406
|
interface TooltipProps$1 {
|
package/lib/index.esm.js
CHANGED
|
@@ -743,8 +743,8 @@ var PgeButton = React__default.forwardRef(function (_a, ref) {
|
|
|
743
743
|
});
|
|
744
744
|
PgeButton.displayName = "PgeButton";
|
|
745
745
|
|
|
746
|
-
var css_248z$E = ".styles-module__container___9pLua {\r\n width: 100%;\r\n height: fit-content;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.styles-module__label___AWyTG {\r\n font-size: var(--font-size-16);\r\n font-weight: 600;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--color-label);\r\n}\r\n\r\n.styles-module__labelUpload___LOAO- {\r\n font-size: var(--font-size-16);\r\n font-weight: 400;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--color-label);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__label___AWyTG {\r\n font-size: var(--font-size-12);\r\n font-weight: 600;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--color-label);\r\n }\r\n\r\n .styles-module__labelUpload___LOAO- {\r\n font-size: var(--font-size-12);\r\n font-weight: 400;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--color-label);\r\n }\r\n}\r\n\r\n.styles-module__inputContainer___tsCfV {\r\n width: 100%;\r\n height: 58px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 10px;\r\n border: 2px dotted var(--upload-border-color, #005a9280);\r\n border-radius: 16px;\r\n padding: 10px;\r\n margin-top: 5px;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__inputContainer___tsCfV {\r\n height: 52px;\r\n }\r\n}\r\n\r\n.styles-module__button___1GicM {\r\n width: fit-content;\r\n height: 38px;\r\n display: flex;\r\n align-items: center;\r\n padding: 7px 13px;\r\n gap: 8px;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__button___1GicM {\r\n min-width: 91px;\r\n height: 32px;\r\n }\r\n}\r\n\r\n.styles-module__hiddenInput___lDoAG {\r\n display: none;\r\n}\r\n\r\n.styles-module__description___S1vZj {\r\n font-size: var(--font-size-16);\r\n font-weight: 400;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--input-placeholder-focus);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__description___S1vZj {\r\n font-size: var(--font-size-12);\r\n font-weight: 400;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--input-placeholder-focus);\r\n }\r\n}\r\n\r\n.styles-module__instructionText___fa9r4 {\r\n font-size: var(--font-size-16);\r\n font-weight: 500;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--foreground);\r\n}\r\n\r\n.styles-module__primary___AtNI- {\r\n background-color: var(--btn-bg-primary-color);\r\n color: var(--btn-text-primary-color);\r\n border: none;\r\n}\r\n\r\n.styles-module__primary___AtNI-:hover {\r\n background-color: var(--btn-bg-primary-color);\r\n color: var(--btn-text-hover-primary-color);\r\n outline: 3px solid var(--btn-bg-focus-primary-color);\r\n}\r\n\r\n.styles-module__primary___AtNI-:active {\r\n border: 1.8px solid var(--Pressed-button, #3ab0f3);\r\n}\r\n\r\n.styles-module__primary___AtNI-:focus {\r\n box-shadow: 0px 4px 4px 0px #00000040;\r\n background: var(--btn-bg-focus-primary-color, #00436d);\r\n color: var(--btn-text-focus-primary-color);\r\n outline: 2px solid var(--btn-text-focus-primary-color);\r\n}\r\n\r\n.styles-module__primary___AtNI-:disabled {\r\n background: var(--light-grey-color, #c3c3c3);\r\n cursor: not-allowed;\r\n}\r\n\r\n.styles-module__secondary___-anJq {\r\n border: 1px solid var(--btn-up-border-secondary-color);\r\n background: var(--btn-up-bg-secondary-color);\r\n color: var(--btn-up-text-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:hover {\r\n background: var(--btn-up-bg-hover-secondary-color);\r\n border: 1px solid var(--btn-up-border-secondary-color);\r\n color: var(--btn-up-text-hover-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:active {\r\n background: #00436d1a;\r\n border: 2px solid #3ab0f3cc;\r\n}\r\n\r\n.styles-module__secondary___-anJq:focus {\r\n background: var(--btn-up-bg-focus-secondary-color);\r\n color: var(--btn-up-text-focus-secondary-color);\r\n outline: 2.5px solid var(--btn-up-border-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:disabled {\r\n border: 1px solid var(--light-grey-color, #c3c3c3);\r\n color: var(--light-grey-color, #c3c3c3);\r\n cursor: not-allowed;\r\n}\r\n\r\n.styles-module__secondary___-anJq.styles-module__danger___RwQhk {\r\n border: 1px solid var(--btn-up-border-danger-secondary-color, #cb0a0a);\r\n color: var(--btn-up-text-danger-secondary-color, #cb0a0a);\r\n}\r\n\r\n.styles-module__errorText___1LAhk {\r\n font-size: var(--font-size-14);\r\n font-weight: 400;\r\n line-height: 21px;\r\n text-align: left;\r\n color: var(--alert-color);\r\n}\r\n\r\n.styles-module__successText___s1G4K {\r\n font-size: var(--font-size-14);\r\n font-weight: 400;\r\n line-height: 21px;\r\n text-align: left;\r\n color: var(--success-color);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__errorText___1LAhk {\r\n font-size: var(--font-size-10);\r\n }\r\n\r\n .styles-module__successText___s1G4K {\r\n font-size: var(--font-size-10);\r\n }\r\n}\r\n";
|
|
747
|
-
var styles$A = {"container":"styles-module__container___9pLua","label":"styles-module__label___AWyTG","labelUpload":"styles-module__labelUpload___LOAO-","inputContainer":"styles-module__inputContainer___tsCfV","button":"styles-module__button___1GicM","hiddenInput":"styles-module__hiddenInput___lDoAG","description":"styles-module__description___S1vZj","instructionText":"styles-module__instructionText___fa9r4","primary":"styles-module__primary___AtNI-","secondary":"styles-module__secondary___-anJq","danger":"styles-module__danger___RwQhk","errorText":"styles-module__errorText___1LAhk","successText":"styles-module__successText___s1G4K"};
|
|
746
|
+
var css_248z$E = ".styles-module__container___9pLua {\r\n width: 100%;\r\n height: fit-content;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.styles-module__label___AWyTG {\r\n font-size: var(--font-size-16);\r\n font-weight: 600;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--color-label);\r\n}\r\n\r\n.styles-module__labelUpload___LOAO- {\r\n font-size: var(--font-size-16);\r\n font-weight: 400;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--color-label);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__label___AWyTG {\r\n font-size: var(--font-size-12);\r\n font-weight: 600;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--color-label);\r\n }\r\n\r\n .styles-module__labelUpload___LOAO- {\r\n font-size: var(--font-size-12);\r\n font-weight: 400;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--color-label);\r\n }\r\n}\r\n\r\n.styles-module__inputContainer___tsCfV {\r\n width: 100%;\r\n height: 58px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 10px;\r\n border: 2px dotted var(--upload-border-color, #005a9280);\r\n border-radius: 16px;\r\n padding: 10px;\r\n margin-top: 5px;\r\n}\r\n\r\n\r\n\r\n.styles-module__rightIcon___UN4xe {\r\n margin-left: auto;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__inputContainer___tsCfV {\r\n height: 52px;\r\n }\r\n}\r\n\r\n.styles-module__button___1GicM {\r\n width: fit-content;\r\n height: 38px;\r\n display: flex;\r\n align-items: center;\r\n padding: 7px 13px;\r\n gap: 8px;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__button___1GicM {\r\n min-width: 91px;\r\n height: 32px;\r\n }\r\n}\r\n\r\n.styles-module__hiddenInput___lDoAG {\r\n display: none;\r\n}\r\n\r\n.styles-module__description___S1vZj {\r\n font-size: var(--font-size-16);\r\n font-weight: 400;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--input-placeholder-focus);\r\n}\r\n\r\n.styles-module__linkDescription___T2DrY {\r\n font-size: var(--font-size-16);\r\n font-weight: 400;\r\n line-height: 24px;\r\n text-align: left;\r\n text-decoration: underline;\r\n color: var(--color-primary);\r\n cursor: pointer;\r\n}\r\n\r\n.styles-module__linkDescription___T2DrY:hover {\r\n opacity: 0.75;\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__description___S1vZj {\r\n font-size: var(--font-size-12);\r\n font-weight: 400;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--input-placeholder-focus);\r\n }\r\n}\r\n\r\n.styles-module__instructionText___fa9r4 {\r\n font-size: var(--font-size-16);\r\n font-weight: 500;\r\n line-height: 24px;\r\n text-align: left;\r\n color: var(--foreground);\r\n}\r\n\r\n.styles-module__primary___AtNI- {\r\n background-color: var(--btn-bg-primary-color);\r\n color: var(--btn-text-primary-color);\r\n border: none;\r\n}\r\n\r\n.styles-module__primary___AtNI-:hover {\r\n background-color: var(--btn-bg-primary-color);\r\n color: var(--btn-text-hover-primary-color);\r\n outline: 3px solid var(--btn-bg-focus-primary-color);\r\n}\r\n\r\n.styles-module__primary___AtNI-:active {\r\n border: 1.8px solid var(--Pressed-button, #3ab0f3);\r\n}\r\n\r\n.styles-module__primary___AtNI-:focus {\r\n box-shadow: 0px 4px 4px 0px #00000040;\r\n background: var(--btn-bg-focus-primary-color, #00436d);\r\n color: var(--btn-text-focus-primary-color);\r\n outline: 2px solid var(--btn-text-focus-primary-color);\r\n}\r\n\r\n.styles-module__primary___AtNI-:disabled {\r\n background: var(--light-grey-color, #c3c3c3);\r\n cursor: not-allowed;\r\n}\r\n\r\n.styles-module__secondary___-anJq {\r\n border: 1px solid var(--btn-up-border-secondary-color);\r\n background: var(--btn-up-bg-secondary-color);\r\n color: var(--btn-up-text-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:hover {\r\n background: var(--btn-up-bg-hover-secondary-color);\r\n border: 1px solid var(--btn-up-border-secondary-color);\r\n color: var(--btn-up-text-hover-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:active {\r\n background: #00436d1a;\r\n border: 2px solid #3ab0f3cc;\r\n}\r\n\r\n.styles-module__secondary___-anJq:focus {\r\n background: var(--btn-up-bg-focus-secondary-color);\r\n color: var(--btn-up-text-focus-secondary-color);\r\n outline: 2.5px solid var(--btn-up-border-secondary-color);\r\n}\r\n\r\n.styles-module__secondary___-anJq:disabled {\r\n border: 1px solid var(--light-grey-color, #c3c3c3);\r\n color: var(--light-grey-color, #c3c3c3);\r\n cursor: not-allowed;\r\n}\r\n\r\n.styles-module__secondary___-anJq.styles-module__danger___RwQhk {\r\n border: 1px solid var(--btn-up-border-danger-secondary-color, #cb0a0a);\r\n color: var(--btn-up-text-danger-secondary-color, #cb0a0a);\r\n}\r\n\r\n.styles-module__errorText___1LAhk {\r\n font-size: var(--font-size-14);\r\n font-weight: 400;\r\n line-height: 21px;\r\n text-align: left;\r\n color: var(--alert-color);\r\n}\r\n\r\n.styles-module__successText___s1G4K {\r\n font-size: var(--font-size-14);\r\n font-weight: 400;\r\n line-height: 21px;\r\n text-align: left;\r\n color: var(--success-color);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .styles-module__errorText___1LAhk {\r\n font-size: var(--font-size-10);\r\n }\r\n\r\n .styles-module__successText___s1G4K {\r\n font-size: var(--font-size-10);\r\n }\r\n}\r\n";
|
|
747
|
+
var styles$A = {"container":"styles-module__container___9pLua","label":"styles-module__label___AWyTG","labelUpload":"styles-module__labelUpload___LOAO-","inputContainer":"styles-module__inputContainer___tsCfV","rightIcon":"styles-module__rightIcon___UN4xe","button":"styles-module__button___1GicM","hiddenInput":"styles-module__hiddenInput___lDoAG","description":"styles-module__description___S1vZj","linkDescription":"styles-module__linkDescription___T2DrY","instructionText":"styles-module__instructionText___fa9r4","primary":"styles-module__primary___AtNI-","secondary":"styles-module__secondary___-anJq","danger":"styles-module__danger___RwQhk","errorText":"styles-module__errorText___1LAhk","successText":"styles-module__successText___s1G4K"};
|
|
748
748
|
styleInject(css_248z$E);
|
|
749
749
|
|
|
750
750
|
var parseSizeToBytes = function (size) {
|
|
@@ -768,14 +768,14 @@ var parseSizeToBytes = function (size) {
|
|
|
768
768
|
};
|
|
769
769
|
var FileUpload = forwardRef(function (_a, ref) {
|
|
770
770
|
var _b;
|
|
771
|
-
var _c = _a.variant, variant = _c === void 0 ? "primary" : _c, _d = _a.danger, danger = _d === void 0 ? false : _d, fileTypes = _a.fileTypes, onFileSelect = _a.onFileSelect, _e = _a.title, title = _e === void 0 ? React__default.createElement(React__default.Fragment, null, "Upload de Arquivos:") : _e, _f = _a.descricaoLabel, descricaoLabel = _f === void 0 ? "Escolher arquivo" : _f, className = _a.className, _g = _a.errorText, errorText = _g === void 0 ? "" : _g, _h = _a.noSelectedFileText, noSelectedFileText = _h === void 0 ? "Nenhum arquivo selecionado" : _h, _j = _a.helperText, helperText = _j === void 0 ? "" : _j, _k = _a.maxFileSize, maxFileSize = _k === void 0 ? "" : _k; __rest(_a, ["variant", "danger", "fileTypes", "onFileSelect", "title", "descricaoLabel", "className", "errorText", "noSelectedFileText", "helperText", "maxFileSize"]);
|
|
771
|
+
var _c = _a.variant, variant = _c === void 0 ? "primary" : _c, _d = _a.danger, danger = _d === void 0 ? false : _d, fileTypes = _a.fileTypes, onFileSelect = _a.onFileSelect, _e = _a.title, title = _e === void 0 ? React__default.createElement(React__default.Fragment, null, "Upload de Arquivos:") : _e, _f = _a.descricaoLabel, descricaoLabel = _f === void 0 ? "Escolher arquivo" : _f, className = _a.className, _g = _a.errorText, errorText = _g === void 0 ? "" : _g, _h = _a.noSelectedFileText, noSelectedFileText = _h === void 0 ? "Nenhum arquivo selecionado" : _h, _j = _a.helperText, helperText = _j === void 0 ? "" : _j, _k = _a.maxFileSize, maxFileSize = _k === void 0 ? "" : _k, _l = _a.rightIcon, rightIcon = _l === void 0 ? null : _l, _m = _a.isDownloadable, isDownloadable = _m === void 0 ? false : _m, onDownload = _a.onDownload; __rest(_a, ["variant", "danger", "fileTypes", "onFileSelect", "title", "descricaoLabel", "className", "errorText", "noSelectedFileText", "helperText", "maxFileSize", "rightIcon", "isDownloadable", "onDownload"]);
|
|
772
772
|
var buttonClass = clsx(styles$A.labelUpload, styles$A.button, styles$A[variant], (_b = {},
|
|
773
773
|
_b[styles$A.danger] = danger && variant !== "primary",
|
|
774
774
|
_b), className);
|
|
775
775
|
var inputId = useId$1();
|
|
776
776
|
var helperId = useId$1();
|
|
777
777
|
var errorId = useId$1();
|
|
778
|
-
var
|
|
778
|
+
var _o = React__default.useState(""), fileName = _o[0], setFileName = _o[1];
|
|
779
779
|
var fileInputRef = useRef(null);
|
|
780
780
|
var handleFileChange = function (event) {
|
|
781
781
|
var _a, _b;
|
|
@@ -828,7 +828,9 @@ var FileUpload = forwardRef(function (_a, ref) {
|
|
|
828
828
|
React__default.createElement(IconUploadFile, { "aria-hidden": "true" }),
|
|
829
829
|
descricaoLabel),
|
|
830
830
|
React__default.createElement("input", { id: inputId, type: "file", ref: fileInputRef, className: styles$A.hiddenInput, onChange: handleFileChange, accept: fileTypes.join(","), "aria-describedby": "".concat(helperId, " ").concat(errorText ? errorId : ""), "aria-label": "Campo de input para selecionar arquivo", "aria-invalid": !!errorText }),
|
|
831
|
-
React__default.createElement("span", { className: styles$A.description
|
|
831
|
+
React__default.createElement("span", { className: isDownloadable ? styles$A.linkDescription : styles$A.description, onClick: isDownloadable && onDownload ? onDownload : undefined, role: isDownloadable && onDownload ? "button" : undefined, tabIndex: isDownloadable && onDownload ? 0 : undefined, onKeyDown: isDownloadable && onDownload ? function (e) { if (e.key === "Enter" || e.key === " ")
|
|
832
|
+
onDownload(); } : undefined }, fileName || noSelectedFileText),
|
|
833
|
+
rightIcon && (React__default.createElement("div", { className: styles$A.rightIcon }, rightIcon))),
|
|
832
834
|
React__default.createElement("span", { id: errorText ? errorId : helperId, role: "alert", "aria-live": "polite", className: errorText
|
|
833
835
|
? styles$A.errorText
|
|
834
836
|
: fileName
|