@giro-ds/react 9.1.0 → 11.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 +232 -182
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +56 -90
- package/dist/index.esm.js +232 -183
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +3 -3
- 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();
|
|
@@ -110,19 +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
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
[styles$
|
|
120
|
-
[styles$
|
|
121
|
-
[styles$q['buttonWithIcon']]: resolvedIcon && !iconOnly,
|
|
122
|
-
[styles$q[`buttonIconPosition-${iconPosition}`]]: resolvedIcon && !iconOnly,
|
|
123
|
-
[styles$q['buttonNoContent']]: resolvedIcon && !hasContent && !iconOnly,
|
|
124
|
-
[styles$q['buttonFullWidth']]: fullWidth,
|
|
125
|
-
[styles$q['buttonIconOnly']]: iconOnly,
|
|
113
|
+
const buttonClasses = clsx(styles$r.button, styles$r[`button-${variant}`], styles$r[`button-${size}`], {
|
|
114
|
+
[styles$r['disabled']]: disabled,
|
|
115
|
+
[styles$r['buttonLoading']]: loading,
|
|
116
|
+
[styles$r['buttonWithIcon']]: resolvedIcon && !iconOnly,
|
|
117
|
+
[styles$r[`buttonIconPosition-${iconPosition}`]]: resolvedIcon && !iconOnly,
|
|
118
|
+
[styles$r['buttonNoContent']]: resolvedIcon && !hasContent && !iconOnly,
|
|
119
|
+
[styles$r['buttonFullWidth']]: fullWidth,
|
|
120
|
+
[styles$r['buttonIconOnly']]: iconOnly,
|
|
126
121
|
}, className);
|
|
127
122
|
const getAriaLabel = () => {
|
|
128
123
|
if (ariaLabel)
|
|
@@ -148,13 +143,14 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
148
143
|
};
|
|
149
144
|
const renderContent = () => {
|
|
150
145
|
if (iconOnly && !loading) {
|
|
151
|
-
return (jsxRuntime.jsx("span", { className: styles$
|
|
146
|
+
return (jsxRuntime.jsx("span", { className: styles$r.buttonIconOnly, "aria-hidden": "true", children: resolvedIcon }));
|
|
152
147
|
}
|
|
153
148
|
if (loading) {
|
|
154
|
-
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$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
150
|
}
|
|
156
|
-
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$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
152
|
};
|
|
153
|
+
const { style: externalStyle, ...otherRest } = rest;
|
|
158
154
|
const baseProps = {
|
|
159
155
|
ref,
|
|
160
156
|
id: componentId,
|
|
@@ -164,7 +160,11 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
164
160
|
'aria-busy': loading || undefined,
|
|
165
161
|
tabIndex: disabled || loading ? -1 : 0,
|
|
166
162
|
onClick: handleClick,
|
|
167
|
-
...
|
|
163
|
+
...otherRest,
|
|
164
|
+
style: {
|
|
165
|
+
'--giro-scale': scale,
|
|
166
|
+
...externalStyle,
|
|
167
|
+
},
|
|
168
168
|
};
|
|
169
169
|
const getNavigationProps = () => {
|
|
170
170
|
if (href) {
|
|
@@ -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","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(Icon, { className: className, "aria-hidden": true });
|
|
2471
|
+
return jsxRuntime.jsx("span", { className: styles$q.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,10 +2477,10 @@ 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("span", { className: styles$q.chevron_wrapper, children: jsxRuntime.jsx(reactIcons.ChevronUp16Regular, { className: styles$q.caption_year_chevron, "aria-hidden": true }) })) : (jsxRuntime.jsx("span", { className: styles$q.chevron_wrapper, children: jsxRuntime.jsx(reactIcons.ChevronDown16Regular, { className: styles$q.caption_year_chevron, "aria-hidden": true }) }))] })] }));
|
|
2481
2481
|
};
|
|
2482
2482
|
const YEARS_PER_PAGE = 20;
|
|
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 }) => {
|
|
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 }) => {
|
|
2484
2484
|
const animate = true;
|
|
2485
2485
|
const [internalSelected, setInternalSelected] = React.useState(selected ?? undefined);
|
|
2486
2486
|
const [internalDisplayMonth, setInternalDisplayMonth] = React.useState(() => currentDate ?? defaultMonth ?? new Date());
|
|
@@ -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,
|
|
@@ -2557,15 +2557,11 @@ const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, o
|
|
|
2557
2557
|
autoFocus,
|
|
2558
2558
|
"aria-label": ariaLabel,
|
|
2559
2559
|
};
|
|
2560
|
-
const
|
|
2561
|
-
|
|
2562
|
-
1.5: 'scale-1-5',
|
|
2563
|
-
2: 'scale-2-0',
|
|
2564
|
-
}[scale];
|
|
2565
|
-
return (jsxRuntime.jsx(GridCtx.Provider, { value: gridCtxValue, children: jsxRuntime.jsxs("div", { className: clsx(styles$p.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$p.gridOverlay}${gridView === "years" ? ` ${styles$p.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$p.gridOverlayCaption, children: [jsxRuntime.jsx("span", { className: styles$p.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxRuntime.jsxs("button", { type: "button", className: styles$p.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de m\u00EAs", children: [displayedYear, jsxRuntime.jsx(reactIcons.ChevronUp16Regular, { className: styles$p.caption_year_chevron, "aria-hidden": true })] })] }), jsxRuntime.jsx("div", { className: styles$p.gridCells, children: monthsGrid.map(({ index, label, disabled: monthDisabled }) => (jsxRuntime.jsx("button", { type: "button", disabled: monthDisabled, className: `${styles$p.gridCell}${displayedMonthIndex === index ? ` ${styles$p.gridCellActive}` : ""}`, onClick: () => handleGridMonthSelect(index), children: label }, index))) })] })), gridView === "years" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles$p.gridOverlayCaption, children: [jsxRuntime.jsx("span", { className: styles$p.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxRuntime.jsxs("button", { type: "button", className: styles$p.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de ano", children: [displayedYear, jsxRuntime.jsx(reactIcons.ChevronUp16Regular, { className: styles$p.caption_year_chevron, "aria-hidden": true })] }), jsxRuntime.jsxs("div", { className: styles$p.gridOverlayYearsNav, children: [jsxRuntime.jsx("button", { type: "button", className: styles$p.gridNavBtn, disabled: !canGoPrevYears, onClick: () => setYearPageStart((s) => s - YEARS_PER_PAGE), "aria-label": "Anos anteriores", children: jsxRuntime.jsx(reactIcons.ChevronLeft16Regular, { className: styles$p.chevronNavBtnPrev, "aria-hidden": true }) }), jsxRuntime.jsx("button", { type: "button", className: styles$p.gridNavBtn, disabled: !canGoNextYears, onClick: () => setYearPageStart((s) => s + YEARS_PER_PAGE), "aria-label": "Pr\u00F3ximos anos", children: jsxRuntime.jsx(reactIcons.ChevronRight16Regular, { className: styles$p.chevronNavBtnNext, "aria-hidden": true }) })] })] }), jsxRuntime.jsx("div", { className: `${styles$p.gridCells} ${styles$p.gridCellsYears}`, children: yearsInPage.map((year) => (jsxRuntime.jsx("button", { type: "button", className: `${styles$p.gridCell}${displayedYear === year ? ` ${styles$p.gridCellActive}` : ""}`, onClick: () => handleGridYearSelect(year), children: year }, year))) })] }))] }))] }) }));
|
|
2560
|
+
const containerStyle = { '--giro-scale': scale };
|
|
2561
|
+
return (jsxRuntime.jsx(GridCtx.Provider, { value: gridCtxValue, children: jsxRuntime.jsxs("div", { className: clsx(styles$q.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$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("span", { className: styles$q.chevron_wrapper, children: 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("span", { className: styles$q.chevron_wrapper, children: 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("span", { className: styles$q.chevron_wrapper, 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("span", { className: styles$q.chevron_wrapper, 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
2562
|
};
|
|
2567
2563
|
|
|
2568
|
-
var styles$
|
|
2564
|
+
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
2565
|
|
|
2570
2566
|
const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, backgroundColor, textColor, className, id, style, ...rest }) => {
|
|
2571
2567
|
if (process.env.NODE_ENV !== 'production' && (text === '' || (typeof text === 'string' && !text.trim()))) {
|
|
@@ -2575,15 +2571,21 @@ const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, b
|
|
|
2575
2571
|
const titleId = `callout-title-${id || generatedId}`;
|
|
2576
2572
|
const componentId = id || generatedId;
|
|
2577
2573
|
const isAlert = variant === 'alert';
|
|
2578
|
-
const containerClass = clsx(styles$
|
|
2574
|
+
const containerClass = clsx(styles$p.container, styles$p[variant], { [styles$p.withTitle]: title }, className);
|
|
2579
2575
|
const customStyle = {
|
|
2580
2576
|
...style,
|
|
2581
2577
|
...(backgroundColor && { '--callout-bg': `var(--${backgroundColor})` }),
|
|
2582
2578
|
...(textColor && { '--callout-text': `var(--${textColor})` }),
|
|
2583
2579
|
};
|
|
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$
|
|
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$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
2581
|
};
|
|
2586
2582
|
|
|
2583
|
+
var styles$o = {"card":"Card-module__card___LzN-3","card--hoverable":"Card-module__card--hoverable___orpJZ"};
|
|
2584
|
+
|
|
2585
|
+
function Card({ children, className, hoverable }) {
|
|
2586
|
+
return (jsxRuntime.jsx("main", { className: clsx(styles$o['card'], hoverable && styles$o['card--hoverable'], className), children: children }));
|
|
2587
|
+
}
|
|
2588
|
+
|
|
2587
2589
|
const CheckSmall = ({ className = '', width = 12, height = 10, fill = 'white', ...restProps }) => {
|
|
2588
2590
|
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
2591
|
};
|
|
@@ -2594,14 +2596,9 @@ const CheckHalf = ({ className = '', width = 16, height = 16, fill = 'white', ..
|
|
|
2594
2596
|
|
|
2595
2597
|
var styles$n = {"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"};
|
|
2596
2598
|
|
|
2597
|
-
const Checkbox = ({ id, label, onCheckedChange, checked, disabled, className, scale = 1, indeterminate = false, ...rest }) => {
|
|
2599
|
+
const Checkbox = ({ id, label, onCheckedChange, checked, disabled, className, style, scale = 1, indeterminate = false, ...rest }) => {
|
|
2598
2600
|
const componentId = id || React__namespace.useId();
|
|
2599
|
-
|
|
2600
|
-
1: 'scale-1-0',
|
|
2601
|
-
1.5: 'scale-1-5',
|
|
2602
|
-
2: 'scale-2-0',
|
|
2603
|
-
}[scale];
|
|
2604
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$n.container, scaleClass, className), children: [jsxRuntime.jsx("div", { className: clsx(styles$n.wrapperCheckbox, {
|
|
2601
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$n.container, className), style: { '--giro-scale': scale, ...style }, children: [jsxRuntime.jsx("div", { className: clsx(styles$n.wrapperCheckbox, {
|
|
2605
2602
|
[styles$n.disabled]: disabled,
|
|
2606
2603
|
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsxRuntime.jsx(radixUi.Checkbox.Root, { className: styles$n.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$n.indicator, children: indeterminate ? jsxRuntime.jsx(CheckHalf, {}) : jsxRuntime.jsx(CheckSmall, {}) }) }) }), jsxRuntime.jsx("label", { className: clsx(styles$n.label, { [styles$n.disabled]: disabled }), htmlFor: componentId, children: label })] }));
|
|
2607
2604
|
};
|
|
@@ -2609,17 +2606,13 @@ const Checkbox = ({ id, label, onCheckedChange, checked, disabled, className, sc
|
|
|
2609
2606
|
var styles$m = {"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"};
|
|
2610
2607
|
|
|
2611
2608
|
const Chips = ({ children, leftIcon, rightIcon, variant = 'neutral', disabled = false, backgroundColor, textColor, scale = 1, className, style, ...rest }) => {
|
|
2612
|
-
const
|
|
2613
|
-
1: 'scale-1-0',
|
|
2614
|
-
1.5: 'scale-1-5',
|
|
2615
|
-
2: 'scale-2-0',
|
|
2616
|
-
}[scale];
|
|
2617
|
-
const chipsClass = clsx(styles$m.chips, styles$m[variant], scaleClass, {
|
|
2609
|
+
const chipsClass = clsx(styles$m.chips, styles$m[variant], {
|
|
2618
2610
|
[styles$m.disabled]: disabled,
|
|
2619
2611
|
[styles$m.hasLeftIcon]: leftIcon,
|
|
2620
2612
|
[styles$m.hasRightIcon]: rightIcon,
|
|
2621
2613
|
}, className);
|
|
2622
2614
|
const colorStyle = {
|
|
2615
|
+
'--giro-scale': scale,
|
|
2623
2616
|
...(!disabled && backgroundColor && { '--chips-bg': `var(--${backgroundColor})` }),
|
|
2624
2617
|
...(!disabled && textColor && { '--chips-text': `var(--${textColor})` }),
|
|
2625
2618
|
...style,
|
|
@@ -2669,18 +2662,18 @@ const ICON_KEY_MAP = {
|
|
|
2669
2662
|
const SHARED_DISPLAY = {
|
|
2670
2663
|
'{capslock}': iconSlot('capslock'),
|
|
2671
2664
|
'{numbers}': '123',
|
|
2672
|
-
'{abc}': '
|
|
2665
|
+
'{abc}': 'Abc',
|
|
2673
2666
|
'{alt}': '.?!',
|
|
2674
2667
|
'{alt2}': '#+=',
|
|
2675
2668
|
'{emoticon}': iconSlot('emoji'),
|
|
2676
2669
|
'{shift}': iconSlot('shift'),
|
|
2677
2670
|
'{shiftactivated}': iconSlot('shiftactivated'),
|
|
2678
2671
|
'{enter}': 'Enter',
|
|
2679
|
-
'{bksp}':
|
|
2672
|
+
'{bksp}': iconSlot('bksp'),
|
|
2680
2673
|
'{altright}': '.?123',
|
|
2681
2674
|
'{downkeyboard}': iconSlot('downkeyboard'),
|
|
2682
2675
|
'{space}': ' ',
|
|
2683
|
-
'{default}': '
|
|
2676
|
+
'{default}': 'Abc',
|
|
2684
2677
|
};
|
|
2685
2678
|
const LAYOUT_DISPLAY = {
|
|
2686
2679
|
default: SHARED_DISPLAY,
|
|
@@ -2694,40 +2687,40 @@ const removeKeyFromLayout = (layout, key) => Object.fromEntries(Object.entries(l
|
|
|
2694
2687
|
rows.map((row) => row.split(key).join(' ').replace(/\s+/g, ' ').trim()),
|
|
2695
2688
|
]));
|
|
2696
2689
|
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}
|
|
2690
|
+
'1 2 3 4 5 6 7 8 9 0',
|
|
2691
|
+
'q w e r t y u i o p',
|
|
2692
|
+
'a s d f g h j k l ç',
|
|
2693
|
+
'{shift} z x c v b n m {bksp}',
|
|
2694
|
+
'{numbers} {alt} {space} . {enter}',
|
|
2702
2695
|
];
|
|
2703
2696
|
const NUMPAD = ['1 2 3', '4 5 6', '7 8 9', '{bksp} 0 {abc}'];
|
|
2704
2697
|
const SHARED_LAYOUTS = {
|
|
2705
2698
|
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}
|
|
2699
|
+
'1 2 3 4 5 6 7 8 9 0',
|
|
2700
|
+
'Q W E R T Y U I O P',
|
|
2701
|
+
'A S D F G H J K L Ç',
|
|
2702
|
+
'{capslock} Z X C V B N M {bksp}',
|
|
2703
|
+
'{numbers} {alt} {emoticon} {space} . {enter}',
|
|
2711
2704
|
],
|
|
2712
2705
|
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}
|
|
2706
|
+
'1 2 3 4 5 6 7 8 9 0',
|
|
2707
|
+
'Q W E R T Y U I O P',
|
|
2708
|
+
'A S D F G H J K L Ç',
|
|
2709
|
+
'{shiftactivated} Z X C V B N M {bksp}',
|
|
2710
|
+
'{numbers} {alt} {emoticon} {space} . {enter}',
|
|
2718
2711
|
],
|
|
2719
2712
|
numbers: NUMPAD,
|
|
2720
2713
|
alt: [
|
|
2721
2714
|
'1 2 3 4 5 6 7 8 9 0',
|
|
2722
2715
|
`- / : ; ( ) $ & @ "`,
|
|
2723
2716
|
'{alt2} . , ? ! ´ {bksp}',
|
|
2724
|
-
'{default} {emoticon} {space} {
|
|
2717
|
+
'{default} {emoticon} {space} {enter}',
|
|
2725
2718
|
],
|
|
2726
2719
|
alt2: [
|
|
2727
2720
|
'[ ] { } # % ^ * + =',
|
|
2728
2721
|
'_ \\ | ~ < > ¢ £ ¥ •',
|
|
2729
2722
|
`{alt} . , ? ! ' {bksp}`,
|
|
2730
|
-
'{default} {emoticon} {space} {
|
|
2723
|
+
'{default} {emoticon} {space} {enter}',
|
|
2731
2724
|
],
|
|
2732
2725
|
emoticon: [
|
|
2733
2726
|
'😀 😊 😅 😂 🙂 😉 😍 😛 😠 😎 {bksp}',
|
|
@@ -2786,20 +2779,20 @@ const SHIFT_TOGGLES = {
|
|
|
2786
2779
|
alt2: 'alt',
|
|
2787
2780
|
};
|
|
2788
2781
|
|
|
2789
|
-
var styles$j = {"container":"VirtualKeyboard-module__container___A-e0I","
|
|
2782
|
+
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
2783
|
|
|
2791
2784
|
const LONG_PRESS_DELAY_MS = 400;
|
|
2792
2785
|
const ACCENT_OPTIONS = {
|
|
2793
|
-
a: ['á', 'à', 'â', 'ã', 'ä', 'å', 'æ'],
|
|
2794
|
-
e: ['é', 'è', 'ê', 'ë'],
|
|
2795
|
-
i: ['í', 'ì', 'î', 'ï'],
|
|
2796
|
-
o: ['ó', 'ò', 'ô', 'õ', 'ö', 'ø', 'œ', '
|
|
2797
|
-
u: ['ú', 'ù', 'û', 'ü'],
|
|
2798
|
-
y: ['ý', 'ÿ'],
|
|
2799
|
-
n: ['ñ'],
|
|
2800
|
-
c: ['ç'],
|
|
2801
|
-
'?': ['¿'],
|
|
2802
|
-
'!': ['¡'],
|
|
2786
|
+
a: ['a', 'á', 'à', 'â', 'ã', 'ä', 'å', 'æ', '@', 'ª'],
|
|
2787
|
+
e: ['e', 'é', 'è', 'ê', 'ë', 'ę', 'ē', 'ė', '€'],
|
|
2788
|
+
i: ['i', 'í', 'ì', 'î', 'ï', 'ī', 'į', 'ı'],
|
|
2789
|
+
o: ['o', 'ó', 'ò', 'ô', 'õ', 'ö', 'ō', 'ø', 'œ', 'º'],
|
|
2790
|
+
u: ['u', 'ú', 'ù', 'û', 'ü', 'ū', 'ů', 'ű'],
|
|
2791
|
+
y: ['y', 'ý', 'ÿ', 'ŷ', 'ȳ'],
|
|
2792
|
+
n: ['n', 'ñ'],
|
|
2793
|
+
c: ['c', 'ç'],
|
|
2794
|
+
'?': ['?', '¿'],
|
|
2795
|
+
'!': ['!', '¡'],
|
|
2803
2796
|
};
|
|
2804
2797
|
/**
|
|
2805
2798
|
* Componente VirtualKeyboard — teclado virtual on-screen para entradas controladas.
|
|
@@ -2835,6 +2828,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2835
2828
|
const visualType = NATIVE_LAYOUT_KEYS.has(type) ? type : 'default';
|
|
2836
2829
|
const [isOpen, setIsOpen] = React.useState(variant !== 'native');
|
|
2837
2830
|
const hideTimeoutRef = React.useRef(null);
|
|
2831
|
+
const scrollTimeoutRef = React.useRef(null);
|
|
2838
2832
|
const longPressTimeoutRef = React.useRef(null);
|
|
2839
2833
|
const suppressNextInputRef = React.useRef(null);
|
|
2840
2834
|
const heldAccentKeyRef = React.useRef(null);
|
|
@@ -2844,9 +2838,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2844
2838
|
const keyboardInstanceRef = React.useRef(null);
|
|
2845
2839
|
const accentMenuRef = React.useRef(null);
|
|
2846
2840
|
const accentButtonRef = React.useRef(null);
|
|
2847
|
-
const accentMenuOpenRef = React.useRef(false);
|
|
2848
2841
|
const valueRef = React.useRef(value);
|
|
2849
2842
|
const [iconSlots, setIconSlots] = React.useState([]);
|
|
2843
|
+
const [keyPreview, setKeyPreview] = React.useState(null);
|
|
2844
|
+
const [keyPreviewOffsetX, setKeyPreviewOffsetX] = React.useState(0);
|
|
2845
|
+
const keyPreviewRef = React.useRef(null);
|
|
2846
|
+
const [containerWidth, setContainerWidth] = React.useState(Infinity);
|
|
2850
2847
|
React.useEffect(() => {
|
|
2851
2848
|
valueRef.current = value;
|
|
2852
2849
|
}, [value]);
|
|
@@ -2880,6 +2877,17 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2880
2877
|
}
|
|
2881
2878
|
}, 150);
|
|
2882
2879
|
}, [variant, targetRef]);
|
|
2880
|
+
const scrollTargetIntoView = React.useCallback(() => {
|
|
2881
|
+
const targetEl = targetRef?.current;
|
|
2882
|
+
if (!targetEl)
|
|
2883
|
+
return;
|
|
2884
|
+
const keyboardHeight = keyboardWrapperRef.current?.offsetHeight ?? 0;
|
|
2885
|
+
const rect = targetEl.getBoundingClientRect();
|
|
2886
|
+
const visibleBottom = window.innerHeight - keyboardHeight - 8;
|
|
2887
|
+
if (rect.bottom > visibleBottom) {
|
|
2888
|
+
window.scrollBy({ top: rect.bottom - visibleBottom, behavior: 'smooth' });
|
|
2889
|
+
}
|
|
2890
|
+
}, [targetRef]);
|
|
2883
2891
|
React.useEffect(() => {
|
|
2884
2892
|
if (variant !== 'native')
|
|
2885
2893
|
return;
|
|
@@ -2891,7 +2899,10 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2891
2899
|
const handleFocus = () => {
|
|
2892
2900
|
if (hideTimeoutRef.current !== null)
|
|
2893
2901
|
clearTimeout(hideTimeoutRef.current);
|
|
2902
|
+
if (scrollTimeoutRef.current !== null)
|
|
2903
|
+
clearTimeout(scrollTimeoutRef.current);
|
|
2894
2904
|
setIsOpen(true);
|
|
2905
|
+
scrollTimeoutRef.current = setTimeout(scrollTargetIntoView, 50);
|
|
2895
2906
|
};
|
|
2896
2907
|
const handleBlur = () => {
|
|
2897
2908
|
scheduleHideIfBlurred();
|
|
@@ -2903,8 +2914,26 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2903
2914
|
el.removeEventListener('blur', handleBlur);
|
|
2904
2915
|
if (hideTimeoutRef.current !== null)
|
|
2905
2916
|
clearTimeout(hideTimeoutRef.current);
|
|
2917
|
+
if (scrollTimeoutRef.current !== null)
|
|
2918
|
+
clearTimeout(scrollTimeoutRef.current);
|
|
2906
2919
|
};
|
|
2907
|
-
}, [variant, targetRef, scheduleHideIfBlurred]);
|
|
2920
|
+
}, [variant, targetRef, scheduleHideIfBlurred, scrollTargetIntoView]);
|
|
2921
|
+
React.useEffect(() => {
|
|
2922
|
+
if (variant !== 'native')
|
|
2923
|
+
return;
|
|
2924
|
+
const wrapper = keyboardWrapperRef.current;
|
|
2925
|
+
if (!wrapper)
|
|
2926
|
+
return;
|
|
2927
|
+
const preventIOSBlur = (event) => {
|
|
2928
|
+
const targetEl = event.target;
|
|
2929
|
+
!!targetEl.closest('.hg-button');
|
|
2930
|
+
event.preventDefault();
|
|
2931
|
+
};
|
|
2932
|
+
wrapper.addEventListener('touchstart', preventIOSBlur, { passive: false });
|
|
2933
|
+
return () => {
|
|
2934
|
+
wrapper.removeEventListener('touchstart', preventIOSBlur);
|
|
2935
|
+
};
|
|
2936
|
+
}, [variant]);
|
|
2908
2937
|
React.useEffect(() => {
|
|
2909
2938
|
setLayoutName('default');
|
|
2910
2939
|
setCapsLockOn(false);
|
|
@@ -2940,6 +2969,21 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2940
2969
|
document.removeEventListener('keydown', handleEscape);
|
|
2941
2970
|
};
|
|
2942
2971
|
}, [accentMenu, closeAccentMenu]);
|
|
2972
|
+
React.useLayoutEffect(() => {
|
|
2973
|
+
if (!keyPreview || !keyPreviewRef.current)
|
|
2974
|
+
return;
|
|
2975
|
+
const margin = 8;
|
|
2976
|
+
const rect = keyPreviewRef.current.getBoundingClientRect();
|
|
2977
|
+
if (rect.width <= 0 || rect.height <= 0)
|
|
2978
|
+
return;
|
|
2979
|
+
const minCenter = margin + rect.width / 2;
|
|
2980
|
+
const maxCenter = window.innerWidth - margin - rect.width / 2;
|
|
2981
|
+
const clampedCenter = Math.min(maxCenter, Math.max(minCenter, keyPreview.left));
|
|
2982
|
+
const nextOffset = clampedCenter - keyPreview.left;
|
|
2983
|
+
if (Math.abs(nextOffset - keyPreviewOffsetX) > 0.5) {
|
|
2984
|
+
setKeyPreviewOffsetX(nextOffset);
|
|
2985
|
+
}
|
|
2986
|
+
}, [keyPreview, keyPreviewOffsetX]);
|
|
2943
2987
|
React.useLayoutEffect(() => {
|
|
2944
2988
|
if (!accentMenu || !accentMenuRef.current)
|
|
2945
2989
|
return;
|
|
@@ -2955,6 +2999,16 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2955
2999
|
setAccentMenuOffsetX(nextOffset);
|
|
2956
3000
|
}
|
|
2957
3001
|
}, [accentMenu, accentMenuOffsetX]);
|
|
3002
|
+
React.useEffect(() => {
|
|
3003
|
+
const wrapper = keyboardWrapperRef.current;
|
|
3004
|
+
if (!wrapper)
|
|
3005
|
+
return;
|
|
3006
|
+
const ro = new ResizeObserver((entries) => {
|
|
3007
|
+
setContainerWidth(entries[0]?.contentRect.width ?? Infinity);
|
|
3008
|
+
});
|
|
3009
|
+
ro.observe(wrapper);
|
|
3010
|
+
return () => ro.disconnect();
|
|
3011
|
+
}, []);
|
|
2958
3012
|
React.useEffect(() => {
|
|
2959
3013
|
if (!keyboardWrapperRef.current)
|
|
2960
3014
|
return;
|
|
@@ -2982,13 +3036,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2982
3036
|
suppressNextInputRef.current = null;
|
|
2983
3037
|
clearLongPressTimeout();
|
|
2984
3038
|
}, [layoutName, type, closeAccentMenu, clearLongPressTimeout]);
|
|
2985
|
-
React.useEffect(() => {
|
|
2986
|
-
accentMenuOpenRef.current = !!accentMenu;
|
|
2987
|
-
}, [accentMenu]);
|
|
2988
3039
|
React.useEffect(() => {
|
|
2989
3040
|
const updateAccentPosition = () => {
|
|
2990
|
-
if (!accentMenuOpenRef.current)
|
|
2991
|
-
return;
|
|
2992
3041
|
const btn = accentButtonRef.current;
|
|
2993
3042
|
if (!btn)
|
|
2994
3043
|
return;
|
|
@@ -3013,20 +3062,31 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3013
3062
|
const buttonEl = event.target.closest('.hg-button');
|
|
3014
3063
|
if (!buttonEl || !keyboardWrapper.contains(buttonEl))
|
|
3015
3064
|
return;
|
|
3065
|
+
event.preventDefault();
|
|
3016
3066
|
const sourceKey = buttonEl.getAttribute('data-skbtn') ?? '';
|
|
3017
3067
|
heldAccentKeyRef.current = null;
|
|
3018
3068
|
longPressTriggeredRef.current = false;
|
|
3069
|
+
if (sourceKey && !sourceKey.startsWith('{') && type !== 'numeric' && containerWidth <= 768) {
|
|
3070
|
+
const buttonRect = buttonEl.getBoundingClientRect();
|
|
3071
|
+
setKeyPreviewOffsetX(0);
|
|
3072
|
+
setKeyPreview({
|
|
3073
|
+
char: sourceKey,
|
|
3074
|
+
top: buttonRect.top - 4,
|
|
3075
|
+
left: buttonRect.left + buttonRect.width / 2,
|
|
3076
|
+
});
|
|
3077
|
+
}
|
|
3019
3078
|
if (!sourceKey || sourceKey.startsWith('{'))
|
|
3020
3079
|
return;
|
|
3080
|
+
heldAccentKeyRef.current = sourceKey;
|
|
3081
|
+
clearLongPressTimeout();
|
|
3021
3082
|
const accentOptions = ACCENT_OPTIONS[sourceKey.toLowerCase()];
|
|
3022
3083
|
if (!accentOptions)
|
|
3023
3084
|
return;
|
|
3024
|
-
heldAccentKeyRef.current = sourceKey;
|
|
3025
|
-
clearLongPressTimeout();
|
|
3026
3085
|
longPressTimeoutRef.current = setTimeout(() => {
|
|
3027
3086
|
const buttonRect = buttonEl.getBoundingClientRect();
|
|
3028
3087
|
const isUpperCaseKey = sourceKey === sourceKey.toUpperCase();
|
|
3029
3088
|
longPressTriggeredRef.current = true;
|
|
3089
|
+
setKeyPreview(null);
|
|
3030
3090
|
accentButtonRef.current = buttonEl;
|
|
3031
3091
|
setAccentMenu({
|
|
3032
3092
|
sourceKey,
|
|
@@ -3039,11 +3099,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3039
3099
|
setAccentMenuOffsetX(0);
|
|
3040
3100
|
suppressNextInputRef.current = sourceKey;
|
|
3041
3101
|
}, LONG_PRESS_DELAY_MS);
|
|
3042
|
-
}, [clearLongPressTimeout]);
|
|
3102
|
+
}, [clearLongPressTimeout, type, containerWidth]);
|
|
3043
3103
|
const handleLongPressEnd = React.useCallback(() => {
|
|
3044
3104
|
const heldKey = heldAccentKeyRef.current;
|
|
3045
3105
|
const longPressTriggered = longPressTriggeredRef.current;
|
|
3046
3106
|
const baseLayout = type === 'numeric' ? 'abc' : 'default';
|
|
3107
|
+
setKeyPreview(null);
|
|
3047
3108
|
isKeyboardInteractingRef.current = false;
|
|
3048
3109
|
clearLongPressTimeout();
|
|
3049
3110
|
if (heldKey && !longPressTriggered) {
|
|
@@ -3204,6 +3265,17 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3204
3265
|
return;
|
|
3205
3266
|
onChange?.(input);
|
|
3206
3267
|
}, [maxLength, onChange, syncKeyboardInput]);
|
|
3268
|
+
const portalSizes = React.useMemo(() => {
|
|
3269
|
+
if (containerWidth <= 360)
|
|
3270
|
+
return { preview: 42, option: 44, fontSize: 'var(--font-size-16)' };
|
|
3271
|
+
if (containerWidth <= 390)
|
|
3272
|
+
return { preview: 44, option: 44, fontSize: 'var(--font-size-18)' };
|
|
3273
|
+
if (containerWidth <= 480)
|
|
3274
|
+
return { preview: 46, option: 46, fontSize: 'var(--font-size-20)' };
|
|
3275
|
+
if (containerWidth <= 768)
|
|
3276
|
+
return { preview: 48, option: 48, fontSize: undefined };
|
|
3277
|
+
return { preview: 50, option: 50, fontSize: undefined };
|
|
3278
|
+
}, [containerWidth]);
|
|
3207
3279
|
const keyboardDisplay = React.useMemo(() => {
|
|
3208
3280
|
const baseDisplay = LAYOUT_DISPLAY[visualType];
|
|
3209
3281
|
if (!baseDisplay)
|
|
@@ -3235,21 +3307,31 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3235
3307
|
}
|
|
3236
3308
|
return reactDom.createPortal(React.createElement(Icon), slot, `icon-${key}`);
|
|
3237
3309
|
});
|
|
3238
|
-
})(),
|
|
3310
|
+
})(), keyPreview && typeof document !== 'undefined' && reactDom.createPortal(jsxRuntime.jsx("div", { ref: keyPreviewRef, className: styles$j.keyPreview, style: {
|
|
3311
|
+
top: keyPreview.top,
|
|
3312
|
+
left: keyPreview.left + keyPreviewOffsetX,
|
|
3313
|
+
width: portalSizes.preview,
|
|
3314
|
+
height: portalSizes.preview,
|
|
3315
|
+
...(portalSizes.fontSize ? { fontSize: portalSizes.fontSize } : {}),
|
|
3316
|
+
}, "aria-hidden": true, children: keyPreview.char }), document.body), accentMenu && (typeof document !== 'undefined' &&
|
|
3239
3317
|
reactDom.createPortal(jsxRuntime.jsx("div", { ref: accentMenuRef, className: styles$j.accentMenu, style: {
|
|
3240
3318
|
top: accentMenu.top,
|
|
3241
3319
|
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
|
-
|
|
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$j.accentMenuRow, children: rowOptions.map((option) => (jsxRuntime.jsx("button", { type: "button", className: styles$j.accentOption, style: {
|
|
3321
|
+
minWidth: portalSizes.option,
|
|
3322
|
+
height: portalSizes.option,
|
|
3323
|
+
...(portalSizes.fontSize ? { fontSize: portalSizes.fontSize } : {}),
|
|
3324
|
+
}, onPointerDown: (event) => {
|
|
3325
|
+
event.preventDefault();
|
|
3326
|
+
event.stopPropagation();
|
|
3327
|
+
}, onClick: () => handleAccentSelect(option), children: option }, `${accentMenu.sourceKey}-${option}`))) }, rowIndex))) }), document.body))] })) : null;
|
|
3246
3328
|
if (variant === 'native' && typeof document !== 'undefined') {
|
|
3247
3329
|
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
3330
|
}
|
|
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] }));
|
|
3331
|
+
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
3332
|
};
|
|
3251
3333
|
|
|
3252
|
-
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"};
|
|
3334
|
+
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","clearButtonIcon":"TextField-module__clearButtonIcon___Z2iyc"};
|
|
3253
3335
|
|
|
3254
3336
|
const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
3255
3337
|
if (required && value.trim() === '') {
|
|
@@ -3263,8 +3345,11 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
|
3263
3345
|
|
|
3264
3346
|
var styles$h = {"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"};
|
|
3265
3347
|
|
|
3266
|
-
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) => {
|
|
3267
|
-
const
|
|
3348
|
+
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false, scale = 1, }) => {
|
|
3349
|
+
const containerStyle = {
|
|
3350
|
+
'--giro-scale': scale,
|
|
3351
|
+
};
|
|
3352
|
+
const container = (jsxRuntime.jsxs("div", { className: clsx(styles$h.labelContainer, disabled && styles$h.disabledContainer), style: containerStyle, children: [jsxRuntime.jsxs(radixUi.Label.Root, { className: clsx(styles$h.wrapperLabel, error && !disabled && styles$h.errorLabel, disabled && styles$h.disabledLabel, className), htmlFor: htmlFor, children: [children, required && jsxRuntime.jsx("span", { className: styles$h.requiredLabel, children: "*" })] }), tooltip && (jsxRuntime.jsx("span", { className: disabled ? styles$h.disabledIcon : error ?
|
|
3268
3353
|
styles$h.errorIcon : styles$h.infoIcon, children: jsxRuntime.jsx(reactIcons.Info12Regular, {}) }))] }));
|
|
3269
3354
|
if (tooltip) {
|
|
3270
3355
|
return (jsxRuntime.jsx(Tooltip, { side: side, align: align, text: tooltipText || '', children: container }));
|
|
@@ -3272,7 +3357,7 @@ const LabelComponent = ({ children, htmlFor, required = false, tooltip = false,
|
|
|
3272
3357
|
return container;
|
|
3273
3358
|
};
|
|
3274
3359
|
|
|
3275
|
-
const TextField$1 = React.forwardRef(({ className, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength
|
|
3360
|
+
const TextField$1 = React.forwardRef(({ className, style, 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
3361
|
const normalizeValue = (val) => {
|
|
3277
3362
|
return val === undefined || val === null ? '' : String(val);
|
|
3278
3363
|
};
|
|
@@ -3332,24 +3417,20 @@ const TextField$1 = React.forwardRef(({ className, value, label, placeholder, ty
|
|
|
3332
3417
|
: helperText
|
|
3333
3418
|
? `${componentId}-helper`
|
|
3334
3419
|
: undefined;
|
|
3335
|
-
const
|
|
3336
|
-
|
|
3337
|
-
1.5: 'scale-1-5',
|
|
3338
|
-
2: 'scale-2-0',
|
|
3339
|
-
}[scale];
|
|
3340
|
-
const containerClass = clsx(styles$i.container, scaleClass, {
|
|
3341
|
-
[styles$i.disabled]: disabled,
|
|
3342
|
-
[styles$i.error]: hasError && !disabled,
|
|
3343
|
-
[styles$i.errorWithMessage]: Boolean(error) && Boolean(errorMessage) && !disabled,
|
|
3420
|
+
const containerStyle = { '--giro-scale': scale };
|
|
3421
|
+
const containerClass = clsx(styles$i.container, {
|
|
3344
3422
|
[styles$i.attachedToVirtualKeyboard]: attachedToVirtualKeyboard,
|
|
3423
|
+
[styles$i.disabled]: disabled,
|
|
3424
|
+
[styles$i.error]: error,
|
|
3425
|
+
[styles$i.errorWithMessage]: !!errorMessage,
|
|
3345
3426
|
[className]: className,
|
|
3346
3427
|
});
|
|
3347
|
-
return (jsxRuntime.jsxs("div", { className: containerClass, children: [label && (jsxRuntime.jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side:
|
|
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$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
3429
|
[styles$i.inputWithIcon]: showCustomIcon || showClearIcon,
|
|
3349
3430
|
}) }), showCustomIcon && jsxRuntime.jsx("span", { className: styles$i.icon, children: icon }), showClearIcon && (jsxRuntime.jsx("button", { type: "button", className: styles$i.clearButton, onMouseDown: (e) => {
|
|
3350
3431
|
e.preventDefault();
|
|
3351
3432
|
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:
|
|
3433
|
+
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsxRuntime.jsx("span", { className: styles$i.clearButtonIcon, 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
3434
|
if (!disabled && (!maxLength || val.length <= maxLength)) {
|
|
3354
3435
|
setInputValue(val);
|
|
3355
3436
|
onChange?.(val);
|
|
@@ -3451,9 +3532,10 @@ function validatePartialDate(value, locale = 'pt-br') {
|
|
|
3451
3532
|
return 'incomplete';
|
|
3452
3533
|
}
|
|
3453
3534
|
|
|
3454
|
-
const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign = 'start', helperText, required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, 'data-testid': testId,
|
|
3535
|
+
const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign = 'start', helperText, required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, 'data-testid': testId, scale = 1, className, style, ...rest }) => {
|
|
3455
3536
|
const fieldId = React.useId();
|
|
3456
3537
|
const calendarId = `${fieldId}-calendar`;
|
|
3538
|
+
const containerStyle = { '--giro-scale': scale };
|
|
3457
3539
|
const isControlled = value !== undefined;
|
|
3458
3540
|
const [internalDate, setInternalDate] = React.useState(defaultValue || null);
|
|
3459
3541
|
const [tempInputValue, setTempInputValue] = React.useState('');
|
|
@@ -3468,11 +3550,6 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
|
|
|
3468
3550
|
const combinedHelperText = externalError && helperText
|
|
3469
3551
|
? `${helperText} • ${externalError}`
|
|
3470
3552
|
: externalError || helperText || '';
|
|
3471
|
-
const scaleClass = {
|
|
3472
|
-
1: 'scale-1-0',
|
|
3473
|
-
1.5: 'scale-1-5',
|
|
3474
|
-
2: 'scale-2-0',
|
|
3475
|
-
}[datePickerScale];
|
|
3476
3553
|
React.useEffect(() => {
|
|
3477
3554
|
function handleClickOutside(event) {
|
|
3478
3555
|
const target = event.target;
|
|
@@ -3585,9 +3662,9 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
|
|
|
3585
3662
|
}
|
|
3586
3663
|
}
|
|
3587
3664
|
};
|
|
3588
|
-
return (jsxRuntime.jsx("div", { ref: wrapperRef, className: clsx(styles$g.datePicker,
|
|
3665
|
+
return (jsxRuntime.jsx("div", { ref: wrapperRef, className: clsx(styles$g.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsxRuntime.jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsxRuntime.jsx(TextField, { className: styles$g.textfieldContainer, type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$g.datePickerIcon, disabled && styles$g.datePickerIconDisabled) }), onChange: (e) => {
|
|
3589
3666
|
handleTextFieldChange(String(e));
|
|
3590
|
-
}, 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, 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:
|
|
3667
|
+
}, 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: () => {
|
|
3591
3668
|
handleDateChange(null);
|
|
3592
3669
|
setCurrentDate(new Date());
|
|
3593
3670
|
} }), side: calendarSide, align: calendarAlign, sideOffset: 8 }) }));
|
|
@@ -3681,18 +3758,13 @@ const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled
|
|
|
3681
3758
|
|
|
3682
3759
|
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
3760
|
|
|
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,
|
|
3761
|
+
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, style, virtualKeyboard, 'data-testid': testId, ...rest }, ref) => {
|
|
3685
3762
|
const [internalValue, setInternalValue] = React.useState('');
|
|
3686
3763
|
const { internalRef: inputRef, setRefs: setInputRefs } = useInputKeyboardValue(ref);
|
|
3687
3764
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
3688
3765
|
const currentValue = isControlled ? value : internalValue;
|
|
3689
3766
|
const generatedId = React.useId();
|
|
3690
3767
|
const inputId = id || generatedId;
|
|
3691
|
-
const scaleClass = {
|
|
3692
|
-
1: 'scale-1-0',
|
|
3693
|
-
1.5: 'scale-1-5',
|
|
3694
|
-
2: 'scale-2-0',
|
|
3695
|
-
}[scale];
|
|
3696
3768
|
const handleChange = (e) => {
|
|
3697
3769
|
if (disabled)
|
|
3698
3770
|
return;
|
|
@@ -3739,12 +3811,12 @@ const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado',
|
|
|
3739
3811
|
}
|
|
3740
3812
|
onKeyDown?.(e);
|
|
3741
3813
|
};
|
|
3742
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$c.search,
|
|
3814
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$c.search, { [styles$c.disabled]: disabled }, className), style: { '--giro-scale': scale, ...style }, onClick: onClick, onMouseDown: onMouseDown, role: onClick || onMouseDown ? "button" : undefined, tabIndex: onClick || onMouseDown ? 0 : undefined, onKeyDown: onClick || onMouseDown ? (e) => {
|
|
3743
3815
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
3744
3816
|
e.preventDefault();
|
|
3745
3817
|
onClick?.(e);
|
|
3746
3818
|
}
|
|
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:
|
|
3819
|
+
} : 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
3820
|
if (disabled)
|
|
3749
3821
|
return;
|
|
3750
3822
|
if (isControlled) {
|
|
@@ -3881,15 +3953,10 @@ var styles$b = {"zds-list-item__container":"ListItem-module__zds-list-item__cont
|
|
|
3881
3953
|
|
|
3882
3954
|
var styles$a = {"root":"Radio-module__root___7ElY2","wrapper":"Radio-module__wrapper___NYQ1y","disabled":"Radio-module__disabled___RZ0be","labelText":"Radio-module__labelText___Wkb41","item":"Radio-module__item___3Kvj7","itemWrapper":"Radio-module__itemWrapper___5KbM1","labelWrapper":"Radio-module__labelWrapper___LOHmJ","indicator":"Radio-module__indicator___TJ5hz"};
|
|
3883
3955
|
|
|
3884
|
-
const Radio = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', scale = 1, className, ...rest }) => {
|
|
3956
|
+
const Radio = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', scale = 1, className, style, ...rest }) => {
|
|
3885
3957
|
const generatedId = React.useId();
|
|
3886
3958
|
const componentId = id || generatedId;
|
|
3887
|
-
|
|
3888
|
-
1: 'scale-1-0',
|
|
3889
|
-
1.5: 'scale-1-5',
|
|
3890
|
-
2: 'scale-2-0',
|
|
3891
|
-
}[scale];
|
|
3892
|
-
return (jsxRuntime.jsx(radixUi.RadioGroup.Root, { id: componentId, className: clsx(styles$a.root, scaleClass, className), defaultValue: defaultValue, onValueChange: onValueChange, name: name, "aria-label": ariaLabel, "data-orientation": orientation, orientation: orientation, ...rest, children: items.map(({ id, value, disabled, label }) => {
|
|
3959
|
+
return (jsxRuntime.jsx(radixUi.RadioGroup.Root, { id: componentId, className: clsx(styles$a.root, className), style: { '--giro-scale': scale, ...style }, defaultValue: defaultValue, onValueChange: onValueChange, name: name, "aria-label": ariaLabel, "data-orientation": orientation, orientation: orientation, ...rest, children: items.map(({ id, value, disabled, label }) => {
|
|
3893
3960
|
const itemKey = id ?? value;
|
|
3894
3961
|
const uniqueId = `${componentId}-item-${value}`;
|
|
3895
3962
|
return (jsxRuntime.jsx("div", { className: clsx(styles$a.wrapper, { [styles$a.disabled]: disabled }), children: jsxRuntime.jsxs("label", { className: styles$a.labelWrapper, htmlFor: uniqueId, children: [jsxRuntime.jsx("div", { className: styles$a.itemWrapper, children: jsxRuntime.jsx(radixUi.RadioGroup.Item, { disabled: disabled, className: styles$a.item, value: value, id: uniqueId, "data-disabled": disabled, children: jsxRuntime.jsx(radixUi.RadioGroup.Indicator, { className: styles$a.indicator }) }) }), jsxRuntime.jsx("span", { className: styles$a.labelText, children: label })] }) }, itemKey));
|
|
@@ -4110,7 +4177,7 @@ const useSearchLogic = ({ items, searchValue, searchTerm, enableApiSearch, onApi
|
|
|
4110
4177
|
return { filteredItems: filteredItems() };
|
|
4111
4178
|
};
|
|
4112
4179
|
|
|
4113
|
-
const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onScrollEnd, isLoadingMore, onApiSearch, enableApiSearch, selectedItems, onOpenChange, align = 'start',
|
|
4180
|
+
const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onScrollEnd, isLoadingMore, onApiSearch, enableApiSearch, selectedItems, onOpenChange, align = 'start', scale = 1, className, style, maxHeight = 400, ...rest }) => {
|
|
4114
4181
|
const itemsWrapperRef = React.useRef(null);
|
|
4115
4182
|
const hasReachedEndRef = React.useRef(false);
|
|
4116
4183
|
const observerRef = React.useRef(null);
|
|
@@ -4120,14 +4187,10 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4120
4187
|
const [searchInput, setSearchInput] = React.useState('');
|
|
4121
4188
|
const [searchTerm, setSearchTerm] = React.useState('');
|
|
4122
4189
|
const maxHeightStyle = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
|
|
4123
|
-
const
|
|
4124
|
-
|
|
4125
|
-
1.5: 'scale-1-5',
|
|
4126
|
-
2: 'scale-2-0',
|
|
4127
|
-
}[dropdownScale];
|
|
4128
|
-
const triggerWithScale = React.isValidElement(children) && buttonScale
|
|
4190
|
+
const containerStyle = { '--giro-scale': scale };
|
|
4191
|
+
const triggerWithScale = React.isValidElement(children)
|
|
4129
4192
|
? React.cloneElement(children, {
|
|
4130
|
-
scale: children.props?.scale ??
|
|
4193
|
+
scale: children.props?.scale ?? scale,
|
|
4131
4194
|
})
|
|
4132
4195
|
: children;
|
|
4133
4196
|
const { open, setOpen, handleItemSelect: handleItemSelectLogic, isItemSelected } = useMenuLogic({
|
|
@@ -4232,7 +4295,7 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4232
4295
|
hasReachedEndRef.current = false;
|
|
4233
4296
|
}
|
|
4234
4297
|
};
|
|
4235
|
-
return (jsxRuntime.jsxs(radixUi.DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(radixUi.DropdownMenu.Trigger, { asChild: true, children: triggerWithScale }), jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { children: jsxRuntime.jsxs(radixUi.DropdownMenu.Content, { className: clsx(styles$9.content,
|
|
4298
|
+
return (jsxRuntime.jsxs(radixUi.DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(radixUi.DropdownMenu.Trigger, { asChild: true, children: triggerWithScale }), jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { children: jsxRuntime.jsxs(radixUi.DropdownMenu.Content, { className: clsx(styles$9.content, className), style: { ...containerStyle, ...style }, sideOffset: 8, align: align, onPointerDown: () => { closedByPointerRef.current = true; }, onInteractOutside: () => { closedByPointerRef.current = true; }, onCloseAutoFocus: (e) => {
|
|
4236
4299
|
if (closedByPointerRef.current) {
|
|
4237
4300
|
e.preventDefault();
|
|
4238
4301
|
closedByPointerRef.current = false;
|
|
@@ -4264,7 +4327,7 @@ const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeO
|
|
|
4264
4327
|
|
|
4265
4328
|
var styles$7 = {"quantity":"Quantity-module__quantity___-vndR","quantityInput":"Quantity-module__quantityInput___xZG-v","disabled":"Quantity-module__disabled___X6p5l"};
|
|
4266
4329
|
|
|
4267
|
-
const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, decimalPlaces = 2, size = 'lg', id, valueIncrement = 1, scale = 1, className, inputSize, minValue = 0, maxValue = 9999, decrementAriaLabel = 'Decrease quantity', incrementAriaLabel = 'Increase quantity', inputAriaLabel = 'Quantity', ...rest }) => {
|
|
4330
|
+
const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, decimalPlaces = 2, size = 'lg', id, valueIncrement = 1, scale = 1, className, style, inputSize, minValue = 0, maxValue = 9999, decrementAriaLabel = 'Decrease quantity', incrementAriaLabel = 'Increase quantity', inputAriaLabel = 'Quantity', ...rest }) => {
|
|
4268
4331
|
const initialValue = Math.min(Math.max(value, minValue), maxValue);
|
|
4269
4332
|
const [internalValue, setInternalValue] = React.useState(initialValue);
|
|
4270
4333
|
const [inputValue, setInputValue] = React.useState(decimal ? initialValue.toFixed(decimalPlaces) : String(initialValue));
|
|
@@ -4443,17 +4506,12 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
|
|
|
4443
4506
|
const inputSizeValue = inputSize !== undefined ? inputSize : Math.max(1, inputValue.length);
|
|
4444
4507
|
const uniqueId = React.useId();
|
|
4445
4508
|
const inputId = id || uniqueId;
|
|
4446
|
-
|
|
4447
|
-
1: 'scale-1-0',
|
|
4448
|
-
1.5: 'scale-1-5',
|
|
4449
|
-
2: 'scale-2-0',
|
|
4450
|
-
}[scale];
|
|
4451
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$7.quantity, scaleClass, { [styles$7.disabled]: disabled }, className), ...rest, children: [jsxRuntime.jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Subtract16Regular, {}), onClick: decrement, disabled: disabled || isMinValue, "aria-label": decrementAriaLabel, tooltipText: 'Diminuir' }), jsxRuntime.jsx("input", { ref: inputRef, className: clsx(styles$7.quantityInput, { [styles$7.disabled]: disabled }), type: 'text', value: inputValue, onChange: handleInputChange, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: inputId, step: stepValue, "aria-label": inputAriaLabel, role: 'spinbutton', "aria-valuenow": internalValue, "aria-valuemin": minValue, "aria-valuemax": maxValue, disabled: disabled, inputMode: decimal ? 'decimal' : 'numeric', size: inputSizeValue }), jsxRuntime.jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, onClick: increment, disabled: disabled || isMaxValue, "aria-label": incrementAriaLabel, icon: jsxRuntime.jsx(reactIcons.Add16Regular, {}), tooltipText: 'Aumentar' })] }));
|
|
4509
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$7.quantity, { [styles$7.disabled]: disabled }, className), style: { '--giro-scale': scale, ...style }, ...rest, children: [jsxRuntime.jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Subtract16Regular, {}), onClick: decrement, disabled: disabled || isMinValue, "aria-label": decrementAriaLabel, tooltipText: 'Diminuir', scale: scale }), jsxRuntime.jsx("input", { ref: inputRef, className: clsx(styles$7.quantityInput, { [styles$7.disabled]: disabled }), type: 'text', value: inputValue, onChange: handleInputChange, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: inputId, step: stepValue, "aria-label": inputAriaLabel, role: 'spinbutton', "aria-valuenow": internalValue, "aria-valuemin": minValue, "aria-valuemax": maxValue, disabled: disabled, inputMode: decimal ? 'decimal' : 'numeric', size: inputSizeValue }), jsxRuntime.jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, onClick: increment, disabled: disabled || isMaxValue, "aria-label": incrementAriaLabel, icon: jsxRuntime.jsx(reactIcons.Add16Regular, {}), tooltipText: 'Aumentar', scale: scale })] }));
|
|
4452
4510
|
};
|
|
4453
4511
|
const memorizedQuantity = React.memo(Quantity);
|
|
4454
4512
|
memorizedQuantity.displayName = 'Quantity';
|
|
4455
4513
|
|
|
4456
|
-
var styles$6 = {"fieldContainer":"Select-module__fieldContainer___zkWSZ","trigger":"Select-module__trigger___xZVUG","disabled":"Select-module__disabled___kkzG-","open":"Select-module__open___bTuTy","error":"Select-module__error___yikGO","hasValue":"Select-module__hasValue___56T9r","triggerText":"Select-module__triggerText___tfXlq","
|
|
4514
|
+
var styles$6 = {"fieldContainer":"Select-module__fieldContainer___zkWSZ","trigger":"Select-module__trigger___xZVUG","disabled":"Select-module__disabled___kkzG-","open":"Select-module__open___bTuTy","error":"Select-module__error___yikGO","hasValue":"Select-module__hasValue___56T9r","triggerText":"Select-module__triggerText___tfXlq","triggerIcon":"Select-module__triggerIcon___Smobj","content":"Select-module__content___Eftze","viewport":"Select-module__viewport___mMGOo","group":"Select-module__group___wErLt","container":"Select-module__container___U1UI1","containerLabel":"Select-module__containerLabel___-5qpN","searchWrapper":"Select-module__searchWrapper___H01Wp","item":"Select-module__item___72Rnu","subTitle":"Select-module__subTitle___FdYBH","checkboxItem":"Select-module__checkboxItem___Ehw-a","checkboxContent":"Select-module__checkboxContent___7eKLC","itemWrapper":"Select-module__itemWrapper___nPovg","title":"Select-module__title___bqW3p","icon":"Select-module__icon___RH27W","itemIndicator":"Select-module__itemIndicator___4DBU-","textContent":"Select-module__textContent___k1SLX","helper":"Select-module__helper___pTp7X","errorMessage":"Select-module__errorMessage___--vrn","noResults":"Select-module__noResults___IxsAN","loadingMore":"Select-module__loadingMore___DjAUE","expandableItemContainer":"Select-module__expandableItemContainer___w4ZIb","chevron":"Select-module__chevron___Kgee3","childrenWrapper":"Select-module__childrenWrapper___2NnS-"};
|
|
4457
4515
|
|
|
4458
4516
|
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange, value, ...restProps }) => {
|
|
4459
4517
|
const itemRef = React.useRef(null);
|
|
@@ -4762,7 +4820,7 @@ function useSelectLogic({ value, required = false, search = false, onValueChange
|
|
|
4762
4820
|
};
|
|
4763
4821
|
}
|
|
4764
4822
|
|
|
4765
|
-
const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, errorMessage, disabled = false,
|
|
4823
|
+
const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, errorMessage, disabled = false, className, style, 'aria-label': ariaLabel, 'data-testid': testId, tooltip = false, tooltipText, side = 'bottom', align = 'start', enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false, enableApiSearch = false, onApiSearch, isSearching = false, scale = 1, ...rest }) => {
|
|
4766
4824
|
const componentId = React.useId();
|
|
4767
4825
|
const selectId = `select-${componentId}`;
|
|
4768
4826
|
const viewportRef = React.useRef(null);
|
|
@@ -4809,12 +4867,8 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
4809
4867
|
}, [items, state.searchTerm, state.searchInput, enableApiSearch, utils]);
|
|
4810
4868
|
const containerStyle = React.useMemo(() => ({
|
|
4811
4869
|
maxWidth: maxWidth ? `${maxWidth}px` : undefined,
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
1: 'scale-1-0',
|
|
4815
|
-
1.5: 'scale-1-5',
|
|
4816
|
-
2: 'scale-2-0',
|
|
4817
|
-
}[scale];
|
|
4870
|
+
'--giro-scale': scale,
|
|
4871
|
+
}), [maxWidth, scale]);
|
|
4818
4872
|
const handleSearchChange = (e) => {
|
|
4819
4873
|
const value = e.target.value;
|
|
4820
4874
|
actions.setSearchInput(value);
|
|
@@ -4847,14 +4901,14 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
4847
4901
|
onApiSearch('');
|
|
4848
4902
|
}
|
|
4849
4903
|
};
|
|
4850
|
-
return (jsxRuntime.jsx(radixUi.Select.Root, { value: variant === 'checkbox' || (search && state.isOpen) ? '' : (state.selectedValues[0] || ''), onValueChange: variant === 'checkbox' ? undefined : actions.handleSingleSelect, required: required, open: state.isOpen, onOpenChange: actions.setOpen, disabled: disabled, ...rest, children: jsxRuntime.jsxs("div", { className: clsx(styles$6.container,
|
|
4904
|
+
return (jsxRuntime.jsx(radixUi.Select.Root, { value: variant === 'checkbox' || (search && state.isOpen) ? '' : (state.selectedValues[0] || ''), onValueChange: variant === 'checkbox' ? undefined : actions.handleSingleSelect, required: required, open: state.isOpen, onOpenChange: actions.setOpen, disabled: disabled, ...rest, children: jsxRuntime.jsxs("div", { className: clsx(styles$6.container, className), style: { ...containerStyle, ...style }, "data-testid": testId, children: [jsxRuntime.jsx("div", { className: styles$6.fieldContainer, children: jsxRuntime.jsxs("div", { className: styles$6.containerLabel, children: [jsxRuntime.jsx(LabelComponent, { htmlFor: selectId, required: required, tooltipText: tooltipText, tooltip: tooltip, side: side, align: align, error: state.hasError && state.touched, disabled: disabled, scale: scale, children: label }), jsxRuntime.jsxs(radixUi.Select.Trigger, { className: clsx(styles$6.trigger, {
|
|
4851
4905
|
[styles$6.error]: state.hasError && state.touched,
|
|
4852
4906
|
[styles$6.disabled]: disabled,
|
|
4853
4907
|
[styles$6.hasValue]: state.selectedValues.length > 0,
|
|
4854
4908
|
[styles$6.open]: state.isOpen,
|
|
4855
|
-
}), id: selectId, "aria-label": ariaLabel, "data-testid": `${testId}-trigger`, children: [variant === 'checkbox' ? (jsxRuntime.jsx("span", { className: styles$6.triggerText, children: displayText })) : (jsxRuntime.jsx(radixUi.Select.Value, { placeholder: placeholder, className: styles$6.placeholder, children: displayText })), state.isOpen ? jsxRuntime.jsx(reactIcons.ChevronUp16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronDown16Regular, {})] }), !state.isOpen && helperText && !state.hasError && (jsxRuntime.jsx("span", { className: clsx(styles$6.helper, {
|
|
4909
|
+
}), id: selectId, "aria-label": ariaLabel, "data-testid": `${testId}-trigger`, children: [variant === 'checkbox' ? (jsxRuntime.jsx("span", { className: styles$6.triggerText, children: displayText })) : (jsxRuntime.jsx(radixUi.Select.Value, { placeholder: placeholder, className: styles$6.placeholder, children: displayText })), jsxRuntime.jsx("div", { className: styles$6.triggerIcon, children: state.isOpen ? jsxRuntime.jsx(reactIcons.ChevronUp16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronDown16Regular, {}) })] }), !state.isOpen && helperText && !state.hasError && (jsxRuntime.jsx("span", { className: clsx(styles$6.helper, {
|
|
4856
4910
|
[styles$6.disabled]: disabled
|
|
4857
|
-
}), children: helperText })), state.hasError && state.touched && (jsxRuntime.jsx("span", { className: styles$6.errorMessage, children: errorMessage || 'Campo obrigatório' }))] }) }), jsxRuntime.jsx(radixUi.Select.Portal, { children: jsxRuntime.jsxs(radixUi.Select.Content, { className: styles$6.content, position: "popper", side: "bottom", sideOffset: 8, align: "start", avoidCollisions: true, children: [search && (jsxRuntime.jsx("div", { className: styles$6.searchWrapper, children: jsxRuntime.jsx(Search, { ref: refs.searchInputRef, className: styles$6.search, placeholder: "Buscar", value: state.searchInput, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: handleClear, "data-testid": `${testId}-search
|
|
4911
|
+
}), children: helperText })), state.hasError && state.touched && (jsxRuntime.jsx("span", { className: styles$6.errorMessage, children: errorMessage || 'Campo obrigatório' }))] }) }), jsxRuntime.jsx(radixUi.Select.Portal, { children: jsxRuntime.jsxs(radixUi.Select.Content, { className: styles$6.content, style: { '--giro-scale': scale }, position: "popper", side: "bottom", sideOffset: 8, align: "start", avoidCollisions: true, children: [search && (jsxRuntime.jsx("div", { className: styles$6.searchWrapper, children: jsxRuntime.jsx(Search, { ref: refs.searchInputRef, className: styles$6.search, placeholder: "Buscar", value: state.searchInput, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: handleClear, "data-testid": `${testId}-search`, scale: scale }) })), jsxRuntime.jsx(radixUi.Select.Viewport, { ref: viewportRef, className: styles$6.viewport, "data-testid": testId ? `${testId}-viewport` : undefined, children: jsxRuntime.jsx(radixUi.Select.Group, { className: styles$6.group, children: filteredItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$6.noResults, children: "Nenhum resultado encontrado" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [filteredItems.map((item) => {
|
|
4858
4912
|
const hasChildren = item.children && item.children.length > 0;
|
|
4859
4913
|
if (hasChildren) {
|
|
4860
4914
|
return (jsxRuntime.jsx(ExpandableSelectItem, { item: item, variant: variant, selectedValues: state.selectedValues, onSelect: (value) => {
|
|
@@ -5253,7 +5307,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5253
5307
|
};
|
|
5254
5308
|
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
5309
|
? 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,
|
|
5310
|
+
: `${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
5311
|
setPendingSearch(e.target.value);
|
|
5258
5312
|
}, onSearch: (val) => {
|
|
5259
5313
|
if (footer) {
|
|
@@ -5318,7 +5372,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5318
5372
|
|
|
5319
5373
|
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
5374
|
|
|
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
|
|
5375
|
+
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
5376
|
const normalizeValue = (val) => {
|
|
5323
5377
|
return val === undefined || val === null ? '' : String(val);
|
|
5324
5378
|
};
|
|
@@ -5357,7 +5411,7 @@ const TextArea = React.forwardRef(({ className, value, label, placeholder, onCha
|
|
|
5357
5411
|
? `${componentId}-helper`
|
|
5358
5412
|
: undefined;
|
|
5359
5413
|
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:
|
|
5414
|
+
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
5415
|
if (!disabled && (!maxLength || val.length <= maxLength)) {
|
|
5362
5416
|
setTextareaValue(val);
|
|
5363
5417
|
onChange?.(val);
|
|
@@ -5575,13 +5629,8 @@ ToastContainer.displayName = 'ToastContainer';
|
|
|
5575
5629
|
|
|
5576
5630
|
var styles$1 = {"container":"Switch-module__container___BR1OB","switchRoot":"Switch-module__switchRoot___jz2HD","switchThumb":"Switch-module__switchThumb___X3RL7"};
|
|
5577
5631
|
|
|
5578
|
-
const Switch = ({ disabled = false, defaultChecked = false, checked, onCheckedChange, scale = 1, className, ...rest }) => {
|
|
5579
|
-
|
|
5580
|
-
1: 'scale-1-0',
|
|
5581
|
-
1.5: 'scale-1-5',
|
|
5582
|
-
2: 'scale-2-0',
|
|
5583
|
-
}[scale];
|
|
5584
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$1.container, scaleClass, className), 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 }) }) }));
|
|
5632
|
+
const Switch = ({ disabled = false, defaultChecked = false, checked, onCheckedChange, scale = 1, className, style, ...rest }) => {
|
|
5633
|
+
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 }) }) }));
|
|
5585
5634
|
};
|
|
5586
5635
|
|
|
5587
5636
|
var styles = {"zds-verification-code__container":"VerificationCode-module__zds-verification-code__container___tUNuJ","zds-verification-code__input":"VerificationCode-module__zds-verification-code__input___wDIQ6","zds-verification-code__filled":"VerificationCode-module__zds-verification-code__filled___-2VVb","zds-verification-code__has-error":"VerificationCode-module__zds-verification-code__has-error___eqKAp","zds-verification-code__error":"VerificationCode-module__zds-verification-code__error___T53i5"};
|
|
@@ -6007,6 +6056,7 @@ exports.Badge = Badge;
|
|
|
6007
6056
|
exports.Button = Button;
|
|
6008
6057
|
exports.Calendar = Calendar;
|
|
6009
6058
|
exports.Callout = Callout;
|
|
6059
|
+
exports.Card = Card;
|
|
6010
6060
|
exports.Checkbox = Checkbox;
|
|
6011
6061
|
exports.Chips = MemoizedChips;
|
|
6012
6062
|
exports.Container = Container;
|