@giro-ds/react 9.1.0 → 10.0.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 +185 -89
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +35 -28
- package/dist/index.esm.js +185 -90
- 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$u = {"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$u.AvatarRoot, {
|
|
38
|
+
[styles$u['AvatarRoot--lg']]: size === 'lg',
|
|
39
|
+
[styles$u['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$u.AvatarImage, src: src, alt: "Avatar" })), jsxRuntime.jsx(radixUi.Avatar.Fallback, { className: styles$u.AvatarFallback, children: icon || initialLetters })] }));
|
|
42
42
|
};
|
|
43
43
|
|
|
44
|
-
var styles$
|
|
44
|
+
var styles$t = {"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$t.badgeContainer, ...rest, children: [jsxRuntime.jsx("div", { "data-testid": "badge-content", children: children }), jsxRuntime.jsx("div", { id: componentId, className: clsx(styles$t.badge, {
|
|
67
|
+
[styles$t['badge__empty']]: isEmpty,
|
|
68
|
+
[styles$t['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$t.badgeContainer, children: jsxRuntime.jsx("div", { className: clsx(styles$t['badge__status'], {
|
|
72
|
+
[styles$t['badge__status__empty']]: isEmpty,
|
|
73
|
+
[styles$t['badge__status__flex']]: displayValue.length >= 2,
|
|
74
|
+
[styles$t['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$s = {"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$s.triggerWrapper, children: children }) }), jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: jsxRuntime.jsx(radixUi.Tooltip.Content, { className: clsx(styles$s.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$r = {"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();
|
|
@@ -115,14 +115,14 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
115
115
|
1.5: 'scale-1-5',
|
|
116
116
|
2: 'scale-2-0',
|
|
117
117
|
}[scale];
|
|
118
|
-
const buttonClasses = clsx(styles$
|
|
119
|
-
[styles$
|
|
120
|
-
[styles$
|
|
121
|
-
[styles$
|
|
122
|
-
[styles$
|
|
123
|
-
[styles$
|
|
124
|
-
[styles$
|
|
125
|
-
[styles$
|
|
118
|
+
const buttonClasses = clsx(styles$r.button, styles$r[`button-${variant}`], styles$r[`button-${size}`], scaleClass, {
|
|
119
|
+
[styles$r['disabled']]: disabled,
|
|
120
|
+
[styles$r['buttonLoading']]: loading,
|
|
121
|
+
[styles$r['buttonWithIcon']]: resolvedIcon && !iconOnly,
|
|
122
|
+
[styles$r[`buttonIconPosition-${iconPosition}`]]: resolvedIcon && !iconOnly,
|
|
123
|
+
[styles$r['buttonNoContent']]: resolvedIcon && !hasContent && !iconOnly,
|
|
124
|
+
[styles$r['buttonFullWidth']]: fullWidth,
|
|
125
|
+
[styles$r['buttonIconOnly']]: iconOnly,
|
|
126
126
|
}, className);
|
|
127
127
|
const getAriaLabel = () => {
|
|
128
128
|
if (ariaLabel)
|
|
@@ -148,12 +148,12 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
148
148
|
};
|
|
149
149
|
const renderContent = () => {
|
|
150
150
|
if (iconOnly && !loading) {
|
|
151
|
-
return (jsxRuntime.jsx("span", { className: styles$
|
|
151
|
+
return (jsxRuntime.jsx("span", { className: styles$r.buttonIconOnly, "aria-hidden": "true", children: resolvedIcon }));
|
|
152
152
|
}
|
|
153
153
|
if (loading) {
|
|
154
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!iconOnly && (jsxRuntime.jsxs("span", { className: styles$
|
|
154
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!iconOnly && (jsxRuntime.jsxs("span", { className: styles$r.buttonContentHidden, "aria-hidden": "true", children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$r.buttonIconLeft, children: resolvedIcon })), children, resolvedIcon && (iconPosition === 'right' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$r.buttonIconRight, children: resolvedIcon }))] })), jsxRuntime.jsx("span", { className: styles$r.buttonLoadingSpinner, "aria-hidden": "true", children: jsxRuntime.jsx(reactIcons.SpinnerIos16Regular, { "aria-hidden": "true" }) })] }));
|
|
155
155
|
}
|
|
156
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$
|
|
156
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$r.buttonIconLeft, "aria-hidden": "true", children: resolvedIcon })), children, resolvedIcon && (iconPosition === 'right' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$r.buttonIconRight, "aria-hidden": "true", children: resolvedIcon }))] }));
|
|
157
157
|
};
|
|
158
158
|
const baseProps = {
|
|
159
159
|
ref,
|
|
@@ -2458,7 +2458,7 @@ const ptBR = {
|
|
|
2458
2458
|
},
|
|
2459
2459
|
};
|
|
2460
2460
|
|
|
2461
|
-
var styles$
|
|
2461
|
+
var styles$q = {"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"};
|
|
2462
2462
|
|
|
2463
2463
|
const FLUENT_CHEVRON_MAP = {
|
|
2464
2464
|
down: reactIcons.ChevronDown16Regular,
|
|
@@ -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$q.caption_grid_label, children: monthLabel }), jsxRuntime.jsxs("button", { type: "button", className: styles$q.caption_grid_btn, "aria-pressed": view === "years", onClick: onYearLabelClick, children: [yearLabel, view !== "days" ? (jsxRuntime.jsx(reactIcons.ChevronUp16Regular, { className: styles$q.caption_year_chevron, "aria-hidden": true })) : (jsxRuntime.jsx(reactIcons.ChevronDown16Regular, { className: styles$q.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, 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$q,
|
|
2549
2549
|
animate,
|
|
2550
2550
|
mode: "single",
|
|
2551
2551
|
selected: resolvedSelected,
|
|
@@ -2562,10 +2562,10 @@ const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, o
|
|
|
2562
2562
|
1.5: 'scale-1-5',
|
|
2563
2563
|
2: 'scale-2-0',
|
|
2564
2564
|
}[scale];
|
|
2565
|
-
return (jsxRuntime.jsx(GridCtx.Provider, { value: gridCtxValue, children: jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
2565
|
+
return (jsxRuntime.jsx(GridCtx.Provider, { value: gridCtxValue, children: jsxRuntime.jsxs("div", { className: clsx(styles$q.calendar_grid_wrapper, scaleClass, className), 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$q.gridOverlay}${gridView === "years" ? ` ${styles$q.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$q.gridOverlayCaption, children: [jsxRuntime.jsx("span", { className: styles$q.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxRuntime.jsxs("button", { type: "button", className: styles$q.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de m\u00EAs", children: [displayedYear, jsxRuntime.jsx(reactIcons.ChevronUp16Regular, { className: styles$q.caption_year_chevron, "aria-hidden": true })] })] }), jsxRuntime.jsx("div", { className: styles$q.gridCells, children: monthsGrid.map(({ index, label, disabled: monthDisabled }) => (jsxRuntime.jsx("button", { type: "button", disabled: monthDisabled, className: `${styles$q.gridCell}${displayedMonthIndex === index ? ` ${styles$q.gridCellActive}` : ""}`, onClick: () => handleGridMonthSelect(index), children: label }, index))) })] })), gridView === "years" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles$q.gridOverlayCaption, children: [jsxRuntime.jsx("span", { className: styles$q.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxRuntime.jsxs("button", { type: "button", className: styles$q.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de ano", children: [displayedYear, jsxRuntime.jsx(reactIcons.ChevronUp16Regular, { className: styles$q.caption_year_chevron, "aria-hidden": true })] }), jsxRuntime.jsxs("div", { className: styles$q.gridOverlayYearsNav, children: [jsxRuntime.jsx("button", { type: "button", className: styles$q.gridNavBtn, disabled: !canGoPrevYears, onClick: () => setYearPageStart((s) => s - YEARS_PER_PAGE), "aria-label": "Anos anteriores", children: jsxRuntime.jsx(reactIcons.ChevronLeft16Regular, { className: styles$q.chevronNavBtnPrev, "aria-hidden": true }) }), jsxRuntime.jsx("button", { type: "button", className: styles$q.gridNavBtn, disabled: !canGoNextYears, onClick: () => setYearPageStart((s) => s + YEARS_PER_PAGE), "aria-label": "Pr\u00F3ximos anos", children: jsxRuntime.jsx(reactIcons.ChevronRight16Regular, { className: styles$q.chevronNavBtnNext, "aria-hidden": true }) })] })] }), jsxRuntime.jsx("div", { className: `${styles$q.gridCells} ${styles$q.gridCellsYears}`, children: yearsInPage.map((year) => (jsxRuntime.jsx("button", { type: "button", className: `${styles$q.gridCell}${displayedYear === year ? ` ${styles$q.gridCellActive}` : ""}`, onClick: () => handleGridYearSelect(year), children: year }, year))) })] }))] }))] }) }));
|
|
2566
2566
|
};
|
|
2567
2567
|
|
|
2568
|
-
var styles$
|
|
2568
|
+
var styles$p = {"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"};
|
|
2569
2569
|
|
|
2570
2570
|
const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, backgroundColor, textColor, className, id, style, ...rest }) => {
|
|
2571
2571
|
if (process.env.NODE_ENV !== 'production' && (text === '' || (typeof text === 'string' && !text.trim()))) {
|
|
@@ -2575,15 +2575,21 @@ const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, b
|
|
|
2575
2575
|
const titleId = `callout-title-${id || generatedId}`;
|
|
2576
2576
|
const componentId = id || generatedId;
|
|
2577
2577
|
const isAlert = variant === 'alert';
|
|
2578
|
-
const containerClass = clsx(styles$
|
|
2578
|
+
const containerClass = clsx(styles$p.container, styles$p[variant], { [styles$p.withTitle]: title }, className);
|
|
2579
2579
|
const customStyle = {
|
|
2580
2580
|
...style,
|
|
2581
2581
|
...(backgroundColor && { '--callout-bg': `var(--${backgroundColor})` }),
|
|
2582
2582
|
...(textColor && { '--callout-text': `var(--${textColor})` }),
|
|
2583
2583
|
};
|
|
2584
|
-
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$
|
|
2584
|
+
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$p.content, children: [icon && jsxRuntime.jsx("span", { className: styles$p.icon, "aria-hidden": "true", children: icon }), jsxRuntime.jsxs("div", { className: styles$p.subcontent, children: [title && (jsxRuntime.jsx("span", { id: titleId, className: styles$p.title, children: title })), text && jsxRuntime.jsx("span", { className: styles$p.text, children: text })] }), dismiss && (jsxRuntime.jsx("button", { className: styles$p.dismiss, onClick: onDismiss, type: "button", "aria-label": "Fechar", children: jsxRuntime.jsx(reactIcons.Dismiss24Regular, { "aria-hidden": "true" }) }))] }) }));
|
|
2585
2585
|
};
|
|
2586
2586
|
|
|
2587
|
+
var styles$o = {"card":"Card-module__card___LzN-3","card--hoverable":"Card-module__card--hoverable___orpJZ"};
|
|
2588
|
+
|
|
2589
|
+
function Card({ children, className, hoverable }) {
|
|
2590
|
+
return (jsxRuntime.jsx("main", { className: clsx(styles$o['card'], hoverable && styles$o['card--hoverable'], className), children: children }));
|
|
2591
|
+
}
|
|
2592
|
+
|
|
2587
2593
|
const CheckSmall = ({ className = '', width = 12, height = 10, fill = 'white', ...restProps }) => {
|
|
2588
2594
|
return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": "true", ...restProps, children: jsxRuntime.jsx("path", { d: "M4 9.4L0 5.4L1.4 4L4 6.6L10.6 0L12 1.4L4 9.4Z", fill: fill }) }));
|
|
2589
2595
|
};
|
|
@@ -2669,18 +2675,18 @@ const ICON_KEY_MAP = {
|
|
|
2669
2675
|
const SHARED_DISPLAY = {
|
|
2670
2676
|
'{capslock}': iconSlot('capslock'),
|
|
2671
2677
|
'{numbers}': '123',
|
|
2672
|
-
'{abc}': '
|
|
2678
|
+
'{abc}': 'Abc',
|
|
2673
2679
|
'{alt}': '.?!',
|
|
2674
2680
|
'{alt2}': '#+=',
|
|
2675
2681
|
'{emoticon}': iconSlot('emoji'),
|
|
2676
2682
|
'{shift}': iconSlot('shift'),
|
|
2677
2683
|
'{shiftactivated}': iconSlot('shiftactivated'),
|
|
2678
2684
|
'{enter}': 'Enter',
|
|
2679
|
-
'{bksp}':
|
|
2685
|
+
'{bksp}': iconSlot('bksp'),
|
|
2680
2686
|
'{altright}': '.?123',
|
|
2681
2687
|
'{downkeyboard}': iconSlot('downkeyboard'),
|
|
2682
2688
|
'{space}': ' ',
|
|
2683
|
-
'{default}': '
|
|
2689
|
+
'{default}': 'Abc',
|
|
2684
2690
|
};
|
|
2685
2691
|
const LAYOUT_DISPLAY = {
|
|
2686
2692
|
default: SHARED_DISPLAY,
|
|
@@ -2694,40 +2700,40 @@ const removeKeyFromLayout = (layout, key) => Object.fromEntries(Object.entries(l
|
|
|
2694
2700
|
rows.map((row) => row.split(key).join(' ').replace(/\s+/g, ' ').trim()),
|
|
2695
2701
|
]));
|
|
2696
2702
|
const QWERTY_LOWERCASE = [
|
|
2697
|
-
'
|
|
2698
|
-
'
|
|
2699
|
-
'a s d f g h j k l ç
|
|
2700
|
-
'{shift} z x c v b n m
|
|
2701
|
-
'{numbers} {alt} {space}
|
|
2703
|
+
'1 2 3 4 5 6 7 8 9 0',
|
|
2704
|
+
'q w e r t y u i o p',
|
|
2705
|
+
'a s d f g h j k l ç',
|
|
2706
|
+
'{shift} z x c v b n m {bksp}',
|
|
2707
|
+
'{numbers} {alt} {space} . {enter}',
|
|
2702
2708
|
];
|
|
2703
2709
|
const NUMPAD = ['1 2 3', '4 5 6', '7 8 9', '{bksp} 0 {abc}'];
|
|
2704
2710
|
const SHARED_LAYOUTS = {
|
|
2705
2711
|
shift: [
|
|
2706
|
-
'
|
|
2707
|
-
'
|
|
2708
|
-
'A S D F G H J K L Ç
|
|
2709
|
-
'{capslock} Z X C V B N M
|
|
2710
|
-
'{numbers} {alt} {emoticon} {space}
|
|
2712
|
+
'1 2 3 4 5 6 7 8 9 0',
|
|
2713
|
+
'Q W E R T Y U I O P',
|
|
2714
|
+
'A S D F G H J K L Ç',
|
|
2715
|
+
'{capslock} Z X C V B N M {bksp}',
|
|
2716
|
+
'{numbers} {alt} {emoticon} {space} . {enter}',
|
|
2711
2717
|
],
|
|
2712
2718
|
caps: [
|
|
2713
|
-
'
|
|
2714
|
-
'
|
|
2715
|
-
'A S D F G H J K L Ç
|
|
2716
|
-
'{shiftactivated} Z X C V B N M
|
|
2717
|
-
'{numbers} {alt} {emoticon} {space}
|
|
2719
|
+
'1 2 3 4 5 6 7 8 9 0',
|
|
2720
|
+
'Q W E R T Y U I O P',
|
|
2721
|
+
'A S D F G H J K L Ç',
|
|
2722
|
+
'{shiftactivated} Z X C V B N M {bksp}',
|
|
2723
|
+
'{numbers} {alt} {emoticon} {space} . {enter}',
|
|
2718
2724
|
],
|
|
2719
2725
|
numbers: NUMPAD,
|
|
2720
2726
|
alt: [
|
|
2721
2727
|
'1 2 3 4 5 6 7 8 9 0',
|
|
2722
2728
|
`- / : ; ( ) $ & @ "`,
|
|
2723
2729
|
'{alt2} . , ? ! ´ {bksp}',
|
|
2724
|
-
'{default} {emoticon} {space} {
|
|
2730
|
+
'{default} {emoticon} {space} {enter}',
|
|
2725
2731
|
],
|
|
2726
2732
|
alt2: [
|
|
2727
2733
|
'[ ] { } # % ^ * + =',
|
|
2728
2734
|
'_ \\ | ~ < > ¢ £ ¥ •',
|
|
2729
2735
|
`{alt} . , ? ! ' {bksp}`,
|
|
2730
|
-
'{default} {emoticon} {space} {
|
|
2736
|
+
'{default} {emoticon} {space} {enter}',
|
|
2731
2737
|
],
|
|
2732
2738
|
emoticon: [
|
|
2733
2739
|
'😀 😊 😅 😂 🙂 😉 😍 😛 😠 😎 {bksp}',
|
|
@@ -2786,20 +2792,20 @@ const SHIFT_TOGGLES = {
|
|
|
2786
2792
|
alt2: 'alt',
|
|
2787
2793
|
};
|
|
2788
2794
|
|
|
2789
|
-
var styles$j = {"container":"VirtualKeyboard-module__container___A-e0I","
|
|
2795
|
+
var styles$j = {"container":"VirtualKeyboard-module__container___A-e0I","layout--numeric":"VirtualKeyboard-module__layout--numeric___zfd7G","layout--default":"VirtualKeyboard-module__layout--default___qyY1b","mode--fixed":"VirtualKeyboard-module__mode--fixed___1eFY1","textFieldContainer":"VirtualKeyboard-module__textFieldContainer___XxGen","keyboardWrapper":"VirtualKeyboard-module__keyboardWrapper___jryTf","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"};
|
|
2790
2796
|
|
|
2791
2797
|
const LONG_PRESS_DELAY_MS = 400;
|
|
2792
2798
|
const ACCENT_OPTIONS = {
|
|
2793
|
-
a: ['á', 'à', 'â', 'ã', 'ä', 'å', 'æ'],
|
|
2794
|
-
e: ['é', 'è', 'ê', 'ë'],
|
|
2795
|
-
i: ['í', 'ì', 'î', 'ï'],
|
|
2796
|
-
o: ['ó', 'ò', 'ô', 'õ', 'ö', 'ø', 'œ', '
|
|
2797
|
-
u: ['ú', 'ù', 'û', 'ü'],
|
|
2798
|
-
y: ['ý', 'ÿ'],
|
|
2799
|
-
n: ['ñ'],
|
|
2800
|
-
c: ['ç'],
|
|
2801
|
-
'?': ['¿'],
|
|
2802
|
-
'!': ['¡'],
|
|
2799
|
+
a: ['a', 'á', 'à', 'â', 'ã', 'ä', 'å', 'æ', '@', 'ª'],
|
|
2800
|
+
e: ['e', 'é', 'è', 'ê', 'ë', 'ę', 'ē', 'ė', '€'],
|
|
2801
|
+
i: ['i', 'í', 'ì', 'î', 'ï', 'ī', 'į', 'ı'],
|
|
2802
|
+
o: ['o', 'ó', 'ò', 'ô', 'õ', 'ö', 'ō', 'ø', 'œ', 'º'],
|
|
2803
|
+
u: ['u', 'ú', 'ù', 'û', 'ü', 'ū', 'ů', 'ű'],
|
|
2804
|
+
y: ['y', 'ý', 'ÿ', 'ŷ', 'ȳ'],
|
|
2805
|
+
n: ['n', 'ñ'],
|
|
2806
|
+
c: ['c', 'ç'],
|
|
2807
|
+
'?': ['?', '¿'],
|
|
2808
|
+
'!': ['!', '¡'],
|
|
2803
2809
|
};
|
|
2804
2810
|
/**
|
|
2805
2811
|
* Componente VirtualKeyboard — teclado virtual on-screen para entradas controladas.
|
|
@@ -2835,6 +2841,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2835
2841
|
const visualType = NATIVE_LAYOUT_KEYS.has(type) ? type : 'default';
|
|
2836
2842
|
const [isOpen, setIsOpen] = React.useState(variant !== 'native');
|
|
2837
2843
|
const hideTimeoutRef = React.useRef(null);
|
|
2844
|
+
const scrollTimeoutRef = React.useRef(null);
|
|
2838
2845
|
const longPressTimeoutRef = React.useRef(null);
|
|
2839
2846
|
const suppressNextInputRef = React.useRef(null);
|
|
2840
2847
|
const heldAccentKeyRef = React.useRef(null);
|
|
@@ -2844,9 +2851,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2844
2851
|
const keyboardInstanceRef = React.useRef(null);
|
|
2845
2852
|
const accentMenuRef = React.useRef(null);
|
|
2846
2853
|
const accentButtonRef = React.useRef(null);
|
|
2847
|
-
const accentMenuOpenRef = React.useRef(false);
|
|
2848
2854
|
const valueRef = React.useRef(value);
|
|
2849
2855
|
const [iconSlots, setIconSlots] = React.useState([]);
|
|
2856
|
+
const [keyPreview, setKeyPreview] = React.useState(null);
|
|
2857
|
+
const [keyPreviewOffsetX, setKeyPreviewOffsetX] = React.useState(0);
|
|
2858
|
+
const keyPreviewRef = React.useRef(null);
|
|
2859
|
+
const [containerWidth, setContainerWidth] = React.useState(Infinity);
|
|
2850
2860
|
React.useEffect(() => {
|
|
2851
2861
|
valueRef.current = value;
|
|
2852
2862
|
}, [value]);
|
|
@@ -2880,6 +2890,17 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2880
2890
|
}
|
|
2881
2891
|
}, 150);
|
|
2882
2892
|
}, [variant, targetRef]);
|
|
2893
|
+
const scrollTargetIntoView = React.useCallback(() => {
|
|
2894
|
+
const targetEl = targetRef?.current;
|
|
2895
|
+
if (!targetEl)
|
|
2896
|
+
return;
|
|
2897
|
+
const keyboardHeight = keyboardWrapperRef.current?.offsetHeight ?? 0;
|
|
2898
|
+
const rect = targetEl.getBoundingClientRect();
|
|
2899
|
+
const visibleBottom = window.innerHeight - keyboardHeight - 8;
|
|
2900
|
+
if (rect.bottom > visibleBottom) {
|
|
2901
|
+
window.scrollBy({ top: rect.bottom - visibleBottom, behavior: 'smooth' });
|
|
2902
|
+
}
|
|
2903
|
+
}, [targetRef]);
|
|
2883
2904
|
React.useEffect(() => {
|
|
2884
2905
|
if (variant !== 'native')
|
|
2885
2906
|
return;
|
|
@@ -2891,7 +2912,10 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2891
2912
|
const handleFocus = () => {
|
|
2892
2913
|
if (hideTimeoutRef.current !== null)
|
|
2893
2914
|
clearTimeout(hideTimeoutRef.current);
|
|
2915
|
+
if (scrollTimeoutRef.current !== null)
|
|
2916
|
+
clearTimeout(scrollTimeoutRef.current);
|
|
2894
2917
|
setIsOpen(true);
|
|
2918
|
+
scrollTimeoutRef.current = setTimeout(scrollTargetIntoView, 50);
|
|
2895
2919
|
};
|
|
2896
2920
|
const handleBlur = () => {
|
|
2897
2921
|
scheduleHideIfBlurred();
|
|
@@ -2903,8 +2927,26 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2903
2927
|
el.removeEventListener('blur', handleBlur);
|
|
2904
2928
|
if (hideTimeoutRef.current !== null)
|
|
2905
2929
|
clearTimeout(hideTimeoutRef.current);
|
|
2930
|
+
if (scrollTimeoutRef.current !== null)
|
|
2931
|
+
clearTimeout(scrollTimeoutRef.current);
|
|
2906
2932
|
};
|
|
2907
|
-
}, [variant, targetRef, scheduleHideIfBlurred]);
|
|
2933
|
+
}, [variant, targetRef, scheduleHideIfBlurred, scrollTargetIntoView]);
|
|
2934
|
+
React.useEffect(() => {
|
|
2935
|
+
if (variant !== 'native')
|
|
2936
|
+
return;
|
|
2937
|
+
const wrapper = keyboardWrapperRef.current;
|
|
2938
|
+
if (!wrapper)
|
|
2939
|
+
return;
|
|
2940
|
+
const preventIOSBlur = (event) => {
|
|
2941
|
+
const targetEl = event.target;
|
|
2942
|
+
!!targetEl.closest('.hg-button');
|
|
2943
|
+
event.preventDefault();
|
|
2944
|
+
};
|
|
2945
|
+
wrapper.addEventListener('touchstart', preventIOSBlur, { passive: false });
|
|
2946
|
+
return () => {
|
|
2947
|
+
wrapper.removeEventListener('touchstart', preventIOSBlur);
|
|
2948
|
+
};
|
|
2949
|
+
}, [variant]);
|
|
2908
2950
|
React.useEffect(() => {
|
|
2909
2951
|
setLayoutName('default');
|
|
2910
2952
|
setCapsLockOn(false);
|
|
@@ -2940,6 +2982,21 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2940
2982
|
document.removeEventListener('keydown', handleEscape);
|
|
2941
2983
|
};
|
|
2942
2984
|
}, [accentMenu, closeAccentMenu]);
|
|
2985
|
+
React.useLayoutEffect(() => {
|
|
2986
|
+
if (!keyPreview || !keyPreviewRef.current)
|
|
2987
|
+
return;
|
|
2988
|
+
const margin = 8;
|
|
2989
|
+
const rect = keyPreviewRef.current.getBoundingClientRect();
|
|
2990
|
+
if (rect.width <= 0 || rect.height <= 0)
|
|
2991
|
+
return;
|
|
2992
|
+
const minCenter = margin + rect.width / 2;
|
|
2993
|
+
const maxCenter = window.innerWidth - margin - rect.width / 2;
|
|
2994
|
+
const clampedCenter = Math.min(maxCenter, Math.max(minCenter, keyPreview.left));
|
|
2995
|
+
const nextOffset = clampedCenter - keyPreview.left;
|
|
2996
|
+
if (Math.abs(nextOffset - keyPreviewOffsetX) > 0.5) {
|
|
2997
|
+
setKeyPreviewOffsetX(nextOffset);
|
|
2998
|
+
}
|
|
2999
|
+
}, [keyPreview, keyPreviewOffsetX]);
|
|
2943
3000
|
React.useLayoutEffect(() => {
|
|
2944
3001
|
if (!accentMenu || !accentMenuRef.current)
|
|
2945
3002
|
return;
|
|
@@ -2955,6 +3012,16 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2955
3012
|
setAccentMenuOffsetX(nextOffset);
|
|
2956
3013
|
}
|
|
2957
3014
|
}, [accentMenu, accentMenuOffsetX]);
|
|
3015
|
+
React.useEffect(() => {
|
|
3016
|
+
const wrapper = keyboardWrapperRef.current;
|
|
3017
|
+
if (!wrapper)
|
|
3018
|
+
return;
|
|
3019
|
+
const ro = new ResizeObserver((entries) => {
|
|
3020
|
+
setContainerWidth(entries[0]?.contentRect.width ?? Infinity);
|
|
3021
|
+
});
|
|
3022
|
+
ro.observe(wrapper);
|
|
3023
|
+
return () => ro.disconnect();
|
|
3024
|
+
}, []);
|
|
2958
3025
|
React.useEffect(() => {
|
|
2959
3026
|
if (!keyboardWrapperRef.current)
|
|
2960
3027
|
return;
|
|
@@ -2982,13 +3049,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2982
3049
|
suppressNextInputRef.current = null;
|
|
2983
3050
|
clearLongPressTimeout();
|
|
2984
3051
|
}, [layoutName, type, closeAccentMenu, clearLongPressTimeout]);
|
|
2985
|
-
React.useEffect(() => {
|
|
2986
|
-
accentMenuOpenRef.current = !!accentMenu;
|
|
2987
|
-
}, [accentMenu]);
|
|
2988
3052
|
React.useEffect(() => {
|
|
2989
3053
|
const updateAccentPosition = () => {
|
|
2990
|
-
if (!accentMenuOpenRef.current)
|
|
2991
|
-
return;
|
|
2992
3054
|
const btn = accentButtonRef.current;
|
|
2993
3055
|
if (!btn)
|
|
2994
3056
|
return;
|
|
@@ -3013,20 +3075,31 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3013
3075
|
const buttonEl = event.target.closest('.hg-button');
|
|
3014
3076
|
if (!buttonEl || !keyboardWrapper.contains(buttonEl))
|
|
3015
3077
|
return;
|
|
3078
|
+
event.preventDefault();
|
|
3016
3079
|
const sourceKey = buttonEl.getAttribute('data-skbtn') ?? '';
|
|
3017
3080
|
heldAccentKeyRef.current = null;
|
|
3018
3081
|
longPressTriggeredRef.current = false;
|
|
3082
|
+
if (sourceKey && !sourceKey.startsWith('{') && type !== 'numeric' && containerWidth <= 768) {
|
|
3083
|
+
const buttonRect = buttonEl.getBoundingClientRect();
|
|
3084
|
+
setKeyPreviewOffsetX(0);
|
|
3085
|
+
setKeyPreview({
|
|
3086
|
+
char: sourceKey,
|
|
3087
|
+
top: buttonRect.top - 4,
|
|
3088
|
+
left: buttonRect.left + buttonRect.width / 2,
|
|
3089
|
+
});
|
|
3090
|
+
}
|
|
3019
3091
|
if (!sourceKey || sourceKey.startsWith('{'))
|
|
3020
3092
|
return;
|
|
3093
|
+
heldAccentKeyRef.current = sourceKey;
|
|
3094
|
+
clearLongPressTimeout();
|
|
3021
3095
|
const accentOptions = ACCENT_OPTIONS[sourceKey.toLowerCase()];
|
|
3022
3096
|
if (!accentOptions)
|
|
3023
3097
|
return;
|
|
3024
|
-
heldAccentKeyRef.current = sourceKey;
|
|
3025
|
-
clearLongPressTimeout();
|
|
3026
3098
|
longPressTimeoutRef.current = setTimeout(() => {
|
|
3027
3099
|
const buttonRect = buttonEl.getBoundingClientRect();
|
|
3028
3100
|
const isUpperCaseKey = sourceKey === sourceKey.toUpperCase();
|
|
3029
3101
|
longPressTriggeredRef.current = true;
|
|
3102
|
+
setKeyPreview(null);
|
|
3030
3103
|
accentButtonRef.current = buttonEl;
|
|
3031
3104
|
setAccentMenu({
|
|
3032
3105
|
sourceKey,
|
|
@@ -3039,11 +3112,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3039
3112
|
setAccentMenuOffsetX(0);
|
|
3040
3113
|
suppressNextInputRef.current = sourceKey;
|
|
3041
3114
|
}, LONG_PRESS_DELAY_MS);
|
|
3042
|
-
}, [clearLongPressTimeout]);
|
|
3115
|
+
}, [clearLongPressTimeout, type, containerWidth]);
|
|
3043
3116
|
const handleLongPressEnd = React.useCallback(() => {
|
|
3044
3117
|
const heldKey = heldAccentKeyRef.current;
|
|
3045
3118
|
const longPressTriggered = longPressTriggeredRef.current;
|
|
3046
3119
|
const baseLayout = type === 'numeric' ? 'abc' : 'default';
|
|
3120
|
+
setKeyPreview(null);
|
|
3047
3121
|
isKeyboardInteractingRef.current = false;
|
|
3048
3122
|
clearLongPressTimeout();
|
|
3049
3123
|
if (heldKey && !longPressTriggered) {
|
|
@@ -3204,6 +3278,17 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3204
3278
|
return;
|
|
3205
3279
|
onChange?.(input);
|
|
3206
3280
|
}, [maxLength, onChange, syncKeyboardInput]);
|
|
3281
|
+
const portalSizes = React.useMemo(() => {
|
|
3282
|
+
if (containerWidth <= 360)
|
|
3283
|
+
return { preview: 42, option: 44, fontSize: 'var(--font-size-16)' };
|
|
3284
|
+
if (containerWidth <= 390)
|
|
3285
|
+
return { preview: 44, option: 44, fontSize: 'var(--font-size-18)' };
|
|
3286
|
+
if (containerWidth <= 480)
|
|
3287
|
+
return { preview: 46, option: 46, fontSize: 'var(--font-size-20)' };
|
|
3288
|
+
if (containerWidth <= 768)
|
|
3289
|
+
return { preview: 48, option: 48, fontSize: undefined };
|
|
3290
|
+
return { preview: 50, option: 50, fontSize: undefined };
|
|
3291
|
+
}, [containerWidth]);
|
|
3207
3292
|
const keyboardDisplay = React.useMemo(() => {
|
|
3208
3293
|
const baseDisplay = LAYOUT_DISPLAY[visualType];
|
|
3209
3294
|
if (!baseDisplay)
|
|
@@ -3235,18 +3320,28 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3235
3320
|
}
|
|
3236
3321
|
return reactDom.createPortal(React.createElement(Icon), slot, `icon-${key}`);
|
|
3237
3322
|
});
|
|
3238
|
-
})(),
|
|
3323
|
+
})(), keyPreview && typeof document !== 'undefined' && reactDom.createPortal(jsxRuntime.jsx("div", { ref: keyPreviewRef, className: styles$j.keyPreview, style: {
|
|
3324
|
+
top: keyPreview.top,
|
|
3325
|
+
left: keyPreview.left + keyPreviewOffsetX,
|
|
3326
|
+
width: portalSizes.preview,
|
|
3327
|
+
height: portalSizes.preview,
|
|
3328
|
+
...(portalSizes.fontSize ? { fontSize: portalSizes.fontSize } : {}),
|
|
3329
|
+
}, "aria-hidden": true, children: keyPreview.char }), document.body), accentMenu && (typeof document !== 'undefined' &&
|
|
3239
3330
|
reactDom.createPortal(jsxRuntime.jsx("div", { ref: accentMenuRef, className: styles$j.accentMenu, style: {
|
|
3240
3331
|
top: accentMenu.top,
|
|
3241
3332
|
left: accentMenu.left + accentMenuOffsetX,
|
|
3242
|
-
}, role: "listbox", "aria-label": `Opcoes de acento para ${accentMenu.sourceKey}`, children: accentMenu.options.map((option) => (jsxRuntime.jsx("button", { type: "button", className: styles$j.accentOption,
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3333
|
+
}, 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$j.accentMenuRow, children: rowOptions.map((option) => (jsxRuntime.jsx("button", { type: "button", className: styles$j.accentOption, style: {
|
|
3334
|
+
minWidth: portalSizes.option,
|
|
3335
|
+
height: portalSizes.option,
|
|
3336
|
+
...(portalSizes.fontSize ? { fontSize: portalSizes.fontSize } : {}),
|
|
3337
|
+
}, onPointerDown: (event) => {
|
|
3338
|
+
event.preventDefault();
|
|
3339
|
+
event.stopPropagation();
|
|
3340
|
+
}, onClick: () => handleAccentSelect(option), children: option }, `${accentMenu.sourceKey}-${option}`))) }, rowIndex))) }), document.body))] })) : null;
|
|
3246
3341
|
if (variant === 'native' && typeof document !== 'undefined') {
|
|
3247
3342
|
return reactDom.createPortal(jsxRuntime.jsx("div", { id: id, className: clsx(styles$j.overlay, { [styles$j.overlayOpen]: isOpen }, styles$j[`layout--${visualType}`], className), children: keyboardEl }), document.body);
|
|
3248
3343
|
}
|
|
3249
|
-
return (jsxRuntime.jsxs("div", { id: id, className: clsx(styles$j.container, styles$j[`mode--${variant}`], styles$j[`layout--${visualType}`], className), children: [variant === 'fixed' && (jsxRuntime.jsx("div", { className: styles$j.textFieldContainer, children: jsxRuntime.jsx(TextField, { placeholder: textFieldPlaceholder, value: value, onChange: onChange, helperText: helperText, error: error, errorMessage: errorMessage, readOnly: true, maxLength: maxLength, attachedToVirtualKeyboard: true, className: styles$j.textFieldWrapper }) })), keyboardEl] }));
|
|
3344
|
+
return (jsxRuntime.jsxs("div", { id: id, className: clsx(styles$j.container, styles$j[`mode--${variant}`], styles$j[`layout--${visualType}`], className), children: [variant === 'fixed' && (jsxRuntime.jsx("div", { className: styles$j.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$j.textFieldWrapper }) })), keyboardEl] }));
|
|
3250
3345
|
};
|
|
3251
3346
|
|
|
3252
3347
|
var styles$i = {"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"};
|
|
@@ -3272,7 +3367,7 @@ const LabelComponent = ({ children, htmlFor, required = false, tooltip = false,
|
|
|
3272
3367
|
return container;
|
|
3273
3368
|
};
|
|
3274
3369
|
|
|
3275
|
-
const TextField$1 = React.forwardRef(({ className, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength
|
|
3370
|
+
const TextField$1 = React.forwardRef(({ className, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength, required = false, helperText, tooltip = false, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, icon, scale = 1, onBlur, onFocus, name, persistIcon = false, virtualKeyboard, attachedToVirtualKeyboard, disableAutoComplete = false, ...rest }, ref) => {
|
|
3276
3371
|
const normalizeValue = (val) => {
|
|
3277
3372
|
return val === undefined || val === null ? '' : String(val);
|
|
3278
3373
|
};
|
|
@@ -3344,12 +3439,12 @@ const TextField$1 = React.forwardRef(({ className, value, label, placeholder, ty
|
|
|
3344
3439
|
[styles$i.attachedToVirtualKeyboard]: attachedToVirtualKeyboard,
|
|
3345
3440
|
[className]: className,
|
|
3346
3441
|
});
|
|
3347
|
-
return (jsxRuntime.jsxs("div", { className: containerClass, children: [label && (jsxRuntime.jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side:
|
|
3442
|
+
return (jsxRuntime.jsxs("div", { className: containerClass, children: [label && (jsxRuntime.jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: tooltipSide, align: tooltipAlign, error: hasError, disabled: disabled, children: label })), jsxRuntime.jsxs("div", { className: styles$i.inputWrapper, children: [jsxRuntime.jsxs("div", { className: styles$i.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({
|
|
3348
3443
|
[styles$i.inputWithIcon]: showCustomIcon || showClearIcon,
|
|
3349
3444
|
}) }), showCustomIcon && jsxRuntime.jsx("span", { className: styles$i.icon, children: icon }), showClearIcon && (jsxRuntime.jsx("button", { type: "button", className: styles$i.clearButton, onMouseDown: (e) => {
|
|
3350
3445
|
e.preventDefault();
|
|
3351
3446
|
handleClear();
|
|
3352
|
-
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}) }))] }), (errorMessage || inputError || helperText) && (jsxRuntime.jsx("span", { id: helperId, className: styles$i.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText }))] }), virtualKeyboard && (jsxRuntime.jsx("div", { className: "virtualKeyboardWrapper", children: jsxRuntime.jsx(VirtualKeyboard, { variant: "native", type:
|
|
3447
|
+
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}) }))] }), ((error && errorMessage) || inputError || helperText) && (jsxRuntime.jsx("span", { id: helperId, className: styles$i.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) => {
|
|
3353
3448
|
if (!disabled && (!maxLength || val.length <= maxLength)) {
|
|
3354
3449
|
setInputValue(val);
|
|
3355
3450
|
onChange?.(val);
|
|
@@ -3681,7 +3776,7 @@ const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled
|
|
|
3681
3776
|
|
|
3682
3777
|
var styles$c = {"search":"Search-module__search___u3QsV","searchLeftIcon":"Search-module__searchLeftIcon___OKOBq","disabled":"Search-module__disabled___adbxO","inputWithClearIcon":"Search-module__inputWithClearIcon___cqvkq","searchClearIcon":"Search-module__searchClearIcon___qX9-h"};
|
|
3683
3778
|
|
|
3684
|
-
const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, searchMode = 'instant', onSearch, id, scale = 1, className, virtualKeyboard
|
|
3779
|
+
const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, searchMode = 'instant', onSearch, id, scale = 1, className, virtualKeyboard, 'data-testid': testId, ...rest }, ref) => {
|
|
3685
3780
|
const [internalValue, setInternalValue] = React.useState('');
|
|
3686
3781
|
const { internalRef: inputRef, setRefs: setInputRefs } = useInputKeyboardValue(ref);
|
|
3687
3782
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
@@ -3744,7 +3839,7 @@ const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado',
|
|
|
3744
3839
|
e.preventDefault();
|
|
3745
3840
|
onClick?.(e);
|
|
3746
3841
|
}
|
|
3747
|
-
} : undefined, children: [jsxRuntime.jsx("span", { className: clsx(styles$c.searchLeftIcon, { [styles$c.disabled]: disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsxRuntime.jsx(reactIcons.Search16Regular, {}) }), jsxRuntime.jsx("input", { ref: setInputRefs, id: inputId, type: "text", placeholder: placeholder, "aria-label": placeholder, value: currentValue || '', onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, "data-testid": testId, ...rest, inputMode: virtualKeyboard ? 'none' : rest.inputMode, className: clsx({ [styles$c.inputWithClearIcon]: currentValue && currentValue.length > 0 }) }), currentValue && currentValue.length > 0 && (jsxRuntime.jsx("span", { className: styles$c.searchClearIcon, "aria-hidden": "true", onClick: clearInputSearch, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}) })), virtualKeyboard && (jsxRuntime.jsx("div", { className: "virtualKeyboardWrapper", children: jsxRuntime.jsx(VirtualKeyboard, { variant: "native", type:
|
|
3842
|
+
} : undefined, children: [jsxRuntime.jsx("span", { className: clsx(styles$c.searchLeftIcon, { [styles$c.disabled]: disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsxRuntime.jsx(reactIcons.Search16Regular, {}) }), jsxRuntime.jsx("input", { ref: setInputRefs, id: inputId, type: "text", placeholder: placeholder, "aria-label": placeholder, value: currentValue || '', onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, "data-testid": testId, ...rest, inputMode: (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') ? 'none' : rest.inputMode, className: clsx({ [styles$c.inputWithClearIcon]: currentValue && currentValue.length > 0 }) }), currentValue && currentValue.length > 0 && (jsxRuntime.jsx("span", { className: styles$c.searchClearIcon, "aria-hidden": "true", onClick: clearInputSearch, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}) })), (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') && (jsxRuntime.jsx("div", { className: "virtualKeyboardWrapper", children: jsxRuntime.jsx(VirtualKeyboard, { variant: "native", type: virtualKeyboard, value: currentValue || '', targetRef: inputRef, onChange: (val) => {
|
|
3748
3843
|
if (disabled)
|
|
3749
3844
|
return;
|
|
3750
3845
|
if (isControlled) {
|
|
@@ -5253,7 +5348,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5253
5348
|
};
|
|
5254
5349
|
return (jsxRuntime.jsxs("div", { className: clsx(styles$4.wrapper, className), children: [showBulkActions && (jsxRuntime.jsxs("div", { className: styles$4.bulkActionsBar, children: [jsxRuntime.jsxs("div", { className: styles$4.bulkActionsInfo, children: [jsxRuntime.jsx(Button, { variant: "text", iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), ariaLabel: "Limpar sele\u00E7\u00E3o", onClick: handleClearSelection, className: styles$4.bulkActionsClearButton }), jsxRuntime.jsx("span", { className: styles$4.bulkActionsLabel, children: bulkActions.label
|
|
5255
5350
|
? bulkActions.label(selectedCount, selectedRows)
|
|
5256
|
-
: `${selectedCount} ${selectedCount === 1 ? 'item selecionado' : 'itens selecionados'}` })] }), jsxRuntime.jsx("div", { className: styles$4.bulkActionsButtons, children: bulkActions.actions.map((action, index) => (jsxRuntime.jsx(Button, { variant: action.variant ?? 'outlined', type: "button", disabled: action.disabled, onClick: action.onClick, size: "sm", children: action.label }, index))) })] })), header && (jsxRuntime.jsxs("div", { className: styles$4.tableHeader, children: [showSearch && (jsxRuntime.jsx("div", { className: styles$4.tableHeaderSearchContainer, children: jsxRuntime.jsx(Search, { value: pendingSearch, virtualKeyboard: header.virtualKeyboard,
|
|
5351
|
+
: `${selectedCount} ${selectedCount === 1 ? 'item selecionado' : 'itens selecionados'}` })] }), jsxRuntime.jsx("div", { className: styles$4.bulkActionsButtons, children: bulkActions.actions.map((action, index) => (jsxRuntime.jsx(Button, { variant: action.variant ?? 'outlined', type: "button", disabled: action.disabled, onClick: action.onClick, size: "sm", children: action.label }, index))) })] })), header && (jsxRuntime.jsxs("div", { className: styles$4.tableHeader, children: [showSearch && (jsxRuntime.jsx("div", { className: styles$4.tableHeaderSearchContainer, children: jsxRuntime.jsx(Search, { value: pendingSearch, virtualKeyboard: header.virtualKeyboard, searchMode: header?.searchMode ?? "on-enter", onChange: (e) => {
|
|
5257
5352
|
setPendingSearch(e.target.value);
|
|
5258
5353
|
}, onSearch: (val) => {
|
|
5259
5354
|
if (footer) {
|
|
@@ -5318,7 +5413,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5318
5413
|
|
|
5319
5414
|
var styles$3 = {"container":"TextArea-module__container___WEBC-","inputWrapper":"TextArea-module__inputWrapper___-omPx","inputContainer":"TextArea-module__inputContainer___0-jKY","footer":"TextArea-module__footer___7XMlj","helperText":"TextArea-module__helperText___709rD","charCount":"TextArea-module__charCount___zdbxM","error":"TextArea-module__error___DWDms","disabled":"TextArea-module__disabled___lHxCa"};
|
|
5320
5415
|
|
|
5321
|
-
const TextArea = React.forwardRef(({ className, value, label, placeholder, onChange, disabled = false, maxLength, required = false, helperText, tooltip = false, tooltipText, side = 'bottom', align = 'start', errorMessage, error, id, onBlur, onFocus, name, resize = 'vertical', showCharCount = false, height, virtualKeyboard
|
|
5416
|
+
const TextArea = React.forwardRef(({ className, value, label, placeholder, onChange, disabled = false, maxLength, required = false, helperText, tooltip = false, tooltipText, side = 'bottom', align = 'start', errorMessage, error, id, onBlur, onFocus, name, resize = 'vertical', showCharCount = false, height, virtualKeyboard, ...rest }, ref) => {
|
|
5322
5417
|
const normalizeValue = (val) => {
|
|
5323
5418
|
return val === undefined || val === null ? '' : String(val);
|
|
5324
5419
|
};
|
|
@@ -5357,7 +5452,7 @@ const TextArea = React.forwardRef(({ className, value, label, placeholder, onCha
|
|
|
5357
5452
|
? `${componentId}-helper`
|
|
5358
5453
|
: undefined;
|
|
5359
5454
|
const containerClass = clsx(styles$3.container, disabled && styles$3.disabled, hasError && !disabled && styles$3.error, className);
|
|
5360
|
-
return (jsxRuntime.jsxs("div", { className: containerClass, children: [label && (jsxRuntime.jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxRuntime.jsxs("div", { className: styles$3.inputWrapper, children: [jsxRuntime.jsx("div", { className: styles$3.inputContainer, children: jsxRuntime.jsx("textarea", { ...rest, ref: setTextareaRefs, id: componentId, name: name, value: textareaValue, placeholder: placeholder, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": hasError, "aria-required": required, "aria-describedby": helperId, style: { resize, height }, inputMode: virtualKeyboard ? 'none' : rest.inputMode }) }), jsxRuntime.jsxs("div", { className: styles$3.footer, children: [jsxRuntime.jsx("span", { id: helperId, className: styles$3.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText }), showCharCount && maxLength && (jsxRuntime.jsxs("span", { className: styles$3.charCount, children: [textareaValue.length, "/", maxLength] }))] })] }), virtualKeyboard && (jsxRuntime.jsx("div", { className: "virtualKeyboardWrapper", children: jsxRuntime.jsx(VirtualKeyboard, { variant: "native", type:
|
|
5455
|
+
return (jsxRuntime.jsxs("div", { className: containerClass, children: [label && (jsxRuntime.jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxRuntime.jsxs("div", { className: styles$3.inputWrapper, children: [jsxRuntime.jsx("div", { className: styles$3.inputContainer, children: jsxRuntime.jsx("textarea", { ...rest, ref: setTextareaRefs, id: componentId, name: name, value: textareaValue, placeholder: placeholder, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": hasError, "aria-required": required, "aria-describedby": helperId, style: { resize, height }, inputMode: (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') ? 'none' : rest.inputMode }) }), jsxRuntime.jsxs("div", { className: styles$3.footer, children: [jsxRuntime.jsx("span", { id: helperId, className: styles$3.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText }), showCharCount && maxLength && (jsxRuntime.jsxs("span", { className: styles$3.charCount, children: [textareaValue.length, "/", maxLength] }))] })] }), (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') && (jsxRuntime.jsx("div", { className: "virtualKeyboardWrapper", children: jsxRuntime.jsx(VirtualKeyboard, { variant: "native", type: virtualKeyboard, maxLength: maxLength, value: textareaValue, targetRef: textareaRef, onChange: (val) => {
|
|
5361
5456
|
if (!disabled && (!maxLength || val.length <= maxLength)) {
|
|
5362
5457
|
setTextareaValue(val);
|
|
5363
5458
|
onChange?.(val);
|
|
@@ -6007,6 +6102,7 @@ exports.Badge = Badge;
|
|
|
6007
6102
|
exports.Button = Button;
|
|
6008
6103
|
exports.Calendar = Calendar;
|
|
6009
6104
|
exports.Callout = Callout;
|
|
6105
|
+
exports.Card = Card;
|
|
6010
6106
|
exports.Checkbox = Checkbox;
|
|
6011
6107
|
exports.Chips = MemoizedChips;
|
|
6012
6108
|
exports.Container = Container;
|