@giro-ds/react 2.0.0 → 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/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/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.types.d.ts +2 -2
- 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/index.d.ts +2 -8
- package/dist/index.cjs +232 -682
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +62 -192
- package/dist/index.esm.js +235 -682
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +3 -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/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 -114
- package/dist/components/SelectRadix/index.d.ts +0 -5
package/dist/index.cjs
CHANGED
|
@@ -8,18 +8,18 @@ var reactI18next = require('react-i18next');
|
|
|
8
8
|
var i18n = require('i18next');
|
|
9
9
|
var radixUi = require('radix-ui');
|
|
10
10
|
|
|
11
|
-
var styles$
|
|
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"};
|
|
12
12
|
|
|
13
13
|
let Avatar = ({ id = '', icon, size = 'small', className = '' }) => {
|
|
14
14
|
const componentId = id || React.useId();
|
|
15
|
-
const AvatarClass = clsx(styles$
|
|
16
|
-
[styles$
|
|
17
|
-
[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',
|
|
18
18
|
}, className);
|
|
19
|
-
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 }) }));
|
|
20
20
|
};
|
|
21
21
|
|
|
22
|
-
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"};
|
|
23
23
|
|
|
24
24
|
const Badge = ({ children, badgeValue = null, type = 'notification', className = '', id, 'aria-label': ariaLabel, }) => {
|
|
25
25
|
const isEmpty = badgeValue === null || badgeValue === undefined || badgeValue === '';
|
|
@@ -42,20 +42,21 @@ const Badge = ({ children, badgeValue = null, type = 'notification', className =
|
|
|
42
42
|
};
|
|
43
43
|
const displayValue = getDisplayValue(badgeValue);
|
|
44
44
|
if (type === 'notification') {
|
|
45
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
46
|
-
[styles$
|
|
47
|
-
[styles$
|
|
48
|
-
}, 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 }))] }));
|
|
49
49
|
}
|
|
50
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$
|
|
51
|
-
[styles$
|
|
52
|
-
}, 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 })) }) }));
|
|
53
53
|
};
|
|
54
54
|
|
|
55
|
-
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"};
|
|
56
56
|
|
|
57
|
-
const Button = React.forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel,
|
|
58
|
-
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;
|
|
59
60
|
const getComponent = () => {
|
|
60
61
|
if (as)
|
|
61
62
|
return as;
|
|
@@ -69,21 +70,18 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
69
70
|
const hasContent = React.useMemo(() => {
|
|
70
71
|
return children && React.Children.count(children) > 0;
|
|
71
72
|
}, [children]);
|
|
72
|
-
const buttonClasses = clsx(styles$
|
|
73
|
-
[styles$
|
|
74
|
-
[styles$
|
|
75
|
-
[styles$
|
|
76
|
-
[styles$
|
|
77
|
-
[styles$
|
|
78
|
-
[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,
|
|
79
80
|
}, className);
|
|
80
81
|
const getAriaLabel = () => {
|
|
81
82
|
if (ariaLabel)
|
|
82
83
|
return ariaLabel;
|
|
83
84
|
if (iconOnly && !ariaLabel) {
|
|
84
|
-
if (process.env.NODE_ENV === 'development') {
|
|
85
|
-
console.warn('Button: Icon-only buttons should have an ariaLabel for accessibility');
|
|
86
|
-
}
|
|
87
85
|
return 'Botão de ação';
|
|
88
86
|
}
|
|
89
87
|
if (typeof children === 'string')
|
|
@@ -98,10 +96,13 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
98
96
|
onClick?.(e);
|
|
99
97
|
};
|
|
100
98
|
const renderContent = () => {
|
|
101
|
-
if (iconOnly &&
|
|
102
|
-
return (jsxRuntime.jsx("span", { className: styles$
|
|
99
|
+
if (iconOnly && !loading) {
|
|
100
|
+
return (jsxRuntime.jsx("span", { className: styles$n.buttonIconOnly, "aria-hidden": "true", children: icon }));
|
|
103
101
|
}
|
|
104
|
-
|
|
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 }))] }));
|
|
105
106
|
};
|
|
106
107
|
const baseProps = {
|
|
107
108
|
ref,
|
|
@@ -125,7 +126,6 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
125
126
|
if (Component !== 'a') {
|
|
126
127
|
return {
|
|
127
128
|
to: disabled ? '#' : to,
|
|
128
|
-
...routerProps,
|
|
129
129
|
};
|
|
130
130
|
}
|
|
131
131
|
return {
|
|
@@ -144,7 +144,7 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
144
144
|
});
|
|
145
145
|
Button.displayName = 'Button';
|
|
146
146
|
|
|
147
|
-
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"};
|
|
148
148
|
|
|
149
149
|
// i18n.ts
|
|
150
150
|
// Resources configuration
|
|
@@ -504,8 +504,8 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
504
504
|
* Renderiza os anos usando o array de objetos memoizado.
|
|
505
505
|
*/
|
|
506
506
|
const renderYears = React.useCallback(() => {
|
|
507
|
-
return yearsArray.map((item) => (jsxRuntime.jsx("div", { className: clsx(styles$
|
|
508
|
-
[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,
|
|
509
509
|
}), onClick: () => handleYearSelect(item.year), tabIndex: 0, role: "button", "aria-pressed": item.isCurrent, "aria-label": item.isCurrent
|
|
510
510
|
? locale === 'en-us'
|
|
511
511
|
? `Current year, ${item.year}`
|
|
@@ -525,14 +525,14 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
525
525
|
const renderDays = React.useCallback(() => {
|
|
526
526
|
return daysArray.map((item) => {
|
|
527
527
|
if (item.type === 'empty') {
|
|
528
|
-
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));
|
|
529
529
|
}
|
|
530
530
|
const dayItem = item;
|
|
531
531
|
const isDisabled = !isDateInRange(dayItem.date);
|
|
532
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$
|
|
533
|
-
[styles$
|
|
534
|
-
[styles$
|
|
535
|
-
[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,
|
|
536
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));
|
|
537
537
|
});
|
|
538
538
|
}, [
|
|
@@ -548,7 +548,7 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
548
548
|
const weekdaysComponent = React.useMemo(() => {
|
|
549
549
|
if (changeView)
|
|
550
550
|
return null;
|
|
551
|
-
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}`)));
|
|
552
552
|
}, [changeView, weekDaysLabels]);
|
|
553
553
|
// ✅ Limpa o anúncio após um tempo para evitar repetições
|
|
554
554
|
React.useEffect(() => {
|
|
@@ -563,13 +563,13 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
563
563
|
setYearRangeStart(year - 13);
|
|
564
564
|
}
|
|
565
565
|
}, [changeView, year]);
|
|
566
|
-
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: {
|
|
567
567
|
position: 'absolute',
|
|
568
568
|
width: 1,
|
|
569
569
|
height: 1,
|
|
570
570
|
overflow: 'hidden',
|
|
571
571
|
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
572
|
-
}, 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) => {
|
|
573
573
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
574
574
|
e.preventDefault();
|
|
575
575
|
handleToggleView();
|
|
@@ -580,7 +580,7 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
580
580
|
: 'Fechar seleção de ano'
|
|
581
581
|
: locale === 'en-us'
|
|
582
582
|
? 'Open year selection'
|
|
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$
|
|
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
|
|
584
584
|
? locale === 'en-us'
|
|
585
585
|
? 'Show previous years'
|
|
586
586
|
: 'Mostrar anos anteriores'
|
|
@@ -592,27 +592,27 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
592
592
|
: 'Mostrar próximos anos'
|
|
593
593
|
: locale === 'en-us'
|
|
594
594
|
? `Next month, ${new Date(year, month + 1, 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}`
|
|
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$
|
|
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" }) })] }));
|
|
596
596
|
};
|
|
597
597
|
// ✅ Default props integrados na função usando valores padrão dos parâmetros
|
|
598
598
|
Calendar.displayName = 'Calendar';
|
|
599
599
|
const MemoizedCalendar = React.memo(Calendar);
|
|
600
600
|
MemoizedCalendar.displayName = 'Calendar';
|
|
601
601
|
|
|
602
|
-
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"};
|
|
603
603
|
|
|
604
604
|
const Callout = ({ type = 'neutral', title = null, text = '', icon = null, className = '', id = '' }) => {
|
|
605
605
|
const generatedId = React.useId();
|
|
606
606
|
const titleId = id || `callout-title-${generatedId}`;
|
|
607
607
|
const componentId = id || generatedId;
|
|
608
|
-
const calloutClass = clsx(styles$
|
|
609
|
-
[styles$
|
|
610
|
-
[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,
|
|
611
611
|
}, className);
|
|
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$
|
|
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 })] })] }) }));
|
|
613
613
|
};
|
|
614
614
|
|
|
615
|
-
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"};
|
|
616
616
|
|
|
617
617
|
const CheckSmall = ({ className = '', width = 12, height = 10, fill = 'white', ...restProps }) => {
|
|
618
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 }) }));
|
|
@@ -624,12 +624,12 @@ const CheckHalf = ({ className = '', width = 16, height = 16, fill = 'white', ..
|
|
|
624
624
|
|
|
625
625
|
const Checkbox = ({ id, label = '', onCheckedChange, checked, disabled, className, indeterminate = false, ...rest }) => {
|
|
626
626
|
const componentId = id || React.useId();
|
|
627
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
628
|
-
[styles$
|
|
629
|
-
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsxRuntime.jsx(radixUi.Checkbox.Root, { className: styles$
|
|
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 })] }));
|
|
630
630
|
};
|
|
631
631
|
|
|
632
|
-
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"};
|
|
633
633
|
|
|
634
634
|
/**
|
|
635
635
|
* Componente Chips para exibir tags/etiquetas com ícones opcionais
|
|
@@ -639,33 +639,33 @@ const Chips = ({ title, leftIcon = null, rightIcon = null, type = 'neutral', dis
|
|
|
639
639
|
console.warn('Chips: title prop is required and cannot be empty');
|
|
640
640
|
return null;
|
|
641
641
|
}
|
|
642
|
-
const chipsClass = clsx(styles$
|
|
643
|
-
[styles$
|
|
644
|
-
[styles$
|
|
645
|
-
[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,
|
|
646
646
|
}, className);
|
|
647
|
-
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 }))] }));
|
|
648
648
|
};
|
|
649
649
|
const MemoizedChips = React.memo(Chips);
|
|
650
650
|
MemoizedChips.displayName = 'Chips';
|
|
651
651
|
|
|
652
|
-
var styles$
|
|
652
|
+
var styles$i = {"container":"Container-module__container___exPuE"};
|
|
653
653
|
|
|
654
654
|
function Container({ children }) {
|
|
655
|
-
return (jsxRuntime.jsx("main", { className: `${styles$
|
|
655
|
+
return (jsxRuntime.jsx("main", { className: `${styles$i['container']} mx-auto`, children: children }));
|
|
656
656
|
}
|
|
657
657
|
|
|
658
|
-
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"};
|
|
659
659
|
|
|
660
|
-
var styles$
|
|
660
|
+
var styles$g = {"tooltipContent":"Tooltip-module__tooltipContent___xycUg","triggerWrapper":"Tooltip-module__triggerWrapper___x83XR"};
|
|
661
661
|
|
|
662
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$
|
|
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 }) })] }) }));
|
|
664
664
|
};
|
|
665
665
|
|
|
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$
|
|
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: "*" })] })) }));
|
|
667
667
|
|
|
668
|
-
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"};
|
|
669
669
|
|
|
670
670
|
const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
671
671
|
if (required && value.trim() === '') {
|
|
@@ -720,15 +720,15 @@ const TextField$1 = React.forwardRef(({ className, value = '', label, placeholde
|
|
|
720
720
|
: helperText
|
|
721
721
|
? `${componentId}-helper`
|
|
722
722
|
: undefined;
|
|
723
|
-
const containerClass = clsx(styles$
|
|
724
|
-
[styles$
|
|
725
|
-
[styles$
|
|
723
|
+
const containerClass = clsx(styles$f.container, {
|
|
724
|
+
[styles$f.error]: hasError,
|
|
725
|
+
[styles$f.disabled]: disabled,
|
|
726
726
|
[className]: className,
|
|
727
727
|
});
|
|
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$
|
|
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) => {
|
|
729
729
|
e.preventDefault();
|
|
730
730
|
handleClear();
|
|
731
|
-
}, "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 })] })] }));
|
|
732
732
|
});
|
|
733
733
|
TextField$1.displayName = 'TextField';
|
|
734
734
|
var TextField = React.memo(TextField$1);
|
|
@@ -826,7 +826,7 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
826
826
|
return date;
|
|
827
827
|
}
|
|
828
828
|
|
|
829
|
-
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"};
|
|
830
830
|
|
|
831
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, }) => {
|
|
832
832
|
// ✅ IDs únicos para acessibilidade
|
|
@@ -1008,13 +1008,13 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText =
|
|
|
1008
1008
|
setTempInputValue(formatDate(currentSelectedDate, locale));
|
|
1009
1009
|
}
|
|
1010
1010
|
}, [locale, currentSelectedDate, isEditing]);
|
|
1011
|
-
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) => {
|
|
1012
1012
|
handleTextFieldChange(String(e));
|
|
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$
|
|
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' })) })] }) }));
|
|
1014
1014
|
};
|
|
1015
1015
|
var DatePicker_default = React.memo(DatePicker);
|
|
1016
1016
|
|
|
1017
|
-
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"};
|
|
1018
1018
|
|
|
1019
1019
|
const useFocusTrap = (isActive) => {
|
|
1020
1020
|
const containerRef = React.useRef(null);
|
|
@@ -1097,13 +1097,13 @@ const Dialog = ({ show, title, text, textConfirm = 'OK', textCancel = 'Cancelar'
|
|
|
1097
1097
|
}, [show, handleCancel]);
|
|
1098
1098
|
if (!show)
|
|
1099
1099
|
return null;
|
|
1100
|
-
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 })] })] }) })] }));
|
|
1101
1101
|
};
|
|
1102
1102
|
// Memoização para otimização de performance
|
|
1103
1103
|
const MemoizedDialog = React.memo(Dialog);
|
|
1104
1104
|
MemoizedDialog.displayName = 'Dialog';
|
|
1105
1105
|
|
|
1106
|
-
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"};
|
|
1107
1107
|
|
|
1108
1108
|
/**
|
|
1109
1109
|
* Componente Drawer do Zanthus Design System
|
|
@@ -1185,20 +1185,20 @@ onClose, title = 'Título', isOpen = false, onOpen, className = '', id, disabled
|
|
|
1185
1185
|
event.stopPropagation();
|
|
1186
1186
|
internalClose();
|
|
1187
1187
|
};
|
|
1188
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx(styles$
|
|
1189
|
-
[styles$
|
|
1190
|
-
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
1191
|
-
[styles$
|
|
1192
|
-
[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,
|
|
1193
1193
|
}, className), style: {
|
|
1194
1194
|
// ✅ APENAS: Width customizável via CSS custom property
|
|
1195
1195
|
'--drawer-custom-width': customWidth,
|
|
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$
|
|
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 })] })] }));
|
|
1197
1197
|
};
|
|
1198
1198
|
|
|
1199
|
-
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"};
|
|
1200
1200
|
|
|
1201
|
-
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) => {
|
|
1202
1202
|
const [internalValue, setInternalValue] = React.useState('');
|
|
1203
1203
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
1204
1204
|
const currentValue = isControlled ? value : internalValue;
|
|
@@ -1243,11 +1243,11 @@ const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado',
|
|
|
1243
1243
|
return;
|
|
1244
1244
|
onKeyDown?.(e);
|
|
1245
1245
|
};
|
|
1246
|
-
const searchClass = clsx(styles$
|
|
1246
|
+
const searchClass = clsx(styles$b['zds-search'], {
|
|
1247
1247
|
disabled,
|
|
1248
1248
|
[className]: className,
|
|
1249
1249
|
});
|
|
1250
|
-
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, {}) }))] }));
|
|
1251
1251
|
});
|
|
1252
1252
|
Search.displayName = 'ZdsSearch';
|
|
1253
1253
|
|
|
@@ -1282,7 +1282,7 @@ const validateItems = (items, type) => {
|
|
|
1282
1282
|
});
|
|
1283
1283
|
};
|
|
1284
1284
|
|
|
1285
|
-
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"};
|
|
1286
1286
|
|
|
1287
1287
|
/**
|
|
1288
1288
|
* Hook otimizado para scroll infinito usando IntersectionObserver
|
|
@@ -1547,17 +1547,17 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1547
1547
|
const renderItemContent = React.useCallback((item, index) => {
|
|
1548
1548
|
const itemId = item.id || `dropdown-item-${index}`;
|
|
1549
1549
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
1550
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
1551
|
-
[styles$
|
|
1550
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$a['zds-dropdown__item-content'], {
|
|
1551
|
+
[styles$a['zds-dropdown__item-content--disabled']]: item.disabled,
|
|
1552
1552
|
}), children: [type === 'checkbox' && (jsxRuntime.jsx(Checkbox, { checked: !!currentSelection[itemId], onCheckedChange: (checked) => {
|
|
1553
1553
|
if (checked === 'indeterminate')
|
|
1554
1554
|
return;
|
|
1555
1555
|
toggleSelection(itemId, item);
|
|
1556
|
-
}, 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) => {
|
|
1557
1557
|
event.preventDefault();
|
|
1558
1558
|
event.stopPropagation();
|
|
1559
1559
|
handleItemClick(event, itemId, item);
|
|
1560
|
-
}, 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 }))] })] }));
|
|
1561
1561
|
}, [
|
|
1562
1562
|
type,
|
|
1563
1563
|
selectedItems,
|
|
@@ -1622,10 +1622,10 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1622
1622
|
isSearchFocused,
|
|
1623
1623
|
handleSearchClear,
|
|
1624
1624
|
]);
|
|
1625
|
-
const DropdownClass = clsx(styles$
|
|
1625
|
+
const DropdownClass = clsx(styles$a['zds-dropdown__container'], styles$a[`zds-dropdown__container--${position}`], {
|
|
1626
1626
|
[className || '']: className,
|
|
1627
|
-
[styles$
|
|
1628
|
-
[styles$
|
|
1627
|
+
[styles$a['zds-dropdown__container--search-active']]: searchQuery.length > 0,
|
|
1628
|
+
[styles$a['zds-dropdown__container--fixed-width']]: !!maxWidth,
|
|
1629
1629
|
});
|
|
1630
1630
|
const dropdownStyles = React.useMemo(() => {
|
|
1631
1631
|
const styles = {};
|
|
@@ -1647,14 +1647,14 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1647
1647
|
}
|
|
1648
1648
|
return styles;
|
|
1649
1649
|
}, [maxWidth, minWidth, width, maxHeight]);
|
|
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$
|
|
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) => {
|
|
1651
1651
|
const itemId = generateItemId(item, index);
|
|
1652
1652
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
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$
|
|
1654
|
-
[styles$
|
|
1655
|
-
[styles$
|
|
1656
|
-
[styles$
|
|
1657
|
-
[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,
|
|
1658
1658
|
}), tabIndex: focusedIndex === index ? 0 : -1, onFocus: () => setFocusedIndex(index), onClick: (event) => {
|
|
1659
1659
|
event.stopPropagation();
|
|
1660
1660
|
handleItemClick(event, itemId, item);
|
|
@@ -1664,12 +1664,12 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1664
1664
|
setFocusedIndex(index);
|
|
1665
1665
|
}
|
|
1666
1666
|
}, children: renderItemContent(item, index) }, itemId));
|
|
1667
|
-
})) : (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" })) }) }))] }) }));
|
|
1668
1668
|
};
|
|
1669
1669
|
const MemoizedDropdown = React.memo(Dropdown);
|
|
1670
1670
|
MemoizedDropdown.displayName = 'Dropdown';
|
|
1671
1671
|
|
|
1672
|
-
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"};
|
|
1673
1673
|
|
|
1674
1674
|
// ✅ CORREÇÃO: Problema de loop infinito no useEffect
|
|
1675
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', }) => {
|
|
@@ -1754,25 +1754,25 @@ const Filter = ({ items = [], type = 'checkbox', selectedIds = [], onApplyFilter
|
|
|
1754
1754
|
}
|
|
1755
1755
|
return () => document.removeEventListener('keydown', handleEscape);
|
|
1756
1756
|
}, [isOpen, onClose]);
|
|
1757
|
-
const filterClass = clsx(styles$
|
|
1758
|
-
const dropdownClass = clsx(styles$
|
|
1759
|
-
[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,
|
|
1760
1760
|
});
|
|
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$
|
|
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 })) }))] }));
|
|
1762
1762
|
};
|
|
1763
1763
|
|
|
1764
|
-
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"};
|
|
1765
1765
|
|
|
1766
1766
|
const Radio = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', ...rest }) => {
|
|
1767
1767
|
const componentId = id || React.useId();
|
|
1768
|
-
return (jsxRuntime.jsx(radixUi.RadioGroup.Root, { id: componentId, className: styles$
|
|
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
1769
|
const itemKey = id ?? value;
|
|
1770
1770
|
const uniqueId = `${componentId}-item-${value}`;
|
|
1771
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$
|
|
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
1772
|
}) }));
|
|
1773
1773
|
};
|
|
1774
1774
|
|
|
1775
|
-
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"};
|
|
1776
1776
|
|
|
1777
1777
|
/**
|
|
1778
1778
|
* Componente ListItem do Zanthus Design System
|
|
@@ -1857,24 +1857,24 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1857
1857
|
const currentVariant = validVariants.includes(variant) ? variant : 'text';
|
|
1858
1858
|
switch (currentVariant) {
|
|
1859
1859
|
case 'checkbox':
|
|
1860
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Checkbox, { checked: internalChecked, disabled: disabled, onCheckedChange: () => handleCheckboxClick({}) }), jsxRuntime.jsxs("div", { className: styles$
|
|
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 }))] })] }));
|
|
1861
1861
|
case 'radio':
|
|
1862
|
-
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
1863
|
value: value,
|
|
1864
1864
|
label: '',
|
|
1865
1865
|
disabled: disabled
|
|
1866
|
-
}], "aria-labelledby": `${itemId}-text` }) }) }), jsxRuntime.jsxs("div", { className: styles$
|
|
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 }))] })] }));
|
|
1867
1867
|
case 'icon':
|
|
1868
|
-
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 }))] })] }));
|
|
1869
1869
|
case 'text':
|
|
1870
1870
|
default:
|
|
1871
|
-
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 }))] }));
|
|
1872
1872
|
}
|
|
1873
1873
|
}, [variant, itemId, internalChecked, disabled, handleCheckboxClick, handleRadioClick, handleTextOrIconClick, value, text, showSubText, subText, icon, name]);
|
|
1874
|
-
const listItemClass = clsx(styles$
|
|
1875
|
-
[styles$
|
|
1876
|
-
[styles$
|
|
1877
|
-
[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,
|
|
1878
1878
|
[className || '']: className
|
|
1879
1879
|
});
|
|
1880
1880
|
const getAriaChecked = React.useCallback(() => {
|
|
@@ -1886,152 +1886,7 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1886
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() }));
|
|
1887
1887
|
};
|
|
1888
1888
|
|
|
1889
|
-
var styles$
|
|
1890
|
-
|
|
1891
|
-
const Menu = ({ children, menuItems = [], onMenuItemClick, onToggle, type = 'text', applySearch = false, placeholder = '', showSubText = false, className, id, maxWidth = '210px', minWidth, position = 'left' }) => {
|
|
1892
|
-
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
|
|
1893
|
-
const anchorRef = React.useRef(null);
|
|
1894
|
-
const dropdownRef = React.useRef(null);
|
|
1895
|
-
const menuContainerRef = React.useRef(null);
|
|
1896
|
-
const [selectedItems, setSelectedItems] = React.useState([]);
|
|
1897
|
-
const [focusedItemIndex, setFocusedItemIndex] = React.useState(-1);
|
|
1898
|
-
const closeMenu = React.useCallback(() => {
|
|
1899
|
-
setIsMenuOpen(false);
|
|
1900
|
-
if (onToggle) {
|
|
1901
|
-
onToggle(false);
|
|
1902
|
-
}
|
|
1903
|
-
}, [onToggle]);
|
|
1904
|
-
const openMenu = React.useCallback(() => {
|
|
1905
|
-
setIsMenuOpen(true);
|
|
1906
|
-
if (onToggle) {
|
|
1907
|
-
onToggle(true);
|
|
1908
|
-
}
|
|
1909
|
-
}, [onToggle]);
|
|
1910
|
-
const toggleDropdown = React.useCallback(() => {
|
|
1911
|
-
if (isMenuOpen) {
|
|
1912
|
-
closeMenu();
|
|
1913
|
-
}
|
|
1914
|
-
else {
|
|
1915
|
-
openMenu();
|
|
1916
|
-
}
|
|
1917
|
-
}, [isMenuOpen, closeMenu, openMenu]);
|
|
1918
|
-
const initialItemsSelected = React.useMemo(() => {
|
|
1919
|
-
const selectedMap = {};
|
|
1920
|
-
selectedItems.forEach((id) => {
|
|
1921
|
-
selectedMap[id] = true;
|
|
1922
|
-
});
|
|
1923
|
-
return selectedMap;
|
|
1924
|
-
}, [selectedItems, menuItems]);
|
|
1925
|
-
const handleClickOutside = React.useCallback((event) => {
|
|
1926
|
-
if (!isMenuOpen)
|
|
1927
|
-
return;
|
|
1928
|
-
const target = event.target;
|
|
1929
|
-
if (menuContainerRef.current?.contains(target)) {
|
|
1930
|
-
return;
|
|
1931
|
-
}
|
|
1932
|
-
if (anchorRef.current?.contains(target)) {
|
|
1933
|
-
return;
|
|
1934
|
-
}
|
|
1935
|
-
if (dropdownRef.current?.contains(target)) {
|
|
1936
|
-
return;
|
|
1937
|
-
}
|
|
1938
|
-
closeMenu();
|
|
1939
|
-
}, [isMenuOpen, closeMenu]);
|
|
1940
|
-
const handleKeyDown = React.useCallback((event) => {
|
|
1941
|
-
if (!isMenuOpen)
|
|
1942
|
-
return;
|
|
1943
|
-
switch (event.key) {
|
|
1944
|
-
case 'Escape':
|
|
1945
|
-
event.preventDefault();
|
|
1946
|
-
closeMenu();
|
|
1947
|
-
if (anchorRef.current) {
|
|
1948
|
-
anchorRef.current.focus();
|
|
1949
|
-
}
|
|
1950
|
-
break;
|
|
1951
|
-
case 'ArrowDown':
|
|
1952
|
-
event.preventDefault();
|
|
1953
|
-
setFocusedItemIndex(prev => {
|
|
1954
|
-
const nextIndex = prev < menuItems.length - 1 ? prev + 1 : 0;
|
|
1955
|
-
return nextIndex;
|
|
1956
|
-
});
|
|
1957
|
-
break;
|
|
1958
|
-
case 'ArrowUp':
|
|
1959
|
-
event.preventDefault();
|
|
1960
|
-
setFocusedItemIndex(prev => {
|
|
1961
|
-
const nextIndex = prev > 0 ? prev - 1 : menuItems.length - 1;
|
|
1962
|
-
return nextIndex;
|
|
1963
|
-
});
|
|
1964
|
-
break;
|
|
1965
|
-
case 'Enter':
|
|
1966
|
-
case ' ':
|
|
1967
|
-
event.preventDefault();
|
|
1968
|
-
if (focusedItemIndex >= 0 && focusedItemIndex < menuItems.length) {
|
|
1969
|
-
const selectedItem = menuItems[focusedItemIndex];
|
|
1970
|
-
if (selectedItem && !selectedItem.disabled && onMenuItemClick) {
|
|
1971
|
-
onMenuItemClick(selectedItem);
|
|
1972
|
-
}
|
|
1973
|
-
}
|
|
1974
|
-
break;
|
|
1975
|
-
case 'Home':
|
|
1976
|
-
event.preventDefault();
|
|
1977
|
-
setFocusedItemIndex(0);
|
|
1978
|
-
break;
|
|
1979
|
-
case 'End':
|
|
1980
|
-
event.preventDefault();
|
|
1981
|
-
setFocusedItemIndex(menuItems.length - 1);
|
|
1982
|
-
break;
|
|
1983
|
-
}
|
|
1984
|
-
}, [isMenuOpen, closeMenu, focusedItemIndex, menuItems, onMenuItemClick, type]);
|
|
1985
|
-
React.useEffect(() => {
|
|
1986
|
-
if (!isMenuOpen) {
|
|
1987
|
-
setFocusedItemIndex(-1);
|
|
1988
|
-
}
|
|
1989
|
-
}, [isMenuOpen]);
|
|
1990
|
-
const handleSelectionChange = React.useCallback((selectedIds) => {
|
|
1991
|
-
if (selectedIds.length > 0 && menuItems.length > 0 && onMenuItemClick) {
|
|
1992
|
-
const lastSelectedId = selectedIds[selectedIds.length - 1];
|
|
1993
|
-
const selectedItem = menuItems.find((item) => item.id === lastSelectedId);
|
|
1994
|
-
if (selectedItem) {
|
|
1995
|
-
onMenuItemClick(selectedItem);
|
|
1996
|
-
closeMenu();
|
|
1997
|
-
}
|
|
1998
|
-
}
|
|
1999
|
-
setSelectedItems(selectedIds);
|
|
2000
|
-
}, [menuItems, onMenuItemClick, closeMenu]);
|
|
2001
|
-
React.useEffect(() => {
|
|
2002
|
-
if (isMenuOpen) {
|
|
2003
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
2004
|
-
document.addEventListener('keydown', handleKeyDown);
|
|
2005
|
-
return () => {
|
|
2006
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
2007
|
-
document.removeEventListener('keydown', handleKeyDown);
|
|
2008
|
-
};
|
|
2009
|
-
}
|
|
2010
|
-
}, [isMenuOpen, handleClickOutside, handleKeyDown]);
|
|
2011
|
-
const renderAnchor = () => {
|
|
2012
|
-
const dropdownId = `${id || 'menu'}-dropdown`;
|
|
2013
|
-
return React.cloneElement(children, {
|
|
2014
|
-
ref: anchorRef,
|
|
2015
|
-
onClick: (e) => {
|
|
2016
|
-
if (dropdownRef.current && dropdownRef.current.contains(e.target)) {
|
|
2017
|
-
return;
|
|
2018
|
-
}
|
|
2019
|
-
if (children.props.onClick) {
|
|
2020
|
-
children.props.onClick(e);
|
|
2021
|
-
}
|
|
2022
|
-
toggleDropdown();
|
|
2023
|
-
},
|
|
2024
|
-
'aria-expanded': isMenuOpen ? 'true' : 'false',
|
|
2025
|
-
'aria-haspopup': 'menu',
|
|
2026
|
-
'aria-controls': isMenuOpen ? dropdownId : undefined
|
|
2027
|
-
});
|
|
2028
|
-
};
|
|
2029
|
-
const menuClass = clsx.clsx(styles$9['zds-menu__container'], className);
|
|
2030
|
-
const dropdownClass = clsx.clsx(styles$9['zds-menu__dropdown'], styles$9[`zds-menu__dropdown--${position}`]);
|
|
2031
|
-
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 }) }))] }));
|
|
2032
|
-
};
|
|
2033
|
-
|
|
2034
|
-
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"};
|
|
2035
1890
|
|
|
2036
1891
|
const normalizeText = (text) => {
|
|
2037
1892
|
if (typeof text === 'string')
|
|
@@ -2154,11 +2009,11 @@ const MenuItem = React.memo(({ item, isSelected, onSelect }) => {
|
|
|
2154
2009
|
const handleSelect = () => {
|
|
2155
2010
|
onSelect(item);
|
|
2156
2011
|
};
|
|
2157
|
-
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 }))] })] }));
|
|
2158
2013
|
});
|
|
2159
2014
|
MenuItem.displayName = 'MenuItem';
|
|
2160
2015
|
|
|
2161
|
-
const
|
|
2016
|
+
const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onScrollEnd, isLoadingMore, onApiSearch, enableApiSearch, selectedItems = [], onOpenChange, align = 'start', className, maxHeight = 400, ...rest }) => {
|
|
2162
2017
|
const itemsWrapperRef = React.useRef(null);
|
|
2163
2018
|
const hasReachedEndRef = React.useRef(false);
|
|
2164
2019
|
const observerRef = React.useRef(null);
|
|
@@ -2167,16 +2022,14 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2167
2022
|
const isLoadingMoreRef = React.useRef(isLoadingMore);
|
|
2168
2023
|
const [searchInput, setSearchInput] = React.useState('');
|
|
2169
2024
|
const [searchTerm, setSearchTerm] = React.useState('');
|
|
2170
|
-
const [open, setOpen] = React.useState(false);
|
|
2171
2025
|
const maxHeightStyle = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
|
|
2172
|
-
const { handleItemSelect: handleItemSelectLogic, isItemSelected } = useMenuLogic({
|
|
2026
|
+
const { open, setOpen, handleItemSelect: handleItemSelectLogic, isItemSelected } = useMenuLogic({
|
|
2173
2027
|
selectedItems,
|
|
2174
2028
|
onItemSelect,
|
|
2175
2029
|
onOpenChange,
|
|
2176
2030
|
});
|
|
2177
2031
|
const handleItemSelect = React.useCallback((item) => {
|
|
2178
2032
|
handleItemSelectLogic(item);
|
|
2179
|
-
setOpen(false);
|
|
2180
2033
|
}, [handleItemSelectLogic]);
|
|
2181
2034
|
const { filteredItems } = useSearchLogic({
|
|
2182
2035
|
items,
|
|
@@ -2202,7 +2055,7 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2202
2055
|
React.useEffect(() => {
|
|
2203
2056
|
onScrollEndRef.current = onScrollEnd;
|
|
2204
2057
|
isLoadingMoreRef.current = isLoadingMore;
|
|
2205
|
-
});
|
|
2058
|
+
}, [onScrollEnd, isLoadingMore]);
|
|
2206
2059
|
React.useEffect(() => {
|
|
2207
2060
|
if (!open || !enableInfiniteScroll) {
|
|
2208
2061
|
return;
|
|
@@ -2261,27 +2114,24 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2261
2114
|
const renderMenuItem = React.useCallback((item, key) => {
|
|
2262
2115
|
const hasChildren = item.children && item.children.length > 0;
|
|
2263
2116
|
if (hasChildren) {
|
|
2264
|
-
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));
|
|
2265
2118
|
}
|
|
2266
2119
|
return (jsxRuntime.jsx(MenuItem, { item: item, isSelected: isItemSelected(item), onSelect: handleItemSelect }, key));
|
|
2267
2120
|
}, [handleItemSelect, isItemSelected]);
|
|
2268
2121
|
const handleOpenChange = (newOpen) => {
|
|
2269
2122
|
setOpen(newOpen);
|
|
2270
|
-
if (onOpenChange) {
|
|
2271
|
-
onOpenChange(newOpen);
|
|
2272
|
-
}
|
|
2273
2123
|
if (!newOpen) {
|
|
2274
2124
|
hasReachedEndRef.current = false;
|
|
2275
2125
|
}
|
|
2276
2126
|
};
|
|
2277
|
-
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) => {
|
|
2278
2128
|
if (search) {
|
|
2279
2129
|
e.stopPropagation();
|
|
2280
2130
|
}
|
|
2281
|
-
}, ...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' } }))] })] }) })] }));
|
|
2282
2132
|
};
|
|
2283
2133
|
|
|
2284
|
-
var styles$
|
|
2134
|
+
var styles$5 = {"zds-quantity":"Quantity-module__zds-quantity___AymLj","zds-quantity__input":"Quantity-module__zds-quantity__input___Wlhmo"};
|
|
2285
2135
|
|
|
2286
2136
|
/**
|
|
2287
2137
|
* Componente Quantity - permite incrementar/decrementar valores numéricos
|
|
@@ -2500,365 +2350,94 @@ const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled
|
|
|
2500
2350
|
}, [disabled, increment, decrement, decimal, decimalPlaces, isControlled, onChange, computedValue]);
|
|
2501
2351
|
const uniqueId = React.useId();
|
|
2502
2352
|
const inputId = id || uniqueId;
|
|
2503
|
-
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, {}) })] }));
|
|
2504
2354
|
};
|
|
2505
2355
|
const memorizedQuantity = React.memo(Quantity);
|
|
2506
2356
|
memorizedQuantity.displayName = 'Quantity';
|
|
2507
2357
|
|
|
2508
|
-
var styles$
|
|
2509
|
-
|
|
2510
|
-
var styles$5 = {"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"};
|
|
2511
|
-
|
|
2512
|
-
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) => {
|
|
2513
|
-
// ✅ NOVA LÓGICA: Validação de required
|
|
2514
|
-
const isRequired = required && !disabled;
|
|
2515
|
-
const hasValue = Boolean(value && value.trim().length > 0);
|
|
2516
|
-
const shouldShowRequiredError = isRequired && isTouched && !hasValue;
|
|
2517
|
-
// ✅ NOVA LÓGICA: Mensagem de erro dinâmica
|
|
2518
|
-
const dynamicErrorMessage = shouldShowRequiredError && !errorMessage
|
|
2519
|
-
? 'Este campo é obrigatório'
|
|
2520
|
-
: errorMessage;
|
|
2521
|
-
// ✅ NOVA LÓGICA: Estado de erro combinado
|
|
2522
|
-
const showError = hasError || shouldShowRequiredError || Boolean(errorMessage);
|
|
2523
|
-
// Classes CSS
|
|
2524
|
-
const containerClasses = clsx(styles$5['zds-select-field'], {
|
|
2525
|
-
[styles$5['zds-select-field--open']]: isOpen,
|
|
2526
|
-
[styles$5['zds-select-field--disabled']]: disabled,
|
|
2527
|
-
[styles$5['zds-select-field--error']]: showError,
|
|
2528
|
-
[styles$5['zds-select-field--required']]: isRequired,
|
|
2529
|
-
[styles$5['zds-select-field--touched']]: isTouched,
|
|
2530
|
-
}, className);
|
|
2531
|
-
const displayClasses = clsx(styles$5['zds-select-field__display'], {
|
|
2532
|
-
[styles$5['zds-select-field__display--placeholder']]: !hasValue,
|
|
2533
|
-
'has-value': hasValue,
|
|
2534
|
-
});
|
|
2535
|
-
const displayText = hasValue ? value : placeholder;
|
|
2536
|
-
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$5['zds-select-field__container-tooltip'], children: [label, required && jsxRuntime.jsx("span", { className: styles$5['zds-select-field__required'], children: "*" }), jsxRuntime.jsx(reactIcons.Info12Regular, { className: styles$5['zds-select-field__tooltip'] })] }) })) : (jsxRuntime.jsxs("div", { className: styles$5['zds-select-field__container-tooltip'], children: [label, required && jsxRuntime.jsx("span", { className: styles$5['zds-select-field__required'], children: "*" })] })) })), jsxRuntime.jsxs("div", { className: styles$5['zds-select-field__container-box'], children: [jsxRuntime.jsxs("div", { className: styles$5['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$5['zds-select-field__input'] }), icon && (jsxRuntime.jsx("div", { className: styles$5['zds-select-field__icon'], children: icon }))] }), !isOpen && (helperText || showError) && (jsxRuntime.jsx("div", { className: styles$5['zds-select-field__helper-text'], children: showError ? dynamicErrorMessage : helperText }))] })] }));
|
|
2537
|
-
});
|
|
2538
|
-
SelectField.displayName = 'SelectField';
|
|
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-"};
|
|
2539
2359
|
|
|
2540
|
-
const
|
|
2541
|
-
|
|
2542
|
-
const
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
// ✅ NOVO: Validação de props em desenvolvimento
|
|
2547
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2548
|
-
// Validar unidades CSS
|
|
2549
|
-
if (maxWidth && typeof maxWidth === 'string' &&
|
|
2550
|
-
!maxWidth.match(/^\d+(px|%|rem|em|vw|vh)$/)) {
|
|
2551
|
-
console.warn('Select: maxWidth deve ter unidade CSS válida (px, %, rem, em, vw, vh)');
|
|
2552
|
-
}
|
|
2553
|
-
if (minWidth && typeof minWidth === 'string' &&
|
|
2554
|
-
!minWidth.match(/^\d+(px|%|rem|em|vw|vh)$/)) {
|
|
2555
|
-
console.warn('Select: minWidth deve ter unidade CSS válida');
|
|
2556
|
-
}
|
|
2557
|
-
// Validar performance
|
|
2558
|
-
if (options.length > 1000) {
|
|
2559
|
-
console.warn('Select: Muitas opções (>1000) podem impactar performance. Considere virtualização.');
|
|
2560
|
-
}
|
|
2561
|
-
// Validar onChange obrigatório
|
|
2562
|
-
if (!onChange) {
|
|
2563
|
-
console.warn('Select: onChange prop é recomendado para controle de estado.');
|
|
2564
|
-
}
|
|
2565
|
-
}
|
|
2566
|
-
// Estados
|
|
2567
|
-
const [isOpen, setIsOpen] = React.useState(false);
|
|
2568
|
-
const [selectedOptions, setSelectedOptions] = React.useState(() => {
|
|
2569
|
-
// Se tem value controlado, não usar initialValue
|
|
2570
|
-
if (value !== undefined) {
|
|
2571
|
-
return [];
|
|
2572
|
-
}
|
|
2573
|
-
// Se tem initialValue, processar na inicialização
|
|
2574
|
-
if (initialValue !== undefined) {
|
|
2575
|
-
// Inicializar com array vazio primeiro, será populado no useEffect
|
|
2576
|
-
return [];
|
|
2577
|
-
}
|
|
2578
|
-
return [];
|
|
2579
|
-
});
|
|
2580
|
-
const [isTouched, setIsTouched] = React.useState(false);
|
|
2581
|
-
const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
|
|
2582
|
-
// Lógica de validação para campo obrigatório
|
|
2583
|
-
const hasValue = selectedOptions.length > 0;
|
|
2584
|
-
const shouldShowRequiredError = required && isTouched && !hasValue && !disabled;
|
|
2585
|
-
// Validação e normalização das opções
|
|
2586
|
-
const validatedOptions = React.useMemo(() => {
|
|
2587
|
-
if (!Array.isArray(options)) {
|
|
2588
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2589
|
-
console.warn('Select: options deve ser um array, recebido:', typeof options, options);
|
|
2590
|
-
}
|
|
2591
|
-
return [];
|
|
2592
|
-
}
|
|
2593
|
-
return options.filter((option, index) => {
|
|
2594
|
-
if (!option || typeof option !== 'object') {
|
|
2595
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2596
|
-
console.warn(`Select: opção ${index} é inválida (null/undefined):`, option);
|
|
2597
|
-
}
|
|
2598
|
-
return false;
|
|
2599
|
-
}
|
|
2600
|
-
if (!option.text || typeof option.text !== 'string' || option.text.trim().length === 0) {
|
|
2601
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2602
|
-
console.warn(`Select: opção ${index} sem text válido:`, option);
|
|
2603
|
-
}
|
|
2604
|
-
return false;
|
|
2605
|
-
}
|
|
2606
|
-
if (option.text.length > 200) {
|
|
2607
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2608
|
-
console.warn(`Select: opção ${index} com text muito longo (${option.text.length} chars):`, option.text.substring(0, 50) + '...');
|
|
2609
|
-
}
|
|
2610
|
-
return false;
|
|
2611
|
-
}
|
|
2612
|
-
return true;
|
|
2613
|
-
});
|
|
2614
|
-
}, [options]);
|
|
2615
|
-
// Conversão para itens do Dropdown
|
|
2616
|
-
const dropdownItems = React.useMemo(() => {
|
|
2617
|
-
return validatedOptions.map((option, index) => ({
|
|
2618
|
-
id: option.id || `dropdown-item-${index}`,
|
|
2619
|
-
text: option.text,
|
|
2620
|
-
subText: option.subText,
|
|
2621
|
-
icon: option.icon,
|
|
2622
|
-
disabled: option.disabled || disabled
|
|
2623
|
-
}));
|
|
2624
|
-
}, [validatedOptions, disabled]);
|
|
2625
|
-
// Texto de exibição das opções selecionadas
|
|
2626
|
-
const displayText = React.useMemo(() => {
|
|
2627
|
-
if (selectedOptions.length === 0)
|
|
2628
|
-
return '';
|
|
2629
|
-
return selectedOptions
|
|
2630
|
-
.map((item) => item.text || 'Item sem nome')
|
|
2631
|
-
.join(', ');
|
|
2632
|
-
}, [selectedOptions]);
|
|
2633
|
-
// IDs das opções selecionadas para o Dropdown
|
|
2634
|
-
const selectedIds = React.useMemo(() => {
|
|
2635
|
-
return selectedOptions.map((selectedItem) => {
|
|
2636
|
-
const optionIndex = validatedOptions.findIndex((option) => {
|
|
2637
|
-
return option.id === selectedItem.id ||
|
|
2638
|
-
option.text === selectedItem.text ||
|
|
2639
|
-
option === selectedItem;
|
|
2640
|
-
});
|
|
2641
|
-
return optionIndex !== -1
|
|
2642
|
-
? (validatedOptions[optionIndex].id || `dropdown-item-${optionIndex}`)
|
|
2643
|
-
: null;
|
|
2644
|
-
}).filter((id) => Boolean(id));
|
|
2645
|
-
}, [selectedOptions, validatedOptions]);
|
|
2646
|
-
// Mapa inicial de seleção para o Dropdown
|
|
2647
|
-
const initialItemsSelected = React.useMemo(() => {
|
|
2648
|
-
const selectedMap = {};
|
|
2649
|
-
selectedIds.forEach((id) => {
|
|
2650
|
-
selectedMap[id] = true;
|
|
2651
|
-
});
|
|
2652
|
-
return selectedMap;
|
|
2653
|
-
}, [selectedIds]);
|
|
2654
|
-
// ✅ SIMPLIFICADO: Handlers de evento sem refs desnecessários
|
|
2655
|
-
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) => {
|
|
2656
2366
|
if (disabled)
|
|
2657
2367
|
return;
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
if (!foundOption && id.startsWith('dropdown-item-')) {
|
|
2663
|
-
const index = parseInt(id.replace('dropdown-item-', ''), 10);
|
|
2664
|
-
foundOption = validatedOptions[index];
|
|
2665
|
-
}
|
|
2666
|
-
return foundOption;
|
|
2667
|
-
}).filter((option) => Boolean(option));
|
|
2668
|
-
setSelectedOptions(selectedItems);
|
|
2669
|
-
onChange?.(selectedItems);
|
|
2670
|
-
// Fechar dropdown se não for múltipla seleção
|
|
2671
|
-
if (type !== 'checkbox') {
|
|
2672
|
-
setIsOpen(false);
|
|
2673
|
-
}
|
|
2674
|
-
}, [validatedOptions, onChange, type, disabled]);
|
|
2675
|
-
// ✅ NOVO: Busca rápida por primeira letra
|
|
2676
|
-
const handleQuickSearch = React.useCallback((char) => {
|
|
2677
|
-
if (!isOpen || dropdownItems.length === 0)
|
|
2368
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
2369
|
+
e.preventDefault();
|
|
2370
|
+
e.stopPropagation();
|
|
2371
|
+
onCheckedChange(!checked);
|
|
2678
2372
|
return;
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
matchingIndex = dropdownItems.findIndex(item => item.text.toLowerCase().startsWith(char) &&
|
|
2687
|
-
!item.disabled);
|
|
2688
|
-
}
|
|
2689
|
-
if (matchingIndex >= 0) {
|
|
2690
|
-
setFocusedOptionIndex(matchingIndex);
|
|
2691
|
-
}
|
|
2692
|
-
}, [isOpen, focusedOptionIndex, dropdownItems]);
|
|
2693
|
-
const handleTriggerClick = React.useCallback((event) => {
|
|
2694
|
-
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
|
+
}
|
|
2695
2380
|
return;
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
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
|
+
}
|
|
2703
2388
|
return;
|
|
2704
|
-
const relatedTarget = event.relatedTarget;
|
|
2705
|
-
if (selectRef.current && relatedTarget && selectRef.current.contains(relatedTarget)) {
|
|
2706
|
-
return; // Não fechar se foco está dentro do select
|
|
2707
2389
|
}
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
setIsOpen(false);
|
|
2711
|
-
setFocusedOptionIndex(-1);
|
|
2712
|
-
}, 200);
|
|
2713
|
-
}, [disabled]);
|
|
2714
|
-
const handleKeyDown = React.useCallback((event) => {
|
|
2390
|
+
};
|
|
2391
|
+
const handleClick = (e) => {
|
|
2715
2392
|
if (disabled)
|
|
2716
2393
|
return;
|
|
2717
|
-
|
|
2718
|
-
|
|
2719
|
-
|
|
2720
|
-
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
// Selecionar opção focada
|
|
2724
|
-
const optionId = dropdownItems[focusedOptionIndex]?.id;
|
|
2725
|
-
if (optionId) {
|
|
2726
|
-
handleOptionSelect([optionId]);
|
|
2727
|
-
}
|
|
2728
|
-
}
|
|
2729
|
-
else {
|
|
2730
|
-
setIsOpen(prev => !prev);
|
|
2731
|
-
if (!isOpen) {
|
|
2732
|
-
setFocusedOptionIndex(0);
|
|
2733
|
-
}
|
|
2734
|
-
}
|
|
2735
|
-
break;
|
|
2736
|
-
case 'Escape':
|
|
2737
|
-
event.preventDefault();
|
|
2738
|
-
event.stopPropagation();
|
|
2739
|
-
setIsTouched(true);
|
|
2740
|
-
setIsOpen(false);
|
|
2741
|
-
setFocusedOptionIndex(-1);
|
|
2742
|
-
// ✅ Devolver foco para o trigger
|
|
2743
|
-
selectRef.current?.focus();
|
|
2744
|
-
break;
|
|
2745
|
-
case 'ArrowDown':
|
|
2746
|
-
event.preventDefault();
|
|
2747
|
-
event.stopPropagation();
|
|
2748
|
-
if (!isOpen) {
|
|
2749
|
-
setIsOpen(true);
|
|
2750
|
-
setFocusedOptionIndex(0);
|
|
2751
|
-
}
|
|
2752
|
-
else {
|
|
2753
|
-
setFocusedOptionIndex(prev => prev < dropdownItems.length - 1 ? prev + 1 : 0);
|
|
2754
|
-
}
|
|
2755
|
-
break;
|
|
2756
|
-
case 'ArrowUp':
|
|
2757
|
-
event.preventDefault();
|
|
2758
|
-
event.stopPropagation();
|
|
2759
|
-
if (isOpen) {
|
|
2760
|
-
setFocusedOptionIndex(prev => prev > 0 ? prev - 1 : dropdownItems.length - 1);
|
|
2761
|
-
}
|
|
2762
|
-
break;
|
|
2763
|
-
case 'Home':
|
|
2764
|
-
if (isOpen) {
|
|
2765
|
-
event.preventDefault();
|
|
2766
|
-
setFocusedOptionIndex(0);
|
|
2767
|
-
}
|
|
2768
|
-
break;
|
|
2769
|
-
case 'End':
|
|
2770
|
-
if (isOpen) {
|
|
2771
|
-
event.preventDefault();
|
|
2772
|
-
setFocusedOptionIndex(dropdownItems.length - 1);
|
|
2773
|
-
}
|
|
2774
|
-
break;
|
|
2775
|
-
case 'Tab':
|
|
2776
|
-
if (isOpen) {
|
|
2777
|
-
setIsOpen(false);
|
|
2778
|
-
setIsTouched(true);
|
|
2779
|
-
setFocusedOptionIndex(-1);
|
|
2780
|
-
}
|
|
2781
|
-
break;
|
|
2782
|
-
default:
|
|
2783
|
-
if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) {
|
|
2784
|
-
handleQuickSearch(event.key.toLowerCase());
|
|
2785
|
-
}
|
|
2786
|
-
break;
|
|
2787
|
-
}
|
|
2788
|
-
}, [isOpen, disabled, focusedOptionIndex, dropdownItems, handleOptionSelect]);
|
|
2789
|
-
// Click outside handler
|
|
2790
|
-
const handleClickOutside = React.useCallback((event) => {
|
|
2791
|
-
const target = event.target;
|
|
2792
|
-
if (selectRef.current && !selectRef.current.contains(target)) {
|
|
2793
|
-
setIsTouched(true);
|
|
2794
|
-
setIsOpen(false);
|
|
2795
|
-
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);
|
|
2796
2400
|
}
|
|
2797
|
-
}
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
|
|
2802
|
-
|
|
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);
|
|
2803
2417
|
}
|
|
2804
2418
|
else {
|
|
2805
|
-
|
|
2806
|
-
document.removeEventListener('touchstart', handleClickOutside);
|
|
2807
|
-
}
|
|
2808
|
-
return () => {
|
|
2809
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
2810
|
-
document.removeEventListener('touchstart', handleClickOutside);
|
|
2811
|
-
};
|
|
2812
|
-
}, [isOpen, handleClickOutside]);
|
|
2813
|
-
React.useEffect(() => {
|
|
2814
|
-
if (value !== undefined) {
|
|
2815
|
-
// Valor controlado - sempre usar value
|
|
2816
|
-
const valueArray = Array.isArray(value) ? value : [value];
|
|
2817
|
-
const newSelectedOptions = valueArray
|
|
2818
|
-
.map((val) => validatedOptions.find((option) => option.id === val || option.text === val))
|
|
2819
|
-
.filter((option) => Boolean(option));
|
|
2820
|
-
setSelectedOptions(newSelectedOptions);
|
|
2821
|
-
}
|
|
2822
|
-
else if (initialValue !== undefined && selectedOptions.length === 0) {
|
|
2823
|
-
// Valor inicial não controlado - só aplicar se ainda não há seleções
|
|
2824
|
-
const initialValueArray = Array.isArray(initialValue) ? initialValue : [initialValue];
|
|
2825
|
-
const newSelectedOptions = initialValueArray
|
|
2826
|
-
.map((val) => validatedOptions.find((option) => option.id === val || option.text === val))
|
|
2827
|
-
.filter((option) => Boolean(option));
|
|
2828
|
-
setSelectedOptions(newSelectedOptions);
|
|
2829
|
-
}
|
|
2830
|
-
else if (value === undefined && initialValue === undefined && selectedOptions.length > 0) {
|
|
2831
|
-
// Nenhum valor definido - limpar seleções apenas se havia seleções
|
|
2832
|
-
setSelectedOptions([]);
|
|
2833
|
-
}
|
|
2834
|
-
}, [value, initialValue, validatedOptions]);
|
|
2835
|
-
const containerStyles = React.useMemo(() => {
|
|
2836
|
-
const styles = {};
|
|
2837
|
-
if (minWidth) {
|
|
2838
|
-
styles.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
|
|
2839
|
-
}
|
|
2840
|
-
if (maxWidth) {
|
|
2841
|
-
const maxWidthValue = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
|
|
2842
|
-
styles.maxWidth = maxWidthValue;
|
|
2843
|
-
}
|
|
2844
|
-
if (width) {
|
|
2845
|
-
styles.width = typeof width === 'number' ? `${width}px` : width;
|
|
2419
|
+
onSelect(item.value);
|
|
2846
2420
|
}
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
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 })] })] }));
|
|
2860
2439
|
});
|
|
2861
|
-
|
|
2440
|
+
SelectItem.displayName = 'SelectItem';
|
|
2862
2441
|
|
|
2863
2442
|
const initialState = {
|
|
2864
2443
|
isOpen: false,
|
|
@@ -2884,16 +2463,15 @@ function selectReducer(state, action) {
|
|
|
2884
2463
|
return { ...state, hasError: action.payload };
|
|
2885
2464
|
case 'RESET_SEARCH':
|
|
2886
2465
|
return { ...state, searchInput: '', searchTerm: '' };
|
|
2887
|
-
case 'VALIDATE':
|
|
2466
|
+
case 'VALIDATE': {
|
|
2888
2467
|
const hasError = action.payload.required && state.selectedValues.length === 0;
|
|
2889
2468
|
return { ...state, hasError, touched: true };
|
|
2469
|
+
}
|
|
2890
2470
|
default:
|
|
2891
2471
|
return state;
|
|
2892
2472
|
}
|
|
2893
2473
|
}
|
|
2894
|
-
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange,
|
|
2895
|
-
// API search props
|
|
2896
|
-
enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
2474
|
+
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange, enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
2897
2475
|
const [state, dispatch] = React.useReducer(selectReducer, {
|
|
2898
2476
|
...initialState,
|
|
2899
2477
|
selectedValues: Array.isArray(value) ? value : value ? [value] : [],
|
|
@@ -2902,9 +2480,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2902
2480
|
const debounceTimeoutRef = React.useRef(null);
|
|
2903
2481
|
const hasInitialSearchRef = React.useRef(false);
|
|
2904
2482
|
const lastSearchTermRef = React.useRef('');
|
|
2905
|
-
// Função de debounce para busca em API
|
|
2906
2483
|
const debouncedApiSearch = React.useCallback((searchTerm) => {
|
|
2907
|
-
// Evita chamadas duplicadas com o mesmo termo
|
|
2908
2484
|
if (lastSearchTermRef.current === searchTerm) {
|
|
2909
2485
|
return;
|
|
2910
2486
|
}
|
|
@@ -2916,7 +2492,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2916
2492
|
if (enableApiSearch && onApiSearch) {
|
|
2917
2493
|
onApiSearch(searchTerm);
|
|
2918
2494
|
}
|
|
2919
|
-
}, 300);
|
|
2495
|
+
}, 300);
|
|
2920
2496
|
}, [enableApiSearch, onApiSearch]);
|
|
2921
2497
|
React.useEffect(() => {
|
|
2922
2498
|
const newValues = Array.isArray(value) ? value : value ? [value] : [];
|
|
@@ -2932,35 +2508,28 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2932
2508
|
React.useEffect(() => {
|
|
2933
2509
|
if (!state.isOpen) {
|
|
2934
2510
|
dispatch({ type: 'RESET_SEARCH' });
|
|
2935
|
-
// Reset flags quando fechar
|
|
2936
2511
|
hasInitialSearchRef.current = false;
|
|
2937
2512
|
lastSearchTermRef.current = '';
|
|
2938
2513
|
}
|
|
2939
2514
|
}, [state.isOpen]);
|
|
2940
|
-
// Efeito para busca inicial quando abrir o select com API search
|
|
2941
2515
|
React.useEffect(() => {
|
|
2942
2516
|
if (state.isOpen && enableApiSearch && !hasInitialSearchRef.current) {
|
|
2943
2517
|
hasInitialSearchRef.current = true;
|
|
2944
|
-
// Faz uma busca inicial vazia para carregar os itens (sem debounce para ser mais rápido)
|
|
2945
2518
|
if (onApiSearch) {
|
|
2946
2519
|
onApiSearch('');
|
|
2947
2520
|
lastSearchTermRef.current = '';
|
|
2948
2521
|
}
|
|
2949
2522
|
}
|
|
2950
2523
|
}, [state.isOpen, enableApiSearch, onApiSearch]);
|
|
2951
|
-
// Efeito para disparar busca via API somente quando searchTerm for definido (Enter pressionado)
|
|
2952
2524
|
React.useEffect(() => {
|
|
2953
2525
|
if (enableApiSearch && state.searchTerm && state.isOpen) {
|
|
2954
|
-
// Só dispara se for diferente do último termo pesquisado
|
|
2955
2526
|
if (lastSearchTermRef.current !== state.searchTerm) {
|
|
2956
2527
|
debouncedApiSearch(state.searchTerm);
|
|
2957
2528
|
}
|
|
2958
2529
|
}
|
|
2959
2530
|
}, [state.searchTerm, enableApiSearch, state.isOpen, debouncedApiSearch]);
|
|
2960
|
-
// Efeito para recarregar dados quando o campo de busca ficar vazio
|
|
2961
2531
|
React.useEffect(() => {
|
|
2962
2532
|
if (enableApiSearch && state.isOpen && state.searchInput === '' && state.searchTerm === '') {
|
|
2963
|
-
// Só recarrega se já teve alguma busca anterior
|
|
2964
2533
|
if (lastSearchTermRef.current !== '') {
|
|
2965
2534
|
lastSearchTermRef.current = '';
|
|
2966
2535
|
if (onApiSearch) {
|
|
@@ -2969,13 +2538,11 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2969
2538
|
}
|
|
2970
2539
|
}
|
|
2971
2540
|
}, [state.searchInput, state.searchTerm, enableApiSearch, state.isOpen, onApiSearch]);
|
|
2972
|
-
// Cleanup do timeout quando componente for desmontado
|
|
2973
2541
|
React.useEffect(() => {
|
|
2974
2542
|
return () => {
|
|
2975
2543
|
if (debounceTimeoutRef.current) {
|
|
2976
2544
|
clearTimeout(debounceTimeoutRef.current);
|
|
2977
2545
|
}
|
|
2978
|
-
// Limpar refs no cleanup
|
|
2979
2546
|
hasInitialSearchRef.current = false;
|
|
2980
2547
|
lastSearchTermRef.current = '';
|
|
2981
2548
|
};
|
|
@@ -3004,7 +2571,6 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3004
2571
|
};
|
|
3005
2572
|
const resetSearch = () => {
|
|
3006
2573
|
dispatch({ type: 'RESET_SEARCH' });
|
|
3007
|
-
// Reset da ref para permitir nova busca vazia
|
|
3008
2574
|
lastSearchTermRef.current = '';
|
|
3009
2575
|
};
|
|
3010
2576
|
const validate = () => {
|
|
@@ -3053,12 +2619,9 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3053
2619
|
selectedValues[0]);
|
|
3054
2620
|
};
|
|
3055
2621
|
const getFilteredItems = (items, searchTerm) => {
|
|
3056
|
-
// Se busca via API estiver ativa, não filtra localmente
|
|
3057
|
-
// Assume que a API já retornou os dados filtrados
|
|
3058
2622
|
if (enableApiSearch) {
|
|
3059
2623
|
return items;
|
|
3060
2624
|
}
|
|
3061
|
-
// Busca local (comportamento original)
|
|
3062
2625
|
if (!searchTerm)
|
|
3063
2626
|
return items;
|
|
3064
2627
|
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
|
@@ -3101,34 +2664,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3101
2664
|
};
|
|
3102
2665
|
}
|
|
3103
2666
|
|
|
3104
|
-
|
|
3105
|
-
|
|
3106
|
-
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange, value, ...restProps }) => {
|
|
3107
|
-
const handleCheckboxChange = (checkedValue) => {
|
|
3108
|
-
onCheckedChange(Boolean(checkedValue));
|
|
3109
|
-
};
|
|
3110
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$4.item, styles$4.checkboxItem, {
|
|
3111
|
-
[styles$4.disabled]: disabled,
|
|
3112
|
-
}), role: "option", "aria-selected": checked, "data-selected": checked, "data-testid": `checkbox-item-${value}`, ...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 })] }) }) }) }));
|
|
3113
|
-
};
|
|
3114
|
-
CheckboxSelectItem.displayName = 'CheckboxSelectItem';
|
|
3115
|
-
|
|
3116
|
-
const SelectItem = React.forwardRef(({ text, subTitle, icon, disabled, value, variant, ...restProps }, ref) => {
|
|
3117
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$4.itemWrapper, {
|
|
3118
|
-
[styles$4.disabled]: disabled,
|
|
3119
|
-
}), "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, {
|
|
3120
|
-
[styles$4.disabled]: disabled,
|
|
3121
|
-
}), 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 })] })] }));
|
|
3122
|
-
});
|
|
3123
|
-
SelectItem.displayName = 'SelectItem';
|
|
3124
|
-
|
|
3125
|
-
const SelectRadix = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, errorMessage, disabled = false, className, 'aria-label': ariaLabel, 'data-testid': testId,
|
|
3126
|
-
// Props para label com tooltip
|
|
3127
|
-
tooltip = false, tooltipText, side = 'bottom', align = 'start',
|
|
3128
|
-
// Props para scroll infinito
|
|
3129
|
-
enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false,
|
|
3130
|
-
// Props para busca em API
|
|
3131
|
-
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 }) => {
|
|
3132
2668
|
const componentId = React.useId();
|
|
3133
2669
|
const selectId = `select-${componentId}`;
|
|
3134
2670
|
const viewportRef = React.useRef(null);
|
|
@@ -3139,12 +2675,10 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3139
2675
|
search,
|
|
3140
2676
|
onValueChange,
|
|
3141
2677
|
onOpenChange,
|
|
3142
|
-
// API search props
|
|
3143
2678
|
enableApiSearch,
|
|
3144
2679
|
onApiSearch,
|
|
3145
2680
|
isSearching,
|
|
3146
2681
|
});
|
|
3147
|
-
// Infinite Scroll Logic
|
|
3148
2682
|
React.useEffect(() => {
|
|
3149
2683
|
const viewport = viewportRef.current;
|
|
3150
2684
|
if (!viewport || !enableInfiniteScroll)
|
|
@@ -3165,7 +2699,6 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3165
2699
|
viewport.removeEventListener('scroll', handleScroll);
|
|
3166
2700
|
};
|
|
3167
2701
|
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore]);
|
|
3168
|
-
// Reset a flag when the select opens
|
|
3169
2702
|
React.useEffect(() => {
|
|
3170
2703
|
if (state.isOpen && enableInfiniteScroll) {
|
|
3171
2704
|
hasReachedEndRef.current = false;
|
|
@@ -3173,21 +2706,27 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3173
2706
|
}, [state.isOpen, enableInfiniteScroll]);
|
|
3174
2707
|
const displayText = React.useMemo(() => utils.getDisplayText(state.selectedValues, placeholder, variant, items), [state.selectedValues, placeholder, variant, items, utils]);
|
|
3175
2708
|
const filteredItems = React.useMemo(() => {
|
|
3176
|
-
// Para busca via API, usa searchTerm (só atualiza quando Enter é pressionado)
|
|
3177
|
-
// Para busca local, usa searchInput (atualiza a cada tecla para filtro em tempo real)
|
|
3178
2709
|
const termToFilter = enableApiSearch ? state.searchTerm : state.searchInput;
|
|
3179
2710
|
return utils.getFilteredItems(items, termToFilter);
|
|
3180
2711
|
}, [items, state.searchTerm, state.searchInput, enableApiSearch, utils]);
|
|
3181
2712
|
const containerStyle = React.useMemo(() => ({
|
|
3182
|
-
maxWidth:
|
|
2713
|
+
maxWidth: maxWidth ? `${maxWidth}px` : undefined,
|
|
3183
2714
|
}), [maxWidth]);
|
|
3184
2715
|
const handleSearchChange = (e) => {
|
|
3185
2716
|
actions.setSearchInput(e.target.value);
|
|
3186
2717
|
};
|
|
3187
2718
|
const handleSearchKeyDown = (e) => {
|
|
3188
|
-
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
|
+
}
|
|
3189
2727
|
if (e.key === 'Enter') {
|
|
3190
2728
|
e.preventDefault();
|
|
2729
|
+
e.stopPropagation();
|
|
3191
2730
|
actions.setSearchTerm(state.searchInput);
|
|
3192
2731
|
}
|
|
3193
2732
|
if (e.key === 'Escape') {
|
|
@@ -3209,11 +2748,25 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3209
2748
|
[styles$4.open]: state.isOpen,
|
|
3210
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, {
|
|
3211
2750
|
[styles$4.disabled]: disabled
|
|
3212
|
-
}), 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) =>
|
|
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..." }))] })) }) })] }) })] }) }));
|
|
3213
2766
|
};
|
|
3214
|
-
|
|
2767
|
+
Select.displayName = 'Select';
|
|
3215
2768
|
|
|
3216
|
-
var styles$3 = {"zds-table__container":"Table-module__zds-table__container___9xeVY","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-
|
|
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"};
|
|
3217
2770
|
|
|
3218
2771
|
/**
|
|
3219
2772
|
* @module constants
|
|
@@ -6651,10 +6204,10 @@ const Table = ({ columns = [], dataSource = [], className, loading = false, rowS
|
|
|
6651
6204
|
return columns;
|
|
6652
6205
|
const checkboxColumn = {
|
|
6653
6206
|
key: '__checkbox__',
|
|
6654
|
-
label: (jsxRuntime.jsx(Checkbox, { checked: isAllSelected, indeterminate: isIndeterminate, onCheckedChange: toggleAll,
|
|
6207
|
+
label: (jsxRuntime.jsx(Checkbox, { checked: isAllSelected || isIndeterminate, indeterminate: isIndeterminate, onCheckedChange: toggleAll, disabled: rowSelection.disableSelectAll })),
|
|
6655
6208
|
render: (_, index) => {
|
|
6656
6209
|
const props = rowSelection.getCheckboxProps?.(dataSource[index], index) || {};
|
|
6657
|
-
return (jsxRuntime.jsx(Checkbox, { checked: selectedSet.has(index), onCheckedChange: () => toggleRow(index), disabled: props.disabled
|
|
6210
|
+
return (jsxRuntime.jsx(Checkbox, { checked: selectedSet.has(index), onCheckedChange: () => toggleRow(index), disabled: props.disabled }));
|
|
6658
6211
|
},
|
|
6659
6212
|
align: 'center',
|
|
6660
6213
|
};
|
|
@@ -7218,13 +6771,10 @@ exports.Dropdown = MemoizedDropdown;
|
|
|
7218
6771
|
exports.Filter = Filter;
|
|
7219
6772
|
exports.ListItem = ListItem;
|
|
7220
6773
|
exports.Menu = Menu;
|
|
7221
|
-
exports.MenuRadix = MenuRadix;
|
|
7222
6774
|
exports.Quantity = memorizedQuantity;
|
|
7223
6775
|
exports.Radio = Radio;
|
|
7224
6776
|
exports.Search = Search;
|
|
7225
6777
|
exports.Select = Select;
|
|
7226
|
-
exports.SelectField = SelectField;
|
|
7227
|
-
exports.SelectRadix = SelectRadix;
|
|
7228
6778
|
exports.Switch = Switch;
|
|
7229
6779
|
exports.Table = Table;
|
|
7230
6780
|
exports.TableHeader = TableHeader;
|