@giro-ds/react 11.0.0 → 11.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +283 -205
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +87 -32
- package/dist/index.esm.js +285 -208
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +2 -2
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -31,17 +31,17 @@ function _interopNamespaceDefault(e) {
|
|
|
31
31
|
|
|
32
32
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
33
33
|
|
|
34
|
-
var styles$
|
|
34
|
+
var styles$v = {"AvatarRoot":"Avatar-module__AvatarRoot___7eNx7","AvatarRoot--sm":"Avatar-module__AvatarRoot--sm___LVHoe","AvatarRoot--lg":"Avatar-module__AvatarRoot--lg___QWux5","AvatarImage":"Avatar-module__AvatarImage___-H6iH","AvatarFallback":"Avatar-module__AvatarFallback___RDyNV"};
|
|
35
35
|
|
|
36
36
|
const Avatar = ({ icon, size = 'lg', src, className, initialLetters, ...rest }) => {
|
|
37
|
-
const AvatarClass = clsx(styles$
|
|
38
|
-
[styles$
|
|
39
|
-
[styles$
|
|
37
|
+
const AvatarClass = clsx(styles$v.AvatarRoot, {
|
|
38
|
+
[styles$v['AvatarRoot--lg']]: size === 'lg',
|
|
39
|
+
[styles$v['AvatarRoot--sm']]: size === 'sm',
|
|
40
40
|
}, className);
|
|
41
|
-
return (jsxRuntime.jsxs(radixUi.Avatar.Root, { className: AvatarClass, ...rest, children: [src && (jsxRuntime.jsx(radixUi.Avatar.Image, { className: styles$
|
|
41
|
+
return (jsxRuntime.jsxs(radixUi.Avatar.Root, { className: AvatarClass, ...rest, children: [src && (jsxRuntime.jsx(radixUi.Avatar.Image, { className: styles$v.AvatarImage, src: src, alt: "Avatar" })), jsxRuntime.jsx(radixUi.Avatar.Fallback, { className: styles$v.AvatarFallback, children: icon || initialLetters })] }));
|
|
42
42
|
};
|
|
43
43
|
|
|
44
|
-
var styles$
|
|
44
|
+
var styles$u = {"badge__status":"Badge-module__badge__status___-u3xv","badge":"Badge-module__badge___ZbEBU","badgeContainer":"Badge-module__badgeContainer___Guw9Z","badge__empty":"Badge-module__badge__empty___u8ccy","badge__flex":"Badge-module__badge__flex___DSJHW","badge__status__empty":"Badge-module__badge__status__empty___h8L4e","badge__status__flex":"Badge-module__badge__status__flex___703Q6","badge__status__filterBadge":"Badge-module__badge__status__filterBadge___DhjGU"};
|
|
45
45
|
|
|
46
46
|
const getDisplayValue = (value) => {
|
|
47
47
|
if (value === null || value === undefined)
|
|
@@ -63,25 +63,25 @@ const Badge = ({ children, badgeValue = null, className, id, filterVariant = fal
|
|
|
63
63
|
const displayValue = getDisplayValue(badgeValue);
|
|
64
64
|
const isEmpty = displayValue === '';
|
|
65
65
|
if (children) {
|
|
66
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
67
|
-
[styles$
|
|
68
|
-
[styles$
|
|
66
|
+
return (jsxRuntime.jsxs("div", { className: styles$u.badgeContainer, ...rest, children: [jsxRuntime.jsx("div", { "data-testid": "badge-content", children: children }), jsxRuntime.jsx("div", { id: componentId, className: clsx(styles$u.badge, {
|
|
67
|
+
[styles$u['badge__empty']]: isEmpty,
|
|
68
|
+
[styles$u['badge__flex']]: displayValue.length >= 2,
|
|
69
69
|
}, className), "data-testid": "badge", children: !isEmpty && jsxRuntime.jsx("span", { "aria-hidden": !!ariaLabel, children: displayValue }) })] }));
|
|
70
70
|
}
|
|
71
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
72
|
-
[styles$
|
|
73
|
-
[styles$
|
|
74
|
-
[styles$
|
|
71
|
+
return (jsxRuntime.jsx("div", { className: styles$u.badgeContainer, children: jsxRuntime.jsx("div", { className: clsx(styles$u['badge__status'], {
|
|
72
|
+
[styles$u['badge__status__empty']]: isEmpty,
|
|
73
|
+
[styles$u['badge__status__flex']]: displayValue.length >= 2,
|
|
74
|
+
[styles$u['badge__status__filterBadge']]: filterVariant,
|
|
75
75
|
}, className), "data-testid": "badge", children: !isEmpty && (jsxRuntime.jsx("span", { "aria-hidden": !!ariaLabel, children: displayValue })) }) }));
|
|
76
76
|
};
|
|
77
77
|
|
|
78
|
-
var styles$
|
|
78
|
+
var styles$t = {"tooltipContent":"Tooltip-module__tooltipContent___xycUg","triggerWrapper":"Tooltip-module__triggerWrapper___x83XR"};
|
|
79
79
|
|
|
80
80
|
const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, sideOffset = 10, className, ...rest }) => {
|
|
81
|
-
return (jsxRuntime.jsx(radixUi.Tooltip.Provider, { children: jsxRuntime.jsxs(radixUi.Tooltip.Root, { children: [jsxRuntime.jsx(radixUi.Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("span", { className: styles$
|
|
81
|
+
return (jsxRuntime.jsx(radixUi.Tooltip.Provider, { children: jsxRuntime.jsxs(radixUi.Tooltip.Root, { children: [jsxRuntime.jsx(radixUi.Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("span", { className: styles$t.triggerWrapper, children: children }) }), jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: jsxRuntime.jsx(radixUi.Tooltip.Content, { className: clsx(styles$t.tooltipContent, className), side: side, align: align, sideOffset: sideOffset, style: { maxWidth: maxWidth ? `${maxWidth}px` : 'auto' }, ...rest, children: text }) })] }) }));
|
|
82
82
|
};
|
|
83
83
|
|
|
84
|
-
var styles$
|
|
84
|
+
var styles$s = {"button":"Button-module__button___18Bed","button-lg":"Button-module__button-lg___-A8B9","button-sm":"Button-module__button-sm___L7aT7","button-filled":"Button-module__button-filled___IQx1z","button-outlined":"Button-module__button-outlined___hLkLN","button-text":"Button-module__button-text___8GFeA","buttonWithIcon":"Button-module__buttonWithIcon___8ehK1","buttonIconPosition-left":"Button-module__buttonIconPosition-left___uOY6b","buttonIconPosition-right":"Button-module__buttonIconPosition-right___eswRS","buttonIconPosition-both":"Button-module__buttonIconPosition-both___1Lith","buttonNoContent":"Button-module__buttonNoContent___Tc9jk","buttonIconOnly":"Button-module__buttonIconOnly___aifk4","buttonIconLeft":"Button-module__buttonIconLeft___RICR3","buttonIconRight":"Button-module__buttonIconRight___71lu2","buttonFullWidth":"Button-module__buttonFullWidth___tXuVE","disabled":"Button-module__disabled___UzdWL","buttonLoading":"Button-module__buttonLoading___RGdNw","buttonContentHidden":"Button-module__buttonContentHidden___CoCiN","buttonLoadingSpinner":"Button-module__buttonLoadingSpinner___oZxEU","spin":"Button-module__spin___kQKH9"};
|
|
85
85
|
|
|
86
86
|
const Button = React.forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel, disabled = false, onClick, size = 'lg', scale = 1, className, type = 'button', id, icon, fullWidth = false, ariaLabel, iconOnly = false, loading = false, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', ...rest }, ref) => {
|
|
87
87
|
const generatedId = React.useId();
|
|
@@ -110,14 +110,14 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
110
110
|
'Forneça um ícone via `icon={<MeuIcone />}`.');
|
|
111
111
|
}
|
|
112
112
|
const resolvedIcon = icon;
|
|
113
|
-
const buttonClasses = clsx(styles$
|
|
114
|
-
[styles$
|
|
115
|
-
[styles$
|
|
116
|
-
[styles$
|
|
117
|
-
[styles$
|
|
118
|
-
[styles$
|
|
119
|
-
[styles$
|
|
120
|
-
[styles$
|
|
113
|
+
const buttonClasses = clsx(styles$s.button, styles$s[`button-${variant}`], styles$s[`button-${size}`], {
|
|
114
|
+
[styles$s['disabled']]: disabled,
|
|
115
|
+
[styles$s['buttonLoading']]: loading,
|
|
116
|
+
[styles$s['buttonWithIcon']]: resolvedIcon && !iconOnly,
|
|
117
|
+
[styles$s[`buttonIconPosition-${iconPosition}`]]: resolvedIcon && !iconOnly,
|
|
118
|
+
[styles$s['buttonNoContent']]: resolvedIcon && !hasContent && !iconOnly,
|
|
119
|
+
[styles$s['buttonFullWidth']]: fullWidth,
|
|
120
|
+
[styles$s['buttonIconOnly']]: iconOnly,
|
|
121
121
|
}, className);
|
|
122
122
|
const getAriaLabel = () => {
|
|
123
123
|
if (ariaLabel)
|
|
@@ -143,12 +143,12 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
143
143
|
};
|
|
144
144
|
const renderContent = () => {
|
|
145
145
|
if (iconOnly && !loading) {
|
|
146
|
-
return (jsxRuntime.jsx("span", { className: styles$
|
|
146
|
+
return (jsxRuntime.jsx("span", { className: styles$s.buttonIconOnly, "aria-hidden": "true", children: resolvedIcon }));
|
|
147
147
|
}
|
|
148
148
|
if (loading) {
|
|
149
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!iconOnly && (jsxRuntime.jsxs("span", { className: styles$
|
|
149
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!iconOnly && (jsxRuntime.jsxs("span", { className: styles$s.buttonContentHidden, "aria-hidden": "true", children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$s.buttonIconLeft, children: resolvedIcon })), children, resolvedIcon && (iconPosition === 'right' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$s.buttonIconRight, children: resolvedIcon }))] })), jsxRuntime.jsx("span", { className: styles$s.buttonLoadingSpinner, "aria-hidden": "true", children: jsxRuntime.jsx(reactIcons.SpinnerIos16Regular, { "aria-hidden": "true" }) })] }));
|
|
150
150
|
}
|
|
151
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$
|
|
151
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$s.buttonIconLeft, "aria-hidden": "true", children: resolvedIcon })), children, resolvedIcon && (iconPosition === 'right' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$s.buttonIconRight, "aria-hidden": "true", children: resolvedIcon }))] }));
|
|
152
152
|
};
|
|
153
153
|
const { style: externalStyle, ...otherRest } = rest;
|
|
154
154
|
const baseProps = {
|
|
@@ -2458,7 +2458,7 @@ const ptBR = {
|
|
|
2458
2458
|
},
|
|
2459
2459
|
};
|
|
2460
2460
|
|
|
2461
|
-
var styles$
|
|
2461
|
+
var styles$r = {"root":"Calendar-module__root___vQEhz","day":"Calendar-module__day___dseUA","day_button":"Calendar-module__day_button___r3WNU","caption_label":"Calendar-module__caption_label___Dhkie","button_next":"Calendar-module__button_next___iRaNz","button_previous":"Calendar-module__button_previous___r7JBs","chevron":"Calendar-module__chevron___NPDg-","nav":"Calendar-module__nav___MT3Dm","dropdowns":"Calendar-module__dropdowns___xBVtv","dropdown":"Calendar-module__dropdown___D7OlW","dropdown_root":"Calendar-module__dropdown_root___v4DlK","month_caption":"Calendar-module__month_caption___P3Hlu","month":"Calendar-module__month___0RA-L","months":"Calendar-module__months___rmJdy","month_grid":"Calendar-module__month_grid___f6YkX","weekday":"Calendar-module__weekday___Spb2f","week_number":"Calendar-module__week_number___EXJD9","today":"Calendar-module__today___U36wP","outside":"Calendar-module__outside___UeJFZ","selected":"Calendar-module__selected___5Nryr","disabled":"Calendar-module__disabled___T3658","hidden":"Calendar-module__hidden___uL3uc","range_start":"Calendar-module__range_start___c1eNH","range_middle":"Calendar-module__range_middle___Uv4gt","range_end":"Calendar-module__range_end___4qDh5","focusable":"Calendar-module__focusable___V7w-Q","weeks_before_enter":"Calendar-module__weeks_before_enter___O1ytQ","slide_in_left":"Calendar-module__slide_in_left___hfrfr","weeks_before_exit":"Calendar-module__weeks_before_exit___v7nDr","slide_out_left":"Calendar-module__slide_out_left___kib4j","weeks_after_enter":"Calendar-module__weeks_after_enter___CEtsD","slide_in_right":"Calendar-module__slide_in_right___ldL0M","weeks_after_exit":"Calendar-module__weeks_after_exit___F8Edz","slide_out_right":"Calendar-module__slide_out_right___X2hxE","caption_after_enter":"Calendar-module__caption_after_enter___0ek1H","fade_in":"Calendar-module__fade_in___YyYoZ","caption_after_exit":"Calendar-module__caption_after_exit___RA1iK","fade_out":"Calendar-module__fade_out___lNcmB","caption_before_enter":"Calendar-module__caption_before_enter___j6sMK","caption_before_exit":"Calendar-module__caption_before_exit___rntl-","calendar_grid_wrapper":"Calendar-module__calendar_grid_wrapper___OX0TR","caption_grid_btn":"Calendar-module__caption_grid_btn___qD0-E","caption_year_chevron":"Calendar-module__caption_year_chevron___4ghQV","caption_grid_label":"Calendar-module__caption_grid_label___93Wx4","gridOverlay":"Calendar-module__gridOverlay___Za-y0","gridOverlayCaption":"Calendar-module__gridOverlayCaption___p4OUO","gridOverlayYearsNav":"Calendar-module__gridOverlayYearsNav___U6S-V","gridCells":"Calendar-module__gridCells___Y8DaG","gridCellsYears":"Calendar-module__gridCellsYears___jEV52","gridCell":"Calendar-module__gridCell___RV1co","gridCellActive":"Calendar-module__gridCellActive___UBi5y","gridNavBtn":"Calendar-module__gridNavBtn___Jligz","chevronNavBtnPrev":"Calendar-module__chevronNavBtnPrev___ifEps","chevronNavBtnNext":"Calendar-module__chevronNavBtnNext___qmghm","chevron_wrapper":"Calendar-module__chevron_wrapper___BfN9a"};
|
|
2462
2462
|
|
|
2463
2463
|
const FLUENT_CHEVRON_MAP = {
|
|
2464
2464
|
down: reactIcons.ChevronDown16Regular,
|
|
@@ -2468,7 +2468,7 @@ const FLUENT_CHEVRON_MAP = {
|
|
|
2468
2468
|
};
|
|
2469
2469
|
const CustomChevron = ({ orientation = "left", className, }) => {
|
|
2470
2470
|
const Icon = FLUENT_CHEVRON_MAP[orientation];
|
|
2471
|
-
return jsxRuntime.jsx("span", { className: styles$
|
|
2471
|
+
return jsxRuntime.jsx("span", { className: styles$r.chevron_wrapper, children: jsxRuntime.jsx(Icon, { className: className, "aria-hidden": true }) });
|
|
2472
2472
|
};
|
|
2473
2473
|
const GridCtx = React.createContext(null);
|
|
2474
2474
|
const GridMonthCaption = ({ calendarMonth, displayIndex: _displayIndex, ...divProps }) => {
|
|
@@ -2477,7 +2477,7 @@ const GridMonthCaption = ({ calendarMonth, displayIndex: _displayIndex, ...divPr
|
|
|
2477
2477
|
const date = calendarMonth.date;
|
|
2478
2478
|
const monthLabel = new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(date);
|
|
2479
2479
|
const yearLabel = String(date.getFullYear());
|
|
2480
|
-
return (jsxRuntime.jsxs("div", { ...divProps, children: [jsxRuntime.jsx("span", { className: styles$
|
|
2480
|
+
return (jsxRuntime.jsxs("div", { ...divProps, children: [jsxRuntime.jsx("span", { className: styles$r.caption_grid_label, children: monthLabel }), jsxRuntime.jsxs("button", { type: "button", className: styles$r.caption_grid_btn, "aria-pressed": view === "years", onClick: onYearLabelClick, children: [yearLabel, view !== "days" ? (jsxRuntime.jsx("span", { className: styles$r.chevron_wrapper, children: jsxRuntime.jsx(reactIcons.ChevronUp16Regular, { className: styles$r.caption_year_chevron, "aria-hidden": true }) })) : (jsxRuntime.jsx("span", { className: styles$r.chevron_wrapper, children: jsxRuntime.jsx(reactIcons.ChevronDown16Regular, { className: styles$r.caption_year_chevron, "aria-hidden": true }) }))] })] }));
|
|
2481
2481
|
};
|
|
2482
2482
|
const YEARS_PER_PAGE = 20;
|
|
2483
2483
|
const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, onDaySelect, onDateChange, onClear: _onClear, minDate, maxDate, disabled, format: _format, locale = "pt-br", autoFocus, className, style, scale = 1, id, "aria-label": ariaLabel, ...rest }) => {
|
|
@@ -2545,7 +2545,7 @@ const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, o
|
|
|
2545
2545
|
onYearLabelClick: handleYearLabelClick,
|
|
2546
2546
|
};
|
|
2547
2547
|
const sharedDayPickerProps = {
|
|
2548
|
-
classNames: styles$
|
|
2548
|
+
classNames: styles$r,
|
|
2549
2549
|
animate,
|
|
2550
2550
|
mode: "single",
|
|
2551
2551
|
selected: resolvedSelected,
|
|
@@ -2558,10 +2558,10 @@ const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, o
|
|
|
2558
2558
|
"aria-label": ariaLabel,
|
|
2559
2559
|
};
|
|
2560
2560
|
const containerStyle = { '--giro-scale': scale };
|
|
2561
|
-
return (jsxRuntime.jsx(GridCtx.Provider, { value: gridCtxValue, children: jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
2561
|
+
return (jsxRuntime.jsx(GridCtx.Provider, { value: gridCtxValue, children: jsxRuntime.jsxs("div", { className: clsx(styles$r.calendar_grid_wrapper, className), style: { ...containerStyle, ...style }, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { id: id, ...sharedDayPickerProps, ...rest, captionLayout: "label", month: resolvedDisplayMonth, onMonthChange: handleMonthChange, components: { MonthCaption: GridMonthCaption, Chevron: CustomChevron } }), gridView !== "days" && (jsxRuntime.jsxs("div", { className: `${styles$r.gridOverlay}${gridView === "years" ? ` ${styles$r.gridOverlayYears}` : ""}`, role: "dialog", "aria-modal": "true", "aria-label": gridView === "months" ? "Selecione o mês" : "Selecione o ano", children: [gridView === "months" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles$r.gridOverlayCaption, children: [jsxRuntime.jsx("span", { className: styles$r.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxRuntime.jsxs("button", { type: "button", className: styles$r.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de m\u00EAs", children: [displayedYear, jsxRuntime.jsx("span", { className: styles$r.chevron_wrapper, children: jsxRuntime.jsx(reactIcons.ChevronUp16Regular, { className: styles$r.caption_year_chevron, "aria-hidden": true }) })] })] }), jsxRuntime.jsx("div", { className: styles$r.gridCells, children: monthsGrid.map(({ index, label, disabled: monthDisabled }) => (jsxRuntime.jsx("button", { type: "button", disabled: monthDisabled, className: `${styles$r.gridCell}${displayedMonthIndex === index ? ` ${styles$r.gridCellActive}` : ""}`, onClick: () => handleGridMonthSelect(index), children: label }, index))) })] })), gridView === "years" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles$r.gridOverlayCaption, children: [jsxRuntime.jsx("span", { className: styles$r.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxRuntime.jsxs("button", { type: "button", className: styles$r.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de ano", children: [displayedYear, jsxRuntime.jsx("span", { className: styles$r.chevron_wrapper, children: jsxRuntime.jsx(reactIcons.ChevronUp16Regular, { className: styles$r.caption_year_chevron, "aria-hidden": true }) })] }), jsxRuntime.jsxs("div", { className: styles$r.gridOverlayYearsNav, children: [jsxRuntime.jsx("button", { type: "button", className: styles$r.gridNavBtn, disabled: !canGoPrevYears, onClick: () => setYearPageStart((s) => s - YEARS_PER_PAGE), "aria-label": "Anos anteriores", children: jsxRuntime.jsx("span", { className: styles$r.chevron_wrapper, children: jsxRuntime.jsx(reactIcons.ChevronLeft16Regular, { className: styles$r.chevronNavBtnPrev, "aria-hidden": true }) }) }), jsxRuntime.jsx("button", { type: "button", className: styles$r.gridNavBtn, disabled: !canGoNextYears, onClick: () => setYearPageStart((s) => s + YEARS_PER_PAGE), "aria-label": "Pr\u00F3ximos anos", children: jsxRuntime.jsx("span", { className: styles$r.chevron_wrapper, children: jsxRuntime.jsx(reactIcons.ChevronRight16Regular, { className: styles$r.chevronNavBtnNext, "aria-hidden": true }) }) })] })] }), jsxRuntime.jsx("div", { className: `${styles$r.gridCells} ${styles$r.gridCellsYears}`, children: yearsInPage.map((year) => (jsxRuntime.jsx("button", { type: "button", className: `${styles$r.gridCell}${displayedYear === year ? ` ${styles$r.gridCellActive}` : ""}`, onClick: () => handleGridYearSelect(year), children: year }, year))) })] }))] }))] }) }));
|
|
2562
2562
|
};
|
|
2563
2563
|
|
|
2564
|
-
var styles$
|
|
2564
|
+
var styles$q = {"container":"Callout-module__container___dggFW","withTitle":"Callout-module__withTitle___e-HEg","brand":"Callout-module__brand___YHDPQ","success":"Callout-module__success___RPS0Q","alert":"Callout-module__alert___LVlJM","content":"Callout-module__content___g44Qz","icon":"Callout-module__icon___4CBkz","subcontent":"Callout-module__subcontent___5hz-f","title":"Callout-module__title___IPSdE","text":"Callout-module__text___0Ys48","dismiss":"Callout-module__dismiss___ZaycS"};
|
|
2565
2565
|
|
|
2566
2566
|
const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, backgroundColor, textColor, className, id, style, ...rest }) => {
|
|
2567
2567
|
if (process.env.NODE_ENV !== 'production' && (text === '' || (typeof text === 'string' && !text.trim()))) {
|
|
@@ -2571,19 +2571,19 @@ const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, b
|
|
|
2571
2571
|
const titleId = `callout-title-${id || generatedId}`;
|
|
2572
2572
|
const componentId = id || generatedId;
|
|
2573
2573
|
const isAlert = variant === 'alert';
|
|
2574
|
-
const containerClass = clsx(styles$
|
|
2574
|
+
const containerClass = clsx(styles$q.container, styles$q[variant], { [styles$q.withTitle]: title }, className);
|
|
2575
2575
|
const customStyle = {
|
|
2576
2576
|
...style,
|
|
2577
2577
|
...(backgroundColor && { '--callout-bg': `var(--${backgroundColor})` }),
|
|
2578
2578
|
...(textColor && { '--callout-text': `var(--${textColor})` }),
|
|
2579
2579
|
};
|
|
2580
|
-
return (jsxRuntime.jsx("div", { id: componentId, className: containerClass, role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite', "aria-labelledby": title ? titleId : undefined, style: customStyle, ...rest, children: jsxRuntime.jsxs("div", { className: styles$
|
|
2580
|
+
return (jsxRuntime.jsx("div", { id: componentId, className: containerClass, role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite', "aria-labelledby": title ? titleId : undefined, style: customStyle, ...rest, children: jsxRuntime.jsxs("div", { className: styles$q.content, children: [icon && jsxRuntime.jsx("span", { className: styles$q.icon, "aria-hidden": "true", children: icon }), jsxRuntime.jsxs("div", { className: styles$q.subcontent, children: [title && (jsxRuntime.jsx("span", { id: titleId, className: styles$q.title, children: title })), text && jsxRuntime.jsx("span", { className: styles$q.text, children: text })] }), dismiss && (jsxRuntime.jsx("button", { className: styles$q.dismiss, onClick: onDismiss, type: "button", "aria-label": "Fechar", children: jsxRuntime.jsx(reactIcons.Dismiss24Regular, { "aria-hidden": "true" }) }))] }) }));
|
|
2581
2581
|
};
|
|
2582
2582
|
|
|
2583
|
-
var styles$
|
|
2583
|
+
var styles$p = {"card":"Card-module__card___LzN-3","card--hoverable":"Card-module__card--hoverable___orpJZ"};
|
|
2584
2584
|
|
|
2585
2585
|
function Card({ children, className, hoverable }) {
|
|
2586
|
-
return (jsxRuntime.jsx("main", { className: clsx(styles$
|
|
2586
|
+
return (jsxRuntime.jsx("main", { className: clsx(styles$p['card'], hoverable && styles$p['card--hoverable'], className), children: children }));
|
|
2587
2587
|
}
|
|
2588
2588
|
|
|
2589
2589
|
const CheckSmall = ({ className = '', width = 12, height = 10, fill = 'white', ...restProps }) => {
|
|
@@ -2594,22 +2594,22 @@ const CheckHalf = ({ className = '', width = 16, height = 16, fill = 'white', ..
|
|
|
2594
2594
|
return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": "true", ...restProps, children: jsxRuntime.jsx("g", { id: "Icons/check_indeterminate_small", children: jsxRuntime.jsx("path", { id: "icon", d: "M3 9V7H13V9H3Z", fill: fill }) }) }));
|
|
2595
2595
|
};
|
|
2596
2596
|
|
|
2597
|
-
var styles$
|
|
2597
|
+
var styles$o = {"container":"Checkbox-module__container___pUY-s","root":"Checkbox-module__root___BS5dT","disabled":"Checkbox-module__disabled___WagIC","label":"Checkbox-module__label___JBaRm","indicator":"Checkbox-module__indicator___HXLHH","wrapperCheckbox":"Checkbox-module__wrapperCheckbox___m2qIW"};
|
|
2598
2598
|
|
|
2599
2599
|
const Checkbox = ({ id, label, onCheckedChange, checked, disabled, className, style, scale = 1, indeterminate = false, ...rest }) => {
|
|
2600
2600
|
const componentId = id || React__namespace.useId();
|
|
2601
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
2602
|
-
[styles$
|
|
2603
|
-
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsxRuntime.jsx(radixUi.Checkbox.Root, { className: styles$
|
|
2601
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$o.container, className), style: { '--giro-scale': scale, ...style }, children: [jsxRuntime.jsx("div", { className: clsx(styles$o.wrapperCheckbox, {
|
|
2602
|
+
[styles$o.disabled]: disabled,
|
|
2603
|
+
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsxRuntime.jsx(radixUi.Checkbox.Root, { className: styles$o.root, checked: indeterminate ? 'indeterminate' : checked, id: componentId, onCheckedChange: onCheckedChange, disabled: disabled, "data-disabled": disabled, "data-indeterminate": indeterminate, "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false', ...rest, children: jsxRuntime.jsx(radixUi.Checkbox.Indicator, { className: styles$o.indicator, children: indeterminate ? jsxRuntime.jsx(CheckHalf, {}) : jsxRuntime.jsx(CheckSmall, {}) }) }) }), jsxRuntime.jsx("label", { className: clsx(styles$o.label, { [styles$o.disabled]: disabled }), htmlFor: componentId, children: label })] }));
|
|
2604
2604
|
};
|
|
2605
2605
|
|
|
2606
|
-
var styles$
|
|
2606
|
+
var styles$n = {"chips":"Chips-module__chips___SOvBe","title":"Chips-module__title___ZhuQi","iconLeft":"Chips-module__iconLeft___tPhnw","iconRight":"Chips-module__iconRight___-HxL2","hasLeftIcon":"Chips-module__hasLeftIcon___D3quS","hasRightIcon":"Chips-module__hasRightIcon___ZMx2Y","brand":"Chips-module__brand___q1Gsm","success":"Chips-module__success___UhxQa","alert":"Chips-module__alert___nvPnr","disabled":"Chips-module__disabled___ElWLI"};
|
|
2607
2607
|
|
|
2608
2608
|
const Chips = ({ children, leftIcon, rightIcon, variant = 'neutral', disabled = false, backgroundColor, textColor, scale = 1, className, style, ...rest }) => {
|
|
2609
|
-
const chipsClass = clsx(styles$
|
|
2610
|
-
[styles$
|
|
2611
|
-
[styles$
|
|
2612
|
-
[styles$
|
|
2609
|
+
const chipsClass = clsx(styles$n.chips, styles$n[variant], {
|
|
2610
|
+
[styles$n.disabled]: disabled,
|
|
2611
|
+
[styles$n.hasLeftIcon]: leftIcon,
|
|
2612
|
+
[styles$n.hasRightIcon]: rightIcon,
|
|
2613
2613
|
}, className);
|
|
2614
2614
|
const colorStyle = {
|
|
2615
2615
|
'--giro-scale': scale,
|
|
@@ -2618,21 +2618,21 @@ const Chips = ({ children, leftIcon, rightIcon, variant = 'neutral', disabled =
|
|
|
2618
2618
|
...style,
|
|
2619
2619
|
};
|
|
2620
2620
|
const isInteractive = typeof rest.onClick === 'function';
|
|
2621
|
-
return (jsxRuntime.jsxs("div", { className: chipsClass, "aria-disabled": disabled, style: colorStyle, role: isInteractive ? 'button' : undefined, tabIndex: isInteractive ? (disabled ? -1 : 0) : undefined, ...rest, children: [leftIcon && (jsxRuntime.jsx("span", { className: styles$
|
|
2621
|
+
return (jsxRuntime.jsxs("div", { className: chipsClass, "aria-disabled": disabled, style: colorStyle, role: isInteractive ? 'button' : undefined, tabIndex: isInteractive ? (disabled ? -1 : 0) : undefined, ...rest, children: [leftIcon && (jsxRuntime.jsx("span", { className: styles$n.iconLeft, "aria-hidden": "true", children: leftIcon })), jsxRuntime.jsx("span", { className: styles$n.title, children: children }), rightIcon && (jsxRuntime.jsx("span", { className: styles$n.iconRight, children: rightIcon }))] }));
|
|
2622
2622
|
};
|
|
2623
2623
|
const MemoizedChips = React.memo(Chips);
|
|
2624
2624
|
MemoizedChips.displayName = 'Chips';
|
|
2625
2625
|
|
|
2626
|
-
var styles$
|
|
2626
|
+
var styles$m = {"container":"Container-module__container___exPuE"};
|
|
2627
2627
|
|
|
2628
2628
|
function Container({ children, className }) {
|
|
2629
|
-
return (jsxRuntime.jsx("main", { className: clsx(styles$
|
|
2629
|
+
return (jsxRuntime.jsx("main", { className: clsx(styles$m['container'], 'mx-auto', className), children: children }));
|
|
2630
2630
|
}
|
|
2631
2631
|
|
|
2632
|
-
var styles$
|
|
2632
|
+
var styles$l = {"Content":"Popover-module__Content___RIETg"};
|
|
2633
2633
|
|
|
2634
2634
|
const Popover = ({ trigger, content, side = "left", align = "start", sideOffset = 8, open, onOpenChange, asAnchor = false, onOpenAutoFocus, onCloseAutoFocus, showArrow = false, className, ...rest }) => {
|
|
2635
|
-
return (jsxRuntime.jsxs(radixUi.Popover.Root, { open: open, onOpenChange: onOpenChange, ...rest, children: [asAnchor ? (jsxRuntime.jsx(radixUi.Popover.Anchor, { asChild: true, children: trigger })) : (jsxRuntime.jsx(radixUi.Popover.Trigger, { asChild: true, children: trigger })), jsxRuntime.jsx(radixUi.Popover.Portal, { children: jsxRuntime.jsxs(radixUi.Popover.Content, { className: clsx(styles$
|
|
2635
|
+
return (jsxRuntime.jsxs(radixUi.Popover.Root, { open: open, onOpenChange: onOpenChange, ...rest, children: [asAnchor ? (jsxRuntime.jsx(radixUi.Popover.Anchor, { asChild: true, children: trigger })) : (jsxRuntime.jsx(radixUi.Popover.Trigger, { asChild: true, children: trigger })), jsxRuntime.jsx(radixUi.Popover.Portal, { children: jsxRuntime.jsxs(radixUi.Popover.Content, { className: clsx(styles$l.Content, className), sideOffset: sideOffset, side: side, align: align, onOpenAutoFocus: asAnchor ? (e) => e.preventDefault() : onOpenAutoFocus, onCloseAutoFocus: asAnchor ? (e) => e.preventDefault() : onCloseAutoFocus, onInteractOutside: asAnchor ? (e) => e.preventDefault() : undefined, children: [content, showArrow && jsxRuntime.jsx(radixUi.Popover.Arrow, {})] }) })] }));
|
|
2636
2636
|
};
|
|
2637
2637
|
|
|
2638
2638
|
function useInputKeyboardValue(externalRef) {
|
|
@@ -2682,10 +2682,15 @@ const LAYOUT_DISPLAY = {
|
|
|
2682
2682
|
|
|
2683
2683
|
const EMOTICON_KEY = '{emoticon}';
|
|
2684
2684
|
const DOWN_KEYBOARD_KEY = '{downkeyboard}';
|
|
2685
|
+
const ENTER_KEY = '{enter}';
|
|
2685
2686
|
const removeKeyFromLayout = (layout, key) => Object.fromEntries(Object.entries(layout).map(([layoutName, rows]) => [
|
|
2686
2687
|
layoutName,
|
|
2687
2688
|
rows.map((row) => row.split(key).join(' ').replace(/\s+/g, ' ').trim()),
|
|
2688
2689
|
]));
|
|
2690
|
+
const replaceKeyWithBlank = (layout, key) => Object.fromEntries(Object.entries(layout).map(([layoutName, rows]) => [
|
|
2691
|
+
layoutName,
|
|
2692
|
+
rows.map((row) => row.split(key).join('{//}')),
|
|
2693
|
+
]));
|
|
2689
2694
|
const QWERTY_LOWERCASE = [
|
|
2690
2695
|
'1 2 3 4 5 6 7 8 9 0',
|
|
2691
2696
|
'q w e r t y u i o p',
|
|
@@ -2743,7 +2748,7 @@ const NATIVE_LAYOUTS = {
|
|
|
2743
2748
|
const NATIVE_LAYOUT_KEYS = new Set([
|
|
2744
2749
|
'default', 'numeric',
|
|
2745
2750
|
]);
|
|
2746
|
-
const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFixed = false) => {
|
|
2751
|
+
const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFixed = false, showEnterKey = true, showTypeSwitchKey = true) => {
|
|
2747
2752
|
const layout = NATIVE_LAYOUTS[type] ?? NATIVE_LAYOUTS.default ?? null;
|
|
2748
2753
|
if (!layout)
|
|
2749
2754
|
return null;
|
|
@@ -2754,6 +2759,13 @@ const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFi
|
|
|
2754
2759
|
if (!showDownKeyboardButton) {
|
|
2755
2760
|
computedLayout = removeKeyFromLayout(computedLayout, DOWN_KEYBOARD_KEY);
|
|
2756
2761
|
}
|
|
2762
|
+
if (!showEnterKey) {
|
|
2763
|
+
computedLayout = removeKeyFromLayout(computedLayout, ENTER_KEY);
|
|
2764
|
+
}
|
|
2765
|
+
if (!showTypeSwitchKey) {
|
|
2766
|
+
computedLayout = removeKeyFromLayout(computedLayout, '{numbers}');
|
|
2767
|
+
computedLayout = replaceKeyWithBlank(computedLayout, '{abc}');
|
|
2768
|
+
}
|
|
2757
2769
|
if (isFixed) {
|
|
2758
2770
|
computedLayout = Object.fromEntries(Object.entries(computedLayout).map(([layoutName, rows]) => [
|
|
2759
2771
|
layoutName,
|
|
@@ -2779,7 +2791,7 @@ const SHIFT_TOGGLES = {
|
|
|
2779
2791
|
alt2: 'alt',
|
|
2780
2792
|
};
|
|
2781
2793
|
|
|
2782
|
-
var styles$
|
|
2794
|
+
var styles$k = {"container":"VirtualKeyboard-module__container___A-e0I","layout--numeric":"VirtualKeyboard-module__layout--numeric___zfd7G","mode--fixed":"VirtualKeyboard-module__mode--fixed___1eFY1","layout--default":"VirtualKeyboard-module__layout--default___qyY1b","textFieldContainer":"VirtualKeyboard-module__textFieldContainer___XxGen","keyboardWrapper":"VirtualKeyboard-module__keyboardWrapper___jryTf","keyboardNumpadActive":"VirtualKeyboard-module__keyboardNumpadActive___jPpJD","overlay":"VirtualKeyboard-module__overlay___a5y7i","overlayOpen":"VirtualKeyboard-module__overlayOpen___hREu-","textFieldWrapper":"VirtualKeyboard-module__textFieldWrapper___bmi-z","keyPreview":"VirtualKeyboard-module__keyPreview___oWaO1","accentMenu":"VirtualKeyboard-module__accentMenu___A6tTy","accentMenuRow":"VirtualKeyboard-module__accentMenuRow___3kbvT","accentOption":"VirtualKeyboard-module__accentOption___ao-Ta"};
|
|
2783
2795
|
|
|
2784
2796
|
const LONG_PRESS_DELAY_MS = 400;
|
|
2785
2797
|
const ACCENT_OPTIONS = {
|
|
@@ -2819,12 +2831,12 @@ const ACCENT_OPTIONS = {
|
|
|
2819
2831
|
* <VirtualKeyboard targetRef={inputRef} value={value} onChange={setValue} />
|
|
2820
2832
|
* ```
|
|
2821
2833
|
*/
|
|
2822
|
-
const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onChange, onKeyPress, maxLength, Emoji = false, className, id, textFieldPlaceholder = 'Digite aqui...', helperText, error, errorMessage, targetRef, }) => {
|
|
2834
|
+
const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onChange, onKeyPress, onTypeChange, maxLength, Emoji = false, className, id, textFieldPlaceholder = 'Digite aqui...', helperText, error, errorMessage, targetRef, textFieldScale = 1, showEnterKey = true, showTypeSwitchKey = true, }) => {
|
|
2823
2835
|
const [layoutName, setLayoutName] = React.useState('default');
|
|
2824
2836
|
const [capsLockOn, setCapsLockOn] = React.useState(false);
|
|
2825
2837
|
const [accentMenu, setAccentMenu] = React.useState(null);
|
|
2826
2838
|
const [accentMenuOffsetX, setAccentMenuOffsetX] = React.useState(0);
|
|
2827
|
-
const [activeLayout, setActiveLayout] = React.useState(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed'));
|
|
2839
|
+
const [activeLayout, setActiveLayout] = React.useState(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey));
|
|
2828
2840
|
const visualType = NATIVE_LAYOUT_KEYS.has(type) ? type : 'default';
|
|
2829
2841
|
const [isOpen, setIsOpen] = React.useState(variant !== 'native');
|
|
2830
2842
|
const hideTimeoutRef = React.useRef(null);
|
|
@@ -2863,6 +2875,9 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2863
2875
|
React.useEffect(() => {
|
|
2864
2876
|
syncKeyboardInput(value);
|
|
2865
2877
|
}, [value, syncKeyboardInput]);
|
|
2878
|
+
React.useEffect(() => {
|
|
2879
|
+
onTypeChange?.(type);
|
|
2880
|
+
}, [type, onTypeChange]);
|
|
2866
2881
|
const scheduleHideIfBlurred = React.useCallback(() => {
|
|
2867
2882
|
if (variant !== 'native')
|
|
2868
2883
|
return;
|
|
@@ -2937,8 +2952,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2937
2952
|
React.useEffect(() => {
|
|
2938
2953
|
setLayoutName('default');
|
|
2939
2954
|
setCapsLockOn(false);
|
|
2940
|
-
setActiveLayout(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed'));
|
|
2941
|
-
}, [type, Emoji, variant]);
|
|
2955
|
+
setActiveLayout(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey));
|
|
2956
|
+
}, [type, Emoji, variant, showEnterKey, showTypeSwitchKey]);
|
|
2942
2957
|
React.useEffect(() => {
|
|
2943
2958
|
if (!Emoji && layoutName === 'emoticon') {
|
|
2944
2959
|
setLayoutName(type === 'numeric' ? 'abc' : 'default');
|
|
@@ -3180,10 +3195,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3180
3195
|
}
|
|
3181
3196
|
if (button === '{numbers}') {
|
|
3182
3197
|
setLayoutName('numbers');
|
|
3198
|
+
onTypeChange?.('numeric');
|
|
3183
3199
|
return;
|
|
3184
3200
|
}
|
|
3185
3201
|
if (button === '{abc}') {
|
|
3186
3202
|
setLayoutName(baseLayout);
|
|
3203
|
+
onTypeChange?.('default');
|
|
3187
3204
|
return;
|
|
3188
3205
|
}
|
|
3189
3206
|
if (button === '{alt}' || button === '{altright}') {
|
|
@@ -3238,6 +3255,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3238
3255
|
layoutName,
|
|
3239
3256
|
capsLockOn,
|
|
3240
3257
|
onKeyPress,
|
|
3258
|
+
onTypeChange,
|
|
3241
3259
|
Emoji,
|
|
3242
3260
|
variant,
|
|
3243
3261
|
closeAccentMenu,
|
|
@@ -3288,7 +3306,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3288
3306
|
'{bksp}': (baseDisplay['{bksp}'] ?? '').replace(/\s*Apagar$/, ''),
|
|
3289
3307
|
};
|
|
3290
3308
|
}, [visualType, variant]);
|
|
3291
|
-
const keyboardEl = activeLayout ? (jsxRuntime.jsxs("div", { ref: keyboardWrapperRef, className: styles$
|
|
3309
|
+
const keyboardEl = activeLayout ? (jsxRuntime.jsxs("div", { ref: keyboardWrapperRef, className: clsx(styles$k.keyboardWrapper, ((type === 'numeric' && layoutName === 'default') || layoutName === 'numbers' || type === 'default') && styles$k.keyboardNumpadActive), onPointerDownCapture: handleLongPressStart, onPointerUpCapture: handleLongPressEnd, onPointerLeave: handleLongPressEnd, onPointerCancelCapture: handleLongPressEnd, children: [jsxRuntime.jsx(Keyboard, { keyboardRef: (instance) => {
|
|
3292
3310
|
keyboardInstanceRef.current = instance;
|
|
3293
3311
|
if (instance) {
|
|
3294
3312
|
instance.setInput(valueRef.current);
|
|
@@ -3307,17 +3325,17 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3307
3325
|
}
|
|
3308
3326
|
return reactDom.createPortal(React.createElement(Icon), slot, `icon-${key}`);
|
|
3309
3327
|
});
|
|
3310
|
-
})(), keyPreview && typeof document !== 'undefined' && reactDom.createPortal(jsxRuntime.jsx("div", { ref: keyPreviewRef, className: styles$
|
|
3328
|
+
})(), keyPreview && typeof document !== 'undefined' && reactDom.createPortal(jsxRuntime.jsx("div", { ref: keyPreviewRef, className: styles$k.keyPreview, style: {
|
|
3311
3329
|
top: keyPreview.top,
|
|
3312
3330
|
left: keyPreview.left + keyPreviewOffsetX,
|
|
3313
3331
|
width: portalSizes.preview,
|
|
3314
3332
|
height: portalSizes.preview,
|
|
3315
3333
|
...(portalSizes.fontSize ? { fontSize: portalSizes.fontSize } : {}),
|
|
3316
3334
|
}, "aria-hidden": true, children: keyPreview.char }), document.body), accentMenu && (typeof document !== 'undefined' &&
|
|
3317
|
-
reactDom.createPortal(jsxRuntime.jsx("div", { ref: accentMenuRef, className: styles$
|
|
3335
|
+
reactDom.createPortal(jsxRuntime.jsx("div", { ref: accentMenuRef, className: styles$k.accentMenu, style: {
|
|
3318
3336
|
top: accentMenu.top,
|
|
3319
3337
|
left: accentMenu.left + accentMenuOffsetX,
|
|
3320
|
-
}, role: "listbox", "aria-label": `Opcoes de acento para ${accentMenu.sourceKey}`, children: Array.from({ length: Math.ceil(accentMenu.options.length / 5) }, (_, rowIndex) => accentMenu.options.slice(rowIndex * 5, rowIndex * 5 + 5)).map((rowOptions, rowIndex) => (jsxRuntime.jsx("div", { className: styles$
|
|
3338
|
+
}, role: "listbox", "aria-label": `Opcoes de acento para ${accentMenu.sourceKey}`, children: Array.from({ length: Math.ceil(accentMenu.options.length / 5) }, (_, rowIndex) => accentMenu.options.slice(rowIndex * 5, rowIndex * 5 + 5)).map((rowOptions, rowIndex) => (jsxRuntime.jsx("div", { className: styles$k.accentMenuRow, children: rowOptions.map((option) => (jsxRuntime.jsx("button", { type: "button", className: styles$k.accentOption, style: {
|
|
3321
3339
|
minWidth: portalSizes.option,
|
|
3322
3340
|
height: portalSizes.option,
|
|
3323
3341
|
...(portalSizes.fontSize ? { fontSize: portalSizes.fontSize } : {}),
|
|
@@ -3326,12 +3344,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3326
3344
|
event.stopPropagation();
|
|
3327
3345
|
}, onClick: () => handleAccentSelect(option), children: option }, `${accentMenu.sourceKey}-${option}`))) }, rowIndex))) }), document.body))] })) : null;
|
|
3328
3346
|
if (variant === 'native' && typeof document !== 'undefined') {
|
|
3329
|
-
return reactDom.createPortal(jsxRuntime.jsx("div", { id: id, className: clsx(styles$
|
|
3347
|
+
return reactDom.createPortal(jsxRuntime.jsx("div", { id: id, className: clsx(styles$k.overlay, { [styles$k.overlayOpen]: isOpen }, styles$k[`layout--${visualType}`], className), children: keyboardEl }), document.body);
|
|
3330
3348
|
}
|
|
3331
|
-
return (jsxRuntime.jsxs("div", { id: id, className: clsx(styles$
|
|
3349
|
+
return (jsxRuntime.jsxs("div", { id: id, className: clsx(styles$k.container, styles$k[`mode--${variant}`], styles$k[`layout--${visualType}`], className), children: [variant === 'fixed' && (jsxRuntime.jsx("div", { className: styles$k.textFieldContainer, children: jsxRuntime.jsx(TextField, { placeholder: textFieldPlaceholder, value: value, onChange: onChange, helperText: helperText, error: error, errorMessage: errorMessage, readOnly: true, disableAutoComplete: true, maxLength: maxLength, attachedToVirtualKeyboard: true, className: styles$k.textFieldWrapper, scale: textFieldScale }) })), keyboardEl] }));
|
|
3332
3350
|
};
|
|
3333
3351
|
|
|
3334
|
-
var styles$
|
|
3352
|
+
var styles$j = {"container":"TextField-module__container___WJHFR","inputWrapper":"TextField-module__inputWrapper___INjfd","inputContainer":"TextField-module__inputContainer___3EsFJ","icon":"TextField-module__icon___p1vwi","clearButton":"TextField-module__clearButton___kgOot","inputWithIcon":"TextField-module__inputWithIcon___shqkL","helperText":"TextField-module__helperText___d5QGC","error":"TextField-module__error___IGQzp","disabled":"TextField-module__disabled___roIKP","attachedToVirtualKeyboard":"TextField-module__attachedToVirtualKeyboard___fuO2O","errorWithMessage":"TextField-module__errorWithMessage___m-5AA","clearButtonIcon":"TextField-module__clearButtonIcon___Z2iyc"};
|
|
3335
3353
|
|
|
3336
3354
|
const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
3337
3355
|
if (required && value.trim() === '') {
|
|
@@ -3343,14 +3361,14 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
|
3343
3361
|
return '';
|
|
3344
3362
|
};
|
|
3345
3363
|
|
|
3346
|
-
var styles$
|
|
3364
|
+
var styles$i = {"labelContainer":"index-module__labelContainer___WGyDF","wrapperLabel":"index-module__wrapperLabel___XJzZO","requiredLabel":"index-module__requiredLabel___7oZkh","infoIcon":"index-module__infoIcon___lClx4","errorIcon":"index-module__errorIcon___yN-lq","disabledIcon":"index-module__disabledIcon___89Os7","errorLabel":"index-module__errorLabel___qa6h6","disabledLabel":"index-module__disabledLabel___U9vL8","disabledContainer":"index-module__disabledContainer___MtOvy"};
|
|
3347
3365
|
|
|
3348
3366
|
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false, scale = 1, }) => {
|
|
3349
3367
|
const containerStyle = {
|
|
3350
3368
|
'--giro-scale': scale,
|
|
3351
3369
|
};
|
|
3352
|
-
const container = (jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
3353
|
-
styles$
|
|
3370
|
+
const container = (jsxRuntime.jsxs("div", { className: clsx(styles$i.labelContainer, disabled && styles$i.disabledContainer), style: containerStyle, children: [jsxRuntime.jsxs(radixUi.Label.Root, { className: clsx(styles$i.wrapperLabel, error && !disabled && styles$i.errorLabel, disabled && styles$i.disabledLabel, className), htmlFor: htmlFor, children: [children, required && jsxRuntime.jsx("span", { className: styles$i.requiredLabel, children: "*" })] }), tooltip && (jsxRuntime.jsx("span", { className: disabled ? styles$i.disabledIcon : error ?
|
|
3371
|
+
styles$i.errorIcon : styles$i.infoIcon, children: jsxRuntime.jsx(reactIcons.Info12Regular, {}) }))] }));
|
|
3354
3372
|
if (tooltip) {
|
|
3355
3373
|
return (jsxRuntime.jsx(Tooltip, { side: side, align: align, text: tooltipText || '', children: container }));
|
|
3356
3374
|
}
|
|
@@ -3418,19 +3436,19 @@ const TextField$1 = React.forwardRef(({ className, style, value, label, placehol
|
|
|
3418
3436
|
? `${componentId}-helper`
|
|
3419
3437
|
: undefined;
|
|
3420
3438
|
const containerStyle = { '--giro-scale': scale };
|
|
3421
|
-
const containerClass = clsx(styles$
|
|
3422
|
-
[styles$
|
|
3423
|
-
[styles$
|
|
3424
|
-
[styles$
|
|
3425
|
-
[styles$
|
|
3439
|
+
const containerClass = clsx(styles$j.container, {
|
|
3440
|
+
[styles$j.attachedToVirtualKeyboard]: attachedToVirtualKeyboard,
|
|
3441
|
+
[styles$j.disabled]: disabled,
|
|
3442
|
+
[styles$j.error]: error,
|
|
3443
|
+
[styles$j.errorWithMessage]: !!errorMessage,
|
|
3426
3444
|
[className]: className,
|
|
3427
3445
|
});
|
|
3428
|
-
return (jsxRuntime.jsxs("div", { className: containerClass, style: { ...containerStyle, ...style }, children: [label && (jsxRuntime.jsx(LabelComponent, { scale: scale, htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: tooltipSide, align: tooltipAlign, error: hasError, disabled: disabled, children: label })), jsxRuntime.jsxs("div", { className: styles$
|
|
3429
|
-
[styles$
|
|
3430
|
-
}) }), showCustomIcon && jsxRuntime.jsx("span", { className: styles$
|
|
3446
|
+
return (jsxRuntime.jsxs("div", { className: containerClass, style: { ...containerStyle, ...style }, children: [label && (jsxRuntime.jsx(LabelComponent, { scale: scale, htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: tooltipSide, align: tooltipAlign, error: hasError, disabled: disabled, children: label })), jsxRuntime.jsxs("div", { className: styles$j.inputWrapper, children: [jsxRuntime.jsxs("div", { className: styles$j.inputContainer, children: [jsxRuntime.jsx("input", { ...rest, ref: setInputRefs, id: componentId, name: name, type: type, value: inputValue, placeholder: placeholder, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": hasError, "aria-required": required, "aria-describedby": helperId, inputMode: (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') ? 'none' : rest.inputMode, autoComplete: (disableAutoComplete || virtualKeyboard === 'default' || virtualKeyboard === 'numeric') ? 'off' : rest.autoComplete, className: clsx({
|
|
3447
|
+
[styles$j.inputWithIcon]: showCustomIcon || showClearIcon,
|
|
3448
|
+
}) }), showCustomIcon && jsxRuntime.jsx("span", { className: styles$j.icon, children: icon }), showClearIcon && (jsxRuntime.jsx("button", { type: "button", className: styles$j.clearButton, onMouseDown: (e) => {
|
|
3431
3449
|
e.preventDefault();
|
|
3432
3450
|
handleClear();
|
|
3433
|
-
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsxRuntime.jsx("span", { className: styles$
|
|
3451
|
+
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsxRuntime.jsx("span", { className: styles$j.clearButtonIcon, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}) }) }))] }), ((error && errorMessage) || inputError || helperText) && (jsxRuntime.jsx("span", { id: helperId, className: styles$j.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText }))] }), (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') && (jsxRuntime.jsx("div", { className: "virtualKeyboardWrapper", children: jsxRuntime.jsx(VirtualKeyboard, { variant: "native", type: virtualKeyboard, value: inputValue, maxLength: maxLength, targetRef: inputRef, onChange: (val) => {
|
|
3434
3452
|
if (!disabled && (!maxLength || val.length <= maxLength)) {
|
|
3435
3453
|
setInputValue(val);
|
|
3436
3454
|
onChange?.(val);
|
|
@@ -3440,7 +3458,7 @@ const TextField$1 = React.forwardRef(({ className, style, value, label, placehol
|
|
|
3440
3458
|
TextField$1.displayName = 'TextField';
|
|
3441
3459
|
var TextField = React.memo(TextField$1);
|
|
3442
3460
|
|
|
3443
|
-
var styles$
|
|
3461
|
+
var styles$h = {"datePicker":"DatePicker-module__datePicker___raJYg","textfieldContainer":"DatePicker-module__textfieldContainer___yy8pT","datePickerIcon":"DatePicker-module__datePickerIcon___XCZsn","datePickerIconDisabled":"DatePicker-module__datePickerIconDisabled___BB-Gx"};
|
|
3444
3462
|
|
|
3445
3463
|
function formatDate(date, locale = 'pt-br') {
|
|
3446
3464
|
if (!date || !(date instanceof Date)) {
|
|
@@ -3662,7 +3680,7 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
|
|
|
3662
3680
|
}
|
|
3663
3681
|
}
|
|
3664
3682
|
};
|
|
3665
|
-
return (jsxRuntime.jsx("div", { ref: wrapperRef, className: clsx(styles$
|
|
3683
|
+
return (jsxRuntime.jsx("div", { ref: wrapperRef, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsxRuntime.jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsxRuntime.jsx(TextField, { className: styles$h.textfieldContainer, type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
|
|
3666
3684
|
handleTextFieldChange(String(e));
|
|
3667
3685
|
}, onKeyDown: handleKeyDown, onFocus: handleFocus, persistIcon: true, autoComplete: "off", value: displayValue, helperText: !externalError ? (helperText || undefined) : undefined, errorMessage: externalError ? combinedHelperText : undefined, error: hasValidationError ? true : undefined, maxLength: 10, required: required, label: label, disabled: disabled, scale: scale, id: fieldId, "data-testid": testId, placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": calendarId, "aria-invalid": hasValidationError, "aria-describedby": externalError ? undefined : (helperText ? `${fieldId}-help` : undefined) }), content: jsxRuntime.jsx(Calendar, { selected: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy', minDate: minDate, maxDate: maxDate, scale: scale, id: calendarId, onClear: () => {
|
|
3668
3686
|
handleDateChange(null);
|
|
@@ -3671,11 +3689,11 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
|
|
|
3671
3689
|
};
|
|
3672
3690
|
var DatePicker_default = React.memo(DatePicker);
|
|
3673
3691
|
|
|
3674
|
-
var styles$
|
|
3692
|
+
var styles$g = {"DialogOverlay":"Dialog-module__DialogOverlay___LEX2O","DialogContent":"Dialog-module__DialogContent___ziVXb","DialogTitle":"Dialog-module__DialogTitle___ay1tD","DialogDescription":"Dialog-module__DialogDescription___odslw","DivButtons":"Dialog-module__DivButtons___BiwX-"};
|
|
3675
3693
|
|
|
3676
|
-
const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsxRuntime.jsx(radixUi.AlertDialog.Root, { open: show, ...rest, children: jsxRuntime.jsxs(radixUi.AlertDialog.Portal, { children: [jsxRuntime.jsx(radixUi.AlertDialog.Overlay, { className: styles$
|
|
3694
|
+
const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsxRuntime.jsx(radixUi.AlertDialog.Root, { open: show, ...rest, children: jsxRuntime.jsxs(radixUi.AlertDialog.Portal, { children: [jsxRuntime.jsx(radixUi.AlertDialog.Overlay, { className: styles$g.DialogOverlay }), jsxRuntime.jsxs(radixUi.AlertDialog.Content, { className: clsx(styles$g.DialogContent, className), children: [jsxRuntime.jsx(radixUi.AlertDialog.Title, { className: styles$g.DialogTitle, children: title }), jsxRuntime.jsx(radixUi.AlertDialog.Description, { className: styles$g.DialogDescription, children: bodyContent }), jsxRuntime.jsxs("div", { className: styles$g.DivButtons, children: [!!(textSecondaryAction && textSecondaryAction.trim()) && (jsxRuntime.jsx(radixUi.AlertDialog.Cancel, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "outlined", ...(onSecondaryAction && { onClick: onSecondaryAction }), children: textSecondaryAction }) })), jsxRuntime.jsx(radixUi.AlertDialog.Action, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "filled", ...(onPrimaryAction && { onClick: onPrimaryAction }), children: textPrimaryAction }) })] })] })] }) }));
|
|
3677
3695
|
|
|
3678
|
-
var styles$
|
|
3696
|
+
var styles$f = {"drawerShadow":"Drawer-module__drawerShadow___0Z6iL","drawerShadow--visible":"Drawer-module__drawerShadow--visible___FspoH","drawerSidebar":"Drawer-module__drawerSidebar___cdyyb","drawerSidebar--open":"Drawer-module__drawerSidebar--open___ee2-Y","drawerSidebar--disabled":"Drawer-module__drawerSidebar--disabled___MYrBI","drawerTitleClose":"Drawer-module__drawerTitleClose___QzqN-","drawerTitle":"Drawer-module__drawerTitle___naMX0","drawerChildren":"Drawer-module__drawerChildren___xGdg9","drawerHeaderContent":"Drawer-module__drawerHeaderContent___NLSwj"};
|
|
3679
3697
|
|
|
3680
3698
|
const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = false, onOverlayClick, closeOnOverlayClick = true, closeOnEscape = true, ...rest }) => {
|
|
3681
3699
|
const internalClose = React.useCallback(() => {
|
|
@@ -3724,15 +3742,185 @@ const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClos
|
|
|
3724
3742
|
event.stopPropagation();
|
|
3725
3743
|
internalClose();
|
|
3726
3744
|
};
|
|
3727
|
-
return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx(styles$
|
|
3728
|
-
[styles$
|
|
3729
|
-
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
3730
|
-
[styles$
|
|
3731
|
-
[styles$
|
|
3745
|
+
return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx(styles$f['drawerShadow'], {
|
|
3746
|
+
[styles$f['drawerShadow--visible']]: isOpen,
|
|
3747
|
+
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxRuntime.jsxs("div", { className: clsx(styles$f['drawerSidebar'], {
|
|
3748
|
+
[styles$f['drawerSidebar--open']]: isOpen,
|
|
3749
|
+
[styles$f['drawerSidebar--disabled']]: disabled,
|
|
3732
3750
|
}, className), style: {
|
|
3733
3751
|
'--drawer-custom-width': customWidth,
|
|
3734
|
-
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, ...rest, children: [jsxRuntime.jsxs("div", { className: styles$
|
|
3752
|
+
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, ...rest, children: [jsxRuntime.jsxs("div", { className: styles$f.drawerTitleClose, children: [jsxRuntime.jsx("div", { className: styles$f.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsxRuntime.jsx("div", { className: styles$f.drawerHeaderContent, children: headerContent })), jsxRuntime.jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsxRuntime.jsx("div", { className: styles$f.drawerChildren, "data-testid": "drawer-content", children: children }), footer] })] }), document.body);
|
|
3753
|
+
};
|
|
3754
|
+
|
|
3755
|
+
var styles$e = {"container":"FileUpload-module__container___hFeKV","dropZone":"FileUpload-module__dropZone___716hF","disabled":"FileUpload-module__disabled___mwePo","alert":"FileUpload-module__alert___Dnzqc","dragging":"FileUpload-module__dragging___XZghy","emptyState":"FileUpload-module__emptyState___6Ll9D","uploadIcon":"FileUpload-module__uploadIcon___MkBLe","uploadText":"FileUpload-module__uploadText___VWc9g","alertIcon":"FileUpload-module__alertIcon___pTaMS","alertText":"FileUpload-module__alertText___sfV4z","fileList":"FileUpload-module__fileList___K6KQD","thumb":"FileUpload-module__thumb___eg59D","removeButton":"FileUpload-module__removeButton___jUFNv","thumbClip":"FileUpload-module__thumbClip___sP9wp","thumbImage":"FileUpload-module__thumbImage___Swxhd","thumbFile":"FileUpload-module__thumbFile___y7lg5","thumbFileName":"FileUpload-module__thumbFileName___LPSCX","helperText":"FileUpload-module__helperText___DzPqP","errorText":"FileUpload-module__errorText___cHd1Z"};
|
|
3756
|
+
|
|
3757
|
+
const truncateFileName = (fileName, maxChars = 18) => {
|
|
3758
|
+
if (fileName.length <= maxChars)
|
|
3759
|
+
return fileName;
|
|
3760
|
+
const lastDot = fileName.lastIndexOf('.');
|
|
3761
|
+
const hasExtension = lastDot > 0 && lastDot < fileName.length - 1;
|
|
3762
|
+
const baseName = hasExtension ? fileName.substring(0, lastDot) : fileName;
|
|
3763
|
+
const extension = hasExtension ? fileName.substring(lastDot) : '';
|
|
3764
|
+
const reserved = 3 + extension.length; // "..."
|
|
3765
|
+
const available = maxChars - reserved;
|
|
3766
|
+
if (available <= 1) {
|
|
3767
|
+
return fileName.substring(0, maxChars - 3) + '...';
|
|
3768
|
+
}
|
|
3769
|
+
return baseName.substring(0, available) + '...' + extension;
|
|
3770
|
+
};
|
|
3771
|
+
const matchesAccept = (file, accept) => {
|
|
3772
|
+
if (!accept)
|
|
3773
|
+
return true;
|
|
3774
|
+
const types = accept.split(',').map((t) => t.trim().toLowerCase());
|
|
3775
|
+
const fileName = file.name.toLowerCase();
|
|
3776
|
+
const fileType = file.type.toLowerCase();
|
|
3777
|
+
return types.some((type) => {
|
|
3778
|
+
if (type.startsWith('.')) {
|
|
3779
|
+
return fileName.endsWith(type);
|
|
3780
|
+
}
|
|
3781
|
+
if (type.endsWith('/*')) {
|
|
3782
|
+
return fileType.startsWith(type.slice(0, -1));
|
|
3783
|
+
}
|
|
3784
|
+
return fileType === type;
|
|
3785
|
+
});
|
|
3735
3786
|
};
|
|
3787
|
+
const FileUpload = React.forwardRef(({ value, onChange, helperText, error = false, errorMessage, maxFileSize, maxFilesQuantity, disabled = false, className, id, accept, multiple = true, description = 'Clique ou arraste os arquivos aqui', descriptionErrorMessage = 'Falha ao subir um ou mais arquivos.', ...rest }, ref) => {
|
|
3788
|
+
const generatedId = React.useId();
|
|
3789
|
+
const componentId = id || generatedId;
|
|
3790
|
+
const helperId = `${componentId}-helper`;
|
|
3791
|
+
const listId = `${componentId}-list`;
|
|
3792
|
+
const inputRef = React.useRef(null);
|
|
3793
|
+
const [internalFiles, setInternalFiles] = React.useState([]);
|
|
3794
|
+
const [isDragging, setIsDragging] = React.useState(false);
|
|
3795
|
+
const [objectUrls, setObjectUrls] = React.useState(new Map());
|
|
3796
|
+
const [internalError, setInternalError] = React.useState(null);
|
|
3797
|
+
const isControlled = value !== undefined;
|
|
3798
|
+
const files = isControlled ? value : internalFiles;
|
|
3799
|
+
React.useEffect(() => {
|
|
3800
|
+
return () => {
|
|
3801
|
+
objectUrls.forEach((url) => URL.revokeObjectURL(url));
|
|
3802
|
+
};
|
|
3803
|
+
}, [objectUrls]);
|
|
3804
|
+
const getObjectUrl = React.useCallback((file) => {
|
|
3805
|
+
const key = `${file.name}-${file.size}`;
|
|
3806
|
+
const existing = objectUrls.get(key);
|
|
3807
|
+
if (existing)
|
|
3808
|
+
return existing;
|
|
3809
|
+
const url = URL.createObjectURL(file);
|
|
3810
|
+
setObjectUrls((prev) => new Map(prev).set(key, url));
|
|
3811
|
+
return url;
|
|
3812
|
+
}, [objectUrls]);
|
|
3813
|
+
const revokeUrl = React.useCallback((file) => {
|
|
3814
|
+
const key = `${file.name}-${file.size}`;
|
|
3815
|
+
setObjectUrls((prev) => {
|
|
3816
|
+
const next = new Map(prev);
|
|
3817
|
+
const url = next.get(key);
|
|
3818
|
+
if (url)
|
|
3819
|
+
URL.revokeObjectURL(url);
|
|
3820
|
+
next.delete(key);
|
|
3821
|
+
return next;
|
|
3822
|
+
});
|
|
3823
|
+
}, []);
|
|
3824
|
+
const processFiles = React.useCallback((incoming) => {
|
|
3825
|
+
if (disabled)
|
|
3826
|
+
return;
|
|
3827
|
+
const all = Array.from(incoming);
|
|
3828
|
+
const validFiles = all.filter((file) => {
|
|
3829
|
+
if (maxFileSize && file.size > maxFileSize)
|
|
3830
|
+
return false;
|
|
3831
|
+
if (!matchesAccept(file, accept))
|
|
3832
|
+
return false;
|
|
3833
|
+
return true;
|
|
3834
|
+
});
|
|
3835
|
+
const merged = multiple
|
|
3836
|
+
? [...files, ...validFiles]
|
|
3837
|
+
: validFiles.slice(0, 1);
|
|
3838
|
+
const limited = maxFilesQuantity && multiple ? merged.slice(0, maxFilesQuantity) : merged;
|
|
3839
|
+
// Prioridade de erro: tipo > tamanho > quantidade
|
|
3840
|
+
const hasTypeError = all.some((file) => !matchesAccept(file, accept));
|
|
3841
|
+
const hasSizeError = all.some((file) => maxFileSize && file.size > maxFileSize);
|
|
3842
|
+
const hasQuantityError = maxFilesQuantity && multiple && merged.length > maxFilesQuantity;
|
|
3843
|
+
if (hasTypeError && hasSizeError) {
|
|
3844
|
+
setInternalError('Um ou mais arquivos possuem tipo ou tamanho inválido.');
|
|
3845
|
+
}
|
|
3846
|
+
else if (hasTypeError) {
|
|
3847
|
+
setInternalError('Um ou mais arquivos não são do tipo aceito.');
|
|
3848
|
+
}
|
|
3849
|
+
else if (hasSizeError) {
|
|
3850
|
+
setInternalError('Um ou mais arquivos excedem o tamanho máximo permitido.');
|
|
3851
|
+
}
|
|
3852
|
+
else if (hasQuantityError) {
|
|
3853
|
+
setInternalError(`Não é possível adicionar mais de ${maxFilesQuantity} arquivo(s).`);
|
|
3854
|
+
}
|
|
3855
|
+
else {
|
|
3856
|
+
setInternalError(null);
|
|
3857
|
+
}
|
|
3858
|
+
if (!isControlled)
|
|
3859
|
+
setInternalFiles(limited);
|
|
3860
|
+
onChange?.(limited);
|
|
3861
|
+
}, [disabled, files, isControlled, maxFilesQuantity, maxFileSize, multiple, onChange, accept]);
|
|
3862
|
+
const handleInputChange = React.useCallback((e) => {
|
|
3863
|
+
if (e.target.files) {
|
|
3864
|
+
processFiles(e.target.files);
|
|
3865
|
+
e.target.value = '';
|
|
3866
|
+
}
|
|
3867
|
+
}, [processFiles]);
|
|
3868
|
+
const handleClick = React.useCallback(() => {
|
|
3869
|
+
if (!disabled)
|
|
3870
|
+
inputRef.current?.click();
|
|
3871
|
+
}, [disabled]);
|
|
3872
|
+
const handleKeyDown = React.useCallback((e) => {
|
|
3873
|
+
if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
|
|
3874
|
+
e.preventDefault();
|
|
3875
|
+
inputRef.current?.click();
|
|
3876
|
+
}
|
|
3877
|
+
}, [disabled]);
|
|
3878
|
+
const handleDragOver = React.useCallback((e) => {
|
|
3879
|
+
e.preventDefault();
|
|
3880
|
+
if (!disabled)
|
|
3881
|
+
setIsDragging(true);
|
|
3882
|
+
}, [disabled]);
|
|
3883
|
+
const handleDragLeave = React.useCallback((e) => {
|
|
3884
|
+
e.preventDefault();
|
|
3885
|
+
setIsDragging(false);
|
|
3886
|
+
}, []);
|
|
3887
|
+
const handleDrop = React.useCallback((e) => {
|
|
3888
|
+
e.preventDefault();
|
|
3889
|
+
setIsDragging(false);
|
|
3890
|
+
if (!disabled && e.dataTransfer.files.length > 0) {
|
|
3891
|
+
processFiles(e.dataTransfer.files);
|
|
3892
|
+
}
|
|
3893
|
+
}, [disabled, processFiles]);
|
|
3894
|
+
const handleRemove = React.useCallback((e, index) => {
|
|
3895
|
+
e.stopPropagation();
|
|
3896
|
+
const removed = files[index];
|
|
3897
|
+
revokeUrl(removed);
|
|
3898
|
+
const updated = files.filter((_, i) => i !== index);
|
|
3899
|
+
if (!isControlled)
|
|
3900
|
+
setInternalFiles(updated);
|
|
3901
|
+
onChange?.(updated);
|
|
3902
|
+
}, [files, isControlled, onChange, revokeUrl]);
|
|
3903
|
+
const hasFiles = files.length > 0;
|
|
3904
|
+
const isError = error || !!errorMessage || !!internalError;
|
|
3905
|
+
const displayedHelper = isError ? errorMessage || internalError || helperText : helperText;
|
|
3906
|
+
const setRefs = React.useCallback((node) => {
|
|
3907
|
+
inputRef.current = node;
|
|
3908
|
+
if (typeof ref === 'function')
|
|
3909
|
+
ref(node);
|
|
3910
|
+
else if (ref)
|
|
3911
|
+
ref.current = node;
|
|
3912
|
+
}, [ref]);
|
|
3913
|
+
return (jsxRuntime.jsxs("div", { id: componentId, className: clsx(styles$e.container, className), children: [jsxRuntime.jsx("input", { ref: setRefs, type: "file", accept: accept, multiple: multiple, disabled: disabled, "aria-hidden": "true", tabIndex: -1, style: { display: 'none' }, onChange: handleInputChange, ...rest }), jsxRuntime.jsxs("div", { role: "button", tabIndex: disabled ? -1 : 0, "aria-label": description, "aria-disabled": disabled, "aria-describedby": displayedHelper ? helperId : undefined, "aria-controls": hasFiles ? listId : undefined, "data-invalid": isError || undefined, className: clsx(styles$e.dropZone, isDragging && styles$e.dragging, isError && styles$e.alert, disabled && styles$e.disabled), onClick: handleClick, onKeyDown: handleKeyDown, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [!hasFiles && !isError && (jsxRuntime.jsxs("div", { className: styles$e.emptyState, "aria-hidden": "true", children: [jsxRuntime.jsx("span", { className: styles$e.uploadIcon, children: jsxRuntime.jsx(reactIcons.DocumentAdd24Regular, {}) }), jsxRuntime.jsx("span", { className: styles$e.uploadText, children: description })] })), !hasFiles && isError && (jsxRuntime.jsxs("div", { className: styles$e.emptyState, "aria-hidden": "true", children: [jsxRuntime.jsx("span", { className: styles$e.alertIcon, children: jsxRuntime.jsx(reactIcons.Warning24Regular, {}) }), descriptionErrorMessage && (jsxRuntime.jsx("span", { className: styles$e.alertText, children: descriptionErrorMessage }))] })), hasFiles && (jsxRuntime.jsx("ul", { id: listId, className: styles$e.fileList, "aria-label": `${files.length} arquivo${files.length !== 1 ? 's' : ''} selecionado${files.length !== 1 ? 's' : ''}`, "aria-live": "polite", children: files.map((file, index) => {
|
|
3914
|
+
const isImage = file.type.startsWith('image/');
|
|
3915
|
+
return (jsxRuntime.jsxs("li", { className: styles$e.thumb, children: [jsxRuntime.jsx("div", { className: styles$e.thumbClip, children: isImage ? (jsxRuntime.jsx("img", { src: getObjectUrl(file), alt: file.name, title: file.name, className: styles$e.thumbImage })) : (jsxRuntime.jsxs("div", { className: styles$e.thumbFile, "aria-hidden": "true", title: file.name, children: [jsxRuntime.jsx(reactIcons.Document24Regular, {}), jsxRuntime.jsx("span", { className: styles$e.thumbFileName, children: truncateFileName(file.name) })] })) }), jsxRuntime.jsx("button", { type: "button", className: styles$e.removeButton, "aria-label": `Remover ${file.name}`, disabled: disabled, onClick: (e) => handleRemove(e, index), onKeyDown: (e) => {
|
|
3916
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
3917
|
+
e.preventDefault();
|
|
3918
|
+
handleRemove(e, index);
|
|
3919
|
+
}
|
|
3920
|
+
}, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, { "aria-hidden": "true" }) })] }, `${file.name}-${index}`));
|
|
3921
|
+
}) }))] }), displayedHelper && (jsxRuntime.jsx("span", { id: helperId, role: isError ? 'alert' : undefined, className: clsx(styles$e.helperText, isError && styles$e.errorText), children: displayedHelper }))] }));
|
|
3922
|
+
});
|
|
3923
|
+
FileUpload.displayName = 'FileUpload';
|
|
3736
3924
|
|
|
3737
3925
|
var styles$d = {"container":"Filter-module__container___cqntK","panel":"Filter-module__panel___19HqD","search":"Filter-module__search___f0gzj","list":"Filter-module__list___UpBk1","item":"Filter-module__item___oNdeY","itemSelected":"Filter-module__itemSelected___JIpJV","itemText":"Filter-module__itemText___RS--0","itemDisabled":"Filter-module__itemDisabled___X-ktg","itemIcon":"Filter-module__itemIcon___RjJSa","noResults":"Filter-module__noResults___3m6pn","footer":"Filter-module__footer___yYS5j","buttonContent":"Filter-module__buttonContent___28fKe","buttonArrow":"Filter-module__buttonArrow___VJlpc","buttonIcon":"Filter-module__buttonIcon___OOBpZ","triggerWrapper":"Filter-module__triggerWrapper___ptPRL","triggerContent":"Filter-module__triggerContent___LYo9j","body":"Filter-module__body___qsyhk","combinedFooter":"Filter-module__combinedFooter___kTnHP"};
|
|
3738
3926
|
|
|
@@ -4307,9 +4495,9 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4307
4495
|
}, ...rest, children: [search && (jsxRuntime.jsx("div", { className: styles$9.searchWrapper, children: jsxRuntime.jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), jsxRuntime.jsxs("div", { className: styles$9.itemsWrapper, ref: itemsWrapperRef, style: { maxHeight: maxHeightStyle }, children: [filteredItems.length > 0 ? (filteredItems.map((item, index) => renderMenuItem(item, item.value || item.text || `item-${index}`))) : (jsxRuntime.jsx("div", { className: styles$9.emptyState, children: "Nenhum item encontrado" })), enableInfiniteScroll && isLoadingMore && (jsxRuntime.jsx("div", { className: styles$9.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsxRuntime.jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
|
|
4308
4496
|
};
|
|
4309
4497
|
|
|
4310
|
-
var styles$8 = {"modalOverlay":"Modal-module__modalOverlay___rI8Wz","modalContent":"Modal-module__modalContent___6Cgb1","modalContent--fullscreen":"Modal-module__modalContent--fullscreen___QeBlG","modalHeader":"Modal-module__modalHeader___IuHIg","modalTitle":"Modal-module__modalTitle___9VDmr","modalBody":"Modal-module__modalBody___ohjQm"};
|
|
4498
|
+
var styles$8 = {"modalOverlay":"Modal-module__modalOverlay___rI8Wz","modalContent":"Modal-module__modalContent___6Cgb1","modalContent--fullscreen":"Modal-module__modalContent--fullscreen___QeBlG","modalHeader":"Modal-module__modalHeader___IuHIg","modalTitle":"Modal-module__modalTitle___9VDmr","modalBody":"Modal-module__modalBody___ohjQm","modalFooter":"Modal-module__modalFooter___TEqdK"};
|
|
4311
4499
|
|
|
4312
|
-
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, fullscreen = false, ...rest }) => {
|
|
4500
|
+
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, customHeight, fullscreen = false, ...rest }) => {
|
|
4313
4501
|
const contentRef = React__namespace.useRef(null);
|
|
4314
4502
|
const handleOpenChange = (open) => {
|
|
4315
4503
|
if (!open) {
|
|
@@ -4322,7 +4510,8 @@ const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeO
|
|
|
4322
4510
|
};
|
|
4323
4511
|
return (jsxRuntime.jsx(radixUi.Dialog.Root, { open: isOpen, onOpenChange: handleOpenChange, ...rest, children: jsxRuntime.jsxs(radixUi.Dialog.Portal, { children: [jsxRuntime.jsx(radixUi.Dialog.Overlay, { className: styles$8.modalOverlay }), jsxRuntime.jsxs(radixUi.Dialog.Content, { ref: contentRef, className: clsx(styles$8.modalContent, fullscreen && styles$8['modalContent--fullscreen'], className), id: id, style: {
|
|
4324
4512
|
'--modal-custom-width': customWidth,
|
|
4325
|
-
|
|
4513
|
+
'--modal-custom-height': customHeight,
|
|
4514
|
+
}, onInteractOutside: !closeOnOverlayClick ? (e) => e.preventDefault() : undefined, onOpenAutoFocus: handleOpenAutoFocus, "aria-labelledby": id ? `${id}-title` : 'modal-title', tabIndex: -1, children: [jsxRuntime.jsxs("header", { className: styles$8.modalHeader, children: [title && (jsxRuntime.jsx(radixUi.Dialog.Title, { className: styles$8.modalTitle, id: id ? `${id}-title` : 'modal-title', children: title })), headerContent && (jsxRuntime.jsx("div", { children: headerContent })), jsxRuntime.jsx(radixUi.Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "outlined", iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: "lg", tooltipText: 'Fechar' }) })] }), jsxRuntime.jsx("section", { className: styles$8.modalBody, children: children }), footer && (jsxRuntime.jsx("footer", { className: styles$8.modalFooter, children: footer }))] })] }) }));
|
|
4326
4515
|
};
|
|
4327
4516
|
|
|
4328
4517
|
var styles$7 = {"quantity":"Quantity-module__quantity___-vndR","quantityInput":"Quantity-module__quantityInput___xZG-v","disabled":"Quantity-module__disabled___X6p5l"};
|
|
@@ -5633,123 +5822,11 @@ const Switch = ({ disabled = false, defaultChecked = false, checked, onCheckedCh
|
|
|
5633
5822
|
return (jsxRuntime.jsx("div", { className: clsx(styles$1.container, className), style: { '--giro-scale': scale, ...style }, children: jsxRuntime.jsx(radixUi.Switch.Root, { className: styles$1.switchRoot, disabled: disabled, defaultChecked: defaultChecked, checked: checked, onCheckedChange: onCheckedChange, ...rest, children: jsxRuntime.jsx(radixUi.Switch.Thumb, { className: styles$1.switchThumb }) }) }));
|
|
5634
5823
|
};
|
|
5635
5824
|
|
|
5636
|
-
var styles = {"
|
|
5825
|
+
var styles = {"container":"VerificationCode-module__container___5Kxo6","inputGroup":"VerificationCode-module__inputGroup___ose3E","input":"VerificationCode-module__input___Vu-jM","inputError":"VerificationCode-module__inputError___gI-Bl","inputDisabled":"VerificationCode-module__inputDisabled___wUj2Y","errorMessage":"VerificationCode-module__errorMessage___NnYtO"};
|
|
5637
5826
|
|
|
5638
|
-
|
|
5639
|
-
* Mapa de regex para validação dos tipos de entrada
|
|
5640
|
-
*/
|
|
5641
|
-
const REGEX_MAP = {
|
|
5642
|
-
numeric: /^[0-9]$/,
|
|
5643
|
-
alpha: /^[a-zA-Z]$/,
|
|
5644
|
-
alphanumeric: /^[a-zA-Z0-9]$/,
|
|
5645
|
-
};
|
|
5646
|
-
/**
|
|
5647
|
-
* Componente VerificationCode para entrada de códigos de verificação
|
|
5648
|
-
*
|
|
5649
|
-
* @description Permite entrada de códigos com múltiplos dígitos,
|
|
5650
|
-
* suportando diferentes tipos de caracteres e navegação por teclado.
|
|
5651
|
-
*
|
|
5652
|
-
* @example
|
|
5653
|
-
* ```tsx
|
|
5654
|
-
* <VerificationCode
|
|
5655
|
-
* length={6}
|
|
5656
|
-
* inputType="numeric"
|
|
5657
|
-
* onComplete={(code) => console.log('Código:', code)}
|
|
5658
|
-
* hasError={false}
|
|
5659
|
-
* />
|
|
5660
|
-
* ```
|
|
5661
|
-
*/
|
|
5662
|
-
const VerificationCode = ({ length = 6, inputType = 'numeric', onComplete, hasError = false, errorMessage, disabled = false, className, ...rest }) => {
|
|
5827
|
+
const VerificationCode = ({ length = 6, validationType = 'numeric', value, defaultValue, onValueChange, autoSubmit = false, onAutoSubmit, name, form, hasError = false, errorMessage, disabled = false, readOnly = false, className, id, }) => {
|
|
5663
5828
|
const validLength = Math.min(Math.max(length, 1), 100);
|
|
5664
|
-
|
|
5665
|
-
const inputsRef = React.useRef([]);
|
|
5666
|
-
const currentRegex = REGEX_MAP[inputType] || REGEX_MAP.numeric;
|
|
5667
|
-
React.useEffect(() => {
|
|
5668
|
-
setValues(Array(validLength).fill(''));
|
|
5669
|
-
}, [inputType, validLength]);
|
|
5670
|
-
const handleChange = React.useCallback((index, value) => {
|
|
5671
|
-
if (!currentRegex.test(value))
|
|
5672
|
-
return;
|
|
5673
|
-
const newValues = [...values];
|
|
5674
|
-
newValues[index] = value;
|
|
5675
|
-
setValues(newValues);
|
|
5676
|
-
if (value && index < validLength - 1) {
|
|
5677
|
-
inputsRef.current[index + 1]?.focus();
|
|
5678
|
-
}
|
|
5679
|
-
if (newValues.every(v => v !== '')) {
|
|
5680
|
-
onComplete?.(newValues.join(''));
|
|
5681
|
-
}
|
|
5682
|
-
}, [values, currentRegex, onComplete, validLength]);
|
|
5683
|
-
const handlePaste = React.useCallback((e) => {
|
|
5684
|
-
e.preventDefault();
|
|
5685
|
-
const pasteData = e.clipboardData.getData('Text');
|
|
5686
|
-
const valuesToPaste = pasteData.split('').slice(0, validLength);
|
|
5687
|
-
const newValues = [...values];
|
|
5688
|
-
valuesToPaste.forEach((value, index) => {
|
|
5689
|
-
if (currentRegex.test(value)) {
|
|
5690
|
-
newValues[index] = value;
|
|
5691
|
-
}
|
|
5692
|
-
});
|
|
5693
|
-
setValues(newValues);
|
|
5694
|
-
const firstEmptyIndex = newValues.findIndex(v => v === '');
|
|
5695
|
-
const focusIndex = firstEmptyIndex === -1 ? validLength - 1 : firstEmptyIndex;
|
|
5696
|
-
inputsRef.current[focusIndex]?.focus();
|
|
5697
|
-
if (newValues.every(v => v !== '')) {
|
|
5698
|
-
onComplete?.(newValues.join(''));
|
|
5699
|
-
}
|
|
5700
|
-
}, [values, currentRegex, onComplete, validLength]);
|
|
5701
|
-
const handleKeyDown = React.useCallback((index, e) => {
|
|
5702
|
-
if (e.key === 'Backspace') {
|
|
5703
|
-
e.preventDefault();
|
|
5704
|
-
const newValues = [...values];
|
|
5705
|
-
if (values[index]) {
|
|
5706
|
-
newValues[index] = '';
|
|
5707
|
-
setValues(newValues);
|
|
5708
|
-
}
|
|
5709
|
-
else if (index > 0) {
|
|
5710
|
-
inputsRef.current[index - 1]?.focus();
|
|
5711
|
-
newValues[index - 1] = '';
|
|
5712
|
-
setValues(newValues);
|
|
5713
|
-
}
|
|
5714
|
-
}
|
|
5715
|
-
if (e.key === 'Delete') {
|
|
5716
|
-
e.preventDefault();
|
|
5717
|
-
const newValues = [...values];
|
|
5718
|
-
newValues[index] = '';
|
|
5719
|
-
setValues(newValues);
|
|
5720
|
-
if (index < validLength - 1) {
|
|
5721
|
-
inputsRef.current[index + 1]?.focus();
|
|
5722
|
-
}
|
|
5723
|
-
}
|
|
5724
|
-
if (e.key === 'ArrowLeft' && index > 0) {
|
|
5725
|
-
e.preventDefault();
|
|
5726
|
-
inputsRef.current[index - 1]?.focus();
|
|
5727
|
-
}
|
|
5728
|
-
if (e.key === 'ArrowRight' && index < validLength - 1) {
|
|
5729
|
-
e.preventDefault();
|
|
5730
|
-
inputsRef.current[index + 1]?.focus();
|
|
5731
|
-
}
|
|
5732
|
-
}, [values, validLength]);
|
|
5733
|
-
const handleKeyUp = React.useCallback((index, e) => {
|
|
5734
|
-
if (e.key === 'Enter') {
|
|
5735
|
-
e.preventDefault();
|
|
5736
|
-
if (values[index] && index < validLength - 1) {
|
|
5737
|
-
inputsRef.current[index + 1]?.focus();
|
|
5738
|
-
}
|
|
5739
|
-
else if (values[index] && index === validLength - 1) {
|
|
5740
|
-
inputsRef.current[index]?.blur();
|
|
5741
|
-
}
|
|
5742
|
-
}
|
|
5743
|
-
}, [values, validLength]);
|
|
5744
|
-
const handleFocus = React.useCallback((e) => {
|
|
5745
|
-
e.target.select();
|
|
5746
|
-
}, []);
|
|
5747
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx(styles['zds-verification-code__container'], className), ...rest, children: values.map((val, i) => (jsxRuntime.jsx("input", { id: `zds-verification-code__element-${i}`, ref: (el) => {
|
|
5748
|
-
inputsRef.current[i] = el;
|
|
5749
|
-
}, type: "text", inputMode: inputType === 'numeric' ? 'numeric' : 'text', maxLength: 1, value: val, onChange: (e) => handleChange(i, e.target.value), onKeyDown: (e) => handleKeyDown(i, e), onKeyUp: (e) => handleKeyUp(i, e), onPaste: i === 0 ? handlePaste : undefined, onFocus: handleFocus, disabled: disabled, className: clsx(styles['zds-verification-code__input'], {
|
|
5750
|
-
[styles['zds-verification-code__has-error']]: hasError,
|
|
5751
|
-
[styles['zds-verification-code__filled']]: val,
|
|
5752
|
-
}), "aria-invalid": hasError, "aria-label": `Dígito ${i + 1} de ${validLength}`, "aria-describedby": hasError && errorMessage ? 'verification-code-error' : undefined, autoComplete: "one-time-code" }, i))) }), hasError && errorMessage && (jsxRuntime.jsx("div", { id: "verification-code-error", className: styles['zds-verification-code__error'], role: "alert", "aria-live": "assertive", children: errorMessage }))] }));
|
|
5829
|
+
return (jsxRuntime.jsxs("div", { id: id, className: clsx(styles.container, className), children: [jsxRuntime.jsxs(radixUi.unstable_OneTimePasswordField.Root, { className: styles.inputGroup, validationType: validationType, value: value, defaultValue: defaultValue, onValueChange: onValueChange, autoSubmit: autoSubmit, onAutoSubmit: onAutoSubmit, name: name, form: form, disabled: disabled, readOnly: readOnly, "data-error": hasError || undefined, children: [Array.from({ length: validLength }, (_, i) => (jsxRuntime.jsx(radixUi.unstable_OneTimePasswordField.Input, { className: clsx(styles.input, hasError && styles.inputError, disabled && styles.inputDisabled) }, i))), jsxRuntime.jsx(radixUi.unstable_OneTimePasswordField.HiddenInput, {})] }), hasError && errorMessage && (jsxRuntime.jsx("span", { className: styles.errorMessage, children: errorMessage }))] }));
|
|
5753
5830
|
};
|
|
5754
5831
|
|
|
5755
5832
|
function useApiSimulation(config = {}) {
|
|
@@ -6063,6 +6140,7 @@ exports.Container = Container;
|
|
|
6063
6140
|
exports.DatePicker = DatePicker_default;
|
|
6064
6141
|
exports.Dialog = Dialog;
|
|
6065
6142
|
exports.Drawer = Drawer;
|
|
6143
|
+
exports.FileUpload = FileUpload;
|
|
6066
6144
|
exports.Filter = Filter;
|
|
6067
6145
|
exports.ListItem = ListItem;
|
|
6068
6146
|
exports.Menu = Menu;
|