@giro-ds/react 1.0.5 → 3.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/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/Button.types.d.ts +3 -23
- package/dist/components/Button/__tests__/Button.test.d.ts +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +4 -4
- package/dist/components/Checkbox/Checkbox.types.d.ts +4 -19
- package/dist/components/Checkbox/__tests__/Checkbox.test.d.ts +1 -0
- package/dist/components/Menu/Menu.d.ts +1 -1
- package/dist/components/Menu/Menu.types.d.ts +25 -34
- package/dist/components/Menu/__tests__/Menu.test.d.ts +1 -0
- package/dist/components/{MenuRadix → Menu}/components/MenuItem.d.ts +1 -6
- package/dist/components/{MenuRadix → Menu}/hooks/useMenuLogic.d.ts +1 -1
- package/dist/components/{MenuRadix → Menu}/hooks/useSearchLogic.d.ts +1 -1
- package/dist/components/Menu/index.d.ts +1 -1
- package/dist/components/Radio/Radio.d.ts +3 -3
- package/dist/components/Radio/Radio.types.d.ts +11 -14
- package/dist/components/Radio/__tests__/Radio.test.d.ts +1 -0
- package/dist/components/Radio/index.d.ts +1 -0
- package/dist/components/Search/Search.types.d.ts +1 -0
- package/dist/components/Select/Select.d.ts +2 -2
- package/dist/components/Select/Select.types.d.ts +100 -52
- package/dist/components/Select/__tests__/SelectRadix.test.d.ts +1 -0
- package/dist/components/{SelectRadix → Select}/components/CheckboxSelectItem.d.ts +1 -1
- package/dist/components/Select/components/ExpandableSelectItem.d.ts +11 -0
- package/dist/components/{SelectRadix → Select}/components/SelectItem.d.ts +1 -1
- package/dist/components/{SelectRadix → Select}/hooks/useSelectLogic.d.ts +1 -1
- package/dist/components/Select/index.d.ts +4 -1
- package/dist/components/Switch/Switch.d.ts +4 -0
- package/dist/components/{CheckboxRadix/CheckboxRadix.types.d.ts → Switch/Switch.types.d.ts} +5 -7
- package/dist/components/Switch/__tests__/Switch.test.d.ts +1 -0
- package/dist/components/Switch/index.d.ts +2 -0
- package/dist/components/Table/Table.d.ts +2 -3
- package/dist/components/Table/Table.types.d.ts +46 -10
- package/dist/components/Table/index.d.ts +1 -1
- package/dist/components/TextField/TextField.types.d.ts +2 -3
- package/dist/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.types.d.ts +5 -1
- package/dist/components/Tooltip/__tests__/Tooltip.test.d.ts +1 -0
- package/dist/components/Tooltip/index.d.ts +1 -0
- package/dist/components/index.d.ts +5 -13
- package/dist/index.cjs +275 -843
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +85 -248
- package/dist/index.esm.js +287 -833
- package/dist/index.esm.js.map +1 -1
- package/dist/shared/Label/index.d.ts +4 -3
- package/dist/styles.css +1 -1
- package/package.json +3 -2
- package/dist/components/CheckboxRadix/CheckboxRadix.d.ts +0 -4
- package/dist/components/CheckboxRadix/index.d.ts +0 -2
- package/dist/components/MenuRadix/MenuRadix.d.ts +0 -4
- package/dist/components/MenuRadix/MenuRadix.types.d.ts +0 -27
- package/dist/components/MenuRadix/index.d.ts +0 -2
- package/dist/components/RadioRadix/RadioRadix.d.ts +0 -4
- package/dist/components/RadioRadix/RadioRadix.types.d.ts +0 -15
- package/dist/components/RadioRadix/index.d.ts +0 -2
- package/dist/components/SelectField/SelectField.d.ts +0 -4
- package/dist/components/SelectField/SelectField.types.d.ts +0 -35
- package/dist/components/SelectRadix/SelectRadix.d.ts +0 -4
- package/dist/components/SelectRadix/SelectRadix.types.d.ts +0 -112
- package/dist/components/SelectRadix/index.d.ts +0 -5
package/dist/index.cjs
CHANGED
|
@@ -8,37 +8,18 @@ var reactI18next = require('react-i18next');
|
|
|
8
8
|
var i18n = require('i18next');
|
|
9
9
|
var radixUi = require('radix-ui');
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
var n = Object.create(null);
|
|
13
|
-
if (e) {
|
|
14
|
-
Object.keys(e).forEach(function (k) {
|
|
15
|
-
if (k !== 'default') {
|
|
16
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
17
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
18
|
-
enumerable: true,
|
|
19
|
-
get: function () { return e[k]; }
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
n.default = e;
|
|
25
|
-
return Object.freeze(n);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
29
|
-
|
|
30
|
-
var styles$t = {"zds-avatar__circle":"Avatar-module__zds-avatar__circle___DXcGa","zds-avatar__large":"Avatar-module__zds-avatar__large___G6qoo","zds-avatar__circle__icon":"Avatar-module__zds-avatar__circle__icon___u14vV","zds-avatar__small":"Avatar-module__zds-avatar__small___d-Pj5"};
|
|
11
|
+
var styles$p = {"zds-avatar__circle":"Avatar-module__zds-avatar__circle___DXcGa","zds-avatar__large":"Avatar-module__zds-avatar__large___G6qoo","zds-avatar__circle__icon":"Avatar-module__zds-avatar__circle__icon___u14vV","zds-avatar__small":"Avatar-module__zds-avatar__small___d-Pj5"};
|
|
31
12
|
|
|
32
13
|
let Avatar = ({ id = '', icon, size = 'small', className = '' }) => {
|
|
33
14
|
const componentId = id || React.useId();
|
|
34
|
-
const AvatarClass = clsx(styles$
|
|
35
|
-
[styles$
|
|
36
|
-
[styles$
|
|
15
|
+
const AvatarClass = clsx(styles$p['zds-avatar__circle'], {
|
|
16
|
+
[styles$p['zds-avatar__large']]: size === 'large',
|
|
17
|
+
[styles$p['zds-avatar__small']]: size === 'small',
|
|
37
18
|
}, className);
|
|
38
|
-
return (jsxRuntime.jsx("div", { className: AvatarClass, id: componentId, role: "img", "aria-label": `Avatar ${size}`, children: jsxRuntime.jsx("div", { className: styles$
|
|
19
|
+
return (jsxRuntime.jsx("div", { className: AvatarClass, id: componentId, role: "img", "aria-label": `Avatar ${size}`, children: jsxRuntime.jsx("div", { className: styles$p['zds-avatar__circle__icon'], children: icon }) }));
|
|
39
20
|
};
|
|
40
21
|
|
|
41
|
-
var styles$
|
|
22
|
+
var styles$o = {"zds-badge__container":"Badge-module__zds-badge__container___NMAZD","zds-badge":"Badge-module__zds-badge___TeF7g","zds-badge__status":"Badge-module__zds-badge__status___3rFKE","zds-badge__small":"Badge-module__zds-badge__small___lVA0I","zds-badge__large":"Badge-module__zds-badge__large___yxb6z","zds-badge__status__empty":"Badge-module__zds-badge__status__empty___zWu8n"};
|
|
42
23
|
|
|
43
24
|
const Badge = ({ children, badgeValue = null, type = 'notification', className = '', id, 'aria-label': ariaLabel, }) => {
|
|
44
25
|
const isEmpty = badgeValue === null || badgeValue === undefined || badgeValue === '';
|
|
@@ -61,20 +42,21 @@ const Badge = ({ children, badgeValue = null, type = 'notification', className =
|
|
|
61
42
|
};
|
|
62
43
|
const displayValue = getDisplayValue(badgeValue);
|
|
63
44
|
if (type === 'notification') {
|
|
64
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
65
|
-
[styles$
|
|
66
|
-
[styles$
|
|
67
|
-
}, className), "data-testid": "badge-notification", children: !isEmpty && (jsxRuntime.jsx("span", { className: styles$
|
|
45
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$o['zds-badge__container']), children: [jsxRuntime.jsx("div", { id: componentId, className: clsx(styles$o['zds-badge'], {
|
|
46
|
+
[styles$o['zds-badge__small']]: Number(badgeValue) <= 10,
|
|
47
|
+
[styles$o['zds-badge__large']]: Number(badgeValue) > 10,
|
|
48
|
+
}, className), "data-testid": "badge-notification", children: !isEmpty && (jsxRuntime.jsx("span", { className: styles$o['zds-badge__value'], "aria-hidden": ariaLabel ? 'true' : 'false', children: displayValue })) }), children && (jsxRuntime.jsx("div", { className: styles$o['zds-badge__content'], "data-testid": "badge-content", children: children }))] }));
|
|
68
49
|
}
|
|
69
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$
|
|
70
|
-
[styles$
|
|
71
|
-
}, className), "data-testid": "badge-status", children: !isEmpty && (jsxRuntime.jsx("span", { className: styles$
|
|
50
|
+
return (jsxRuntime.jsx("div", { className: clsx(styles$o['zds-badge__container']), children: jsxRuntime.jsx("div", { className: clsx(styles$o['zds-badge__status'], {
|
|
51
|
+
[styles$o['zds-badge__status__empty']]: isEmpty,
|
|
52
|
+
}, className), "data-testid": "badge-status", children: !isEmpty && (jsxRuntime.jsx("span", { className: styles$o['zds-badge__status-value'], "aria-hidden": ariaLabel ? 'true' : 'false', children: displayValue })) }) }));
|
|
72
53
|
};
|
|
73
54
|
|
|
74
|
-
var styles$
|
|
55
|
+
var styles$n = {"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","spin":"Button-module__spin___kQKH9"};
|
|
75
56
|
|
|
76
|
-
const Button = React.forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel,
|
|
77
|
-
const
|
|
57
|
+
const Button = React.forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel, disabled = false, onClick, size = 'lg', className = '', type = 'button', id = '', icon = null, fullWidth = false, ariaLabel = '', iconOnly = false, loading = false, ...restProps }, ref) => {
|
|
58
|
+
const generatedId = React.useId();
|
|
59
|
+
const componentId = id || generatedId;
|
|
78
60
|
const getComponent = () => {
|
|
79
61
|
if (as)
|
|
80
62
|
return as;
|
|
@@ -88,21 +70,18 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
88
70
|
const hasContent = React.useMemo(() => {
|
|
89
71
|
return children && React.Children.count(children) > 0;
|
|
90
72
|
}, [children]);
|
|
91
|
-
const buttonClasses = clsx(styles$
|
|
92
|
-
[styles$
|
|
93
|
-
[styles$
|
|
94
|
-
[styles$
|
|
95
|
-
[styles$
|
|
96
|
-
[styles$
|
|
97
|
-
[styles$
|
|
73
|
+
const buttonClasses = clsx(styles$n.button, styles$n[`button-${variant}`], styles$n[`button-${size}`], {
|
|
74
|
+
[styles$n['buttonLoading']]: loading,
|
|
75
|
+
[styles$n['buttonWithIcon']]: icon && !iconOnly,
|
|
76
|
+
[styles$n[`buttonIconPosition-${iconPosition}`]]: icon && !iconOnly,
|
|
77
|
+
[styles$n['buttonNoContent']]: icon && !hasContent && !iconOnly,
|
|
78
|
+
[styles$n['buttonFullWidth']]: fullWidth,
|
|
79
|
+
[styles$n['buttonIconOnly']]: iconOnly,
|
|
98
80
|
}, className);
|
|
99
81
|
const getAriaLabel = () => {
|
|
100
82
|
if (ariaLabel)
|
|
101
83
|
return ariaLabel;
|
|
102
84
|
if (iconOnly && !ariaLabel) {
|
|
103
|
-
if (process.env.NODE_ENV === 'development') {
|
|
104
|
-
console.warn('Button: Icon-only buttons should have an ariaLabel for accessibility');
|
|
105
|
-
}
|
|
106
85
|
return 'Botão de ação';
|
|
107
86
|
}
|
|
108
87
|
if (typeof children === 'string')
|
|
@@ -117,10 +96,13 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
117
96
|
onClick?.(e);
|
|
118
97
|
};
|
|
119
98
|
const renderContent = () => {
|
|
120
|
-
if (iconOnly &&
|
|
121
|
-
return (jsxRuntime.jsx("span", { className: styles$
|
|
99
|
+
if (iconOnly && !loading) {
|
|
100
|
+
return (jsxRuntime.jsx("span", { className: styles$n.buttonIconOnly, "aria-hidden": "true", children: icon }));
|
|
122
101
|
}
|
|
123
|
-
|
|
102
|
+
if (loading) {
|
|
103
|
+
return (jsxRuntime.jsx("span", { className: styles$n.buttonLoading, "aria-hidden": "true", children: jsxRuntime.jsx(reactIcons.SpinnerIos16Regular, { "aria-hidden": "true" }) }));
|
|
104
|
+
}
|
|
105
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && (iconPosition === 'left' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$n.buttonIconLeft, "aria-hidden": "true", children: icon })), children, icon && (iconPosition === 'right' || iconPosition === 'both') && (jsxRuntime.jsx("span", { className: styles$n.buttonIconRight, "aria-hidden": "true", children: icon }))] }));
|
|
124
106
|
};
|
|
125
107
|
const baseProps = {
|
|
126
108
|
ref,
|
|
@@ -144,7 +126,6 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
144
126
|
if (Component !== 'a') {
|
|
145
127
|
return {
|
|
146
128
|
to: disabled ? '#' : to,
|
|
147
|
-
...routerProps,
|
|
148
129
|
};
|
|
149
130
|
}
|
|
150
131
|
return {
|
|
@@ -163,7 +144,7 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
163
144
|
});
|
|
164
145
|
Button.displayName = 'Button';
|
|
165
146
|
|
|
166
|
-
var styles$
|
|
147
|
+
var styles$m = {"zds-calendar":"Calendar-module__zds-calendar___PxF9r","zds-calendar__header":"Calendar-module__zds-calendar__header___KsUk4","zds-calendar__month-name":"Calendar-module__zds-calendar__month-name___lyWIV","zds-calendar__year":"Calendar-module__zds-calendar__year___kWZ5P","zds-calendar__year-view":"Calendar-module__zds-calendar__year-view___srlWI","zds-calendar__year--current":"Calendar-module__zds-calendar__year--current___iVQH-","zds-calendar__navigation":"Calendar-module__zds-calendar__navigation___HVXdu","zds-calendar__weekdays":"Calendar-module__zds-calendar__weekdays___x8IAE","zds-calendar__grid":"Calendar-module__zds-calendar__grid___7VcR9","zds-calendar__weekday":"Calendar-module__zds-calendar__weekday___-dJW-","zds-calendar__days":"Calendar-module__zds-calendar__days___voUPb","zds-calendar__day":"Calendar-module__zds-calendar__day___ajiy4","zds-calendar__day--today":"Calendar-module__zds-calendar__day--today___qr5Cn","zds-calendar__day--selected":"Calendar-module__zds-calendar__day--selected___18JlM","zds-calendar__day--empty":"Calendar-module__zds-calendar__day--empty___uj4TJ","zds-calendar__clear":"Calendar-module__zds-calendar__clear___gEqoV"};
|
|
167
148
|
|
|
168
149
|
// i18n.ts
|
|
169
150
|
// Resources configuration
|
|
@@ -523,8 +504,8 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
523
504
|
* Renderiza os anos usando o array de objetos memoizado.
|
|
524
505
|
*/
|
|
525
506
|
const renderYears = React.useCallback(() => {
|
|
526
|
-
return yearsArray.map((item) => (jsxRuntime.jsx("div", { className: clsx(styles$
|
|
527
|
-
[styles$
|
|
507
|
+
return yearsArray.map((item) => (jsxRuntime.jsx("div", { className: clsx(styles$m['zds-calendar__year'], {
|
|
508
|
+
[styles$m['zds-calendar__year--current']]: item.isCurrent,
|
|
528
509
|
}), onClick: () => handleYearSelect(item.year), tabIndex: 0, role: "button", "aria-pressed": item.isCurrent, "aria-label": item.isCurrent
|
|
529
510
|
? locale === 'en-us'
|
|
530
511
|
? `Current year, ${item.year}`
|
|
@@ -544,14 +525,14 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
544
525
|
const renderDays = React.useCallback(() => {
|
|
545
526
|
return daysArray.map((item) => {
|
|
546
527
|
if (item.type === 'empty') {
|
|
547
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$
|
|
528
|
+
return (jsxRuntime.jsx("div", { className: clsx(styles$m['zds-calendar__day'], styles$m['zds-calendar__day--empty']), "aria-hidden": "true" }, item.key));
|
|
548
529
|
}
|
|
549
530
|
const dayItem = item;
|
|
550
531
|
const isDisabled = !isDateInRange(dayItem.date);
|
|
551
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$
|
|
552
|
-
[styles$
|
|
553
|
-
[styles$
|
|
554
|
-
[styles$
|
|
532
|
+
return (jsxRuntime.jsx("div", { className: clsx(styles$m['zds-calendar__day'], {
|
|
533
|
+
[styles$m['zds-calendar__day--today']]: dayItem.isToday,
|
|
534
|
+
[styles$m['zds-calendar__day--selected']]: dayItem.isSelected,
|
|
535
|
+
[styles$m['zds-calendar__day--disabled']]: isDisabled,
|
|
555
536
|
}), onClick: isDisabled ? undefined : () => handleSelectDay(dayItem.day), onKeyDown: isDisabled ? undefined : (e) => handleDayKeyDown(e, dayItem.day), tabIndex: isDisabled ? -1 : 0, role: "gridcell", "aria-selected": dayItem.isSelected, "aria-current": dayItem.isToday ? 'date' : undefined, "aria-disabled": isDisabled, "aria-label": `${dayItem.day} ${getMonthName()} ${year}${dayItem.isToday ? ` (${t('today')})` : ''}${dayItem.isSelected ? ` (${t('selected')})` : ''}${isDisabled ? ` (${t('disabled')})` : ''}`, children: dayItem.day }, dayItem.key));
|
|
556
537
|
});
|
|
557
538
|
}, [
|
|
@@ -567,7 +548,7 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
567
548
|
const weekdaysComponent = React.useMemo(() => {
|
|
568
549
|
if (changeView)
|
|
569
550
|
return null;
|
|
570
|
-
return weekDaysLabels.map((day, idx) => (jsxRuntime.jsx("div", { className: styles$
|
|
551
|
+
return weekDaysLabels.map((day, idx) => (jsxRuntime.jsx("div", { className: styles$m['zds-calendar__weekday'], children: day }, `${day}-${idx}`)));
|
|
571
552
|
}, [changeView, weekDaysLabels]);
|
|
572
553
|
// ✅ Limpa o anúncio após um tempo para evitar repetições
|
|
573
554
|
React.useEffect(() => {
|
|
@@ -582,13 +563,13 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
582
563
|
setYearRangeStart(year - 13);
|
|
583
564
|
}
|
|
584
565
|
}, [changeView, year]);
|
|
585
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
566
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$m['zds-calendar'], { [styles$m['zds-calendar--year-view']]: changeView }, className), id: componentId, tabIndex: 0, ref: calendarRef, onKeyDown: handleCalendarKeyDown, "aria-label": t('calendar'), children: [jsxRuntime.jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: styles$m['zds-calendar__aria-live'], style: {
|
|
586
567
|
position: 'absolute',
|
|
587
568
|
width: 1,
|
|
588
569
|
height: 1,
|
|
589
570
|
overflow: 'hidden',
|
|
590
571
|
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
591
|
-
}, children: announcement }), jsxRuntime.jsxs("div", { className: styles$
|
|
572
|
+
}, children: announcement }), jsxRuntime.jsxs("div", { className: styles$m['zds-calendar__header'], children: [jsxRuntime.jsxs("span", { className: styles$m['zds-calendar__month-name'], onClick: handleToggleView, onKeyDown: (e) => {
|
|
592
573
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
593
574
|
e.preventDefault();
|
|
594
575
|
handleToggleView();
|
|
@@ -599,7 +580,7 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
599
580
|
: 'Fechar seleção de ano'
|
|
600
581
|
: locale === 'en-us'
|
|
601
582
|
? 'Open year selection'
|
|
602
|
-
: 'Abrir seleção de ano', children: [`${getMonthName()} ${year}`, changeView ? (jsxRuntime.jsx(reactIcons.ChevronUp16Regular, { "aria-hidden": "true" })) : (jsxRuntime.jsx(reactIcons.ChevronDown16Regular, { "aria-hidden": "true" }))] }), jsxRuntime.jsxs("div", { className: styles$
|
|
583
|
+
: 'Abrir seleção de ano', children: [`${getMonthName()} ${year}`, changeView ? (jsxRuntime.jsx(reactIcons.ChevronUp16Regular, { "aria-hidden": "true" })) : (jsxRuntime.jsx(reactIcons.ChevronDown16Regular, { "aria-hidden": "true" }))] }), jsxRuntime.jsxs("div", { className: styles$m['zds-calendar__navigation'], children: [jsxRuntime.jsx("button", { onClick: handlePrevMonth, "aria-label": changeView
|
|
603
584
|
? locale === 'en-us'
|
|
604
585
|
? 'Show previous years'
|
|
605
586
|
: 'Mostrar anos anteriores'
|
|
@@ -611,27 +592,27 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
611
592
|
: 'Mostrar próximos anos'
|
|
612
593
|
: locale === 'en-us'
|
|
613
594
|
? `Next month, ${new Date(year, month + 1, 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}`
|
|
614
|
-
: `Próximo mês, ${new Date(year, month + 1, 1).toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' })}`, type: "button", className: "zds-calendar__nav-button", children: jsxRuntime.jsx(reactIcons.ChevronRight16Regular, { "aria-hidden": "true" }) })] })] }), jsxRuntime.jsx("div", { className: styles$
|
|
595
|
+
: `Próximo mês, ${new Date(year, month + 1, 1).toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' })}`, type: "button", className: "zds-calendar__nav-button", children: jsxRuntime.jsx(reactIcons.ChevronRight16Regular, { "aria-hidden": "true" }) })] })] }), jsxRuntime.jsx("div", { className: styles$m['zds-calendar__weekdays'], children: weekdaysComponent }), jsxRuntime.jsx("div", { className: styles$m['zds-calendar__grid'], children: changeView ? (jsxRuntime.jsx("div", { className: styles$m['zds-calendar__year-view'], role: "grid", "aria-label": t('yearSelection'), children: renderYears() })) : (jsxRuntime.jsx("div", { className: styles$m['zds-calendar__days'], role: "grid", "aria-label": `${getMonthName()} ${year}`, children: renderDays() })) }), jsxRuntime.jsx("div", { className: styles$m['zds-calendar__clear'], children: jsxRuntime.jsx(Button, { size: "sm", variant: "outlined", onClick: handleClearDate, disabled: !selectedDate, children: "Limpar" }) })] }));
|
|
615
596
|
};
|
|
616
597
|
// ✅ Default props integrados na função usando valores padrão dos parâmetros
|
|
617
598
|
Calendar.displayName = 'Calendar';
|
|
618
599
|
const MemoizedCalendar = React.memo(Calendar);
|
|
619
600
|
MemoizedCalendar.displayName = 'Calendar';
|
|
620
601
|
|
|
621
|
-
var styles$
|
|
602
|
+
var styles$l = {"zds-callout__container":"Callout-module__zds-callout__container___EoOQd","zds-callout__container__with-title":"Callout-module__zds-callout__container__with-title___NUq2k","zds-callout__neutral":"Callout-module__zds-callout__neutral___ib9gW","zds-callout__brand":"Callout-module__zds-callout__brand___UYVny","zds-callout__color":"Callout-module__zds-callout__color___6ojEV","zds-callout__alert":"Callout-module__zds-callout__alert___gSOsh","zds-callout__success":"Callout-module__zds-callout__success___6W096","zds-callout__title":"Callout-module__zds-callout__title___jmmqj","zds-callout__text":"Callout-module__zds-callout__text___MTO5R","zds-callout__icon":"Callout-module__zds-callout__icon___-CaUD","zds-callout__content":"Callout-module__zds-callout__content___hh0Mj","zds-callout__subcontent":"Callout-module__zds-callout__subcontent___olIpt"};
|
|
622
603
|
|
|
623
604
|
const Callout = ({ type = 'neutral', title = null, text = '', icon = null, className = '', id = '' }) => {
|
|
624
605
|
const generatedId = React.useId();
|
|
625
606
|
const titleId = id || `callout-title-${generatedId}`;
|
|
626
607
|
const componentId = id || generatedId;
|
|
627
|
-
const calloutClass = clsx(styles$
|
|
628
|
-
[styles$
|
|
629
|
-
[styles$
|
|
608
|
+
const calloutClass = clsx(styles$l['zds-callout__container'], styles$l[`zds-callout__${type}`], {
|
|
609
|
+
[styles$l['zds-callout__container__with-title']]: title,
|
|
610
|
+
[styles$l['zds-callout__no-icon']]: !icon,
|
|
630
611
|
}, className);
|
|
631
|
-
return (jsxRuntime.jsx("div", { id: componentId, className: calloutClass, "aria-live": "polite", role: "alert", "aria-labelledby": title ? titleId : undefined, children: jsxRuntime.jsxs("div", { className: styles$
|
|
612
|
+
return (jsxRuntime.jsx("div", { id: componentId, className: calloutClass, "aria-live": "polite", role: "alert", "aria-labelledby": title ? titleId : undefined, children: jsxRuntime.jsxs("div", { className: styles$l['zds-callout__content'], children: [icon && jsxRuntime.jsx("span", { className: styles$l['zds-callout__icon'], children: icon }), jsxRuntime.jsxs("div", { className: styles$l['zds-callout__subcontent'], children: [title && (jsxRuntime.jsx("span", { id: titleId, className: styles$l['zds-callout__title'], children: title })), text && jsxRuntime.jsx("span", { className: styles$l['zds-callout__text'], children: text })] })] }) }));
|
|
632
613
|
};
|
|
633
614
|
|
|
634
|
-
var styles$
|
|
615
|
+
var styles$k = {"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"};
|
|
635
616
|
|
|
636
617
|
const CheckSmall = ({ className = '', width = 12, height = 10, fill = 'white', ...restProps }) => {
|
|
637
618
|
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 }) }));
|
|
@@ -641,60 +622,14 @@ const CheckHalf = ({ className = '', width = 16, height = 16, fill = 'white', ..
|
|
|
641
622
|
return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": "true", ...restProps, children: jsxRuntime.jsx("g", { id: "Icons/check_indeterminate_small", children: jsxRuntime.jsx("path", { id: "icon", d: "M3 9V7H13V9H3Z", fill: fill }) }) }));
|
|
642
623
|
};
|
|
643
624
|
|
|
644
|
-
|
|
645
|
-
* A customizable Checkbox component that supports controlled and uncontrolled states.
|
|
646
|
-
*/
|
|
647
|
-
const Checkbox = ({ id, name, onChange, label = 'Checkbox', className = '', value = '', disabled = false, indeterminate = false, checked = false, ariaDescribedby = '', }) => {
|
|
648
|
-
const elementRef = React.useRef(null);
|
|
649
|
-
const generatedId = React.useId();
|
|
650
|
-
const inputId = id || generatedId;
|
|
651
|
-
const handleChange = (e) => {
|
|
652
|
-
if (disabled)
|
|
653
|
-
return;
|
|
654
|
-
onChange?.(e);
|
|
655
|
-
};
|
|
656
|
-
const checkboxClass = clsx(styles$o['zds-checkbox'], {
|
|
657
|
-
[styles$o['zds-checkbox__disabled']]: disabled,
|
|
658
|
-
[styles$o['zds-checkbox__checked']]: checked && !indeterminate,
|
|
659
|
-
[styles$o['zds-checkbox__indeterminate']]: indeterminate,
|
|
660
|
-
}, className);
|
|
661
|
-
React.useEffect(() => {
|
|
662
|
-
if (elementRef.current) {
|
|
663
|
-
elementRef.current.indeterminate = indeterminate;
|
|
664
|
-
}
|
|
665
|
-
}, [indeterminate]);
|
|
666
|
-
return (jsxRuntime.jsx("div", { className: checkboxClass, children: jsxRuntime.jsxs("label", { htmlFor: inputId, className: styles$o['zds-checkbox__box-check'], children: [jsxRuntime.jsxs("div", { className: clsx(styles$o['zds-checkbox__checkmark'], {
|
|
667
|
-
[styles$o['zds-checkbox__checkmark__checked']]: checked && !indeterminate,
|
|
668
|
-
[styles$o['zds-checkbox__checkmark__indeterminate']]: indeterminate,
|
|
669
|
-
}), children: [jsxRuntime.jsx("input", { id: inputId, ref: elementRef, name: name, type: "checkbox", value: value, checked: checked, onChange: handleChange, disabled: disabled, "aria-checked": indeterminate ? 'mixed' : checked, "aria-describedby": ariaDescribedby || undefined, "aria-label": typeof label === 'string' ? label : 'Checkbox', tabIndex: disabled ? -1 : 0 }), checked && !indeterminate && (jsxRuntime.jsx("span", { className: styles$o['zds-checkbox__icon'], "aria-hidden": "true", children: jsxRuntime.jsx(CheckSmall, {}) })), indeterminate && (jsxRuntime.jsx("span", { className: styles$o['zds-checkbox__icon'], "aria-hidden": "true", children: jsxRuntime.jsx(CheckHalf, {}) }))] }), label && (jsxRuntime.jsx("div", { className: styles$o['zds-checkbox__text'], children: jsxRuntime.jsx("span", { className: styles$o['zds-checkbox__label'], children: label }) }))] }) }));
|
|
670
|
-
};
|
|
671
|
-
const MemoizedCheckbox = React.memo(Checkbox);
|
|
672
|
-
MemoizedCheckbox.displayName = 'Checkbox';
|
|
673
|
-
|
|
674
|
-
var styles$n = {"container":"CheckboxRadix-module__container___34peZ","root":"CheckboxRadix-module__root___P9Ddi","disabled":"CheckboxRadix-module__disabled___WmZnj","label":"CheckboxRadix-module__label___-d8vL","indicator":"CheckboxRadix-module__indicator___jwn2k","wrapperCheckbox":"CheckboxRadix-module__wrapperCheckbox___--xXQ"};
|
|
675
|
-
|
|
676
|
-
const CheckboxRadix = ({ id, label, onCheckedChange, checked, disabled, className, indeterminate = false, ...rest }) => {
|
|
625
|
+
const Checkbox = ({ id, label = '', onCheckedChange, checked, disabled, className, indeterminate = false, ...rest }) => {
|
|
677
626
|
const componentId = id || React.useId();
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
e.stopPropagation();
|
|
682
|
-
e.preventDefault();
|
|
683
|
-
checkboxRef.current?.click();
|
|
684
|
-
}
|
|
685
|
-
};
|
|
686
|
-
const handleWrapperKeyDown = (e) => {
|
|
687
|
-
if ((e.key === ' ' || e.key === 'Enter') && !disabled) {
|
|
688
|
-
e.preventDefault();
|
|
689
|
-
checkboxRef.current?.click();
|
|
690
|
-
}
|
|
691
|
-
};
|
|
692
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$n.container, className), children: [jsxRuntime.jsx("div", { className: clsx(styles$n.wrapperCheckbox, {
|
|
693
|
-
[styles$n.disabled]: disabled,
|
|
694
|
-
}), onClick: handleWrapperClick, role: "presentation", tabIndex: disabled ? -1 : 0, onKeyDown: handleWrapperKeyDown, children: jsxRuntime.jsx(radixUi.Checkbox.Root, { ref: checkboxRef, className: styles$n.root, checked: 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, onClick: handleWrapperClick, children: label })] }));
|
|
627
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$k.container, className), children: [jsxRuntime.jsx("div", { className: clsx(styles$k.wrapperCheckbox, {
|
|
628
|
+
[styles$k.disabled]: disabled,
|
|
629
|
+
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsxRuntime.jsx(radixUi.Checkbox.Root, { className: styles$k.root, checked: 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$k.indicator, children: indeterminate ? jsxRuntime.jsx(CheckHalf, {}) : jsxRuntime.jsx(CheckSmall, {}) }) }) }), jsxRuntime.jsx("label", { className: clsx(styles$k.label, { [styles$k.disabled]: disabled }), htmlFor: componentId, children: label })] }));
|
|
695
630
|
};
|
|
696
631
|
|
|
697
|
-
var styles$
|
|
632
|
+
var styles$j = {"zds-chips":"Chips-module__zds-chips___LEq0v","zds-chips__title":"Chips-module__zds-chips__title___JexH8","zds-chips__icon__left":"Chips-module__zds-chips__icon__left___frGxl","zds-chips__icon__right":"Chips-module__zds-chips__icon__right___3EmZr","has-left-icon":"Chips-module__has-left-icon___BNIkr","has-right-icon":"Chips-module__has-right-icon___jhoos","zds-chips--neutral":"Chips-module__zds-chips--neutral___FyRQq","zds-chips--brand":"Chips-module__zds-chips--brand___GbmJv","zds-chips--color":"Chips-module__zds-chips--color___JpMwI","zds-chips--alert":"Chips-module__zds-chips--alert___MHi5a","zds-chips--success":"Chips-module__zds-chips--success___jg4-F","zds-chips--disabled":"Chips-module__zds-chips--disabled___HkRDl"};
|
|
698
633
|
|
|
699
634
|
/**
|
|
700
635
|
* Componente Chips para exibir tags/etiquetas com ícones opcionais
|
|
@@ -704,67 +639,33 @@ const Chips = ({ title, leftIcon = null, rightIcon = null, type = 'neutral', dis
|
|
|
704
639
|
console.warn('Chips: title prop is required and cannot be empty');
|
|
705
640
|
return null;
|
|
706
641
|
}
|
|
707
|
-
const chipsClass = clsx(styles$
|
|
708
|
-
[styles$
|
|
709
|
-
[styles$
|
|
710
|
-
[styles$
|
|
642
|
+
const chipsClass = clsx(styles$j['zds-chips'], styles$j[`zds-chips--${type}`], {
|
|
643
|
+
[styles$j['zds-chips--disabled']]: disabled,
|
|
644
|
+
[styles$j['has-left-icon']]: leftIcon,
|
|
645
|
+
[styles$j['has-right-icon']]: rightIcon,
|
|
711
646
|
}, className);
|
|
712
|
-
return (jsxRuntime.jsxs("div", { className: chipsClass, "aria-label": `Chip: ${title}`, "aria-disabled": disabled, children: [leftIcon && (jsxRuntime.jsx("span", { className: styles$
|
|
647
|
+
return (jsxRuntime.jsxs("div", { className: chipsClass, "aria-label": `Chip: ${title}`, "aria-disabled": disabled, children: [leftIcon && (jsxRuntime.jsx("span", { className: styles$j['zds-chips__icon__left'], "aria-hidden": "true", children: leftIcon })), jsxRuntime.jsx("span", { className: styles$j['zds-chips__title'], children: title }), rightIcon && (jsxRuntime.jsx("span", { className: styles$j['zds-chips__icon__right'], children: rightIcon }))] }));
|
|
713
648
|
};
|
|
714
649
|
const MemoizedChips = React.memo(Chips);
|
|
715
650
|
MemoizedChips.displayName = 'Chips';
|
|
716
651
|
|
|
717
|
-
var styles$
|
|
652
|
+
var styles$i = {"container":"Container-module__container___exPuE"};
|
|
718
653
|
|
|
719
654
|
function Container({ children }) {
|
|
720
|
-
return (jsxRuntime.jsx("main", { className: `${styles$
|
|
655
|
+
return (jsxRuntime.jsx("main", { className: `${styles$i['container']} mx-auto`, children: children }));
|
|
721
656
|
}
|
|
722
657
|
|
|
723
|
-
var styles$
|
|
658
|
+
var styles$h = {"wrapperLabel":"index-module__wrapperLabel___XJzZO","requiredLabel":"index-module__requiredLabel___7oZkh","infoIcon":"index-module__infoIcon___lClx4","errorLabel":"index-module__errorLabel___qa6h6","disabledLabel":"index-module__disabledLabel___U9vL8"};
|
|
724
659
|
|
|
725
|
-
var styles$
|
|
660
|
+
var styles$g = {"tooltipContent":"Tooltip-module__tooltipContent___xycUg","triggerWrapper":"Tooltip-module__triggerWrapper___x83XR"};
|
|
726
661
|
|
|
727
|
-
const Tooltip = ({
|
|
728
|
-
|
|
729
|
-
const timeoutRef = React.useRef(null);
|
|
730
|
-
const tooltipRef = React.useRef(null);
|
|
731
|
-
const tooltipId = id || React.useId();
|
|
732
|
-
const handleMouseEnter = () => {
|
|
733
|
-
if (timeoutRef.current)
|
|
734
|
-
clearTimeout(timeoutRef.current);
|
|
735
|
-
setVisible(true);
|
|
736
|
-
};
|
|
737
|
-
const handleMouseLeave = () => {
|
|
738
|
-
timeoutRef.current = setTimeout(() => {
|
|
739
|
-
setVisible(false);
|
|
740
|
-
}, 800);
|
|
741
|
-
};
|
|
742
|
-
const handleKeyDown = (e) => {
|
|
743
|
-
switch (e.key) {
|
|
744
|
-
case 'Escape':
|
|
745
|
-
setVisible(false);
|
|
746
|
-
break;
|
|
747
|
-
case 'Enter':
|
|
748
|
-
case ' ':
|
|
749
|
-
e.preventDefault();
|
|
750
|
-
setVisible(!visible);
|
|
751
|
-
break;
|
|
752
|
-
}
|
|
753
|
-
};
|
|
754
|
-
React.useEffect(() => {
|
|
755
|
-
return () => {
|
|
756
|
-
if (timeoutRef.current) {
|
|
757
|
-
clearTimeout(timeoutRef.current);
|
|
758
|
-
}
|
|
759
|
-
};
|
|
760
|
-
}, []);
|
|
761
|
-
const tooltipClass = clsx(styles$j['zds-tooltip__content'], styles$j[`zds-tooltip__${position}`]);
|
|
762
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$j['zds-tooltip__wrapper']), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, onKeyDown: handleKeyDown, tabIndex: 0, "aria-describedby": visible ? tooltipId : undefined, children: [children, visible && (jsxRuntime.jsx("div", { ref: tooltipRef, className: tooltipClass, role: 'tooltip', id: tooltipId, "aria-describedby": tooltipId, "aria-hidden": !visible, children: text }))] }));
|
|
662
|
+
const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, sideOffset = 10 }) => {
|
|
663
|
+
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$g.triggerWrapper, children: children }) }), jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: jsxRuntime.jsx(radixUi.Tooltip.Content, { className: styles$g.tooltipContent, side: side, align: align, sideOffset: sideOffset, style: { maxWidth: maxWidth ? `${maxWidth}px` : 'auto' }, children: text }) })] }) }));
|
|
763
664
|
};
|
|
764
665
|
|
|
765
|
-
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false,
|
|
666
|
+
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip ? (jsxRuntime.jsx(Tooltip, { side: side, align: align, text: tooltipText || '', children: jsxRuntime.jsxs(radixUi.Label.Root, { className: clsx(styles$h.wrapperLabel, error && styles$h.errorLabel, className), htmlFor: htmlFor, children: [children, required && jsxRuntime.jsx("span", { className: styles$h.requiredLabel, children: "*" }), jsxRuntime.jsx(reactIcons.Info12Regular, { className: styles$h.infoIcon })] }) })) : (jsxRuntime.jsxs(radixUi.Label.Root, { className: clsx(styles$h.wrapperLabel, error && styles$h.errorLabel, disabled && styles$h.disabledLabel, className), htmlFor: htmlFor, children: [children, required && jsxRuntime.jsx("span", { className: styles$h.requiredLabel, children: "*" })] })) }));
|
|
766
667
|
|
|
767
|
-
var styles$
|
|
668
|
+
var styles$f = {"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","helperText":"TextField-module__helperText___d5QGC","error":"TextField-module__error___IGQzp","disabled":"TextField-module__disabled___roIKP"};
|
|
768
669
|
|
|
769
670
|
const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
770
671
|
if (required && value.trim() === '') {
|
|
@@ -776,7 +677,7 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
|
776
677
|
return '';
|
|
777
678
|
};
|
|
778
679
|
|
|
779
|
-
const TextField$1 = React.forwardRef(({ className, value = '', label, placeholder, type = 'text', onChange, disabled = false, maxLength = 30, required = false, helperText, tooltip = false, tooltipText = '',
|
|
680
|
+
const TextField$1 = React.forwardRef(({ className, value = '', label, placeholder, type = 'text', onChange, disabled = false, maxLength = 30, required = false, helperText, tooltip = false, tooltipText = '', side = 'bottom', align = 'start', errorMessage = '', id, icon, onBlur, onFocus, name, ...inputProps }, ref) => {
|
|
780
681
|
const [inputValue, setInputValue] = React.useState(value);
|
|
781
682
|
const [inputError, setInputError] = React.useState('');
|
|
782
683
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
@@ -819,15 +720,15 @@ const TextField$1 = React.forwardRef(({ className, value = '', label, placeholde
|
|
|
819
720
|
: helperText
|
|
820
721
|
? `${componentId}-helper`
|
|
821
722
|
: undefined;
|
|
822
|
-
const containerClass = clsx(styles$
|
|
823
|
-
[styles$
|
|
824
|
-
[styles$
|
|
723
|
+
const containerClass = clsx(styles$f.container, {
|
|
724
|
+
[styles$f.error]: hasError,
|
|
725
|
+
[styles$f.disabled]: disabled,
|
|
825
726
|
[className]: className,
|
|
826
727
|
});
|
|
827
|
-
return (jsxRuntime.jsxs("div", { className: containerClass, children: [label && (jsxRuntime.jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip,
|
|
728
|
+
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$f.inputWrapper, children: [jsxRuntime.jsxs("div", { className: styles$f.inputContainer, children: [jsxRuntime.jsx("input", { ...inputProps, ref: ref, 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 }), showCustomIcon && jsxRuntime.jsx("span", { className: styles$f.icon, children: icon }), showClearIcon && (jsxRuntime.jsx("button", { type: "button", className: styles$f.clearButton, onMouseDown: (e) => {
|
|
828
729
|
e.preventDefault();
|
|
829
730
|
handleClear();
|
|
830
|
-
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}) }))] }), jsxRuntime.jsx("span", { id: helperId, className: styles$
|
|
731
|
+
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}) }))] }), jsxRuntime.jsx("span", { id: helperId, className: styles$f.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText })] })] }));
|
|
831
732
|
});
|
|
832
733
|
TextField$1.displayName = 'TextField';
|
|
833
734
|
var TextField = React.memo(TextField$1);
|
|
@@ -925,7 +826,7 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
925
826
|
return date;
|
|
926
827
|
}
|
|
927
828
|
|
|
928
|
-
var styles$
|
|
829
|
+
var styles$e = {"zds-date-picker":"DatePicker-module__zds-date-picker___FjFTb","zds-date-picker__calendar-popup":"DatePicker-module__zds-date-picker__calendar-popup___hEkq7","zds-calendar--left":"DatePicker-module__zds-calendar--left___5z2UM","zds-calendar--right":"DatePicker-module__zds-calendar--right___NCJtd"};
|
|
929
830
|
|
|
930
831
|
const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText = '', required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, className = '', 'data-testid': testId, }) => {
|
|
931
832
|
// ✅ IDs únicos para acessibilidade
|
|
@@ -1107,13 +1008,13 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText =
|
|
|
1107
1008
|
setTempInputValue(formatDate(currentSelectedDate, locale));
|
|
1108
1009
|
}
|
|
1109
1010
|
}, [locale, currentSelectedDate, isEditing]);
|
|
1110
|
-
return (jsxRuntime.jsx("div", { ref: wrapperRef, children: jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
1011
|
+
return (jsxRuntime.jsx("div", { ref: wrapperRef, children: jsxRuntime.jsxs("div", { className: clsx(styles$e['zds-date-picker']), children: [jsxRuntime.jsx("div", { onClick: handleFieldClick, onFocus: handleFieldFocus, onKeyDown: handleKeyDown, style: { cursor: 'pointer' }, children: jsxRuntime.jsx(TextField, { type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: handleIconClick, style: { cursor: 'pointer' } }), onChange: (e) => {
|
|
1111
1012
|
handleTextFieldChange(String(e));
|
|
1112
|
-
}, "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": "calendar-popup", placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', value: displayValue, errorMessage: undefined, "aria-invalid": !!currentError, "aria-describedby": combinedHelperText ? helperTextId : undefined, maxLength: 10,
|
|
1013
|
+
}, "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": "calendar-popup", placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', value: displayValue, errorMessage: undefined, "aria-invalid": !!currentError, "aria-describedby": combinedHelperText ? helperTextId : undefined, maxLength: 10, helperText: combinedHelperText, required: required, label: label }) }), jsxRuntime.jsx("div", { className: clsx(styles$e['zds-date-picker__calendar-popup'], calendarPosition === 'left' && styles$e['zds-calendar--left'], calendarPosition === 'right' && styles$e['zds-calendar--right']), children: showCalendar && (jsxRuntime.jsx(MemoizedCalendar, { selectedDate: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy' })) })] }) }));
|
|
1113
1014
|
};
|
|
1114
1015
|
var DatePicker_default = React.memo(DatePicker);
|
|
1115
1016
|
|
|
1116
|
-
var styles$
|
|
1017
|
+
var styles$d = {"zds-dialog__overlay":"Dialog-module__zds-dialog__overlay___I0T-Q","zds-dialog__wrapper":"Dialog-module__zds-dialog__wrapper___Va69y","zds-dialog":"Dialog-module__zds-dialog___Bi-9b","zds-dialog__title":"Dialog-module__zds-dialog__title___w9yHe","zds-dialog__text":"Dialog-module__zds-dialog__text___-GmvH","zds-dialog__actions":"Dialog-module__zds-dialog__actions___hHHmN"};
|
|
1117
1018
|
|
|
1118
1019
|
const useFocusTrap = (isActive) => {
|
|
1119
1020
|
const containerRef = React.useRef(null);
|
|
@@ -1196,13 +1097,13 @@ const Dialog = ({ show, title, text, textConfirm = 'OK', textCancel = 'Cancelar'
|
|
|
1196
1097
|
}, [show, handleCancel]);
|
|
1197
1098
|
if (!show)
|
|
1198
1099
|
return null;
|
|
1199
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$
|
|
1100
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$d['zds-dialog__overlay'] }), jsxRuntime.jsx("div", { className: styles$d['zds-dialog__wrapper'], children: jsxRuntime.jsxs("div", { className: clsx(styles$d['zds-dialog'], className), role: "dialog", "aria-modal": "true", id: id, "aria-labelledby": `zds-dialog-title-${id}`, "aria-describedby": `zds-dialog-desc-${id}`, tabIndex: -1, ref: containerRef, children: [jsxRuntime.jsx("div", { id: `zds-dialog-title-${id}`, className: styles$d['zds-dialog__title'], children: title }), jsxRuntime.jsx("div", { id: `zds-dialog-desc-${id}`, className: styles$d['zds-dialog__text'], children: text }), jsxRuntime.jsxs("div", { className: styles$d['zds-dialog__actions'], children: [!!(textCancel && textCancel.trim()) && (jsxRuntime.jsx(Button, { variant: "outlined", onClick: handleCancel, children: textCancel })), jsxRuntime.jsx(Button, { variant: "filled", onClick: handleConfirm, children: textConfirm })] })] }) })] }));
|
|
1200
1101
|
};
|
|
1201
1102
|
// Memoização para otimização de performance
|
|
1202
1103
|
const MemoizedDialog = React.memo(Dialog);
|
|
1203
1104
|
MemoizedDialog.displayName = 'Dialog';
|
|
1204
1105
|
|
|
1205
|
-
var styles$
|
|
1106
|
+
var styles$c = {"zds-custom__drawer-shadow":"Drawer-module__zds-custom__drawer-shadow___xoF-q","zds-custom__drawer-shadow--visible":"Drawer-module__zds-custom__drawer-shadow--visible___9JUdU","zds-custom__drawer-sidebar":"Drawer-module__zds-custom__drawer-sidebar___MC8Zt","zds-custom__drawer-sidebar--open":"Drawer-module__zds-custom__drawer-sidebar--open___DiMJb","zds-custom__drawer-sidebar--disabled":"Drawer-module__zds-custom__drawer-sidebar--disabled___6OGsA","zds-drawer__title-close":"Drawer-module__zds-drawer__title-close___g9K3D","zds-drawer__title":"Drawer-module__zds-drawer__title___lqHFw","zds-drawer__children":"Drawer-module__zds-drawer__children___ZnzF6"};
|
|
1206
1107
|
|
|
1207
1108
|
/**
|
|
1208
1109
|
* Componente Drawer do Zanthus Design System
|
|
@@ -1284,20 +1185,20 @@ onClose, title = 'Título', isOpen = false, onOpen, className = '', id, disabled
|
|
|
1284
1185
|
event.stopPropagation();
|
|
1285
1186
|
internalClose();
|
|
1286
1187
|
};
|
|
1287
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx(styles$
|
|
1288
|
-
[styles$
|
|
1289
|
-
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
1290
|
-
[styles$
|
|
1291
|
-
[styles$
|
|
1188
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx(styles$c['zds-custom__drawer-shadow'], {
|
|
1189
|
+
[styles$c['zds-custom__drawer-shadow--visible']]: isOpen,
|
|
1190
|
+
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxRuntime.jsxs("div", { className: clsx(styles$c['zds-custom__drawer-sidebar'], {
|
|
1191
|
+
[styles$c['zds-custom__drawer-sidebar--open']]: isOpen,
|
|
1192
|
+
[styles$c['zds-custom__drawer-sidebar--disabled']]: disabled,
|
|
1292
1193
|
}, className), style: {
|
|
1293
1194
|
// ✅ APENAS: Width customizável via CSS custom property
|
|
1294
1195
|
'--drawer-custom-width': customWidth,
|
|
1295
|
-
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, children: [jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
1196
|
+
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, children: [jsxRuntime.jsxs("div", { className: clsx(styles$c['zds-drawer__title-close']), children: [jsxRuntime.jsx("div", { className: clsx(styles$c['zds-drawer__title']), id: id ? `${id}-title` : 'drawer-title', children: title }), jsxRuntime.jsx(Button, { onClick: handleCloseClick, variant: 'text', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: 'lg' })] }), jsxRuntime.jsx("div", { className: clsx(styles$c['zds-drawer__children']), "data-testid": "drawer-content", children: children })] })] }));
|
|
1296
1197
|
};
|
|
1297
1198
|
|
|
1298
|
-
var styles$
|
|
1199
|
+
var styles$b = {"zds-search":"Search-module__zds-search___DRIVl","zds-search__leftIcon":"Search-module__zds-search__leftIcon___gBvTI","zds-search__clearIcon":"Search-module__zds-search__clearIcon___wsOBs"};
|
|
1299
1200
|
|
|
1300
|
-
const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, id = '', className = '', }, ref) => {
|
|
1201
|
+
const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, id = '', className = '', 'data-testid': testId, }, ref) => {
|
|
1301
1202
|
const [internalValue, setInternalValue] = React.useState('');
|
|
1302
1203
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
1303
1204
|
const currentValue = isControlled ? value : internalValue;
|
|
@@ -1342,11 +1243,11 @@ const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado',
|
|
|
1342
1243
|
return;
|
|
1343
1244
|
onKeyDown?.(e);
|
|
1344
1245
|
};
|
|
1345
|
-
const searchClass = clsx(styles$
|
|
1246
|
+
const searchClass = clsx(styles$b['zds-search'], {
|
|
1346
1247
|
disabled,
|
|
1347
1248
|
[className]: className,
|
|
1348
1249
|
});
|
|
1349
|
-
return (jsxRuntime.jsxs("div", { className: searchClass, onClick: onClick, onMouseDown: onMouseDown, children: [jsxRuntime.jsx("span", { className: clsx(styles$
|
|
1250
|
+
return (jsxRuntime.jsxs("div", { className: searchClass, onClick: onClick, onMouseDown: onMouseDown, children: [jsxRuntime.jsx("span", { className: clsx(styles$b['zds-search__leftIcon'], { disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsxRuntime.jsx(reactIcons.Search16Regular, {}) }), jsxRuntime.jsx("input", { ref: ref, id: inputId, type: "text", placeholder: placeholder, "aria-label": placeholder, value: currentValue || '', onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, "data-testid": testId }), currentValue && currentValue.length > 0 && (jsxRuntime.jsx("span", { className: styles$b['zds-search__clearIcon'], "aria-hidden": "true", onClick: clearInputSearch, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}) }))] }));
|
|
1350
1251
|
});
|
|
1351
1252
|
Search.displayName = 'ZdsSearch';
|
|
1352
1253
|
|
|
@@ -1381,7 +1282,7 @@ const validateItems = (items, type) => {
|
|
|
1381
1282
|
});
|
|
1382
1283
|
};
|
|
1383
1284
|
|
|
1384
|
-
var styles$
|
|
1285
|
+
var styles$a = {"zds-dropdown__container":"Dropdown-module__zds-dropdown__container___UMV5O","zds-dropdown__container--top":"Dropdown-module__zds-dropdown__container--top___nys1y","zds-dropdown__container--bottom":"Dropdown-module__zds-dropdown__container--bottom___5ncXH","zds-dropdown__search-container":"Dropdown-module__zds-dropdown__search-container___5igq1","zds-dropdown__item":"Dropdown-module__zds-dropdown__item___bqAnI","zds-dropdown--disabled":"Dropdown-module__zds-dropdown--disabled___WF-ao","zds-dropdown__item--focused":"Dropdown-module__zds-dropdown__item--focused___ulKda","zds-dropdown__item--selected":"Dropdown-module__zds-dropdown__item--selected___K-Mk-","zds-dropdown__title":"Dropdown-module__zds-dropdown__title___emxcQ","zds-dropdown__subtext":"Dropdown-module__zds-dropdown__subtext___YzXrw","zds-dropdown__item-content":"Dropdown-module__zds-dropdown__item-content___E3qkd","zds-dropdown__item-content--disabled":"Dropdown-module__zds-dropdown__item-content--disabled___RmhHd","zds-dropdown__item-text":"Dropdown-module__zds-dropdown__item-text___D39Qy","zds-dropdown__item-icon":"Dropdown-module__zds-dropdown__item-icon___QdCJz","zds-dropdown__item-icon-container":"Dropdown-module__zds-dropdown__item-icon-container___ULMHu","zds-dropdown__no-results":"Dropdown-module__zds-dropdown__no-results___rUZ-Z","zds-dropdown__list":"Dropdown-module__zds-dropdown__list___d65nL","zds-checkbox":"Dropdown-module__zds-checkbox___rJTmR","zds-dropdown__item--checkbox":"Dropdown-module__zds-dropdown__item--checkbox___z94nE","zds-dropdown__container-filter":"Dropdown-module__zds-dropdown__container-filter___Deixf","zds-dropdown__infinite-scroll-trigger":"Dropdown-module__zds-dropdown__infinite-scroll-trigger___RA9Gd","zds-dropdown__loading-indicator":"Dropdown-module__zds-dropdown__loading-indicator___Zf-uW"};
|
|
1385
1286
|
|
|
1386
1287
|
/**
|
|
1387
1288
|
* Hook otimizado para scroll infinito usando IntersectionObserver
|
|
@@ -1646,17 +1547,17 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1646
1547
|
const renderItemContent = React.useCallback((item, index) => {
|
|
1647
1548
|
const itemId = item.id || `dropdown-item-${index}`;
|
|
1648
1549
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
1649
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
1650
|
-
[styles$
|
|
1651
|
-
}), children: [type === 'checkbox' && (jsxRuntime.jsx(
|
|
1652
|
-
|
|
1653
|
-
|
|
1550
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$a['zds-dropdown__item-content'], {
|
|
1551
|
+
[styles$a['zds-dropdown__item-content--disabled']]: item.disabled,
|
|
1552
|
+
}), children: [type === 'checkbox' && (jsxRuntime.jsx(Checkbox, { checked: !!currentSelection[itemId], onCheckedChange: (checked) => {
|
|
1553
|
+
if (checked === 'indeterminate')
|
|
1554
|
+
return;
|
|
1654
1555
|
toggleSelection(itemId, item);
|
|
1655
|
-
}, disabled: item.disabled, label: "" })), type === 'icon' && item.icon && (jsxRuntime.jsx("div", { className: styles$
|
|
1556
|
+
}, disabled: item.disabled, label: "" })), type === 'icon' && item.icon && (jsxRuntime.jsx("div", { className: styles$a['zds-dropdown__item-icon-container'], children: jsxRuntime.jsx("span", { className: styles$a['zds-dropdown__item-icon'], onClick: (event) => {
|
|
1656
1557
|
event.preventDefault();
|
|
1657
1558
|
event.stopPropagation();
|
|
1658
1559
|
handleItemClick(event, itemId, item);
|
|
1659
|
-
}, children: item.icon }) })), jsxRuntime.jsxs("div", { className: styles$
|
|
1560
|
+
}, children: item.icon }) })), jsxRuntime.jsxs("div", { className: styles$a['zds-dropdown__item-text'], children: [jsxRuntime.jsx("span", { id: `dropdown-item-${itemId}-label`, className: styles$a['zds-dropdown__title'], children: item.text }), showSubText && item.subText && (jsxRuntime.jsx("span", { id: `dropdown-item-${itemId}-desc`, className: styles$a['zds-dropdown__subtext'], children: item.subText }))] })] }));
|
|
1660
1561
|
}, [
|
|
1661
1562
|
type,
|
|
1662
1563
|
selectedItems,
|
|
@@ -1721,10 +1622,10 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1721
1622
|
isSearchFocused,
|
|
1722
1623
|
handleSearchClear,
|
|
1723
1624
|
]);
|
|
1724
|
-
const DropdownClass = clsx(styles$
|
|
1625
|
+
const DropdownClass = clsx(styles$a['zds-dropdown__container'], styles$a[`zds-dropdown__container--${position}`], {
|
|
1725
1626
|
[className || '']: className,
|
|
1726
|
-
[styles$
|
|
1727
|
-
[styles$
|
|
1627
|
+
[styles$a['zds-dropdown__container--search-active']]: searchQuery.length > 0,
|
|
1628
|
+
[styles$a['zds-dropdown__container--fixed-width']]: !!maxWidth,
|
|
1728
1629
|
});
|
|
1729
1630
|
const dropdownStyles = React.useMemo(() => {
|
|
1730
1631
|
const styles = {};
|
|
@@ -1746,14 +1647,14 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1746
1647
|
}
|
|
1747
1648
|
return styles;
|
|
1748
1649
|
}, [maxWidth, minWidth, width, maxHeight]);
|
|
1749
|
-
return (jsxRuntime.jsx("div", { ref: containerRef, className: DropdownClass, tabIndex: 0, role: "combobox", "aria-expanded": filteredItems.length > 0 ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": id ? `${id}-listbox` : undefined, "aria-controls": id ? `${id}-listbox` : undefined, "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : undefined, "aria-label": "Dropdown de sele\u00E7\u00E3o", "aria-describedby": searchVisible ? `${id}-search-help` : undefined, onKeyDown: handleKeyDown, style: dropdownStyles, children: jsxRuntime.jsxs("ul", { className: styles$
|
|
1650
|
+
return (jsxRuntime.jsx("div", { ref: containerRef, className: DropdownClass, tabIndex: 0, role: "combobox", "aria-expanded": filteredItems.length > 0 ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": id ? `${id}-listbox` : undefined, "aria-controls": id ? `${id}-listbox` : undefined, "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : undefined, "aria-label": "Dropdown de sele\u00E7\u00E3o", "aria-describedby": searchVisible ? `${id}-search-help` : undefined, onKeyDown: handleKeyDown, style: dropdownStyles, children: jsxRuntime.jsxs("ul", { className: styles$a['zds-dropdown__list'], id: id || undefined, role: "listbox", "aria-label": "Lista de op\u00E7\u00F5es", "aria-multiselectable": isMultiSelectable, children: [searchVisible && (jsxRuntime.jsx("li", { role: "none", className: styles$a['zds-dropdown__search-container'], children: jsxRuntime.jsx(Search, { value: inputValue, placeholder: placeholder || 'Digite e pressione Enter para buscar...', onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onFocus: () => setIsSearchFocused(true), onBlur: () => setIsSearchFocused(false), onClear: handleSearchClear, "aria-label": "Campo de busca - pressione Enter para pesquisar" }) })), filteredItems.length > 0 ? (filteredItems.map((item, index) => {
|
|
1750
1651
|
const itemId = generateItemId(item, index);
|
|
1751
1652
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
1752
|
-
return (jsxRuntime.jsx("li", { role: "option", "aria-selected": !!currentSelection[itemId], "aria-labelledby": `dropdown-item-${itemId}-label`, "aria-describedby": item.subText ? `dropdown-item-${itemId}-desc` : undefined, className: clsx(styles$
|
|
1753
|
-
[styles$
|
|
1754
|
-
[styles$
|
|
1755
|
-
[styles$
|
|
1756
|
-
[styles$
|
|
1653
|
+
return (jsxRuntime.jsx("li", { role: "option", "aria-selected": !!currentSelection[itemId], "aria-labelledby": `dropdown-item-${itemId}-label`, "aria-describedby": item.subText ? `dropdown-item-${itemId}-desc` : undefined, className: clsx(styles$a['zds-dropdown__item'], {
|
|
1654
|
+
[styles$a[`zds-dropdown__item--${type}`]]: type,
|
|
1655
|
+
[styles$a['zds-dropdown__item--selected']]: currentSelection[itemId],
|
|
1656
|
+
[styles$a['zds-dropdown__item--focused']]: focusedIndex === index,
|
|
1657
|
+
[styles$a['zds-dropdown__item--disabled']]: item.disabled,
|
|
1757
1658
|
}), tabIndex: focusedIndex === index ? 0 : -1, onFocus: () => setFocusedIndex(index), onClick: (event) => {
|
|
1758
1659
|
event.stopPropagation();
|
|
1759
1660
|
handleItemClick(event, itemId, item);
|
|
@@ -1763,12 +1664,12 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1763
1664
|
setFocusedIndex(index);
|
|
1764
1665
|
}
|
|
1765
1666
|
}, children: renderItemContent(item, index) }, itemId));
|
|
1766
|
-
})) : (jsxRuntime.jsx("li", { className: styles$
|
|
1667
|
+
})) : (jsxRuntime.jsx("li", { className: styles$a['zds-dropdown__no-results'], role: "status", "aria-live": "polite", children: "Nenhum item corresponde \u00E0 sua busca" })), filter && (jsxRuntime.jsxs("div", { className: styles$a['zds-dropdown__container-filter'], children: [jsxRuntime.jsx(Button, { size: "sm", variant: "outlined", onClick: handleClearFilter, children: "Limpar" }), jsxRuntime.jsx(Button, { size: "sm", onClick: handleApplyFilter, children: "Aplicar" })] })), infiniteScrollHook && infiniteScrollHook.hasNextPage && (jsxRuntime.jsx("li", { role: "none", className: styles$a['zds-dropdown__infinite-scroll-trigger'], children: jsxRuntime.jsx("div", { ref: infiniteScrollHook.observerRef, className: styles$a['zds-dropdown__loading-indicator'], children: infiniteScroll?.status === 'loading' ? (jsxRuntime.jsx("span", { children: "Carregando..." })) : (jsxRuntime.jsx("span", { children: "Trigger" })) }) }))] }) }));
|
|
1767
1668
|
};
|
|
1768
1669
|
const MemoizedDropdown = React.memo(Dropdown);
|
|
1769
1670
|
MemoizedDropdown.displayName = 'Dropdown';
|
|
1770
1671
|
|
|
1771
|
-
var styles$
|
|
1672
|
+
var styles$9 = {"zds-filter__container":"Filter-module__zds-filter__container___0E-nC","zds-filter__button":"Filter-module__zds-filter__button___gT9yM","zds-filter__icon":"Filter-module__zds-filter__icon___ypiCu","zds-filter__text":"Filter-module__zds-filter__text___1iywL","zds-filter__arrow":"Filter-module__zds-filter__arrow___xflU2","zds-filter__arrow--up":"Filter-module__zds-filter__arrow--up___R0HR-","zds-filter__arrow--down":"Filter-module__zds-filter__arrow--down___4YMmg","zds-filter__button--open":"Filter-module__zds-filter__button--open___OA6EF","zds-filter__dropdown":"Filter-module__zds-filter__dropdown___-67MJ","zds-filter__dropdown--left":"Filter-module__zds-filter__dropdown--left___GgonW","zds-filter__dropdown--right":"Filter-module__zds-filter__dropdown--right___7GS9L","zds-filter-button__content":"Filter-module__zds-filter-button__content___eNIIz","zds-filter-button__arrow":"Filter-module__zds-filter-button__arrow___ZhymS","zds-filter-button__icon":"Filter-module__zds-filter-button__icon___-42Ey"};
|
|
1772
1673
|
|
|
1773
1674
|
// ✅ CORREÇÃO: Problema de loop infinito no useEffect
|
|
1774
1675
|
const Filter = ({ items = [], type = 'checkbox', selectedIds = [], onApplyFilter, placeholder = 'Selecionar...', enableSearch = false, buttonText = 'Filter', icon, variant = 'outlined', onOpen, onClose, position = 'left', disabled = false, className = '', selectedDate, onDateSelect, onClearDate, minDate, maxDate, locale = 'pt-br', }) => {
|
|
@@ -1853,41 +1754,25 @@ const Filter = ({ items = [], type = 'checkbox', selectedIds = [], onApplyFilter
|
|
|
1853
1754
|
}
|
|
1854
1755
|
return () => document.removeEventListener('keydown', handleEscape);
|
|
1855
1756
|
}, [isOpen, onClose]);
|
|
1856
|
-
const filterClass = clsx(styles$
|
|
1857
|
-
const dropdownClass = clsx(styles$
|
|
1858
|
-
[styles$
|
|
1757
|
+
const filterClass = clsx(styles$9['zds-filter__container'], className);
|
|
1758
|
+
const dropdownClass = clsx(styles$9['zds-filter__dropdown'], {
|
|
1759
|
+
[styles$9[`zds-filter__dropdown--${position}`]]: position,
|
|
1859
1760
|
});
|
|
1860
|
-
return (jsxRuntime.jsxs("div", { ref: filterRef, className: filterClass, children: [jsxRuntime.jsx(Button, { variant: variant, onClick: handleToggle, disabled: disabled, icon: type === 'calendar' ? jsxRuntime.jsx(reactIcons.Calendar16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxRuntime.jsxs("div", { className: styles$
|
|
1761
|
+
return (jsxRuntime.jsxs("div", { ref: filterRef, className: filterClass, children: [jsxRuntime.jsx(Button, { variant: variant, onClick: handleToggle, disabled: disabled, icon: type === 'calendar' ? jsxRuntime.jsx(reactIcons.Calendar16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxRuntime.jsxs("div", { className: styles$9['zds-filter-button__content'], children: [icon && jsxRuntime.jsx("span", { className: styles$9['zds-filter-button__icon'], children: icon }), jsxRuntime.jsx("span", { className: styles$9['zds-filter-button__text'], children: buttonDisplayText }), jsxRuntime.jsx("span", { className: `${styles$9['zds-filter-button__arrow']} ${isOpen ? styles$9['zds-filter-button__arrow--open'] : ''}`, children: getBadgeValue() && (jsxRuntime.jsx(Badge, { badgeValue: `+${getBadgeValue()}`, type: "status" })) })] }) }), isOpen && (jsxRuntime.jsx("div", { className: dropdownClass, children: type === 'calendar' ? (jsxRuntime.jsx(MemoizedCalendar, { currentDate: currentCalendarDate, selectedDate: selectedDate, onDaySelect: handleDateSelection, onDateChange: handleCalendarNavigation, minDate: minDate, maxDate: maxDate, locale: locale, onClear: handleClear, id: `filter-calendar-${filterRef.current?.id || ''}`, "aria-label": "Selecionar data para filtro" })) : (jsxRuntime.jsx(MemoizedDropdown, { items: items, type: type, defaultSelectedIds: selectedIds, placeholder: placeholder, applySearch: enableSearch, filter: true, onSelectionChange: handleApplyFilter })) }))] }));
|
|
1861
1762
|
};
|
|
1862
1763
|
|
|
1863
|
-
var styles$
|
|
1764
|
+
var styles$8 = {"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"};
|
|
1864
1765
|
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
const uniqueId = React.useId();
|
|
1873
|
-
const inputId = id || uniqueId;
|
|
1874
|
-
const handleChange = (e) => {
|
|
1875
|
-
if (disabled)
|
|
1876
|
-
return;
|
|
1877
|
-
onChange?.(e.target.value);
|
|
1878
|
-
};
|
|
1879
|
-
const radioClass = clsx(styles$b['zds-radiobutton'], {
|
|
1880
|
-
[styles$b['zds-radiobutton--disabled']]: disabled,
|
|
1881
|
-
}, className);
|
|
1882
|
-
const labelClass = clsx(styles$b['zds-radiobutton__box-check'], {
|
|
1883
|
-
[styles$b['zds-radiobutton__disabled']]: disabled,
|
|
1884
|
-
});
|
|
1885
|
-
return (jsxRuntime.jsx("div", { className: radioClass, children: jsxRuntime.jsxs("label", { className: labelClass, htmlFor: inputId, children: [jsxRuntime.jsx("div", { className: styles$b['zds-radiobutton__mini-box'], children: jsxRuntime.jsx("input", { id: inputId, type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: handleChange }) }), label && (jsxRuntime.jsx("span", { id: `${inputId}-description`, className: styles$b['zds-radiobutton__box-check__text'], children: label }))] }) }));
|
|
1766
|
+
const Radio = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', ...rest }) => {
|
|
1767
|
+
const componentId = id || React.useId();
|
|
1768
|
+
return (jsxRuntime.jsx(radixUi.RadioGroup.Root, { id: componentId, className: styles$8.root, defaultValue: defaultValue, onValueChange: onValueChange, name: name, "aria-label": ariaLabel, "data-orientation": orientation, orientation: orientation, ...rest, children: items.map(({ id, value, disabled, label }) => {
|
|
1769
|
+
const itemKey = id ?? value;
|
|
1770
|
+
const uniqueId = `${componentId}-item-${value}`;
|
|
1771
|
+
return (jsxRuntime.jsx("div", { className: clsx(styles$8.wrapper, { [styles$8.disabled]: disabled }), children: jsxRuntime.jsxs("label", { className: styles$8.labelWrapper, htmlFor: uniqueId, children: [jsxRuntime.jsx("div", { className: styles$8.itemWrapper, children: jsxRuntime.jsx(radixUi.RadioGroup.Item, { disabled: disabled, className: styles$8.item, value: value, id: uniqueId, "data-disabled": disabled, children: jsxRuntime.jsx(radixUi.RadioGroup.Indicator, { className: styles$8.indicator }) }) }), jsxRuntime.jsx("span", { className: styles$8.labelText, children: label })] }) }, itemKey));
|
|
1772
|
+
}) }));
|
|
1886
1773
|
};
|
|
1887
|
-
const MemoizedRadio = React.memo(Radio);
|
|
1888
|
-
MemoizedRadio.displayName = 'Radio';
|
|
1889
1774
|
|
|
1890
|
-
var styles$
|
|
1775
|
+
var styles$7 = {"zds-list-item__container":"ListItem-module__zds-list-item__container___mEIUK","zds-list-item--checkbox":"ListItem-module__zds-list-item--checkbox___wfi9-","zds-list-item--icon":"ListItem-module__zds-list-item--icon___h3Ijt","zds-list-item--radio":"ListItem-module__zds-list-item--radio___2l7mK","zds-list-item--text":"ListItem-module__zds-list-item--text___F0PDx","zds-list-item--hovered":"ListItem-module__zds-list-item--hovered___XrDWn","zds-list-item--disabled":"ListItem-module__zds-list-item--disabled___p1xZF","zds-list-item__wrapper-text":"ListItem-module__zds-list-item__wrapper-text___5-TX2","zds-list-item__wrapper-icon":"ListItem-module__zds-list-item__wrapper-icon___S6Fr1","zds-list-item__title":"ListItem-module__zds-list-item__title___AV7nz","zds-list-item__subtext":"ListItem-module__zds-list-item__subtext___nfXky","zds-list-item__text":"ListItem-module__zds-list-item__text___3y0sB"};
|
|
1891
1776
|
|
|
1892
1777
|
/**
|
|
1893
1778
|
* Componente ListItem do Zanthus Design System
|
|
@@ -1972,20 +1857,24 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1972
1857
|
const currentVariant = validVariants.includes(variant) ? variant : 'text';
|
|
1973
1858
|
switch (currentVariant) {
|
|
1974
1859
|
case 'checkbox':
|
|
1975
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(
|
|
1860
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Checkbox, { checked: internalChecked, disabled: disabled, onCheckedChange: () => handleCheckboxClick({}) }), jsxRuntime.jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsxRuntime.jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__text'], onClick: handleCheckboxClick, children: text }), showSubText && subText && (jsxRuntime.jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], onClick: handleCheckboxClick, children: subText }))] })] }));
|
|
1976
1861
|
case 'radio':
|
|
1977
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$
|
|
1862
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$7['zds-list-item__wrapper-radio'], children: jsxRuntime.jsx("span", { className: styles$7['zds-list-item__radio'], "aria-hidden": "true", children: jsxRuntime.jsx(Radio, { name: name, onValueChange: () => handleRadioClick({}), items: [{
|
|
1863
|
+
value: value,
|
|
1864
|
+
label: '',
|
|
1865
|
+
disabled: disabled
|
|
1866
|
+
}], "aria-labelledby": `${itemId}-text` }) }) }), jsxRuntime.jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsxRuntime.jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__title'], onClick: handleRadioClick, children: text }), showSubText && subText && (jsxRuntime.jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], children: subText }))] })] }));
|
|
1978
1867
|
case 'icon':
|
|
1979
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$
|
|
1868
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$7['zds-list-item__wrapper-icon'], children: icon }), jsxRuntime.jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsxRuntime.jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__title'], onClick: handleTextOrIconClick, children: text }), showSubText && subText && (jsxRuntime.jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], children: subText }))] })] }));
|
|
1980
1869
|
case 'text':
|
|
1981
1870
|
default:
|
|
1982
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
1871
|
+
return (jsxRuntime.jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsxRuntime.jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__title'], onClick: handleTextOrIconClick, children: text }), showSubText && subText && (jsxRuntime.jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], children: subText }))] }));
|
|
1983
1872
|
}
|
|
1984
1873
|
}, [variant, itemId, internalChecked, disabled, handleCheckboxClick, handleRadioClick, handleTextOrIconClick, value, text, showSubText, subText, icon, name]);
|
|
1985
|
-
const listItemClass = clsx(styles$
|
|
1986
|
-
[styles$
|
|
1987
|
-
[styles$
|
|
1988
|
-
[styles$
|
|
1874
|
+
const listItemClass = clsx(styles$7['zds-list-item__container'], {
|
|
1875
|
+
[styles$7[`zds-list-item--${variant}`]]: variant,
|
|
1876
|
+
[styles$7['zds-list-item--disabled']]: disabled,
|
|
1877
|
+
[styles$7['zds-list-item--hovered']]: hovered,
|
|
1989
1878
|
[className || '']: className
|
|
1990
1879
|
});
|
|
1991
1880
|
const getAriaChecked = React.useCallback(() => {
|
|
@@ -1997,152 +1886,7 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1997
1886
|
return (jsxRuntime.jsx("li", { className: listItemClass, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, "aria-selected": variant === 'text' || variant === 'icon' ? internalSelected : undefined, "aria-disabled": disabled, "aria-checked": getAriaChecked(), "aria-labelledby": `${itemId}-text`, "aria-describedby": showSubText && subText ? `${itemId}-subtext` : undefined, "data-testid": "list-item", children: renderVariantContent() }));
|
|
1998
1887
|
};
|
|
1999
1888
|
|
|
2000
|
-
var styles$
|
|
2001
|
-
|
|
2002
|
-
const Menu = ({ children, menuItems = [], onMenuItemClick, onToggle, type = 'text', applySearch = false, placeholder = '', showSubText = false, className, id, maxWidth = '210px', minWidth, position = 'left' }) => {
|
|
2003
|
-
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
|
|
2004
|
-
const anchorRef = React.useRef(null);
|
|
2005
|
-
const dropdownRef = React.useRef(null);
|
|
2006
|
-
const menuContainerRef = React.useRef(null);
|
|
2007
|
-
const [selectedItems, setSelectedItems] = React.useState([]);
|
|
2008
|
-
const [focusedItemIndex, setFocusedItemIndex] = React.useState(-1);
|
|
2009
|
-
const closeMenu = React.useCallback(() => {
|
|
2010
|
-
setIsMenuOpen(false);
|
|
2011
|
-
if (onToggle) {
|
|
2012
|
-
onToggle(false);
|
|
2013
|
-
}
|
|
2014
|
-
}, [onToggle]);
|
|
2015
|
-
const openMenu = React.useCallback(() => {
|
|
2016
|
-
setIsMenuOpen(true);
|
|
2017
|
-
if (onToggle) {
|
|
2018
|
-
onToggle(true);
|
|
2019
|
-
}
|
|
2020
|
-
}, [onToggle]);
|
|
2021
|
-
const toggleDropdown = React.useCallback(() => {
|
|
2022
|
-
if (isMenuOpen) {
|
|
2023
|
-
closeMenu();
|
|
2024
|
-
}
|
|
2025
|
-
else {
|
|
2026
|
-
openMenu();
|
|
2027
|
-
}
|
|
2028
|
-
}, [isMenuOpen, closeMenu, openMenu]);
|
|
2029
|
-
const initialItemsSelected = React.useMemo(() => {
|
|
2030
|
-
const selectedMap = {};
|
|
2031
|
-
selectedItems.forEach((id) => {
|
|
2032
|
-
selectedMap[id] = true;
|
|
2033
|
-
});
|
|
2034
|
-
return selectedMap;
|
|
2035
|
-
}, [selectedItems, menuItems]);
|
|
2036
|
-
const handleClickOutside = React.useCallback((event) => {
|
|
2037
|
-
if (!isMenuOpen)
|
|
2038
|
-
return;
|
|
2039
|
-
const target = event.target;
|
|
2040
|
-
if (menuContainerRef.current?.contains(target)) {
|
|
2041
|
-
return;
|
|
2042
|
-
}
|
|
2043
|
-
if (anchorRef.current?.contains(target)) {
|
|
2044
|
-
return;
|
|
2045
|
-
}
|
|
2046
|
-
if (dropdownRef.current?.contains(target)) {
|
|
2047
|
-
return;
|
|
2048
|
-
}
|
|
2049
|
-
closeMenu();
|
|
2050
|
-
}, [isMenuOpen, closeMenu]);
|
|
2051
|
-
const handleKeyDown = React.useCallback((event) => {
|
|
2052
|
-
if (!isMenuOpen)
|
|
2053
|
-
return;
|
|
2054
|
-
switch (event.key) {
|
|
2055
|
-
case 'Escape':
|
|
2056
|
-
event.preventDefault();
|
|
2057
|
-
closeMenu();
|
|
2058
|
-
if (anchorRef.current) {
|
|
2059
|
-
anchorRef.current.focus();
|
|
2060
|
-
}
|
|
2061
|
-
break;
|
|
2062
|
-
case 'ArrowDown':
|
|
2063
|
-
event.preventDefault();
|
|
2064
|
-
setFocusedItemIndex(prev => {
|
|
2065
|
-
const nextIndex = prev < menuItems.length - 1 ? prev + 1 : 0;
|
|
2066
|
-
return nextIndex;
|
|
2067
|
-
});
|
|
2068
|
-
break;
|
|
2069
|
-
case 'ArrowUp':
|
|
2070
|
-
event.preventDefault();
|
|
2071
|
-
setFocusedItemIndex(prev => {
|
|
2072
|
-
const nextIndex = prev > 0 ? prev - 1 : menuItems.length - 1;
|
|
2073
|
-
return nextIndex;
|
|
2074
|
-
});
|
|
2075
|
-
break;
|
|
2076
|
-
case 'Enter':
|
|
2077
|
-
case ' ':
|
|
2078
|
-
event.preventDefault();
|
|
2079
|
-
if (focusedItemIndex >= 0 && focusedItemIndex < menuItems.length) {
|
|
2080
|
-
const selectedItem = menuItems[focusedItemIndex];
|
|
2081
|
-
if (selectedItem && !selectedItem.disabled && onMenuItemClick) {
|
|
2082
|
-
onMenuItemClick(selectedItem);
|
|
2083
|
-
}
|
|
2084
|
-
}
|
|
2085
|
-
break;
|
|
2086
|
-
case 'Home':
|
|
2087
|
-
event.preventDefault();
|
|
2088
|
-
setFocusedItemIndex(0);
|
|
2089
|
-
break;
|
|
2090
|
-
case 'End':
|
|
2091
|
-
event.preventDefault();
|
|
2092
|
-
setFocusedItemIndex(menuItems.length - 1);
|
|
2093
|
-
break;
|
|
2094
|
-
}
|
|
2095
|
-
}, [isMenuOpen, closeMenu, focusedItemIndex, menuItems, onMenuItemClick, type]);
|
|
2096
|
-
React.useEffect(() => {
|
|
2097
|
-
if (!isMenuOpen) {
|
|
2098
|
-
setFocusedItemIndex(-1);
|
|
2099
|
-
}
|
|
2100
|
-
}, [isMenuOpen]);
|
|
2101
|
-
const handleSelectionChange = React.useCallback((selectedIds) => {
|
|
2102
|
-
if (selectedIds.length > 0 && menuItems.length > 0 && onMenuItemClick) {
|
|
2103
|
-
const lastSelectedId = selectedIds[selectedIds.length - 1];
|
|
2104
|
-
const selectedItem = menuItems.find((item) => item.id === lastSelectedId);
|
|
2105
|
-
if (selectedItem) {
|
|
2106
|
-
onMenuItemClick(selectedItem);
|
|
2107
|
-
closeMenu();
|
|
2108
|
-
}
|
|
2109
|
-
}
|
|
2110
|
-
setSelectedItems(selectedIds);
|
|
2111
|
-
}, [menuItems, onMenuItemClick, closeMenu]);
|
|
2112
|
-
React.useEffect(() => {
|
|
2113
|
-
if (isMenuOpen) {
|
|
2114
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
2115
|
-
document.addEventListener('keydown', handleKeyDown);
|
|
2116
|
-
return () => {
|
|
2117
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
2118
|
-
document.removeEventListener('keydown', handleKeyDown);
|
|
2119
|
-
};
|
|
2120
|
-
}
|
|
2121
|
-
}, [isMenuOpen, handleClickOutside, handleKeyDown]);
|
|
2122
|
-
const renderAnchor = () => {
|
|
2123
|
-
const dropdownId = `${id || 'menu'}-dropdown`;
|
|
2124
|
-
return React.cloneElement(children, {
|
|
2125
|
-
ref: anchorRef,
|
|
2126
|
-
onClick: (e) => {
|
|
2127
|
-
if (dropdownRef.current && dropdownRef.current.contains(e.target)) {
|
|
2128
|
-
return;
|
|
2129
|
-
}
|
|
2130
|
-
if (children.props.onClick) {
|
|
2131
|
-
children.props.onClick(e);
|
|
2132
|
-
}
|
|
2133
|
-
toggleDropdown();
|
|
2134
|
-
},
|
|
2135
|
-
'aria-expanded': isMenuOpen ? 'true' : 'false',
|
|
2136
|
-
'aria-haspopup': 'menu',
|
|
2137
|
-
'aria-controls': isMenuOpen ? dropdownId : undefined
|
|
2138
|
-
});
|
|
2139
|
-
};
|
|
2140
|
-
const menuClass = clsx.clsx(styles$9['zds-menu__container'], className);
|
|
2141
|
-
const dropdownClass = clsx.clsx(styles$9['zds-menu__dropdown'], styles$9[`zds-menu__dropdown--${position}`]);
|
|
2142
|
-
return (jsxRuntime.jsxs("div", { ref: menuContainerRef, className: menuClass, id: id, children: [renderAnchor(), isMenuOpen && (jsxRuntime.jsx("div", { ref: dropdownRef, className: dropdownClass, role: "menu", "aria-label": "Menu de a\u00E7\u00F5es", id: `${id || 'menu'}-dropdown`, children: jsxRuntime.jsx(MemoizedDropdown, { type: type, items: menuItems, onSelectionChange: handleSelectionChange, initialItemsSelected: initialItemsSelected, applySearch: applySearch, placeholder: placeholder, showSubText: showSubText, "aria-label": "Menu de a\u00E7\u00F5es", minWidth: minWidth, maxWidth: maxWidth, className: dropdownClass }) }))] }));
|
|
2143
|
-
};
|
|
2144
|
-
|
|
2145
|
-
var styles$8 = {"content":"MenuRadix-module__content___zlnmj","subContent":"MenuRadix-module__subContent___tnX0E","itemsWrapper":"MenuRadix-module__itemsWrapper___FaUM1","item":"MenuRadix-module__item___xYiTK","subTrigger":"MenuRadix-module__subTrigger___HIuMb","itemSubText":"MenuRadix-module__itemSubText___Z8qgX","itemIcon":"MenuRadix-module__itemIcon___la-QC","itemSelected":"MenuRadix-module__itemSelected___sEBh6","itemText":"MenuRadix-module__itemText___ybPJy","wrapperText":"MenuRadix-module__wrapperText___-Sji9","chevronIcon":"MenuRadix-module__chevronIcon___VMHpF","searchWrapper":"MenuRadix-module__searchWrapper___qrshb","emptyState":"MenuRadix-module__emptyState___SVFf0","loadingMore":"MenuRadix-module__loadingMore___rYo-t"};
|
|
1889
|
+
var styles$6 = {"content":"Menu-module__content___pnDF6","subContent":"Menu-module__subContent___O9T-y","itemsWrapper":"Menu-module__itemsWrapper___Fcg71","item":"Menu-module__item___S3HKY","subTrigger":"Menu-module__subTrigger___CdnJE","itemSubText":"Menu-module__itemSubText___U1HFP","itemIcon":"Menu-module__itemIcon___iyxmZ","itemSelected":"Menu-module__itemSelected___O5Ebi","itemText":"Menu-module__itemText___2fd2B","wrapperText":"Menu-module__wrapperText___PomUe","chevronIcon":"Menu-module__chevronIcon___Gda-U","searchWrapper":"Menu-module__searchWrapper___e0knQ","emptyState":"Menu-module__emptyState___3wh-S","loadingMore":"Menu-module__loadingMore___fUCvH"};
|
|
2146
1890
|
|
|
2147
1891
|
const normalizeText = (text) => {
|
|
2148
1892
|
if (typeof text === 'string')
|
|
@@ -2265,11 +2009,11 @@ const MenuItem = React.memo(({ item, isSelected, onSelect }) => {
|
|
|
2265
2009
|
const handleSelect = () => {
|
|
2266
2010
|
onSelect(item);
|
|
2267
2011
|
};
|
|
2268
|
-
return (jsxRuntime.jsxs(radixUi.DropdownMenu.Item, { className: clsx(styles$
|
|
2012
|
+
return (jsxRuntime.jsxs(radixUi.DropdownMenu.Item, { className: clsx(styles$6.item, { [styles$6.itemSelected]: isSelected }), onSelect: handleSelect, disabled: item.disabled, children: [item.icon && jsxRuntime.jsx("span", { className: styles$6.itemIcon, children: item.icon }), jsxRuntime.jsxs("div", { className: styles$6.wrapperText, children: [jsxRuntime.jsx("span", { className: styles$6.itemText, children: item.text }), item.subText && (jsxRuntime.jsx("span", { className: styles$6.itemSubText, children: item.subText }))] })] }));
|
|
2269
2013
|
});
|
|
2270
2014
|
MenuItem.displayName = 'MenuItem';
|
|
2271
2015
|
|
|
2272
|
-
const
|
|
2016
|
+
const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onScrollEnd, isLoadingMore, onApiSearch, enableApiSearch, selectedItems = [], onOpenChange, align = 'start', className, maxHeight = 400, ...rest }) => {
|
|
2273
2017
|
const itemsWrapperRef = React.useRef(null);
|
|
2274
2018
|
const hasReachedEndRef = React.useRef(false);
|
|
2275
2019
|
const observerRef = React.useRef(null);
|
|
@@ -2278,16 +2022,14 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2278
2022
|
const isLoadingMoreRef = React.useRef(isLoadingMore);
|
|
2279
2023
|
const [searchInput, setSearchInput] = React.useState('');
|
|
2280
2024
|
const [searchTerm, setSearchTerm] = React.useState('');
|
|
2281
|
-
const [open, setOpen] = React.useState(false);
|
|
2282
2025
|
const maxHeightStyle = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
|
|
2283
|
-
const { handleItemSelect: handleItemSelectLogic, isItemSelected } = useMenuLogic({
|
|
2026
|
+
const { open, setOpen, handleItemSelect: handleItemSelectLogic, isItemSelected } = useMenuLogic({
|
|
2284
2027
|
selectedItems,
|
|
2285
2028
|
onItemSelect,
|
|
2286
2029
|
onOpenChange,
|
|
2287
2030
|
});
|
|
2288
2031
|
const handleItemSelect = React.useCallback((item) => {
|
|
2289
2032
|
handleItemSelectLogic(item);
|
|
2290
|
-
setOpen(false);
|
|
2291
2033
|
}, [handleItemSelectLogic]);
|
|
2292
2034
|
const { filteredItems } = useSearchLogic({
|
|
2293
2035
|
items,
|
|
@@ -2313,7 +2055,7 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2313
2055
|
React.useEffect(() => {
|
|
2314
2056
|
onScrollEndRef.current = onScrollEnd;
|
|
2315
2057
|
isLoadingMoreRef.current = isLoadingMore;
|
|
2316
|
-
});
|
|
2058
|
+
}, [onScrollEnd, isLoadingMore]);
|
|
2317
2059
|
React.useEffect(() => {
|
|
2318
2060
|
if (!open || !enableInfiniteScroll) {
|
|
2319
2061
|
return;
|
|
@@ -2372,27 +2114,24 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2372
2114
|
const renderMenuItem = React.useCallback((item, key) => {
|
|
2373
2115
|
const hasChildren = item.children && item.children.length > 0;
|
|
2374
2116
|
if (hasChildren) {
|
|
2375
|
-
return (jsxRuntime.jsxs(radixUi.DropdownMenu.Sub, { children: [jsxRuntime.jsxs(radixUi.DropdownMenu.SubTrigger, { className: styles$
|
|
2117
|
+
return (jsxRuntime.jsxs(radixUi.DropdownMenu.Sub, { children: [jsxRuntime.jsxs(radixUi.DropdownMenu.SubTrigger, { className: styles$6.subTrigger, disabled: item.disabled, children: [item.icon && (jsxRuntime.jsx("span", { className: styles$6.itemIcon, children: item.icon })), jsxRuntime.jsxs("div", { className: styles$6.wrapperText, children: [jsxRuntime.jsx("span", { className: styles$6.itemText, children: item.text }), item.subText && (jsxRuntime.jsx("span", { className: styles$6.itemSubText, children: item.subText }))] }), jsxRuntime.jsx(reactIcons.ChevronRight16Filled, { className: styles$6.chevronIcon })] }), jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { children: jsxRuntime.jsx(radixUi.DropdownMenu.SubContent, { className: styles$6.subContent, sideOffset: 16, collisionPadding: 20, children: item.children.map((childItem, childIndex) => renderMenuItem(childItem, `${key}-${childIndex}`)) }) })] }, key));
|
|
2376
2118
|
}
|
|
2377
2119
|
return (jsxRuntime.jsx(MenuItem, { item: item, isSelected: isItemSelected(item), onSelect: handleItemSelect }, key));
|
|
2378
2120
|
}, [handleItemSelect, isItemSelected]);
|
|
2379
2121
|
const handleOpenChange = (newOpen) => {
|
|
2380
2122
|
setOpen(newOpen);
|
|
2381
|
-
if (onOpenChange) {
|
|
2382
|
-
onOpenChange(newOpen);
|
|
2383
|
-
}
|
|
2384
2123
|
if (!newOpen) {
|
|
2385
2124
|
hasReachedEndRef.current = false;
|
|
2386
2125
|
}
|
|
2387
2126
|
};
|
|
2388
|
-
return (jsxRuntime.jsxs(radixUi.DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(radixUi.DropdownMenu.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { children: jsxRuntime.jsxs(radixUi.DropdownMenu.Content, { className: clsx(styles$
|
|
2127
|
+
return (jsxRuntime.jsxs(radixUi.DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(radixUi.DropdownMenu.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { children: jsxRuntime.jsxs(radixUi.DropdownMenu.Content, { className: clsx(styles$6.content, className), sideOffset: 8, align: align, onKeyDown: (e) => {
|
|
2389
2128
|
if (search) {
|
|
2390
2129
|
e.stopPropagation();
|
|
2391
2130
|
}
|
|
2392
|
-
}, ...rest, children: [search && (jsxRuntime.jsx("div", { className: styles$
|
|
2131
|
+
}, ...rest, children: [search && (jsxRuntime.jsx("div", { className: styles$6.searchWrapper, children: jsxRuntime.jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), jsxRuntime.jsxs("div", { className: styles$6.itemsWrapper, ref: itemsWrapperRef, style: { maxHeight: maxHeightStyle }, children: [filteredItems.length > 0 ? (filteredItems.map((item, index) => renderMenuItem(item, item.value || item.text || `item-${index}`))) : (jsxRuntime.jsx("div", { className: styles$6.emptyState, children: "Nenhum item encontrado" })), enableInfiniteScroll && isLoadingMore && (jsxRuntime.jsx("div", { className: styles$6.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsxRuntime.jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
|
|
2393
2132
|
};
|
|
2394
2133
|
|
|
2395
|
-
var styles$
|
|
2134
|
+
var styles$5 = {"zds-quantity":"Quantity-module__zds-quantity___AymLj","zds-quantity__input":"Quantity-module__zds-quantity__input___Wlhmo"};
|
|
2396
2135
|
|
|
2397
2136
|
/**
|
|
2398
2137
|
* Componente Quantity - permite incrementar/decrementar valores numéricos
|
|
@@ -2611,376 +2350,94 @@ const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled
|
|
|
2611
2350
|
}, [disabled, increment, decrement, decimal, decimalPlaces, isControlled, onChange, computedValue]);
|
|
2612
2351
|
const uniqueId = React.useId();
|
|
2613
2352
|
const inputId = id || uniqueId;
|
|
2614
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
2353
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$5['zds-quantity'], { disabled }, className), children: [jsxRuntime.jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Subtract16Regular, {}), onClick: decrement, disabled: disabled || isMinValue, "aria-label": 'Diminuir quantidade' }), jsxRuntime.jsx("input", { ref: inputRef, className: clsx(styles$5['zds-quantity__input'], { disabled }), type: 'text', value: inputValue, onChange: handleInputChange, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: inputId, min: '0', step: stepValue, "aria-label": 'Quantidade', role: 'spinbutton', "aria-valuenow": computedValue, "aria-valuemin": 0, "aria-valuemax": decimal ? undefined : 9999, disabled: disabled, inputMode: decimal ? 'decimal' : 'numeric' }), jsxRuntime.jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, onClick: increment, disabled: disabled, "aria-label": 'Aumentar quantidade', icon: jsxRuntime.jsx(reactIcons.Add16Regular, {}) })] }));
|
|
2615
2354
|
};
|
|
2616
2355
|
const memorizedQuantity = React.memo(Quantity);
|
|
2617
2356
|
memorizedQuantity.displayName = 'Quantity';
|
|
2618
2357
|
|
|
2619
|
-
var styles$
|
|
2358
|
+
var styles$4 = {"fieldContainer":"index-module__fieldContainer___gp5Hz","trigger":"index-module__trigger___rHQJz","disabled":"index-module__disabled___MIJba","open":"index-module__open___bVB-1","error":"index-module__error___nPFjW","hasValue":"index-module__hasValue___a4Sy4","triggerText":"index-module__triggerText___tyjAQ","containerLabel":"index-module__containerLabel___CExNh","content":"index-module__content___9nWeY","viewport":"index-module__viewport___nkVG9","group":"index-module__group___-PiX6","container":"index-module__container___Wg-pd","searchWrapper":"index-module__searchWrapper___umf9d","item":"index-module__item___R-Xle","subTitle":"index-module__subTitle___sXaqd","title":"index-module__title___x1Bia","checkboxItem":"index-module__checkboxItem___FTUbN","checkboxContent":"index-module__checkboxContent___skcd5","itemWrapper":"index-module__itemWrapper___PAglx","selected":"index-module__selected___VFFMN","icon":"index-module__icon___l2Zze","itemIndicator":"index-module__itemIndicator___FhOim","textContent":"index-module__textContent___cBJbp","helper":"index-module__helper___w4VC7","errorMessage":"index-module__errorMessage___gquqW","noResults":"index-module__noResults___qgzod","loadingMore":"index-module__loadingMore___GHc31","expandableItemContainer":"index-module__expandableItemContainer___NexPi","chevron":"index-module__chevron___c6mu-","childrenWrapper":"index-module__childrenWrapper___tj2R-"};
|
|
2620
2359
|
|
|
2621
|
-
const
|
|
2622
|
-
const
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
}) }));
|
|
2628
|
-
};
|
|
2629
|
-
|
|
2630
|
-
var styles$5 = {"zds-select":"Select-module__zds-select___TePBJ","zds-select__dropdown":"Select-module__zds-select__dropdown___pEXsY","zds-dropdown__container":"Select-module__zds-dropdown__container___TJvrT","zds-select__dropdown--top":"Select-module__zds-select__dropdown--top___O3u5M","zds-select__dropdown--bottom":"Select-module__zds-select__dropdown--bottom___qfKLH"};
|
|
2631
|
-
|
|
2632
|
-
var styles$4 = {"zds-select-field":"SelectField-module__zds-select-field___djzS5","zds-select-field__required":"SelectField-module__zds-select-field__required___T-LvC","zds-select-field__container-box":"SelectField-module__zds-select-field__container-box___nkzZy","zds-select-field__box__input":"SelectField-module__zds-select-field__box__input___xBdKZ","zds-select-field__display":"SelectField-module__zds-select-field__display___snLz3","zds-select-field--open":"SelectField-module__zds-select-field--open___IUfIn","zds-select-field__icon":"SelectField-module__zds-select-field__icon___kt-SW","zds-select-field__helper-text":"SelectField-module__zds-select-field__helper-text___9jTiW","zds-select-field__container-tooltip":"SelectField-module__zds-select-field__container-tooltip___xZr46","zds-select-field__tooltip":"SelectField-module__zds-select-field__tooltip___XYAEC","zds-select-field--error":"SelectField-module__zds-select-field--error___sb6H6","zds-select-field--disabled":"SelectField-module__zds-select-field--disabled___48f33"};
|
|
2633
|
-
|
|
2634
|
-
const SelectField = React.forwardRef(({ id, name, value, placeholder, label, helperText, errorMessage, required = false, disabled = false, icon, isOpen = false, className, tooltip, tooltipText, isTouched = false, hasError = false, positionTooltip }, ref) => {
|
|
2635
|
-
// ✅ NOVA LÓGICA: Validação de required
|
|
2636
|
-
const isRequired = required && !disabled;
|
|
2637
|
-
const hasValue = Boolean(value && value.trim().length > 0);
|
|
2638
|
-
const shouldShowRequiredError = isRequired && isTouched && !hasValue;
|
|
2639
|
-
// ✅ NOVA LÓGICA: Mensagem de erro dinâmica
|
|
2640
|
-
const dynamicErrorMessage = shouldShowRequiredError && !errorMessage
|
|
2641
|
-
? 'Este campo é obrigatório'
|
|
2642
|
-
: errorMessage;
|
|
2643
|
-
// ✅ NOVA LÓGICA: Estado de erro combinado
|
|
2644
|
-
const showError = hasError || shouldShowRequiredError || Boolean(errorMessage);
|
|
2645
|
-
// Classes CSS
|
|
2646
|
-
const containerClasses = clsx(styles$4['zds-select-field'], {
|
|
2647
|
-
[styles$4['zds-select-field--open']]: isOpen,
|
|
2648
|
-
[styles$4['zds-select-field--disabled']]: disabled,
|
|
2649
|
-
[styles$4['zds-select-field--error']]: showError,
|
|
2650
|
-
[styles$4['zds-select-field--required']]: isRequired,
|
|
2651
|
-
[styles$4['zds-select-field--touched']]: isTouched,
|
|
2652
|
-
}, className);
|
|
2653
|
-
const displayClasses = clsx(styles$4['zds-select-field__display'], {
|
|
2654
|
-
[styles$4['zds-select-field__display--placeholder']]: !hasValue,
|
|
2655
|
-
'has-value': hasValue,
|
|
2656
|
-
});
|
|
2657
|
-
const displayText = hasValue ? value : placeholder;
|
|
2658
|
-
return (jsxRuntime.jsxs("div", { className: containerClasses, ref: ref, children: [label && (jsxRuntime.jsx("label", { htmlFor: id, children: tooltip ? (jsxRuntime.jsx(Tooltip, { text: tooltipText, position: positionTooltip, children: jsxRuntime.jsxs("div", { className: styles$4['zds-select-field__container-tooltip'], children: [label, required && jsxRuntime.jsx("span", { className: styles$4['zds-select-field__required'], children: "*" }), jsxRuntime.jsx(reactIcons.Info12Regular, { className: styles$4['zds-select-field__tooltip'] })] }) })) : (jsxRuntime.jsxs("div", { className: styles$4['zds-select-field__container-tooltip'], children: [label, required && jsxRuntime.jsx("span", { className: styles$4['zds-select-field__required'], children: "*" })] })) })), jsxRuntime.jsxs("div", { className: styles$4['zds-select-field__container-box'], children: [jsxRuntime.jsxs("div", { className: styles$4['zds-select-field__box__input'], children: [jsxRuntime.jsx("div", { id: id, className: displayClasses, "data-placeholder": !hasValue ? placeholder : undefined, children: displayText }), jsxRuntime.jsx("input", { type: "hidden", name: name, value: value || '', disabled: disabled, required: required, className: styles$4['zds-select-field__input'] }), icon && (jsxRuntime.jsx("div", { className: styles$4['zds-select-field__icon'], children: icon }))] }), !isOpen && (helperText || showError) && (jsxRuntime.jsx("div", { className: styles$4['zds-select-field__helper-text'], children: showError ? dynamicErrorMessage : helperText }))] })] }));
|
|
2659
|
-
});
|
|
2660
|
-
SelectField.displayName = 'SelectField';
|
|
2661
|
-
|
|
2662
|
-
const Select = React.memo(({ id, options = [], value, initialValue, onChange, placeholder = 'Selecione', type = 'text', label, helperText, errorMessage, required = false, disabled = false, className, ariaLabel, showSubText, maxWidth, minWidth, width, position, tooltip = false, tooltipText = 'tooltip', positionTooltip = 'top-right', infiniteScroll, maxHeight }) => {
|
|
2663
|
-
// Hooks e refs
|
|
2664
|
-
const componentId = React.useId();
|
|
2665
|
-
const finalId = id || componentId;
|
|
2666
|
-
const selectRef = React.useRef(null);
|
|
2667
|
-
// ✅ REMOVIDO: isUpdatingRef, previousValueRef, textFieldRef (desnecessários)
|
|
2668
|
-
// ✅ NOVO: Validação de props em desenvolvimento
|
|
2669
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2670
|
-
// Validar unidades CSS
|
|
2671
|
-
if (maxWidth && typeof maxWidth === 'string' &&
|
|
2672
|
-
!maxWidth.match(/^\d+(px|%|rem|em|vw|vh)$/)) {
|
|
2673
|
-
console.warn('Select: maxWidth deve ter unidade CSS válida (px, %, rem, em, vw, vh)');
|
|
2674
|
-
}
|
|
2675
|
-
if (minWidth && typeof minWidth === 'string' &&
|
|
2676
|
-
!minWidth.match(/^\d+(px|%|rem|em|vw|vh)$/)) {
|
|
2677
|
-
console.warn('Select: minWidth deve ter unidade CSS válida');
|
|
2678
|
-
}
|
|
2679
|
-
// Validar performance
|
|
2680
|
-
if (options.length > 1000) {
|
|
2681
|
-
console.warn('Select: Muitas opções (>1000) podem impactar performance. Considere virtualização.');
|
|
2682
|
-
}
|
|
2683
|
-
// Validar onChange obrigatório
|
|
2684
|
-
if (!onChange) {
|
|
2685
|
-
console.warn('Select: onChange prop é recomendado para controle de estado.');
|
|
2686
|
-
}
|
|
2687
|
-
}
|
|
2688
|
-
// Estados
|
|
2689
|
-
const [isOpen, setIsOpen] = React.useState(false);
|
|
2690
|
-
const [selectedOptions, setSelectedOptions] = React.useState(() => {
|
|
2691
|
-
// Se tem value controlado, não usar initialValue
|
|
2692
|
-
if (value !== undefined) {
|
|
2693
|
-
return [];
|
|
2694
|
-
}
|
|
2695
|
-
// Se tem initialValue, processar na inicialização
|
|
2696
|
-
if (initialValue !== undefined) {
|
|
2697
|
-
// Inicializar com array vazio primeiro, será populado no useEffect
|
|
2698
|
-
return [];
|
|
2699
|
-
}
|
|
2700
|
-
return [];
|
|
2701
|
-
});
|
|
2702
|
-
const [isTouched, setIsTouched] = React.useState(false);
|
|
2703
|
-
const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
|
|
2704
|
-
// Lógica de validação para campo obrigatório
|
|
2705
|
-
const hasValue = selectedOptions.length > 0;
|
|
2706
|
-
const shouldShowRequiredError = required && isTouched && !hasValue && !disabled;
|
|
2707
|
-
// Validação e normalização das opções
|
|
2708
|
-
const validatedOptions = React.useMemo(() => {
|
|
2709
|
-
if (!Array.isArray(options)) {
|
|
2710
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2711
|
-
console.warn('Select: options deve ser um array, recebido:', typeof options, options);
|
|
2712
|
-
}
|
|
2713
|
-
return [];
|
|
2714
|
-
}
|
|
2715
|
-
return options.filter((option, index) => {
|
|
2716
|
-
if (!option || typeof option !== 'object') {
|
|
2717
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2718
|
-
console.warn(`Select: opção ${index} é inválida (null/undefined):`, option);
|
|
2719
|
-
}
|
|
2720
|
-
return false;
|
|
2721
|
-
}
|
|
2722
|
-
if (!option.text || typeof option.text !== 'string' || option.text.trim().length === 0) {
|
|
2723
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2724
|
-
console.warn(`Select: opção ${index} sem text válido:`, option);
|
|
2725
|
-
}
|
|
2726
|
-
return false;
|
|
2727
|
-
}
|
|
2728
|
-
if (option.text.length > 200) {
|
|
2729
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2730
|
-
console.warn(`Select: opção ${index} com text muito longo (${option.text.length} chars):`, option.text.substring(0, 50) + '...');
|
|
2731
|
-
}
|
|
2732
|
-
return false;
|
|
2733
|
-
}
|
|
2734
|
-
return true;
|
|
2735
|
-
});
|
|
2736
|
-
}, [options]);
|
|
2737
|
-
// Conversão para itens do Dropdown
|
|
2738
|
-
const dropdownItems = React.useMemo(() => {
|
|
2739
|
-
return validatedOptions.map((option, index) => ({
|
|
2740
|
-
id: option.id || `dropdown-item-${index}`,
|
|
2741
|
-
text: option.text,
|
|
2742
|
-
subText: option.subText,
|
|
2743
|
-
icon: option.icon,
|
|
2744
|
-
disabled: option.disabled || disabled
|
|
2745
|
-
}));
|
|
2746
|
-
}, [validatedOptions, disabled]);
|
|
2747
|
-
// Texto de exibição das opções selecionadas
|
|
2748
|
-
const displayText = React.useMemo(() => {
|
|
2749
|
-
if (selectedOptions.length === 0)
|
|
2750
|
-
return '';
|
|
2751
|
-
return selectedOptions
|
|
2752
|
-
.map((item) => item.text || 'Item sem nome')
|
|
2753
|
-
.join(', ');
|
|
2754
|
-
}, [selectedOptions]);
|
|
2755
|
-
// IDs das opções selecionadas para o Dropdown
|
|
2756
|
-
const selectedIds = React.useMemo(() => {
|
|
2757
|
-
return selectedOptions.map((selectedItem) => {
|
|
2758
|
-
const optionIndex = validatedOptions.findIndex((option) => {
|
|
2759
|
-
return option.id === selectedItem.id ||
|
|
2760
|
-
option.text === selectedItem.text ||
|
|
2761
|
-
option === selectedItem;
|
|
2762
|
-
});
|
|
2763
|
-
return optionIndex !== -1
|
|
2764
|
-
? (validatedOptions[optionIndex].id || `dropdown-item-${optionIndex}`)
|
|
2765
|
-
: null;
|
|
2766
|
-
}).filter((id) => Boolean(id));
|
|
2767
|
-
}, [selectedOptions, validatedOptions]);
|
|
2768
|
-
// Mapa inicial de seleção para o Dropdown
|
|
2769
|
-
const initialItemsSelected = React.useMemo(() => {
|
|
2770
|
-
const selectedMap = {};
|
|
2771
|
-
selectedIds.forEach((id) => {
|
|
2772
|
-
selectedMap[id] = true;
|
|
2773
|
-
});
|
|
2774
|
-
return selectedMap;
|
|
2775
|
-
}, [selectedIds]);
|
|
2776
|
-
// ✅ SIMPLIFICADO: Handlers de evento sem refs desnecessários
|
|
2777
|
-
const handleOptionSelect = React.useCallback((selectedIds) => {
|
|
2360
|
+
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange, value, ...restProps }) => {
|
|
2361
|
+
const itemRef = React.useRef(null);
|
|
2362
|
+
const handleCheckboxChange = (checkedValue) => {
|
|
2363
|
+
onCheckedChange(Boolean(checkedValue));
|
|
2364
|
+
};
|
|
2365
|
+
const handleKeyDown = (e) => {
|
|
2778
2366
|
if (disabled)
|
|
2779
2367
|
return;
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
if (!foundOption && id.startsWith('dropdown-item-')) {
|
|
2785
|
-
const index = parseInt(id.replace('dropdown-item-', ''), 10);
|
|
2786
|
-
foundOption = validatedOptions[index];
|
|
2787
|
-
}
|
|
2788
|
-
return foundOption;
|
|
2789
|
-
}).filter((option) => Boolean(option));
|
|
2790
|
-
setSelectedOptions(selectedItems);
|
|
2791
|
-
onChange?.(selectedItems);
|
|
2792
|
-
// Fechar dropdown se não for múltipla seleção
|
|
2793
|
-
if (type !== 'checkbox') {
|
|
2794
|
-
setIsOpen(false);
|
|
2795
|
-
}
|
|
2796
|
-
}, [validatedOptions, onChange, type, disabled]);
|
|
2797
|
-
// ✅ NOVO: Busca rápida por primeira letra
|
|
2798
|
-
const handleQuickSearch = React.useCallback((char) => {
|
|
2799
|
-
if (!isOpen || dropdownItems.length === 0)
|
|
2368
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
2369
|
+
e.preventDefault();
|
|
2370
|
+
e.stopPropagation();
|
|
2371
|
+
onCheckedChange(!checked);
|
|
2800
2372
|
return;
|
|
2801
|
-
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
matchingIndex = dropdownItems.findIndex(item => item.text.toLowerCase().startsWith(char) &&
|
|
2809
|
-
!item.disabled);
|
|
2810
|
-
}
|
|
2811
|
-
if (matchingIndex >= 0) {
|
|
2812
|
-
setFocusedOptionIndex(matchingIndex);
|
|
2813
|
-
}
|
|
2814
|
-
}, [isOpen, focusedOptionIndex, dropdownItems]);
|
|
2815
|
-
const handleTriggerClick = React.useCallback((event) => {
|
|
2816
|
-
if (disabled)
|
|
2373
|
+
}
|
|
2374
|
+
if (e.key === 'ArrowDown') {
|
|
2375
|
+
e.preventDefault();
|
|
2376
|
+
const nextElement = itemRef.current?.nextElementSibling;
|
|
2377
|
+
if (nextElement && nextElement.getAttribute('tabIndex') === '0') {
|
|
2378
|
+
nextElement.focus();
|
|
2379
|
+
}
|
|
2817
2380
|
return;
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2381
|
+
}
|
|
2382
|
+
if (e.key === 'ArrowUp') {
|
|
2383
|
+
e.preventDefault();
|
|
2384
|
+
const prevElement = itemRef.current?.previousElementSibling;
|
|
2385
|
+
if (prevElement && prevElement.getAttribute('tabIndex') === '0') {
|
|
2386
|
+
prevElement.focus();
|
|
2387
|
+
}
|
|
2825
2388
|
return;
|
|
2826
|
-
const relatedTarget = event.relatedTarget;
|
|
2827
|
-
if (selectRef.current && relatedTarget && selectRef.current.contains(relatedTarget)) {
|
|
2828
|
-
return; // Não fechar se foco está dentro do select
|
|
2829
2389
|
}
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
setIsOpen(false);
|
|
2833
|
-
setFocusedOptionIndex(-1);
|
|
2834
|
-
}, 200);
|
|
2835
|
-
}, [disabled]);
|
|
2836
|
-
const handleKeyDown = React.useCallback((event) => {
|
|
2390
|
+
};
|
|
2391
|
+
const handleClick = (e) => {
|
|
2837
2392
|
if (disabled)
|
|
2838
2393
|
return;
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
// Selecionar opção focada
|
|
2846
|
-
const optionId = dropdownItems[focusedOptionIndex]?.id;
|
|
2847
|
-
if (optionId) {
|
|
2848
|
-
handleOptionSelect([optionId]);
|
|
2849
|
-
}
|
|
2850
|
-
}
|
|
2851
|
-
else {
|
|
2852
|
-
setIsOpen(prev => !prev);
|
|
2853
|
-
if (!isOpen) {
|
|
2854
|
-
setFocusedOptionIndex(0);
|
|
2855
|
-
}
|
|
2856
|
-
}
|
|
2857
|
-
break;
|
|
2858
|
-
case 'Escape':
|
|
2859
|
-
event.preventDefault();
|
|
2860
|
-
event.stopPropagation();
|
|
2861
|
-
setIsTouched(true);
|
|
2862
|
-
setIsOpen(false);
|
|
2863
|
-
setFocusedOptionIndex(-1);
|
|
2864
|
-
// ✅ Devolver foco para o trigger
|
|
2865
|
-
selectRef.current?.focus();
|
|
2866
|
-
break;
|
|
2867
|
-
case 'ArrowDown':
|
|
2868
|
-
event.preventDefault();
|
|
2869
|
-
event.stopPropagation();
|
|
2870
|
-
if (!isOpen) {
|
|
2871
|
-
setIsOpen(true);
|
|
2872
|
-
setFocusedOptionIndex(0);
|
|
2873
|
-
}
|
|
2874
|
-
else {
|
|
2875
|
-
setFocusedOptionIndex(prev => prev < dropdownItems.length - 1 ? prev + 1 : 0);
|
|
2876
|
-
}
|
|
2877
|
-
break;
|
|
2878
|
-
case 'ArrowUp':
|
|
2879
|
-
event.preventDefault();
|
|
2880
|
-
event.stopPropagation();
|
|
2881
|
-
if (isOpen) {
|
|
2882
|
-
setFocusedOptionIndex(prev => prev > 0 ? prev - 1 : dropdownItems.length - 1);
|
|
2883
|
-
}
|
|
2884
|
-
break;
|
|
2885
|
-
case 'Home':
|
|
2886
|
-
if (isOpen) {
|
|
2887
|
-
event.preventDefault();
|
|
2888
|
-
setFocusedOptionIndex(0);
|
|
2889
|
-
}
|
|
2890
|
-
break;
|
|
2891
|
-
case 'End':
|
|
2892
|
-
if (isOpen) {
|
|
2893
|
-
event.preventDefault();
|
|
2894
|
-
setFocusedOptionIndex(dropdownItems.length - 1);
|
|
2895
|
-
}
|
|
2896
|
-
break;
|
|
2897
|
-
case 'Tab':
|
|
2898
|
-
if (isOpen) {
|
|
2899
|
-
setIsOpen(false);
|
|
2900
|
-
setIsTouched(true);
|
|
2901
|
-
setFocusedOptionIndex(-1);
|
|
2902
|
-
}
|
|
2903
|
-
break;
|
|
2904
|
-
default:
|
|
2905
|
-
if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) {
|
|
2906
|
-
handleQuickSearch(event.key.toLowerCase());
|
|
2907
|
-
}
|
|
2908
|
-
break;
|
|
2909
|
-
}
|
|
2910
|
-
}, [isOpen, disabled, focusedOptionIndex, dropdownItems, handleOptionSelect]);
|
|
2911
|
-
// Click outside handler
|
|
2912
|
-
const handleClickOutside = React.useCallback((event) => {
|
|
2913
|
-
const target = event.target;
|
|
2914
|
-
if (selectRef.current && !selectRef.current.contains(target)) {
|
|
2915
|
-
setIsTouched(true);
|
|
2916
|
-
setIsOpen(false);
|
|
2917
|
-
setFocusedOptionIndex(-1);
|
|
2394
|
+
const target = e.target;
|
|
2395
|
+
const isCheckboxClick = target.closest('input[type="checkbox"]') ||
|
|
2396
|
+
target.closest('label');
|
|
2397
|
+
if (!isCheckboxClick) {
|
|
2398
|
+
e.preventDefault();
|
|
2399
|
+
onCheckedChange(!checked);
|
|
2918
2400
|
}
|
|
2919
|
-
}
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2401
|
+
};
|
|
2402
|
+
return (jsxRuntime.jsx("div", { ref: itemRef, className: clsx(styles$4.checkboxItem, {
|
|
2403
|
+
[styles$4.disabled]: disabled,
|
|
2404
|
+
}), role: "option", "aria-selected": checked, "aria-disabled": disabled, "data-selected": checked, "data-testid": `checkbox-item-${value}`, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onClick: handleClick, ...restProps, children: jsxRuntime.jsx("div", { className: styles$4.checkboxContent, children: jsxRuntime.jsx(Checkbox, { checked: checked, onCheckedChange: handleCheckboxChange, disabled: disabled, label: jsxRuntime.jsxs("div", { className: styles$4.textContent, children: [jsxRuntime.jsx("span", { className: styles$4.title, children: text }), subTitle && jsxRuntime.jsx("div", { className: styles$4.subTitle, children: subTitle })] }) }) }) }));
|
|
2405
|
+
};
|
|
2406
|
+
CheckboxSelectItem.displayName = 'CheckboxSelectItem';
|
|
2407
|
+
|
|
2408
|
+
const ExpandableSelectItem = ({ item, variant, onSelect, selectedValues, level = 0, }) => {
|
|
2409
|
+
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
2410
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
2411
|
+
const isSelected = selectedValues.includes(item.value);
|
|
2412
|
+
const handleClick = (e) => {
|
|
2413
|
+
if (hasChildren) {
|
|
2414
|
+
e.preventDefault();
|
|
2415
|
+
e.stopPropagation();
|
|
2416
|
+
setIsExpanded(!isExpanded);
|
|
2925
2417
|
}
|
|
2926
2418
|
else {
|
|
2927
|
-
|
|
2928
|
-
document.removeEventListener('touchstart', handleClickOutside);
|
|
2419
|
+
onSelect(item.value);
|
|
2929
2420
|
}
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
.map((val) => validatedOptions.find((option) => option.id === val || option.text === val))
|
|
2949
|
-
.filter((option) => Boolean(option));
|
|
2950
|
-
setSelectedOptions(newSelectedOptions);
|
|
2951
|
-
}
|
|
2952
|
-
else if (value === undefined && initialValue === undefined && selectedOptions.length > 0) {
|
|
2953
|
-
// Nenhum valor definido - limpar seleções apenas se havia seleções
|
|
2954
|
-
setSelectedOptions([]);
|
|
2955
|
-
}
|
|
2956
|
-
}, [value, initialValue, validatedOptions]);
|
|
2957
|
-
const containerStyles = React.useMemo(() => {
|
|
2958
|
-
const styles = {};
|
|
2959
|
-
if (minWidth) {
|
|
2960
|
-
styles.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
|
|
2961
|
-
}
|
|
2962
|
-
if (maxWidth) {
|
|
2963
|
-
const maxWidthValue = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
|
|
2964
|
-
styles.maxWidth = maxWidthValue;
|
|
2965
|
-
}
|
|
2966
|
-
if (width) {
|
|
2967
|
-
styles.width = typeof width === 'number' ? `${width}px` : width;
|
|
2968
|
-
}
|
|
2969
|
-
return styles;
|
|
2970
|
-
}, [maxWidth, minWidth, width]);
|
|
2971
|
-
// ✅ MELHORADO: Classes CSS com estados visuais
|
|
2972
|
-
const selectClasses = clsx(styles$5['zds-select'], {
|
|
2973
|
-
[styles$5['zds-select--disabled']]: disabled,
|
|
2974
|
-
[styles$5['zds-select--error']]: Boolean(errorMessage) || shouldShowRequiredError,
|
|
2975
|
-
[styles$5['zds-select--focused']]: isOpen,
|
|
2976
|
-
[styles$5['zds-select--required']]: required,
|
|
2977
|
-
[styles$5['zds-select--touched']]: isTouched,
|
|
2978
|
-
}, className);
|
|
2979
|
-
return (jsxRuntime.jsxs("div", { className: selectClasses, ref: selectRef, id: finalId, "data-testid": "select-container", style: containerStyles, children: [jsxRuntime.jsx("div", { role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-owns": isOpen ? `${finalId}-dropdown` : undefined, "aria-controls": `${finalId}-dropdown`, "aria-describedby": helperText ? `${finalId}-helper` : undefined, "aria-invalid": Boolean(errorMessage), "aria-required": required, "aria-label": ariaLabel || label || placeholder || 'Selecione uma opção', "aria-activedescendant": isOpen && focusedOptionIndex >= 0
|
|
2980
|
-
? dropdownItems[focusedOptionIndex]?.id
|
|
2981
|
-
: selectedIds.length > 0 ? selectedIds[0] : undefined, tabIndex: disabled ? -1 : 0, onBlur: handleBlur, onKeyDown: handleKeyDown, onClick: handleTriggerClick, className: styles$5['zds-select__trigger'], children: jsxRuntime.jsx(SelectField, { name: `select-${finalId}`, placeholder: displayText || placeholder, value: displayText, disabled: disabled, helperText: !isOpen ? helperText : undefined, errorMessage: !isOpen ? errorMessage : undefined, icon: isOpen ? jsxRuntime.jsx(reactIcons.ChevronUp16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronDown16Regular, {}), required: required, label: label, isTouched: isTouched, hasError: shouldShowRequiredError, isOpen: isOpen, tooltip: tooltip, tooltipText: tooltipText, positionTooltip: positionTooltip }) }), isOpen && !disabled && (jsxRuntime.jsx("div", { className: clsx(styles$5['zds-select__dropdown'], position && styles$5[`zds-select__dropdown--${position}`]), children: jsxRuntime.jsx(MemoizedDropdown, { items: dropdownItems, type: type, onSelectionChange: handleOptionSelect, initialItemsSelected: initialItemsSelected, defaultSelectedIds: selectedIds, id: `${finalId}-dropdown`, showSubText: showSubText, maxWidth: maxWidth, minWidth: minWidth, width: width, maxHeight: maxHeight, infiniteScroll: infiniteScroll }, `dropdown-${selectedIds.join('-')}`) }))] }));
|
|
2421
|
+
};
|
|
2422
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$4.expandableItemContainer, style: { paddingLeft: `${level * 16}px` }, children: jsxRuntime.jsxs("div", { className: clsx(styles$4.itemWrapper, {
|
|
2423
|
+
[styles$4.selected]: isSelected && !hasChildren,
|
|
2424
|
+
[styles$4.disabled]: item.disabled,
|
|
2425
|
+
}), onClick: handleClick, onKeyDown: (e) => {
|
|
2426
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
2427
|
+
e.preventDefault();
|
|
2428
|
+
handleClick(e);
|
|
2429
|
+
}
|
|
2430
|
+
}, role: "button", tabIndex: item.disabled ? -1 : 0, "data-disabled": item.disabled || undefined, "data-selected": isSelected && !hasChildren ? 'true' : undefined, "data-testid": `select-item-${item.value}`, children: [variant === 'icon' && item.icon && (jsxRuntime.jsx("span", { className: styles$4.icon, children: item.icon })), jsxRuntime.jsxs("div", { className: styles$4.textContent, children: [jsxRuntime.jsx("div", { className: styles$4.title, children: item.text }), item.subTitle && jsxRuntime.jsx("div", { className: styles$4.subTitle, children: item.subTitle })] }), hasChildren && (jsxRuntime.jsx("span", { className: styles$4.chevron, children: isExpanded ? jsxRuntime.jsx(reactIcons.ChevronDown16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronRight16Regular, {}) }))] }) }), hasChildren && isExpanded && (jsxRuntime.jsx("div", { className: styles$4.childrenWrapper, children: item.children.map((child) => (jsxRuntime.jsx(ExpandableSelectItem, { item: child, variant: variant, onSelect: onSelect, selectedValues: selectedValues, level: level + 1 }, child.id || child.value))) }))] }));
|
|
2431
|
+
};
|
|
2432
|
+
|
|
2433
|
+
const SelectItem = React.forwardRef(({ text, subTitle, icon, disabled, value, variant, ...restProps }, ref) => {
|
|
2434
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$4.itemWrapper, {
|
|
2435
|
+
[styles$4.disabled]: disabled,
|
|
2436
|
+
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsxRuntime.jsx("span", { className: styles$4.icon, children: icon })), jsxRuntime.jsxs(radixUi.Select.Item, { className: clsx(styles$4.item, {
|
|
2437
|
+
[styles$4.disabled]: disabled,
|
|
2438
|
+
}), value: value, disabled: disabled, ...restProps, children: [jsxRuntime.jsx(radixUi.Select.ItemText, { className: styles$4.title, children: text }), subTitle && jsxRuntime.jsx("div", { className: styles$4.subTitle, children: subTitle }), jsxRuntime.jsx(radixUi.Select.ItemIndicator, { className: styles$4.itemIndicator })] })] }));
|
|
2982
2439
|
});
|
|
2983
|
-
|
|
2440
|
+
SelectItem.displayName = 'SelectItem';
|
|
2984
2441
|
|
|
2985
2442
|
const initialState = {
|
|
2986
2443
|
isOpen: false,
|
|
@@ -3006,16 +2463,15 @@ function selectReducer(state, action) {
|
|
|
3006
2463
|
return { ...state, hasError: action.payload };
|
|
3007
2464
|
case 'RESET_SEARCH':
|
|
3008
2465
|
return { ...state, searchInput: '', searchTerm: '' };
|
|
3009
|
-
case 'VALIDATE':
|
|
2466
|
+
case 'VALIDATE': {
|
|
3010
2467
|
const hasError = action.payload.required && state.selectedValues.length === 0;
|
|
3011
2468
|
return { ...state, hasError, touched: true };
|
|
2469
|
+
}
|
|
3012
2470
|
default:
|
|
3013
2471
|
return state;
|
|
3014
2472
|
}
|
|
3015
2473
|
}
|
|
3016
|
-
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange,
|
|
3017
|
-
// API search props
|
|
3018
|
-
enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
2474
|
+
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange, enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
3019
2475
|
const [state, dispatch] = React.useReducer(selectReducer, {
|
|
3020
2476
|
...initialState,
|
|
3021
2477
|
selectedValues: Array.isArray(value) ? value : value ? [value] : [],
|
|
@@ -3024,9 +2480,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3024
2480
|
const debounceTimeoutRef = React.useRef(null);
|
|
3025
2481
|
const hasInitialSearchRef = React.useRef(false);
|
|
3026
2482
|
const lastSearchTermRef = React.useRef('');
|
|
3027
|
-
// Função de debounce para busca em API
|
|
3028
2483
|
const debouncedApiSearch = React.useCallback((searchTerm) => {
|
|
3029
|
-
// Evita chamadas duplicadas com o mesmo termo
|
|
3030
2484
|
if (lastSearchTermRef.current === searchTerm) {
|
|
3031
2485
|
return;
|
|
3032
2486
|
}
|
|
@@ -3038,7 +2492,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3038
2492
|
if (enableApiSearch && onApiSearch) {
|
|
3039
2493
|
onApiSearch(searchTerm);
|
|
3040
2494
|
}
|
|
3041
|
-
}, 300);
|
|
2495
|
+
}, 300);
|
|
3042
2496
|
}, [enableApiSearch, onApiSearch]);
|
|
3043
2497
|
React.useEffect(() => {
|
|
3044
2498
|
const newValues = Array.isArray(value) ? value : value ? [value] : [];
|
|
@@ -3054,35 +2508,28 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3054
2508
|
React.useEffect(() => {
|
|
3055
2509
|
if (!state.isOpen) {
|
|
3056
2510
|
dispatch({ type: 'RESET_SEARCH' });
|
|
3057
|
-
// Reset flags quando fechar
|
|
3058
2511
|
hasInitialSearchRef.current = false;
|
|
3059
2512
|
lastSearchTermRef.current = '';
|
|
3060
2513
|
}
|
|
3061
2514
|
}, [state.isOpen]);
|
|
3062
|
-
// Efeito para busca inicial quando abrir o select com API search
|
|
3063
2515
|
React.useEffect(() => {
|
|
3064
2516
|
if (state.isOpen && enableApiSearch && !hasInitialSearchRef.current) {
|
|
3065
2517
|
hasInitialSearchRef.current = true;
|
|
3066
|
-
// Faz uma busca inicial vazia para carregar os itens (sem debounce para ser mais rápido)
|
|
3067
2518
|
if (onApiSearch) {
|
|
3068
2519
|
onApiSearch('');
|
|
3069
2520
|
lastSearchTermRef.current = '';
|
|
3070
2521
|
}
|
|
3071
2522
|
}
|
|
3072
2523
|
}, [state.isOpen, enableApiSearch, onApiSearch]);
|
|
3073
|
-
// Efeito para disparar busca via API somente quando searchTerm for definido (Enter pressionado)
|
|
3074
2524
|
React.useEffect(() => {
|
|
3075
2525
|
if (enableApiSearch && state.searchTerm && state.isOpen) {
|
|
3076
|
-
// Só dispara se for diferente do último termo pesquisado
|
|
3077
2526
|
if (lastSearchTermRef.current !== state.searchTerm) {
|
|
3078
2527
|
debouncedApiSearch(state.searchTerm);
|
|
3079
2528
|
}
|
|
3080
2529
|
}
|
|
3081
2530
|
}, [state.searchTerm, enableApiSearch, state.isOpen, debouncedApiSearch]);
|
|
3082
|
-
// Efeito para recarregar dados quando o campo de busca ficar vazio
|
|
3083
2531
|
React.useEffect(() => {
|
|
3084
2532
|
if (enableApiSearch && state.isOpen && state.searchInput === '' && state.searchTerm === '') {
|
|
3085
|
-
// Só recarrega se já teve alguma busca anterior
|
|
3086
2533
|
if (lastSearchTermRef.current !== '') {
|
|
3087
2534
|
lastSearchTermRef.current = '';
|
|
3088
2535
|
if (onApiSearch) {
|
|
@@ -3091,13 +2538,11 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3091
2538
|
}
|
|
3092
2539
|
}
|
|
3093
2540
|
}, [state.searchInput, state.searchTerm, enableApiSearch, state.isOpen, onApiSearch]);
|
|
3094
|
-
// Cleanup do timeout quando componente for desmontado
|
|
3095
2541
|
React.useEffect(() => {
|
|
3096
2542
|
return () => {
|
|
3097
2543
|
if (debounceTimeoutRef.current) {
|
|
3098
2544
|
clearTimeout(debounceTimeoutRef.current);
|
|
3099
2545
|
}
|
|
3100
|
-
// Limpar refs no cleanup
|
|
3101
2546
|
hasInitialSearchRef.current = false;
|
|
3102
2547
|
lastSearchTermRef.current = '';
|
|
3103
2548
|
};
|
|
@@ -3126,7 +2571,6 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3126
2571
|
};
|
|
3127
2572
|
const resetSearch = () => {
|
|
3128
2573
|
dispatch({ type: 'RESET_SEARCH' });
|
|
3129
|
-
// Reset da ref para permitir nova busca vazia
|
|
3130
2574
|
lastSearchTermRef.current = '';
|
|
3131
2575
|
};
|
|
3132
2576
|
const validate = () => {
|
|
@@ -3175,12 +2619,9 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3175
2619
|
selectedValues[0]);
|
|
3176
2620
|
};
|
|
3177
2621
|
const getFilteredItems = (items, searchTerm) => {
|
|
3178
|
-
// Se busca via API estiver ativa, não filtra localmente
|
|
3179
|
-
// Assume que a API já retornou os dados filtrados
|
|
3180
2622
|
if (enableApiSearch) {
|
|
3181
2623
|
return items;
|
|
3182
2624
|
}
|
|
3183
|
-
// Busca local (comportamento original)
|
|
3184
2625
|
if (!searchTerm)
|
|
3185
2626
|
return items;
|
|
3186
2627
|
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
|
@@ -3223,33 +2664,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3223
2664
|
};
|
|
3224
2665
|
}
|
|
3225
2666
|
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onChange, value, ...restProps }) => {
|
|
3229
|
-
const handleCheckboxChange = (e) => {
|
|
3230
|
-
e.stopPropagation();
|
|
3231
|
-
onChange(e.target.checked);
|
|
3232
|
-
};
|
|
3233
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$3.item, styles$3.checkboxItem, {
|
|
3234
|
-
[styles$3.disabled]: disabled,
|
|
3235
|
-
}), role: "option", "aria-selected": checked, "data-selected": checked, "data-testid": `checkbox-item-${value}`, ...restProps, children: jsxRuntime.jsx("div", { className: styles$3.checkboxContent, children: jsxRuntime.jsx(MemoizedCheckbox, { checked: checked, onChange: handleCheckboxChange, disabled: disabled, label: jsxRuntime.jsxs("div", { className: styles$3.textContent, children: [jsxRuntime.jsx("span", { className: styles$3.title, children: text }), subTitle && jsxRuntime.jsx("div", { className: styles$3.subTitle, children: subTitle })] }), onClick: (e) => e.stopPropagation() }) }) }));
|
|
3236
|
-
};
|
|
3237
|
-
CheckboxSelectItem.displayName = 'CheckboxSelectItem';
|
|
3238
|
-
|
|
3239
|
-
const SelectItem = React.forwardRef(({ text, subTitle, icon, disabled, value, variant, ...restProps }, ref) => {
|
|
3240
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$3.itemWrapper, {
|
|
3241
|
-
[styles$3.disabled]: disabled,
|
|
3242
|
-
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsxRuntime.jsx("span", { className: styles$3.icon, children: icon })), jsxRuntime.jsxs(radixUi.Select.Item, { className: clsx(styles$3.item, {
|
|
3243
|
-
[styles$3.disabled]: disabled,
|
|
3244
|
-
}), value: value, disabled: disabled, ...restProps, children: [jsxRuntime.jsx(radixUi.Select.ItemText, { className: styles$3.title, children: text }), subTitle && jsxRuntime.jsx("div", { className: styles$3.subTitle, children: subTitle }), jsxRuntime.jsx(radixUi.Select.ItemIndicator, { className: styles$3.itemIndicator })] })] }));
|
|
3245
|
-
});
|
|
3246
|
-
SelectItem.displayName = 'SelectItem';
|
|
3247
|
-
|
|
3248
|
-
const SelectRadix = ({ items, onValueChange, onOpenChange, variant, required = false, value, tooltip = false, tooltipMessage, label, helperText, placeholder = 'Selecione', maxWidth, search = false, errorMessage, disabled = false, className, 'aria-label': ariaLabel, 'data-testid': testId,
|
|
3249
|
-
// Props para scroll infinito
|
|
3250
|
-
enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false,
|
|
3251
|
-
// Props para busca em API
|
|
3252
|
-
enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
2667
|
+
const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, errorMessage, disabled = false, className, 'aria-label': ariaLabel, 'data-testid': testId, tooltip = false, tooltipText, side = 'bottom', align = 'start', enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false, enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
3253
2668
|
const componentId = React.useId();
|
|
3254
2669
|
const selectId = `select-${componentId}`;
|
|
3255
2670
|
const viewportRef = React.useRef(null);
|
|
@@ -3260,12 +2675,10 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3260
2675
|
search,
|
|
3261
2676
|
onValueChange,
|
|
3262
2677
|
onOpenChange,
|
|
3263
|
-
// API search props
|
|
3264
2678
|
enableApiSearch,
|
|
3265
2679
|
onApiSearch,
|
|
3266
2680
|
isSearching,
|
|
3267
2681
|
});
|
|
3268
|
-
// Infinite Scroll Logic
|
|
3269
2682
|
React.useEffect(() => {
|
|
3270
2683
|
const viewport = viewportRef.current;
|
|
3271
2684
|
if (!viewport || !enableInfiniteScroll)
|
|
@@ -3286,7 +2699,6 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3286
2699
|
viewport.removeEventListener('scroll', handleScroll);
|
|
3287
2700
|
};
|
|
3288
2701
|
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore]);
|
|
3289
|
-
// Reset a flag when the select opens
|
|
3290
2702
|
React.useEffect(() => {
|
|
3291
2703
|
if (state.isOpen && enableInfiniteScroll) {
|
|
3292
2704
|
hasReachedEndRef.current = false;
|
|
@@ -3294,21 +2706,27 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3294
2706
|
}, [state.isOpen, enableInfiniteScroll]);
|
|
3295
2707
|
const displayText = React.useMemo(() => utils.getDisplayText(state.selectedValues, placeholder, variant, items), [state.selectedValues, placeholder, variant, items, utils]);
|
|
3296
2708
|
const filteredItems = React.useMemo(() => {
|
|
3297
|
-
// Para busca via API, usa searchTerm (só atualiza quando Enter é pressionado)
|
|
3298
|
-
// Para busca local, usa searchInput (atualiza a cada tecla para filtro em tempo real)
|
|
3299
2709
|
const termToFilter = enableApiSearch ? state.searchTerm : state.searchInput;
|
|
3300
2710
|
return utils.getFilteredItems(items, termToFilter);
|
|
3301
2711
|
}, [items, state.searchTerm, state.searchInput, enableApiSearch, utils]);
|
|
3302
2712
|
const containerStyle = React.useMemo(() => ({
|
|
3303
|
-
maxWidth:
|
|
2713
|
+
maxWidth: maxWidth ? `${maxWidth}px` : undefined,
|
|
3304
2714
|
}), [maxWidth]);
|
|
3305
2715
|
const handleSearchChange = (e) => {
|
|
3306
2716
|
actions.setSearchInput(e.target.value);
|
|
3307
2717
|
};
|
|
3308
2718
|
const handleSearchKeyDown = (e) => {
|
|
3309
|
-
e.
|
|
2719
|
+
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
|
2720
|
+
const input = e.currentTarget;
|
|
2721
|
+
const hasSelection = input.selectionStart !== input.selectionEnd;
|
|
2722
|
+
if (!hasSelection) {
|
|
2723
|
+
e.preventDefault();
|
|
2724
|
+
return;
|
|
2725
|
+
}
|
|
2726
|
+
}
|
|
3310
2727
|
if (e.key === 'Enter') {
|
|
3311
2728
|
e.preventDefault();
|
|
2729
|
+
e.stopPropagation();
|
|
3312
2730
|
actions.setSearchTerm(state.searchInput);
|
|
3313
2731
|
}
|
|
3314
2732
|
if (e.key === 'Escape') {
|
|
@@ -3323,18 +2741,32 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3323
2741
|
onApiSearch('');
|
|
3324
2742
|
}
|
|
3325
2743
|
};
|
|
3326
|
-
return (jsxRuntime.jsx(radixUi.Select.Root, { value: variant === 'checkbox' ? '' : (state.selectedValues[0] || ''), onValueChange: variant === 'checkbox' ? undefined : actions.handleSingleSelect, required: required, open: state.isOpen, onOpenChange: actions.setOpen, disabled: disabled, ...restProps, children: jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
3327
|
-
[styles$
|
|
3328
|
-
[styles$
|
|
3329
|
-
[styles$
|
|
3330
|
-
[styles$
|
|
3331
|
-
}), id: selectId, "aria-label": ariaLabel, "data-testid": `${testId}-trigger`, children: [variant === 'checkbox' ? (jsxRuntime.jsx("span", { className: styles$
|
|
3332
|
-
[styles$
|
|
3333
|
-
}), children: helperText })), state.hasError && state.touched && (jsxRuntime.jsx("span", { className: styles$
|
|
2744
|
+
return (jsxRuntime.jsx(radixUi.Select.Root, { value: variant === 'checkbox' ? '' : (state.selectedValues[0] || ''), onValueChange: variant === 'checkbox' ? undefined : actions.handleSingleSelect, required: required, open: state.isOpen, onOpenChange: actions.setOpen, disabled: disabled, ...restProps, children: jsxRuntime.jsxs("div", { className: clsx(styles$4.container, className), style: containerStyle, "data-testid": testId, children: [jsxRuntime.jsx("div", { className: styles$4.fieldContainer, children: jsxRuntime.jsxs("div", { className: styles$4.containerLabel, children: [jsxRuntime.jsx(LabelComponent, { htmlFor: selectId, required: required, tooltipText: tooltipText, tooltip: tooltip, side: side, align: align, error: state.hasError && state.touched, disabled: disabled, children: label }), jsxRuntime.jsxs(radixUi.Select.Trigger, { className: clsx(styles$4.trigger, {
|
|
2745
|
+
[styles$4.error]: state.hasError && state.touched,
|
|
2746
|
+
[styles$4.disabled]: disabled,
|
|
2747
|
+
[styles$4.hasValue]: state.selectedValues.length > 0,
|
|
2748
|
+
[styles$4.open]: state.isOpen,
|
|
2749
|
+
}), id: selectId, "aria-label": ariaLabel, "data-testid": `${testId}-trigger`, children: [variant === 'checkbox' ? (jsxRuntime.jsx("span", { className: styles$4.triggerText, children: displayText })) : (jsxRuntime.jsx(radixUi.Select.Value, { placeholder: placeholder, className: styles$4.placeholder, children: displayText })), state.isOpen ? jsxRuntime.jsx(reactIcons.ChevronUp16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronDown16Regular, {})] }), !state.isOpen && helperText && !state.hasError && (jsxRuntime.jsx("span", { className: clsx(styles$4.helper, {
|
|
2750
|
+
[styles$4.disabled]: disabled
|
|
2751
|
+
}), children: helperText })), state.hasError && state.touched && (jsxRuntime.jsx("span", { className: styles$4.errorMessage, children: errorMessage || 'Campo obrigatório' }))] }) }), jsxRuntime.jsx(radixUi.Select.Portal, { children: jsxRuntime.jsxs(radixUi.Select.Content, { className: styles$4.content, position: "popper", side: "bottom", sideOffset: 8, align: "start", avoidCollisions: true, children: [search && (jsxRuntime.jsx("div", { className: styles$4.searchWrapper, children: jsxRuntime.jsx(Search, { ref: refs.searchInputRef, className: styles$4.search, placeholder: "Buscar", value: state.searchInput, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: handleClear, "data-testid": `${testId}-search` }) })), jsxRuntime.jsx(radixUi.Select.Viewport, { ref: viewportRef, className: styles$4.viewport, children: jsxRuntime.jsx(radixUi.Select.Group, { className: styles$4.group, children: filteredItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$4.noResults, children: "Nenhum resultado encontrado" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [filteredItems.map((item) => {
|
|
2752
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
2753
|
+
if (hasChildren) {
|
|
2754
|
+
return (jsxRuntime.jsx(ExpandableSelectItem, { item: item, variant: variant, selectedValues: state.selectedValues, onSelect: (value) => {
|
|
2755
|
+
if (variant === 'checkbox') {
|
|
2756
|
+
const isSelected = state.selectedValues.includes(value);
|
|
2757
|
+
actions.handleMultipleSelect(value, !isSelected);
|
|
2758
|
+
}
|
|
2759
|
+
else {
|
|
2760
|
+
actions.handleSingleSelect(value);
|
|
2761
|
+
}
|
|
2762
|
+
} }, item.id || item.value));
|
|
2763
|
+
}
|
|
2764
|
+
return variant === 'checkbox' ? (jsxRuntime.jsx(CheckboxSelectItem, { ...item, checked: state.selectedValues.includes(item.value), onCheckedChange: (checked) => actions.handleMultipleSelect(item.value, checked) }, item.id || item.value)) : (jsxRuntime.jsx(SelectItem, { ...item, variant: variant }, item.id || item.value));
|
|
2765
|
+
}), enableInfiniteScroll && isLoadingMore && (jsxRuntime.jsx("div", { className: styles$4.loadingMore, children: "Carregando mais itens..." }))] })) }) })] }) })] }) }));
|
|
3334
2766
|
};
|
|
3335
|
-
|
|
2767
|
+
Select.displayName = 'Select';
|
|
3336
2768
|
|
|
3337
|
-
var styles$
|
|
2769
|
+
var styles$3 = {"zds-table__container":"Table-module__zds-table__container___9xeVY","zds-table-header":"Table-module__zds-table-header___uPRjd","zds-table__scroll-wrapper":"Table-module__zds-table__scroll-wrapper___xQZPq","zds-table":"Table-module__zds-table___bPvaS","zds-table__head":"Table-module__zds-table__head___FvQuS","zds-table__th":"Table-module__zds-table__th___R03sj","zds-table__th-content":"Table-module__zds-table__th-content___duR3c","zds-table__td":"Table-module__zds-table__td___aY-Nt","zds-table-header__filters-placeholder":"Table-module__zds-table-header__filters-placeholder___GhVwi","zds-table__body":"Table-module__zds-table__body___kuKXb","zds-table__empty":"Table-module__zds-table__empty___ZM4iu","zds-table__empty__content":"Table-module__zds-table__empty__content___8xl-u","zds-table__empty__title":"Table-module__zds-table__empty__title___7Y9Pj","zds-table__empty__caption":"Table-module__zds-table__empty__caption___toS00","zds-table__row":"Table-module__zds-table__row___8cEjq","zds-table__empty-cell":"Table-module__zds-table__empty-cell___Ldb6Z","zds-table-header__search":"Table-module__zds-table-header__search___yzLxw","zds-table__pagination":"Table-module__zds-table__pagination___FR5GH","zds-table-header__search-container":"Table-module__zds-table-header__search-container___-Fzz1","zds-table-header__filters":"Table-module__zds-table-header__filters___ViH07","zds-table-header__filter-label":"Table-module__zds-table-header__filter-label___c3BWI","zds-table-header__custom-filters":"Table-module__zds-table-header__custom-filters___oTuoM","zds-table-header__filters-content":"Table-module__zds-table-header__filters-content___nKlgL","zds-table-header__filters-wrapper":"Table-module__zds-table-header__filters-wrapper___BrZ9A","zds-table-header__filter-items":"Table-module__zds-table-header__filter-items___Tn8Yv","zds-table__pagination-select":"Table-module__zds-table__pagination-select___TZK-y","zds-table__pagination-info":"Table-module__zds-table__pagination-info___3k-B2","zds-table__pagination-controls":"Table-module__zds-table__pagination-controls___S-zs7","zds-table__pagination-button":"Table-module__zds-table__pagination-button___Wvq9W"};
|
|
3338
2770
|
|
|
3339
2771
|
/**
|
|
3340
2772
|
* @module constants
|
|
@@ -6772,10 +6204,10 @@ const Table = ({ columns = [], dataSource = [], className, loading = false, rowS
|
|
|
6772
6204
|
return columns;
|
|
6773
6205
|
const checkboxColumn = {
|
|
6774
6206
|
key: '__checkbox__',
|
|
6775
|
-
label: (jsxRuntime.jsx(
|
|
6207
|
+
label: (jsxRuntime.jsx(Checkbox, { checked: isAllSelected || isIndeterminate, indeterminate: isIndeterminate, onCheckedChange: toggleAll, disabled: rowSelection.disableSelectAll })),
|
|
6776
6208
|
render: (_, index) => {
|
|
6777
6209
|
const props = rowSelection.getCheckboxProps?.(dataSource[index], index) || {};
|
|
6778
|
-
return (jsxRuntime.jsx(
|
|
6210
|
+
return (jsxRuntime.jsx(Checkbox, { checked: selectedSet.has(index), onCheckedChange: () => toggleRow(index), disabled: props.disabled }));
|
|
6779
6211
|
},
|
|
6780
6212
|
align: 'center',
|
|
6781
6213
|
};
|
|
@@ -6783,13 +6215,13 @@ const Table = ({ columns = [], dataSource = [], className, loading = false, rowS
|
|
|
6783
6215
|
}, [columns, rowSelection, isAllSelected, isIndeterminate, toggleAll, selectedSet, toggleRow, dataSource]);
|
|
6784
6216
|
const tableId = React.useMemo(() => `table-${Math.random().toString(36).substr(2, 9)}`, []);
|
|
6785
6217
|
if (loading) {
|
|
6786
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$
|
|
6218
|
+
return (jsxRuntime.jsx("div", { className: clsx(styles$3['zds-table__container'], className), children: jsxRuntime.jsx("div", { className: styles$3['zds-table__loader'], children: jsxRuntime.jsx(LoaderList, {}) }) }));
|
|
6787
6219
|
}
|
|
6788
|
-
const emptyText = locale.emptyText || (jsxRuntime.jsxs("div", { className: styles$
|
|
6789
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$
|
|
6220
|
+
const emptyText = locale.emptyText || (jsxRuntime.jsxs("div", { className: styles$3['zds-table__empty'], children: [jsxRuntime.jsx("div", { className: styles$3['zds-table__empty__content'], children: jsxRuntime.jsx(EmptyRows150Color, {}) }), jsxRuntime.jsxs("div", { className: styles$3['zds-table__empty__text'], children: [jsxRuntime.jsx("h3", { className: styles$3['zds-table__empty__title'], children: "Nenhum dado encontrado" }), jsxRuntime.jsx("p", { className: styles$3['zds-table__empty__caption'], children: "Nenhum registro encontrado" })] })] }));
|
|
6221
|
+
return (jsxRuntime.jsx("div", { className: clsx(styles$3['zds-table__container'], className), children: jsxRuntime.jsx("div", { className: styles$3['zds-table__scroll-wrapper'], children: jsxRuntime.jsxs("table", { className: styles$3['zds-table'], role: "table", "aria-label": "Tabela de dados", "aria-describedby": loading ? `${tableId}-loading` : undefined, "aria-rowcount": dataSource.length + 1, children: [jsxRuntime.jsx("thead", { className: styles$3['zds-table__head'], children: jsxRuntime.jsx("tr", { children: finalColumns.map((column) => (jsxRuntime.jsx("th", { className: clsx(styles$3['zds-table__th'], column.align && `text-${column.align}`), style: column.style, children: jsxRuntime.jsx("div", { className: styles$3['zds-table__th-content'], children: column.label }) }, column.key))) }) }), jsxRuntime.jsx("tbody", { className: styles$3['zds-table__body'], children: dataSource.length > 0 ? (dataSource.map((row, index) => {
|
|
6790
6222
|
const rowProps = onRow?.(row, index) || {};
|
|
6791
|
-
return (jsxRuntime.jsx("tr", { className: clsx(styles$
|
|
6792
|
-
})) : (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: finalColumns.length, className: styles$
|
|
6223
|
+
return (jsxRuntime.jsx("tr", { className: clsx(styles$3['zds-table__row'], rowProps.className), onClick: rowProps.onClick, onDoubleClick: rowProps.onDoubleClick, children: finalColumns.map((column) => (jsxRuntime.jsx("td", { className: clsx(styles$3['zds-table__td'], column.align && `text-${column.align}`), children: renderCell(column, row, index) }, column.key))) }, index));
|
|
6224
|
+
})) : (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: finalColumns.length, className: styles$3['zds-table__empty-cell'], children: emptyText }) })) })] }) }) }));
|
|
6793
6225
|
};
|
|
6794
6226
|
|
|
6795
6227
|
const isCalendarFilter = (filter) => {
|
|
@@ -6822,7 +6254,7 @@ const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceho
|
|
|
6822
6254
|
}
|
|
6823
6255
|
};
|
|
6824
6256
|
const hasFilters = filters || (filterItems && filterItems.length > 0);
|
|
6825
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
6257
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$3['zds-table-header']} ${className}`.trim(), children: [showSearch && (onSearchChange || onSearch) && (jsxRuntime.jsx("div", { className: styles$3['zds-table-header__search-container'], children: jsxRuntime.jsx(Search, { value: internalSearchValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: styles$3['zds-table-header__search'] }) })), showFilters && (jsxRuntime.jsx("div", { className: styles$3['zds-table-header__filters'], children: hasFilters ? (jsxRuntime.jsxs("div", { className: styles$3['zds-table-header__filters-content'], children: [filters && (jsxRuntime.jsx("div", { className: styles$3['zds-table-header__custom-filters'], children: filters })), jsxRuntime.jsxs("div", { className: styles$3['zds-table-header__filters-wrapper'], children: [jsxRuntime.jsx("span", { className: styles$3['zds-table-header__filter-label'], children: "Filtros" }), jsxRuntime.jsx("div", { className: styles$3['zds-table-header__filter-items'], children: filterItems && filterItems.map((filterItem, index) => {
|
|
6826
6258
|
const commonProps = {
|
|
6827
6259
|
key: filterItem.id || index,
|
|
6828
6260
|
buttonText: filterItem.buttonText,
|
|
@@ -6841,7 +6273,7 @@ const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceho
|
|
|
6841
6273
|
}
|
|
6842
6274
|
console.warn('TableHeader: Tipo de filtro não reconhecido:', filterItem);
|
|
6843
6275
|
return null;
|
|
6844
|
-
}) })] })] })) : (jsxRuntime.jsx("div", { className: styles$
|
|
6276
|
+
}) })] })] })) : (jsxRuntime.jsx("div", { className: styles$3['zds-table-header__filters-placeholder'], children: jsxRuntime.jsx("span", { children: "Nenhum filtro dispon\u00EDvel" }) })) }))] }));
|
|
6845
6277
|
};
|
|
6846
6278
|
|
|
6847
6279
|
const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange, onItemsPerPageChange, pageSizeOptions = [10, 25, 50, 100], disabled = false, className = '', }) => {
|
|
@@ -6867,12 +6299,12 @@ const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange,
|
|
|
6867
6299
|
const newItemsPerPage = Number(event.target.value);
|
|
6868
6300
|
onItemsPerPageChange(newItemsPerPage);
|
|
6869
6301
|
};
|
|
6870
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
6302
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$3['zds-table__pagination']} ${className}`.trim(), children: [jsxRuntime.jsxs("div", { className: styles$3['zds-table__pagination-select'], children: [jsxRuntime.jsx("label", { htmlFor: "items-per-page", className: styles$3['zds-table__pagination-label'], children: "Itens por p\u00E1gina" }), jsxRuntime.jsx("select", { id: "items-per-page", value: itemsPerPage, onChange: handleItemsPerPageChange, disabled: disabled, className: styles$3['zds-table__pagination-select-input'], children: pageSizeOptions.map((option) => (jsxRuntime.jsx("option", { value: option, children: option }, option))) })] }), jsxRuntime.jsx("div", { className: styles$3['zds-table__pagination-info'], children: jsxRuntime.jsx("span", { children: totalItems > 0
|
|
6871
6303
|
? `${startItem}–${endItem} de ${totalItems}`
|
|
6872
|
-
: '0 itens' }) }), jsxRuntime.jsxs("div", { className: styles$
|
|
6304
|
+
: '0 itens' }) }), jsxRuntime.jsxs("div", { className: styles$3['zds-table__pagination-controls'], children: [jsxRuntime.jsx("button", { className: styles$3['zds-table__pagination-button'], onClick: handlePrevious, disabled: !canGoPrev, "aria-label": "P\u00E1gina anterior", children: jsxRuntime.jsx(reactIcons.ChevronLeft16Regular, {}) }), jsxRuntime.jsx("button", { className: styles$3['zds-table__pagination-button'], onClick: handleNext, disabled: !canGoNext, "aria-label": "Pr\u00F3xima p\u00E1gina", children: jsxRuntime.jsx(reactIcons.ChevronRight16Regular, {}) })] })] }));
|
|
6873
6305
|
};
|
|
6874
6306
|
|
|
6875
|
-
var styles$
|
|
6307
|
+
var styles$2 = {"zds-toast__container":"Toast-module__zds-toast__container___IE2Z4","zds-toast__item":"Toast-module__zds-toast__item___ysYjL","zds-toast__message":"Toast-module__zds-toast__message___BMJL7","zds-toast__icon":"Toast-module__zds-toast__icon___JCwTV","zds-toast__close":"Toast-module__zds-toast__close___nfxSB","zds-toast__active":"Toast-module__zds-toast__active___IraTZ","zds-toast__success":"Toast-module__zds-toast__success___8z2qq","zds-toast__alert":"Toast-module__zds-toast__alert___TM-W8","zds-toast__info":"Toast-module__zds-toast__info___T3dcI"};
|
|
6876
6308
|
|
|
6877
6309
|
const sanitizeMessage = (message) => {
|
|
6878
6310
|
if (typeof message !== 'string')
|
|
@@ -6894,15 +6326,15 @@ const ToastContext = React.createContext(undefined);
|
|
|
6894
6326
|
const toastVariants = {
|
|
6895
6327
|
success: {
|
|
6896
6328
|
icon: jsxRuntime.jsx(reactIcons.CheckmarkCircle20Filled, {}),
|
|
6897
|
-
className: styles$
|
|
6329
|
+
className: styles$2['zds-toast__success'],
|
|
6898
6330
|
},
|
|
6899
6331
|
alert: {
|
|
6900
6332
|
icon: jsxRuntime.jsx(reactIcons.Warning20Filled, {}),
|
|
6901
|
-
className: styles$
|
|
6333
|
+
className: styles$2['zds-toast__alert'],
|
|
6902
6334
|
},
|
|
6903
6335
|
info: {
|
|
6904
6336
|
icon: jsxRuntime.jsx(reactIcons.Info20Filled, {}),
|
|
6905
|
-
className: styles$
|
|
6337
|
+
className: styles$2['zds-toast__info'],
|
|
6906
6338
|
},
|
|
6907
6339
|
};
|
|
6908
6340
|
const ToastItem = ({ toast, onClose, isVisible }) => {
|
|
@@ -6912,12 +6344,12 @@ const ToastItem = ({ toast, onClose, isVisible }) => {
|
|
|
6912
6344
|
onClose(toast.id);
|
|
6913
6345
|
}
|
|
6914
6346
|
};
|
|
6915
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
6347
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$2['zds-toast__item'], variant.className, isVisible && styles$2['zds-toast__active']), role: toast.type === 'alert' ? 'alert' : 'status', "aria-live": toast.type === 'alert' ? 'assertive' : 'polite', "aria-atomic": "true", tabIndex: toast.persistent ? 0 : -1, onKeyDown: handleKeyDown, children: [jsxRuntime.jsx("span", { className: styles$2['zds-toast__icon'], "aria-hidden": "true", children: variant.icon }), jsxRuntime.jsx("span", { className: styles$2['zds-toast__message'], dangerouslySetInnerHTML: { __html: sanitizeMessage(toast.message) } }), jsxRuntime.jsx("button", { type: "button", className: styles$2['zds-toast__close'], "aria-label": `Fechar notificação: ${toast.message.slice(0, 50)}${toast.message.length > 50 ? '...' : ''}`, onClick: () => onClose(toast.id), children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, { "aria-hidden": "true" }) })] }));
|
|
6916
6348
|
};
|
|
6917
6349
|
const ToastContainer = ({ toasts, onClose, visibleToasts }) => {
|
|
6918
6350
|
if (toasts.length === 0)
|
|
6919
6351
|
return null;
|
|
6920
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
6352
|
+
return (jsxRuntime.jsx("div", { className: styles$2['zds-toast__container'], role: "log", "aria-label": "Notifica\u00E7\u00F5es do sistema", children: toasts.map(toast => (jsxRuntime.jsx(ToastItem, { toast: toast, onClose: onClose, isVisible: visibleToasts.has(toast.id) }, toast.id))) }));
|
|
6921
6353
|
};
|
|
6922
6354
|
const ToastProvider = ({ children, maxToasts = MAX_TOASTS }) => {
|
|
6923
6355
|
const [toasts, setToasts] = React.useState([]);
|
|
@@ -7005,6 +6437,10 @@ const useToast = () => {
|
|
|
7005
6437
|
return context;
|
|
7006
6438
|
};
|
|
7007
6439
|
|
|
6440
|
+
var styles$1 = {"container":"Switch-module__container___BR1OB","switchRoot":"Switch-module__switchRoot___jz2HD","switchThumb":"Switch-module__switchThumb___X3RL7"};
|
|
6441
|
+
|
|
6442
|
+
const Switch = ({ disabled = false, defaultChecked = false, checked, onCheckedChange, name, value }) => (jsxRuntime.jsx("div", { className: clsx(styles$1.container), children: jsxRuntime.jsx(radixUi.Switch.Root, { className: styles$1.switchRoot, disabled: disabled, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, name: name, value: value, children: jsxRuntime.jsx(radixUi.Switch.Thumb, { className: styles$1.switchThumb }) }) }));
|
|
6443
|
+
|
|
7008
6444
|
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"};
|
|
7009
6445
|
|
|
7010
6446
|
/**
|
|
@@ -7325,8 +6761,7 @@ exports.Badge = Badge;
|
|
|
7325
6761
|
exports.Button = Button;
|
|
7326
6762
|
exports.Calendar = MemoizedCalendar;
|
|
7327
6763
|
exports.Callout = Callout;
|
|
7328
|
-
exports.Checkbox =
|
|
7329
|
-
exports.CheckboxRadix = CheckboxRadix;
|
|
6764
|
+
exports.Checkbox = Checkbox;
|
|
7330
6765
|
exports.Chips = MemoizedChips;
|
|
7331
6766
|
exports.Container = Container;
|
|
7332
6767
|
exports.DatePicker = DatePicker_default;
|
|
@@ -7336,14 +6771,11 @@ exports.Dropdown = MemoizedDropdown;
|
|
|
7336
6771
|
exports.Filter = Filter;
|
|
7337
6772
|
exports.ListItem = ListItem;
|
|
7338
6773
|
exports.Menu = Menu;
|
|
7339
|
-
exports.MenuRadix = MenuRadix;
|
|
7340
6774
|
exports.Quantity = memorizedQuantity;
|
|
7341
|
-
exports.Radio =
|
|
7342
|
-
exports.RadioRadix = RadioRadix;
|
|
6775
|
+
exports.Radio = Radio;
|
|
7343
6776
|
exports.Search = Search;
|
|
7344
6777
|
exports.Select = Select;
|
|
7345
|
-
exports.
|
|
7346
|
-
exports.SelectRadix = SelectRadix;
|
|
6778
|
+
exports.Switch = Switch;
|
|
7347
6779
|
exports.Table = Table;
|
|
7348
6780
|
exports.TableHeader = TableHeader;
|
|
7349
6781
|
exports.TablePagination = TablePagination;
|