@giro-ds/react 9.1.0 → 10.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +185 -89
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +35 -28
- package/dist/index.esm.js +185 -90
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +2 -2
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -12,17 +12,17 @@ import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@
|
|
|
12
12
|
export { createColumnHelper as createTableColumnHelper } from '@tanstack/react-table';
|
|
13
13
|
import Skeleton from 'react-loading-skeleton';
|
|
14
14
|
|
|
15
|
-
var styles$
|
|
15
|
+
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"};
|
|
16
16
|
|
|
17
17
|
const Avatar = ({ icon, size = 'lg', src, className, initialLetters, ...rest }) => {
|
|
18
|
-
const AvatarClass = clsx(styles$
|
|
19
|
-
[styles$
|
|
20
|
-
[styles$
|
|
18
|
+
const AvatarClass = clsx(styles$u.AvatarRoot, {
|
|
19
|
+
[styles$u['AvatarRoot--lg']]: size === 'lg',
|
|
20
|
+
[styles$u['AvatarRoot--sm']]: size === 'sm',
|
|
21
21
|
}, className);
|
|
22
|
-
return (jsxs(Avatar$1.Root, { className: AvatarClass, ...rest, children: [src && (jsx(Avatar$1.Image, { className: styles$
|
|
22
|
+
return (jsxs(Avatar$1.Root, { className: AvatarClass, ...rest, children: [src && (jsx(Avatar$1.Image, { className: styles$u.AvatarImage, src: src, alt: "Avatar" })), jsx(Avatar$1.Fallback, { className: styles$u.AvatarFallback, children: icon || initialLetters })] }));
|
|
23
23
|
};
|
|
24
24
|
|
|
25
|
-
var styles$
|
|
25
|
+
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"};
|
|
26
26
|
|
|
27
27
|
const getDisplayValue = (value) => {
|
|
28
28
|
if (value === null || value === undefined)
|
|
@@ -44,25 +44,25 @@ const Badge = ({ children, badgeValue = null, className, id, filterVariant = fal
|
|
|
44
44
|
const displayValue = getDisplayValue(badgeValue);
|
|
45
45
|
const isEmpty = displayValue === '';
|
|
46
46
|
if (children) {
|
|
47
|
-
return (jsxs("div", { className: styles$
|
|
48
|
-
[styles$
|
|
49
|
-
[styles$
|
|
47
|
+
return (jsxs("div", { className: styles$t.badgeContainer, ...rest, children: [jsx("div", { "data-testid": "badge-content", children: children }), jsx("div", { id: componentId, className: clsx(styles$t.badge, {
|
|
48
|
+
[styles$t['badge__empty']]: isEmpty,
|
|
49
|
+
[styles$t['badge__flex']]: displayValue.length >= 2,
|
|
50
50
|
}, className), "data-testid": "badge", children: !isEmpty && jsx("span", { "aria-hidden": !!ariaLabel, children: displayValue }) })] }));
|
|
51
51
|
}
|
|
52
|
-
return (jsx("div", { className: styles$
|
|
53
|
-
[styles$
|
|
54
|
-
[styles$
|
|
55
|
-
[styles$
|
|
52
|
+
return (jsx("div", { className: styles$t.badgeContainer, children: jsx("div", { className: clsx(styles$t['badge__status'], {
|
|
53
|
+
[styles$t['badge__status__empty']]: isEmpty,
|
|
54
|
+
[styles$t['badge__status__flex']]: displayValue.length >= 2,
|
|
55
|
+
[styles$t['badge__status__filterBadge']]: filterVariant,
|
|
56
56
|
}, className), "data-testid": "badge", children: !isEmpty && (jsx("span", { "aria-hidden": !!ariaLabel, children: displayValue })) }) }));
|
|
57
57
|
};
|
|
58
58
|
|
|
59
|
-
var styles$
|
|
59
|
+
var styles$s = {"tooltipContent":"Tooltip-module__tooltipContent___xycUg","triggerWrapper":"Tooltip-module__triggerWrapper___x83XR"};
|
|
60
60
|
|
|
61
61
|
const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, sideOffset = 10, className, ...rest }) => {
|
|
62
|
-
return (jsx(Tooltip$1.Provider, { children: jsxs(Tooltip$1.Root, { children: [jsx(Tooltip$1.Trigger, { asChild: true, children: jsx("span", { className: styles$
|
|
62
|
+
return (jsx(Tooltip$1.Provider, { children: jsxs(Tooltip$1.Root, { children: [jsx(Tooltip$1.Trigger, { asChild: true, children: jsx("span", { className: styles$s.triggerWrapper, children: children }) }), jsx(Tooltip$1.Portal, { children: jsx(Tooltip$1.Content, { className: clsx(styles$s.tooltipContent, className), side: side, align: align, sideOffset: sideOffset, style: { maxWidth: maxWidth ? `${maxWidth}px` : 'auto' }, ...rest, children: text }) })] }) }));
|
|
63
63
|
};
|
|
64
64
|
|
|
65
|
-
var styles$
|
|
65
|
+
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"};
|
|
66
66
|
|
|
67
67
|
const Button = React__default.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) => {
|
|
68
68
|
const generatedId = useId();
|
|
@@ -96,14 +96,14 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
96
96
|
1.5: 'scale-1-5',
|
|
97
97
|
2: 'scale-2-0',
|
|
98
98
|
}[scale];
|
|
99
|
-
const buttonClasses = clsx(styles$
|
|
100
|
-
[styles$
|
|
101
|
-
[styles$
|
|
102
|
-
[styles$
|
|
103
|
-
[styles$
|
|
104
|
-
[styles$
|
|
105
|
-
[styles$
|
|
106
|
-
[styles$
|
|
99
|
+
const buttonClasses = clsx(styles$r.button, styles$r[`button-${variant}`], styles$r[`button-${size}`], scaleClass, {
|
|
100
|
+
[styles$r['disabled']]: disabled,
|
|
101
|
+
[styles$r['buttonLoading']]: loading,
|
|
102
|
+
[styles$r['buttonWithIcon']]: resolvedIcon && !iconOnly,
|
|
103
|
+
[styles$r[`buttonIconPosition-${iconPosition}`]]: resolvedIcon && !iconOnly,
|
|
104
|
+
[styles$r['buttonNoContent']]: resolvedIcon && !hasContent && !iconOnly,
|
|
105
|
+
[styles$r['buttonFullWidth']]: fullWidth,
|
|
106
|
+
[styles$r['buttonIconOnly']]: iconOnly,
|
|
107
107
|
}, className);
|
|
108
108
|
const getAriaLabel = () => {
|
|
109
109
|
if (ariaLabel)
|
|
@@ -129,12 +129,12 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
129
129
|
};
|
|
130
130
|
const renderContent = () => {
|
|
131
131
|
if (iconOnly && !loading) {
|
|
132
|
-
return (jsx("span", { className: styles$
|
|
132
|
+
return (jsx("span", { className: styles$r.buttonIconOnly, "aria-hidden": "true", children: resolvedIcon }));
|
|
133
133
|
}
|
|
134
134
|
if (loading) {
|
|
135
|
-
return (jsxs(Fragment, { children: [!iconOnly && (jsxs("span", { className: styles$
|
|
135
|
+
return (jsxs(Fragment, { children: [!iconOnly && (jsxs("span", { className: styles$r.buttonContentHidden, "aria-hidden": "true", children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsx("span", { className: styles$r.buttonIconLeft, children: resolvedIcon })), children, resolvedIcon && (iconPosition === 'right' || iconPosition === 'both') && (jsx("span", { className: styles$r.buttonIconRight, children: resolvedIcon }))] })), jsx("span", { className: styles$r.buttonLoadingSpinner, "aria-hidden": "true", children: jsx(SpinnerIos16Regular, { "aria-hidden": "true" }) })] }));
|
|
136
136
|
}
|
|
137
|
-
return (jsxs(Fragment, { children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsx("span", { className: styles$
|
|
137
|
+
return (jsxs(Fragment, { children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsx("span", { className: styles$r.buttonIconLeft, "aria-hidden": "true", children: resolvedIcon })), children, resolvedIcon && (iconPosition === 'right' || iconPosition === 'both') && (jsx("span", { className: styles$r.buttonIconRight, "aria-hidden": "true", children: resolvedIcon }))] }));
|
|
138
138
|
};
|
|
139
139
|
const baseProps = {
|
|
140
140
|
ref,
|
|
@@ -2439,7 +2439,7 @@ const ptBR = {
|
|
|
2439
2439
|
},
|
|
2440
2440
|
};
|
|
2441
2441
|
|
|
2442
|
-
var styles$
|
|
2442
|
+
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"};
|
|
2443
2443
|
|
|
2444
2444
|
const FLUENT_CHEVRON_MAP = {
|
|
2445
2445
|
down: ChevronDown16Regular,
|
|
@@ -2458,7 +2458,7 @@ const GridMonthCaption = ({ calendarMonth, displayIndex: _displayIndex, ...divPr
|
|
|
2458
2458
|
const date = calendarMonth.date;
|
|
2459
2459
|
const monthLabel = new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(date);
|
|
2460
2460
|
const yearLabel = String(date.getFullYear());
|
|
2461
|
-
return (jsxs("div", { ...divProps, children: [jsx("span", { className: styles$
|
|
2461
|
+
return (jsxs("div", { ...divProps, children: [jsx("span", { className: styles$q.caption_grid_label, children: monthLabel }), jsxs("button", { type: "button", className: styles$q.caption_grid_btn, "aria-pressed": view === "years", onClick: onYearLabelClick, children: [yearLabel, view !== "days" ? (jsx(ChevronUp16Regular, { className: styles$q.caption_year_chevron, "aria-hidden": true })) : (jsx(ChevronDown16Regular, { className: styles$q.caption_year_chevron, "aria-hidden": true }))] })] }));
|
|
2462
2462
|
};
|
|
2463
2463
|
const YEARS_PER_PAGE = 20;
|
|
2464
2464
|
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 }) => {
|
|
@@ -2526,7 +2526,7 @@ const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, o
|
|
|
2526
2526
|
onYearLabelClick: handleYearLabelClick,
|
|
2527
2527
|
};
|
|
2528
2528
|
const sharedDayPickerProps = {
|
|
2529
|
-
classNames: styles$
|
|
2529
|
+
classNames: styles$q,
|
|
2530
2530
|
animate,
|
|
2531
2531
|
mode: "single",
|
|
2532
2532
|
selected: resolvedSelected,
|
|
@@ -2543,10 +2543,10 @@ const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, o
|
|
|
2543
2543
|
1.5: 'scale-1-5',
|
|
2544
2544
|
2: 'scale-2-0',
|
|
2545
2545
|
}[scale];
|
|
2546
|
-
return (jsx(GridCtx.Provider, { value: gridCtxValue, children: jsxs("div", { className: clsx(styles$
|
|
2546
|
+
return (jsx(GridCtx.Provider, { value: gridCtxValue, children: jsxs("div", { className: clsx(styles$q.calendar_grid_wrapper, scaleClass, className), children: [jsx(DayPicker, { id: id, ...sharedDayPickerProps, ...rest, captionLayout: "label", month: resolvedDisplayMonth, onMonthChange: handleMonthChange, components: { MonthCaption: GridMonthCaption, Chevron: CustomChevron } }), gridView !== "days" && (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" && (jsxs(Fragment, { children: [jsxs("div", { className: styles$q.gridOverlayCaption, children: [jsx("span", { className: styles$q.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxs("button", { type: "button", className: styles$q.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de m\u00EAs", children: [displayedYear, jsx(ChevronUp16Regular, { className: styles$q.caption_year_chevron, "aria-hidden": true })] })] }), jsx("div", { className: styles$q.gridCells, children: monthsGrid.map(({ index, label, disabled: monthDisabled }) => (jsx("button", { type: "button", disabled: monthDisabled, className: `${styles$q.gridCell}${displayedMonthIndex === index ? ` ${styles$q.gridCellActive}` : ""}`, onClick: () => handleGridMonthSelect(index), children: label }, index))) })] })), gridView === "years" && (jsxs(Fragment, { children: [jsxs("div", { className: styles$q.gridOverlayCaption, children: [jsx("span", { className: styles$q.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxs("button", { type: "button", className: styles$q.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de ano", children: [displayedYear, jsx(ChevronUp16Regular, { className: styles$q.caption_year_chevron, "aria-hidden": true })] }), jsxs("div", { className: styles$q.gridOverlayYearsNav, children: [jsx("button", { type: "button", className: styles$q.gridNavBtn, disabled: !canGoPrevYears, onClick: () => setYearPageStart((s) => s - YEARS_PER_PAGE), "aria-label": "Anos anteriores", children: jsx(ChevronLeft16Regular, { className: styles$q.chevronNavBtnPrev, "aria-hidden": true }) }), jsx("button", { type: "button", className: styles$q.gridNavBtn, disabled: !canGoNextYears, onClick: () => setYearPageStart((s) => s + YEARS_PER_PAGE), "aria-label": "Pr\u00F3ximos anos", children: jsx(ChevronRight16Regular, { className: styles$q.chevronNavBtnNext, "aria-hidden": true }) })] })] }), jsx("div", { className: `${styles$q.gridCells} ${styles$q.gridCellsYears}`, children: yearsInPage.map((year) => (jsx("button", { type: "button", className: `${styles$q.gridCell}${displayedYear === year ? ` ${styles$q.gridCellActive}` : ""}`, onClick: () => handleGridYearSelect(year), children: year }, year))) })] }))] }))] }) }));
|
|
2547
2547
|
};
|
|
2548
2548
|
|
|
2549
|
-
var styles$
|
|
2549
|
+
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"};
|
|
2550
2550
|
|
|
2551
2551
|
const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, backgroundColor, textColor, className, id, style, ...rest }) => {
|
|
2552
2552
|
if (process.env.NODE_ENV !== 'production' && (text === '' || (typeof text === 'string' && !text.trim()))) {
|
|
@@ -2556,15 +2556,21 @@ const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, b
|
|
|
2556
2556
|
const titleId = `callout-title-${id || generatedId}`;
|
|
2557
2557
|
const componentId = id || generatedId;
|
|
2558
2558
|
const isAlert = variant === 'alert';
|
|
2559
|
-
const containerClass = clsx(styles$
|
|
2559
|
+
const containerClass = clsx(styles$p.container, styles$p[variant], { [styles$p.withTitle]: title }, className);
|
|
2560
2560
|
const customStyle = {
|
|
2561
2561
|
...style,
|
|
2562
2562
|
...(backgroundColor && { '--callout-bg': `var(--${backgroundColor})` }),
|
|
2563
2563
|
...(textColor && { '--callout-text': `var(--${textColor})` }),
|
|
2564
2564
|
};
|
|
2565
|
-
return (jsx("div", { id: componentId, className: containerClass, role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite', "aria-labelledby": title ? titleId : undefined, style: customStyle, ...rest, children: jsxs("div", { className: styles$
|
|
2565
|
+
return (jsx("div", { id: componentId, className: containerClass, role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite', "aria-labelledby": title ? titleId : undefined, style: customStyle, ...rest, children: jsxs("div", { className: styles$p.content, children: [icon && jsx("span", { className: styles$p.icon, "aria-hidden": "true", children: icon }), jsxs("div", { className: styles$p.subcontent, children: [title && (jsx("span", { id: titleId, className: styles$p.title, children: title })), text && jsx("span", { className: styles$p.text, children: text })] }), dismiss && (jsx("button", { className: styles$p.dismiss, onClick: onDismiss, type: "button", "aria-label": "Fechar", children: jsx(Dismiss24Regular, { "aria-hidden": "true" }) }))] }) }));
|
|
2566
2566
|
};
|
|
2567
2567
|
|
|
2568
|
+
var styles$o = {"card":"Card-module__card___LzN-3","card--hoverable":"Card-module__card--hoverable___orpJZ"};
|
|
2569
|
+
|
|
2570
|
+
function Card({ children, className, hoverable }) {
|
|
2571
|
+
return (jsx("main", { className: clsx(styles$o['card'], hoverable && styles$o['card--hoverable'], className), children: children }));
|
|
2572
|
+
}
|
|
2573
|
+
|
|
2568
2574
|
const CheckSmall = ({ className = '', width = 12, height = 10, fill = 'white', ...restProps }) => {
|
|
2569
2575
|
return (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: jsx("path", { d: "M4 9.4L0 5.4L1.4 4L4 6.6L10.6 0L12 1.4L4 9.4Z", fill: fill }) }));
|
|
2570
2576
|
};
|
|
@@ -2650,18 +2656,18 @@ const ICON_KEY_MAP = {
|
|
|
2650
2656
|
const SHARED_DISPLAY = {
|
|
2651
2657
|
'{capslock}': iconSlot('capslock'),
|
|
2652
2658
|
'{numbers}': '123',
|
|
2653
|
-
'{abc}': '
|
|
2659
|
+
'{abc}': 'Abc',
|
|
2654
2660
|
'{alt}': '.?!',
|
|
2655
2661
|
'{alt2}': '#+=',
|
|
2656
2662
|
'{emoticon}': iconSlot('emoji'),
|
|
2657
2663
|
'{shift}': iconSlot('shift'),
|
|
2658
2664
|
'{shiftactivated}': iconSlot('shiftactivated'),
|
|
2659
2665
|
'{enter}': 'Enter',
|
|
2660
|
-
'{bksp}':
|
|
2666
|
+
'{bksp}': iconSlot('bksp'),
|
|
2661
2667
|
'{altright}': '.?123',
|
|
2662
2668
|
'{downkeyboard}': iconSlot('downkeyboard'),
|
|
2663
2669
|
'{space}': ' ',
|
|
2664
|
-
'{default}': '
|
|
2670
|
+
'{default}': 'Abc',
|
|
2665
2671
|
};
|
|
2666
2672
|
const LAYOUT_DISPLAY = {
|
|
2667
2673
|
default: SHARED_DISPLAY,
|
|
@@ -2675,40 +2681,40 @@ const removeKeyFromLayout = (layout, key) => Object.fromEntries(Object.entries(l
|
|
|
2675
2681
|
rows.map((row) => row.split(key).join(' ').replace(/\s+/g, ' ').trim()),
|
|
2676
2682
|
]));
|
|
2677
2683
|
const QWERTY_LOWERCASE = [
|
|
2678
|
-
'
|
|
2679
|
-
'
|
|
2680
|
-
'a s d f g h j k l ç
|
|
2681
|
-
'{shift} z x c v b n m
|
|
2682
|
-
'{numbers} {alt} {space}
|
|
2684
|
+
'1 2 3 4 5 6 7 8 9 0',
|
|
2685
|
+
'q w e r t y u i o p',
|
|
2686
|
+
'a s d f g h j k l ç',
|
|
2687
|
+
'{shift} z x c v b n m {bksp}',
|
|
2688
|
+
'{numbers} {alt} {space} . {enter}',
|
|
2683
2689
|
];
|
|
2684
2690
|
const NUMPAD = ['1 2 3', '4 5 6', '7 8 9', '{bksp} 0 {abc}'];
|
|
2685
2691
|
const SHARED_LAYOUTS = {
|
|
2686
2692
|
shift: [
|
|
2687
|
-
'
|
|
2688
|
-
'
|
|
2689
|
-
'A S D F G H J K L Ç
|
|
2690
|
-
'{capslock} Z X C V B N M
|
|
2691
|
-
'{numbers} {alt} {emoticon} {space}
|
|
2693
|
+
'1 2 3 4 5 6 7 8 9 0',
|
|
2694
|
+
'Q W E R T Y U I O P',
|
|
2695
|
+
'A S D F G H J K L Ç',
|
|
2696
|
+
'{capslock} Z X C V B N M {bksp}',
|
|
2697
|
+
'{numbers} {alt} {emoticon} {space} . {enter}',
|
|
2692
2698
|
],
|
|
2693
2699
|
caps: [
|
|
2694
|
-
'
|
|
2695
|
-
'
|
|
2696
|
-
'A S D F G H J K L Ç
|
|
2697
|
-
'{shiftactivated} Z X C V B N M
|
|
2698
|
-
'{numbers} {alt} {emoticon} {space}
|
|
2700
|
+
'1 2 3 4 5 6 7 8 9 0',
|
|
2701
|
+
'Q W E R T Y U I O P',
|
|
2702
|
+
'A S D F G H J K L Ç',
|
|
2703
|
+
'{shiftactivated} Z X C V B N M {bksp}',
|
|
2704
|
+
'{numbers} {alt} {emoticon} {space} . {enter}',
|
|
2699
2705
|
],
|
|
2700
2706
|
numbers: NUMPAD,
|
|
2701
2707
|
alt: [
|
|
2702
2708
|
'1 2 3 4 5 6 7 8 9 0',
|
|
2703
2709
|
`- / : ; ( ) $ & @ "`,
|
|
2704
2710
|
'{alt2} . , ? ! ´ {bksp}',
|
|
2705
|
-
'{default} {emoticon} {space} {
|
|
2711
|
+
'{default} {emoticon} {space} {enter}',
|
|
2706
2712
|
],
|
|
2707
2713
|
alt2: [
|
|
2708
2714
|
'[ ] { } # % ^ * + =',
|
|
2709
2715
|
'_ \\ | ~ < > ¢ £ ¥ •',
|
|
2710
2716
|
`{alt} . , ? ! ' {bksp}`,
|
|
2711
|
-
'{default} {emoticon} {space} {
|
|
2717
|
+
'{default} {emoticon} {space} {enter}',
|
|
2712
2718
|
],
|
|
2713
2719
|
emoticon: [
|
|
2714
2720
|
'😀 😊 😅 😂 🙂 😉 😍 😛 😠 😎 {bksp}',
|
|
@@ -2767,20 +2773,20 @@ const SHIFT_TOGGLES = {
|
|
|
2767
2773
|
alt2: 'alt',
|
|
2768
2774
|
};
|
|
2769
2775
|
|
|
2770
|
-
var styles$j = {"container":"VirtualKeyboard-module__container___A-e0I","
|
|
2776
|
+
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"};
|
|
2771
2777
|
|
|
2772
2778
|
const LONG_PRESS_DELAY_MS = 400;
|
|
2773
2779
|
const ACCENT_OPTIONS = {
|
|
2774
|
-
a: ['á', 'à', 'â', 'ã', 'ä', 'å', 'æ'],
|
|
2775
|
-
e: ['é', 'è', 'ê', 'ë'],
|
|
2776
|
-
i: ['í', 'ì', 'î', 'ï'],
|
|
2777
|
-
o: ['ó', 'ò', 'ô', 'õ', 'ö', 'ø', 'œ', '
|
|
2778
|
-
u: ['ú', 'ù', 'û', 'ü'],
|
|
2779
|
-
y: ['ý', 'ÿ'],
|
|
2780
|
-
n: ['ñ'],
|
|
2781
|
-
c: ['ç'],
|
|
2782
|
-
'?': ['¿'],
|
|
2783
|
-
'!': ['¡'],
|
|
2780
|
+
a: ['a', 'á', 'à', 'â', 'ã', 'ä', 'å', 'æ', '@', 'ª'],
|
|
2781
|
+
e: ['e', 'é', 'è', 'ê', 'ë', 'ę', 'ē', 'ė', '€'],
|
|
2782
|
+
i: ['i', 'í', 'ì', 'î', 'ï', 'ī', 'į', 'ı'],
|
|
2783
|
+
o: ['o', 'ó', 'ò', 'ô', 'õ', 'ö', 'ō', 'ø', 'œ', 'º'],
|
|
2784
|
+
u: ['u', 'ú', 'ù', 'û', 'ü', 'ū', 'ů', 'ű'],
|
|
2785
|
+
y: ['y', 'ý', 'ÿ', 'ŷ', 'ȳ'],
|
|
2786
|
+
n: ['n', 'ñ'],
|
|
2787
|
+
c: ['c', 'ç'],
|
|
2788
|
+
'?': ['?', '¿'],
|
|
2789
|
+
'!': ['!', '¡'],
|
|
2784
2790
|
};
|
|
2785
2791
|
/**
|
|
2786
2792
|
* Componente VirtualKeyboard — teclado virtual on-screen para entradas controladas.
|
|
@@ -2816,6 +2822,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2816
2822
|
const visualType = NATIVE_LAYOUT_KEYS.has(type) ? type : 'default';
|
|
2817
2823
|
const [isOpen, setIsOpen] = useState(variant !== 'native');
|
|
2818
2824
|
const hideTimeoutRef = useRef(null);
|
|
2825
|
+
const scrollTimeoutRef = useRef(null);
|
|
2819
2826
|
const longPressTimeoutRef = useRef(null);
|
|
2820
2827
|
const suppressNextInputRef = useRef(null);
|
|
2821
2828
|
const heldAccentKeyRef = useRef(null);
|
|
@@ -2825,9 +2832,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2825
2832
|
const keyboardInstanceRef = useRef(null);
|
|
2826
2833
|
const accentMenuRef = useRef(null);
|
|
2827
2834
|
const accentButtonRef = useRef(null);
|
|
2828
|
-
const accentMenuOpenRef = useRef(false);
|
|
2829
2835
|
const valueRef = useRef(value);
|
|
2830
2836
|
const [iconSlots, setIconSlots] = useState([]);
|
|
2837
|
+
const [keyPreview, setKeyPreview] = useState(null);
|
|
2838
|
+
const [keyPreviewOffsetX, setKeyPreviewOffsetX] = useState(0);
|
|
2839
|
+
const keyPreviewRef = useRef(null);
|
|
2840
|
+
const [containerWidth, setContainerWidth] = useState(Infinity);
|
|
2831
2841
|
useEffect(() => {
|
|
2832
2842
|
valueRef.current = value;
|
|
2833
2843
|
}, [value]);
|
|
@@ -2861,6 +2871,17 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2861
2871
|
}
|
|
2862
2872
|
}, 150);
|
|
2863
2873
|
}, [variant, targetRef]);
|
|
2874
|
+
const scrollTargetIntoView = useCallback(() => {
|
|
2875
|
+
const targetEl = targetRef?.current;
|
|
2876
|
+
if (!targetEl)
|
|
2877
|
+
return;
|
|
2878
|
+
const keyboardHeight = keyboardWrapperRef.current?.offsetHeight ?? 0;
|
|
2879
|
+
const rect = targetEl.getBoundingClientRect();
|
|
2880
|
+
const visibleBottom = window.innerHeight - keyboardHeight - 8;
|
|
2881
|
+
if (rect.bottom > visibleBottom) {
|
|
2882
|
+
window.scrollBy({ top: rect.bottom - visibleBottom, behavior: 'smooth' });
|
|
2883
|
+
}
|
|
2884
|
+
}, [targetRef]);
|
|
2864
2885
|
useEffect(() => {
|
|
2865
2886
|
if (variant !== 'native')
|
|
2866
2887
|
return;
|
|
@@ -2872,7 +2893,10 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2872
2893
|
const handleFocus = () => {
|
|
2873
2894
|
if (hideTimeoutRef.current !== null)
|
|
2874
2895
|
clearTimeout(hideTimeoutRef.current);
|
|
2896
|
+
if (scrollTimeoutRef.current !== null)
|
|
2897
|
+
clearTimeout(scrollTimeoutRef.current);
|
|
2875
2898
|
setIsOpen(true);
|
|
2899
|
+
scrollTimeoutRef.current = setTimeout(scrollTargetIntoView, 50);
|
|
2876
2900
|
};
|
|
2877
2901
|
const handleBlur = () => {
|
|
2878
2902
|
scheduleHideIfBlurred();
|
|
@@ -2884,8 +2908,26 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2884
2908
|
el.removeEventListener('blur', handleBlur);
|
|
2885
2909
|
if (hideTimeoutRef.current !== null)
|
|
2886
2910
|
clearTimeout(hideTimeoutRef.current);
|
|
2911
|
+
if (scrollTimeoutRef.current !== null)
|
|
2912
|
+
clearTimeout(scrollTimeoutRef.current);
|
|
2887
2913
|
};
|
|
2888
|
-
}, [variant, targetRef, scheduleHideIfBlurred]);
|
|
2914
|
+
}, [variant, targetRef, scheduleHideIfBlurred, scrollTargetIntoView]);
|
|
2915
|
+
useEffect(() => {
|
|
2916
|
+
if (variant !== 'native')
|
|
2917
|
+
return;
|
|
2918
|
+
const wrapper = keyboardWrapperRef.current;
|
|
2919
|
+
if (!wrapper)
|
|
2920
|
+
return;
|
|
2921
|
+
const preventIOSBlur = (event) => {
|
|
2922
|
+
const targetEl = event.target;
|
|
2923
|
+
!!targetEl.closest('.hg-button');
|
|
2924
|
+
event.preventDefault();
|
|
2925
|
+
};
|
|
2926
|
+
wrapper.addEventListener('touchstart', preventIOSBlur, { passive: false });
|
|
2927
|
+
return () => {
|
|
2928
|
+
wrapper.removeEventListener('touchstart', preventIOSBlur);
|
|
2929
|
+
};
|
|
2930
|
+
}, [variant]);
|
|
2889
2931
|
useEffect(() => {
|
|
2890
2932
|
setLayoutName('default');
|
|
2891
2933
|
setCapsLockOn(false);
|
|
@@ -2921,6 +2963,21 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2921
2963
|
document.removeEventListener('keydown', handleEscape);
|
|
2922
2964
|
};
|
|
2923
2965
|
}, [accentMenu, closeAccentMenu]);
|
|
2966
|
+
useLayoutEffect(() => {
|
|
2967
|
+
if (!keyPreview || !keyPreviewRef.current)
|
|
2968
|
+
return;
|
|
2969
|
+
const margin = 8;
|
|
2970
|
+
const rect = keyPreviewRef.current.getBoundingClientRect();
|
|
2971
|
+
if (rect.width <= 0 || rect.height <= 0)
|
|
2972
|
+
return;
|
|
2973
|
+
const minCenter = margin + rect.width / 2;
|
|
2974
|
+
const maxCenter = window.innerWidth - margin - rect.width / 2;
|
|
2975
|
+
const clampedCenter = Math.min(maxCenter, Math.max(minCenter, keyPreview.left));
|
|
2976
|
+
const nextOffset = clampedCenter - keyPreview.left;
|
|
2977
|
+
if (Math.abs(nextOffset - keyPreviewOffsetX) > 0.5) {
|
|
2978
|
+
setKeyPreviewOffsetX(nextOffset);
|
|
2979
|
+
}
|
|
2980
|
+
}, [keyPreview, keyPreviewOffsetX]);
|
|
2924
2981
|
useLayoutEffect(() => {
|
|
2925
2982
|
if (!accentMenu || !accentMenuRef.current)
|
|
2926
2983
|
return;
|
|
@@ -2936,6 +2993,16 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2936
2993
|
setAccentMenuOffsetX(nextOffset);
|
|
2937
2994
|
}
|
|
2938
2995
|
}, [accentMenu, accentMenuOffsetX]);
|
|
2996
|
+
useEffect(() => {
|
|
2997
|
+
const wrapper = keyboardWrapperRef.current;
|
|
2998
|
+
if (!wrapper)
|
|
2999
|
+
return;
|
|
3000
|
+
const ro = new ResizeObserver((entries) => {
|
|
3001
|
+
setContainerWidth(entries[0]?.contentRect.width ?? Infinity);
|
|
3002
|
+
});
|
|
3003
|
+
ro.observe(wrapper);
|
|
3004
|
+
return () => ro.disconnect();
|
|
3005
|
+
}, []);
|
|
2939
3006
|
useEffect(() => {
|
|
2940
3007
|
if (!keyboardWrapperRef.current)
|
|
2941
3008
|
return;
|
|
@@ -2963,13 +3030,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2963
3030
|
suppressNextInputRef.current = null;
|
|
2964
3031
|
clearLongPressTimeout();
|
|
2965
3032
|
}, [layoutName, type, closeAccentMenu, clearLongPressTimeout]);
|
|
2966
|
-
useEffect(() => {
|
|
2967
|
-
accentMenuOpenRef.current = !!accentMenu;
|
|
2968
|
-
}, [accentMenu]);
|
|
2969
3033
|
useEffect(() => {
|
|
2970
3034
|
const updateAccentPosition = () => {
|
|
2971
|
-
if (!accentMenuOpenRef.current)
|
|
2972
|
-
return;
|
|
2973
3035
|
const btn = accentButtonRef.current;
|
|
2974
3036
|
if (!btn)
|
|
2975
3037
|
return;
|
|
@@ -2994,20 +3056,31 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2994
3056
|
const buttonEl = event.target.closest('.hg-button');
|
|
2995
3057
|
if (!buttonEl || !keyboardWrapper.contains(buttonEl))
|
|
2996
3058
|
return;
|
|
3059
|
+
event.preventDefault();
|
|
2997
3060
|
const sourceKey = buttonEl.getAttribute('data-skbtn') ?? '';
|
|
2998
3061
|
heldAccentKeyRef.current = null;
|
|
2999
3062
|
longPressTriggeredRef.current = false;
|
|
3063
|
+
if (sourceKey && !sourceKey.startsWith('{') && type !== 'numeric' && containerWidth <= 768) {
|
|
3064
|
+
const buttonRect = buttonEl.getBoundingClientRect();
|
|
3065
|
+
setKeyPreviewOffsetX(0);
|
|
3066
|
+
setKeyPreview({
|
|
3067
|
+
char: sourceKey,
|
|
3068
|
+
top: buttonRect.top - 4,
|
|
3069
|
+
left: buttonRect.left + buttonRect.width / 2,
|
|
3070
|
+
});
|
|
3071
|
+
}
|
|
3000
3072
|
if (!sourceKey || sourceKey.startsWith('{'))
|
|
3001
3073
|
return;
|
|
3074
|
+
heldAccentKeyRef.current = sourceKey;
|
|
3075
|
+
clearLongPressTimeout();
|
|
3002
3076
|
const accentOptions = ACCENT_OPTIONS[sourceKey.toLowerCase()];
|
|
3003
3077
|
if (!accentOptions)
|
|
3004
3078
|
return;
|
|
3005
|
-
heldAccentKeyRef.current = sourceKey;
|
|
3006
|
-
clearLongPressTimeout();
|
|
3007
3079
|
longPressTimeoutRef.current = setTimeout(() => {
|
|
3008
3080
|
const buttonRect = buttonEl.getBoundingClientRect();
|
|
3009
3081
|
const isUpperCaseKey = sourceKey === sourceKey.toUpperCase();
|
|
3010
3082
|
longPressTriggeredRef.current = true;
|
|
3083
|
+
setKeyPreview(null);
|
|
3011
3084
|
accentButtonRef.current = buttonEl;
|
|
3012
3085
|
setAccentMenu({
|
|
3013
3086
|
sourceKey,
|
|
@@ -3020,11 +3093,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3020
3093
|
setAccentMenuOffsetX(0);
|
|
3021
3094
|
suppressNextInputRef.current = sourceKey;
|
|
3022
3095
|
}, LONG_PRESS_DELAY_MS);
|
|
3023
|
-
}, [clearLongPressTimeout]);
|
|
3096
|
+
}, [clearLongPressTimeout, type, containerWidth]);
|
|
3024
3097
|
const handleLongPressEnd = useCallback(() => {
|
|
3025
3098
|
const heldKey = heldAccentKeyRef.current;
|
|
3026
3099
|
const longPressTriggered = longPressTriggeredRef.current;
|
|
3027
3100
|
const baseLayout = type === 'numeric' ? 'abc' : 'default';
|
|
3101
|
+
setKeyPreview(null);
|
|
3028
3102
|
isKeyboardInteractingRef.current = false;
|
|
3029
3103
|
clearLongPressTimeout();
|
|
3030
3104
|
if (heldKey && !longPressTriggered) {
|
|
@@ -3185,6 +3259,17 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3185
3259
|
return;
|
|
3186
3260
|
onChange?.(input);
|
|
3187
3261
|
}, [maxLength, onChange, syncKeyboardInput]);
|
|
3262
|
+
const portalSizes = useMemo(() => {
|
|
3263
|
+
if (containerWidth <= 360)
|
|
3264
|
+
return { preview: 42, option: 44, fontSize: 'var(--font-size-16)' };
|
|
3265
|
+
if (containerWidth <= 390)
|
|
3266
|
+
return { preview: 44, option: 44, fontSize: 'var(--font-size-18)' };
|
|
3267
|
+
if (containerWidth <= 480)
|
|
3268
|
+
return { preview: 46, option: 46, fontSize: 'var(--font-size-20)' };
|
|
3269
|
+
if (containerWidth <= 768)
|
|
3270
|
+
return { preview: 48, option: 48, fontSize: undefined };
|
|
3271
|
+
return { preview: 50, option: 50, fontSize: undefined };
|
|
3272
|
+
}, [containerWidth]);
|
|
3188
3273
|
const keyboardDisplay = useMemo(() => {
|
|
3189
3274
|
const baseDisplay = LAYOUT_DISPLAY[visualType];
|
|
3190
3275
|
if (!baseDisplay)
|
|
@@ -3216,18 +3301,28 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3216
3301
|
}
|
|
3217
3302
|
return createPortal(createElement(Icon), slot, `icon-${key}`);
|
|
3218
3303
|
});
|
|
3219
|
-
})(),
|
|
3304
|
+
})(), keyPreview && typeof document !== 'undefined' && createPortal(jsx("div", { ref: keyPreviewRef, className: styles$j.keyPreview, style: {
|
|
3305
|
+
top: keyPreview.top,
|
|
3306
|
+
left: keyPreview.left + keyPreviewOffsetX,
|
|
3307
|
+
width: portalSizes.preview,
|
|
3308
|
+
height: portalSizes.preview,
|
|
3309
|
+
...(portalSizes.fontSize ? { fontSize: portalSizes.fontSize } : {}),
|
|
3310
|
+
}, "aria-hidden": true, children: keyPreview.char }), document.body), accentMenu && (typeof document !== 'undefined' &&
|
|
3220
3311
|
createPortal(jsx("div", { ref: accentMenuRef, className: styles$j.accentMenu, style: {
|
|
3221
3312
|
top: accentMenu.top,
|
|
3222
3313
|
left: accentMenu.left + accentMenuOffsetX,
|
|
3223
|
-
}, role: "listbox", "aria-label": `Opcoes de acento para ${accentMenu.sourceKey}`, children: accentMenu.options.map((option) => (jsx("button", { type: "button", className: styles$j.accentOption,
|
|
3224
|
-
|
|
3225
|
-
|
|
3226
|
-
|
|
3314
|
+
}, 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) => (jsx("div", { className: styles$j.accentMenuRow, children: rowOptions.map((option) => (jsx("button", { type: "button", className: styles$j.accentOption, style: {
|
|
3315
|
+
minWidth: portalSizes.option,
|
|
3316
|
+
height: portalSizes.option,
|
|
3317
|
+
...(portalSizes.fontSize ? { fontSize: portalSizes.fontSize } : {}),
|
|
3318
|
+
}, onPointerDown: (event) => {
|
|
3319
|
+
event.preventDefault();
|
|
3320
|
+
event.stopPropagation();
|
|
3321
|
+
}, onClick: () => handleAccentSelect(option), children: option }, `${accentMenu.sourceKey}-${option}`))) }, rowIndex))) }), document.body))] })) : null;
|
|
3227
3322
|
if (variant === 'native' && typeof document !== 'undefined') {
|
|
3228
3323
|
return createPortal(jsx("div", { id: id, className: clsx(styles$j.overlay, { [styles$j.overlayOpen]: isOpen }, styles$j[`layout--${visualType}`], className), children: keyboardEl }), document.body);
|
|
3229
3324
|
}
|
|
3230
|
-
return (jsxs("div", { id: id, className: clsx(styles$j.container, styles$j[`mode--${variant}`], styles$j[`layout--${visualType}`], className), children: [variant === 'fixed' && (jsx("div", { className: styles$j.textFieldContainer, children: jsx(TextField$1, { placeholder: textFieldPlaceholder, value: value, onChange: onChange, helperText: helperText, error: error, errorMessage: errorMessage, readOnly: true, maxLength: maxLength, attachedToVirtualKeyboard: true, className: styles$j.textFieldWrapper }) })), keyboardEl] }));
|
|
3325
|
+
return (jsxs("div", { id: id, className: clsx(styles$j.container, styles$j[`mode--${variant}`], styles$j[`layout--${visualType}`], className), children: [variant === 'fixed' && (jsx("div", { className: styles$j.textFieldContainer, children: jsx(TextField$1, { 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] }));
|
|
3231
3326
|
};
|
|
3232
3327
|
|
|
3233
3328
|
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"};
|
|
@@ -3253,7 +3348,7 @@ const LabelComponent = ({ children, htmlFor, required = false, tooltip = false,
|
|
|
3253
3348
|
return container;
|
|
3254
3349
|
};
|
|
3255
3350
|
|
|
3256
|
-
const TextField = forwardRef(({ className, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength
|
|
3351
|
+
const TextField = forwardRef(({ className, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength, required = false, helperText, tooltip = false, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, icon, scale = 1, onBlur, onFocus, name, persistIcon = false, virtualKeyboard, attachedToVirtualKeyboard, disableAutoComplete = false, ...rest }, ref) => {
|
|
3257
3352
|
const normalizeValue = (val) => {
|
|
3258
3353
|
return val === undefined || val === null ? '' : String(val);
|
|
3259
3354
|
};
|
|
@@ -3325,12 +3420,12 @@ const TextField = forwardRef(({ className, value, label, placeholder, type = 'te
|
|
|
3325
3420
|
[styles$i.attachedToVirtualKeyboard]: attachedToVirtualKeyboard,
|
|
3326
3421
|
[className]: className,
|
|
3327
3422
|
});
|
|
3328
|
-
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side:
|
|
3423
|
+
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: tooltipSide, align: tooltipAlign, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$i.inputWrapper, children: [jsxs("div", { className: styles$i.inputContainer, children: [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({
|
|
3329
3424
|
[styles$i.inputWithIcon]: showCustomIcon || showClearIcon,
|
|
3330
3425
|
}) }), showCustomIcon && jsx("span", { className: styles$i.icon, children: icon }), showClearIcon && (jsx("button", { type: "button", className: styles$i.clearButton, onMouseDown: (e) => {
|
|
3331
3426
|
e.preventDefault();
|
|
3332
3427
|
handleClear();
|
|
3333
|
-
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx(Dismiss16Regular, {}) }))] }), (errorMessage || inputError || helperText) && (jsx("span", { id: helperId, className: styles$i.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText }))] }), virtualKeyboard && (jsx("div", { className: "virtualKeyboardWrapper", children: jsx(VirtualKeyboard, { variant: "native", type:
|
|
3428
|
+
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx(Dismiss16Regular, {}) }))] }), ((error && errorMessage) || inputError || helperText) && (jsx("span", { id: helperId, className: styles$i.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText }))] }), (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') && (jsx("div", { className: "virtualKeyboardWrapper", children: jsx(VirtualKeyboard, { variant: "native", type: virtualKeyboard, value: inputValue, maxLength: maxLength, targetRef: inputRef, onChange: (val) => {
|
|
3334
3429
|
if (!disabled && (!maxLength || val.length <= maxLength)) {
|
|
3335
3430
|
setInputValue(val);
|
|
3336
3431
|
onChange?.(val);
|
|
@@ -3662,7 +3757,7 @@ const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled
|
|
|
3662
3757
|
|
|
3663
3758
|
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"};
|
|
3664
3759
|
|
|
3665
|
-
const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, searchMode = 'instant', onSearch, id, scale = 1, className, virtualKeyboard
|
|
3760
|
+
const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, searchMode = 'instant', onSearch, id, scale = 1, className, virtualKeyboard, 'data-testid': testId, ...rest }, ref) => {
|
|
3666
3761
|
const [internalValue, setInternalValue] = useState('');
|
|
3667
3762
|
const { internalRef: inputRef, setRefs: setInputRefs } = useInputKeyboardValue(ref);
|
|
3668
3763
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
@@ -3725,7 +3820,7 @@ const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser
|
|
|
3725
3820
|
e.preventDefault();
|
|
3726
3821
|
onClick?.(e);
|
|
3727
3822
|
}
|
|
3728
|
-
} : undefined, children: [jsx("span", { className: clsx(styles$c.searchLeftIcon, { [styles$c.disabled]: disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsx(Search16Regular, {}) }), 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 && (jsx("span", { className: styles$c.searchClearIcon, "aria-hidden": "true", onClick: clearInputSearch, children: jsx(Dismiss16Regular, {}) })), virtualKeyboard && (jsx("div", { className: "virtualKeyboardWrapper", children: jsx(VirtualKeyboard, { variant: "native", type:
|
|
3823
|
+
} : undefined, children: [jsx("span", { className: clsx(styles$c.searchLeftIcon, { [styles$c.disabled]: disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsx(Search16Regular, {}) }), 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 && (jsx("span", { className: styles$c.searchClearIcon, "aria-hidden": "true", onClick: clearInputSearch, children: jsx(Dismiss16Regular, {}) })), (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') && (jsx("div", { className: "virtualKeyboardWrapper", children: jsx(VirtualKeyboard, { variant: "native", type: virtualKeyboard, value: currentValue || '', targetRef: inputRef, onChange: (val) => {
|
|
3729
3824
|
if (disabled)
|
|
3730
3825
|
return;
|
|
3731
3826
|
if (isControlled) {
|
|
@@ -5234,7 +5329,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5234
5329
|
};
|
|
5235
5330
|
return (jsxs("div", { className: clsx(styles$4.wrapper, className), children: [showBulkActions && (jsxs("div", { className: styles$4.bulkActionsBar, children: [jsxs("div", { className: styles$4.bulkActionsInfo, children: [jsx(Button, { variant: "text", iconOnly: true, icon: jsx(Dismiss16Regular, {}), ariaLabel: "Limpar sele\u00E7\u00E3o", onClick: handleClearSelection, className: styles$4.bulkActionsClearButton }), jsx("span", { className: styles$4.bulkActionsLabel, children: bulkActions.label
|
|
5236
5331
|
? bulkActions.label(selectedCount, selectedRows)
|
|
5237
|
-
: `${selectedCount} ${selectedCount === 1 ? 'item selecionado' : 'itens selecionados'}` })] }), jsx("div", { className: styles$4.bulkActionsButtons, children: bulkActions.actions.map((action, index) => (jsx(Button, { variant: action.variant ?? 'outlined', type: "button", disabled: action.disabled, onClick: action.onClick, size: "sm", children: action.label }, index))) })] })), header && (jsxs("div", { className: styles$4.tableHeader, children: [showSearch && (jsx("div", { className: styles$4.tableHeaderSearchContainer, children: jsx(Search, { value: pendingSearch, virtualKeyboard: header.virtualKeyboard,
|
|
5332
|
+
: `${selectedCount} ${selectedCount === 1 ? 'item selecionado' : 'itens selecionados'}` })] }), jsx("div", { className: styles$4.bulkActionsButtons, children: bulkActions.actions.map((action, index) => (jsx(Button, { variant: action.variant ?? 'outlined', type: "button", disabled: action.disabled, onClick: action.onClick, size: "sm", children: action.label }, index))) })] })), header && (jsxs("div", { className: styles$4.tableHeader, children: [showSearch && (jsx("div", { className: styles$4.tableHeaderSearchContainer, children: jsx(Search, { value: pendingSearch, virtualKeyboard: header.virtualKeyboard, searchMode: header?.searchMode ?? "on-enter", onChange: (e) => {
|
|
5238
5333
|
setPendingSearch(e.target.value);
|
|
5239
5334
|
}, onSearch: (val) => {
|
|
5240
5335
|
if (footer) {
|
|
@@ -5299,7 +5394,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5299
5394
|
|
|
5300
5395
|
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"};
|
|
5301
5396
|
|
|
5302
|
-
const TextArea = 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
|
|
5397
|
+
const TextArea = 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) => {
|
|
5303
5398
|
const normalizeValue = (val) => {
|
|
5304
5399
|
return val === undefined || val === null ? '' : String(val);
|
|
5305
5400
|
};
|
|
@@ -5338,7 +5433,7 @@ const TextArea = forwardRef(({ className, value, label, placeholder, onChange, d
|
|
|
5338
5433
|
? `${componentId}-helper`
|
|
5339
5434
|
: undefined;
|
|
5340
5435
|
const containerClass = clsx(styles$3.container, disabled && styles$3.disabled, hasError && !disabled && styles$3.error, className);
|
|
5341
|
-
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$3.inputWrapper, children: [jsx("div", { className: styles$3.inputContainer, children: 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 }) }), jsxs("div", { className: styles$3.footer, children: [jsx("span", { id: helperId, className: styles$3.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText }), showCharCount && maxLength && (jsxs("span", { className: styles$3.charCount, children: [textareaValue.length, "/", maxLength] }))] })] }), virtualKeyboard && (jsx("div", { className: "virtualKeyboardWrapper", children: jsx(VirtualKeyboard, { variant: "native", type:
|
|
5436
|
+
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$3.inputWrapper, children: [jsx("div", { className: styles$3.inputContainer, children: 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 }) }), jsxs("div", { className: styles$3.footer, children: [jsx("span", { id: helperId, className: styles$3.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText }), showCharCount && maxLength && (jsxs("span", { className: styles$3.charCount, children: [textareaValue.length, "/", maxLength] }))] })] }), (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') && (jsx("div", { className: "virtualKeyboardWrapper", children: jsx(VirtualKeyboard, { variant: "native", type: virtualKeyboard, maxLength: maxLength, value: textareaValue, targetRef: textareaRef, onChange: (val) => {
|
|
5342
5437
|
if (!disabled && (!maxLength || val.length <= maxLength)) {
|
|
5343
5438
|
setTextareaValue(val);
|
|
5344
5439
|
onChange?.(val);
|
|
@@ -5979,5 +6074,5 @@ function useInfiniteScroll({ status, page, lastPage, onLoadMore, threshold = 0.1
|
|
|
5979
6074
|
};
|
|
5980
6075
|
}
|
|
5981
6076
|
|
|
5982
|
-
export { Avatar, Badge, Button, Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, Dialog, Drawer, Filter, ListItem, Menu, Modal, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, Table, TableHeader, TablePagination, TableV2, TextArea_default as TextArea, TextField$1 as TextField, Toast, ToastContainer, ToastProvider, Tooltip, VerificationCode, VirtualKeyboard, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
6077
|
+
export { Avatar, Badge, Button, Calendar, Callout, Card, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, Dialog, Drawer, Filter, ListItem, Menu, Modal, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, Table, TableHeader, TablePagination, TableV2, TextArea_default as TextArea, TextField$1 as TextField, Toast, ToastContainer, ToastProvider, Tooltip, VerificationCode, VirtualKeyboard, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
5983
6078
|
//# sourceMappingURL=index.esm.js.map
|