@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.esm.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import React, { useId, useMemo, useRef, useState, useEffect, useCallback, forwardRef, memo, useReducer, createElement, isValidElement, createContext, useContext } from 'react';
|
|
3
|
-
import clsx
|
|
4
|
-
import { ChevronUp16Regular, ChevronDown16Regular, ChevronLeft16Regular, ChevronRight16Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, Info20Filled, Warning20Filled, CheckmarkCircle20Filled } from '@fluentui/react-icons';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { SpinnerIos16Regular, ChevronUp16Regular, ChevronDown16Regular, ChevronLeft16Regular, ChevronRight16Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, Info20Filled, Warning20Filled, CheckmarkCircle20Filled } from '@fluentui/react-icons';
|
|
5
5
|
import { initReactI18next, useTranslation } from 'react-i18next';
|
|
6
6
|
import i18n from 'i18next';
|
|
7
7
|
import { Checkbox as Checkbox$1, Tooltip as Tooltip$1, Label, RadioGroup, DropdownMenu, Select as Select$1, Switch as Switch$1 } from 'radix-ui';
|
|
8
8
|
|
|
9
|
-
var styles$
|
|
9
|
+
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"};
|
|
10
10
|
|
|
11
11
|
let Avatar = ({ id = '', icon, size = 'small', className = '' }) => {
|
|
12
12
|
const componentId = id || useId();
|
|
13
|
-
const AvatarClass = clsx(styles$
|
|
14
|
-
[styles$
|
|
15
|
-
[styles$
|
|
13
|
+
const AvatarClass = clsx(styles$p['zds-avatar__circle'], {
|
|
14
|
+
[styles$p['zds-avatar__large']]: size === 'large',
|
|
15
|
+
[styles$p['zds-avatar__small']]: size === 'small',
|
|
16
16
|
}, className);
|
|
17
|
-
return (jsx("div", { className: AvatarClass, id: componentId, role: "img", "aria-label": `Avatar ${size}`, children: jsx("div", { className: styles$
|
|
17
|
+
return (jsx("div", { className: AvatarClass, id: componentId, role: "img", "aria-label": `Avatar ${size}`, children: jsx("div", { className: styles$p['zds-avatar__circle__icon'], children: icon }) }));
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
var styles$
|
|
20
|
+
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"};
|
|
21
21
|
|
|
22
22
|
const Badge = ({ children, badgeValue = null, type = 'notification', className = '', id, 'aria-label': ariaLabel, }) => {
|
|
23
23
|
const isEmpty = badgeValue === null || badgeValue === undefined || badgeValue === '';
|
|
@@ -40,20 +40,21 @@ const Badge = ({ children, badgeValue = null, type = 'notification', className =
|
|
|
40
40
|
};
|
|
41
41
|
const displayValue = getDisplayValue(badgeValue);
|
|
42
42
|
if (type === 'notification') {
|
|
43
|
-
return (jsxs("div", { className: clsx(styles$
|
|
44
|
-
[styles$
|
|
45
|
-
[styles$
|
|
46
|
-
}, className), "data-testid": "badge-notification", children: !isEmpty && (jsx("span", { className: styles$
|
|
43
|
+
return (jsxs("div", { className: clsx(styles$o['zds-badge__container']), children: [jsx("div", { id: componentId, className: clsx(styles$o['zds-badge'], {
|
|
44
|
+
[styles$o['zds-badge__small']]: Number(badgeValue) <= 10,
|
|
45
|
+
[styles$o['zds-badge__large']]: Number(badgeValue) > 10,
|
|
46
|
+
}, className), "data-testid": "badge-notification", children: !isEmpty && (jsx("span", { className: styles$o['zds-badge__value'], "aria-hidden": ariaLabel ? 'true' : 'false', children: displayValue })) }), children && (jsx("div", { className: styles$o['zds-badge__content'], "data-testid": "badge-content", children: children }))] }));
|
|
47
47
|
}
|
|
48
|
-
return (jsx("div", { className: clsx(styles$
|
|
49
|
-
[styles$
|
|
50
|
-
}, className), "data-testid": "badge-status", children: !isEmpty && (jsx("span", { className: styles$
|
|
48
|
+
return (jsx("div", { className: clsx(styles$o['zds-badge__container']), children: jsx("div", { className: clsx(styles$o['zds-badge__status'], {
|
|
49
|
+
[styles$o['zds-badge__status__empty']]: isEmpty,
|
|
50
|
+
}, className), "data-testid": "badge-status", children: !isEmpty && (jsx("span", { className: styles$o['zds-badge__status-value'], "aria-hidden": ariaLabel ? 'true' : 'false', children: displayValue })) }) }));
|
|
51
51
|
};
|
|
52
52
|
|
|
53
|
-
var styles$
|
|
53
|
+
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"};
|
|
54
54
|
|
|
55
|
-
const Button = React.forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel,
|
|
56
|
-
const
|
|
55
|
+
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) => {
|
|
56
|
+
const generatedId = useId();
|
|
57
|
+
const componentId = id || generatedId;
|
|
57
58
|
const getComponent = () => {
|
|
58
59
|
if (as)
|
|
59
60
|
return as;
|
|
@@ -67,21 +68,18 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
67
68
|
const hasContent = useMemo(() => {
|
|
68
69
|
return children && React.Children.count(children) > 0;
|
|
69
70
|
}, [children]);
|
|
70
|
-
const buttonClasses = clsx(styles$
|
|
71
|
-
[styles$
|
|
72
|
-
[styles$
|
|
73
|
-
[styles$
|
|
74
|
-
[styles$
|
|
75
|
-
[styles$
|
|
76
|
-
[styles$
|
|
71
|
+
const buttonClasses = clsx(styles$n.button, styles$n[`button-${variant}`], styles$n[`button-${size}`], {
|
|
72
|
+
[styles$n['buttonLoading']]: loading,
|
|
73
|
+
[styles$n['buttonWithIcon']]: icon && !iconOnly,
|
|
74
|
+
[styles$n[`buttonIconPosition-${iconPosition}`]]: icon && !iconOnly,
|
|
75
|
+
[styles$n['buttonNoContent']]: icon && !hasContent && !iconOnly,
|
|
76
|
+
[styles$n['buttonFullWidth']]: fullWidth,
|
|
77
|
+
[styles$n['buttonIconOnly']]: iconOnly,
|
|
77
78
|
}, className);
|
|
78
79
|
const getAriaLabel = () => {
|
|
79
80
|
if (ariaLabel)
|
|
80
81
|
return ariaLabel;
|
|
81
82
|
if (iconOnly && !ariaLabel) {
|
|
82
|
-
if (process.env.NODE_ENV === 'development') {
|
|
83
|
-
console.warn('Button: Icon-only buttons should have an ariaLabel for accessibility');
|
|
84
|
-
}
|
|
85
83
|
return 'Botão de ação';
|
|
86
84
|
}
|
|
87
85
|
if (typeof children === 'string')
|
|
@@ -96,10 +94,13 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
96
94
|
onClick?.(e);
|
|
97
95
|
};
|
|
98
96
|
const renderContent = () => {
|
|
99
|
-
if (iconOnly &&
|
|
100
|
-
return (jsx("span", { className: styles$
|
|
97
|
+
if (iconOnly && !loading) {
|
|
98
|
+
return (jsx("span", { className: styles$n.buttonIconOnly, "aria-hidden": "true", children: icon }));
|
|
101
99
|
}
|
|
102
|
-
|
|
100
|
+
if (loading) {
|
|
101
|
+
return (jsx("span", { className: styles$n.buttonLoading, "aria-hidden": "true", children: jsx(SpinnerIos16Regular, { "aria-hidden": "true" }) }));
|
|
102
|
+
}
|
|
103
|
+
return (jsxs(Fragment, { children: [icon && (iconPosition === 'left' || iconPosition === 'both') && (jsx("span", { className: styles$n.buttonIconLeft, "aria-hidden": "true", children: icon })), children, icon && (iconPosition === 'right' || iconPosition === 'both') && (jsx("span", { className: styles$n.buttonIconRight, "aria-hidden": "true", children: icon }))] }));
|
|
103
104
|
};
|
|
104
105
|
const baseProps = {
|
|
105
106
|
ref,
|
|
@@ -123,7 +124,6 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
123
124
|
if (Component !== 'a') {
|
|
124
125
|
return {
|
|
125
126
|
to: disabled ? '#' : to,
|
|
126
|
-
...routerProps,
|
|
127
127
|
};
|
|
128
128
|
}
|
|
129
129
|
return {
|
|
@@ -142,7 +142,7 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
142
142
|
});
|
|
143
143
|
Button.displayName = 'Button';
|
|
144
144
|
|
|
145
|
-
var styles$
|
|
145
|
+
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"};
|
|
146
146
|
|
|
147
147
|
// i18n.ts
|
|
148
148
|
// Resources configuration
|
|
@@ -502,8 +502,8 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
502
502
|
* Renderiza os anos usando o array de objetos memoizado.
|
|
503
503
|
*/
|
|
504
504
|
const renderYears = useCallback(() => {
|
|
505
|
-
return yearsArray.map((item) => (jsx("div", { className: clsx(styles$
|
|
506
|
-
[styles$
|
|
505
|
+
return yearsArray.map((item) => (jsx("div", { className: clsx(styles$m['zds-calendar__year'], {
|
|
506
|
+
[styles$m['zds-calendar__year--current']]: item.isCurrent,
|
|
507
507
|
}), onClick: () => handleYearSelect(item.year), tabIndex: 0, role: "button", "aria-pressed": item.isCurrent, "aria-label": item.isCurrent
|
|
508
508
|
? locale === 'en-us'
|
|
509
509
|
? `Current year, ${item.year}`
|
|
@@ -523,14 +523,14 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
523
523
|
const renderDays = useCallback(() => {
|
|
524
524
|
return daysArray.map((item) => {
|
|
525
525
|
if (item.type === 'empty') {
|
|
526
|
-
return (jsx("div", { className: clsx(styles$
|
|
526
|
+
return (jsx("div", { className: clsx(styles$m['zds-calendar__day'], styles$m['zds-calendar__day--empty']), "aria-hidden": "true" }, item.key));
|
|
527
527
|
}
|
|
528
528
|
const dayItem = item;
|
|
529
529
|
const isDisabled = !isDateInRange(dayItem.date);
|
|
530
|
-
return (jsx("div", { className: clsx(styles$
|
|
531
|
-
[styles$
|
|
532
|
-
[styles$
|
|
533
|
-
[styles$
|
|
530
|
+
return (jsx("div", { className: clsx(styles$m['zds-calendar__day'], {
|
|
531
|
+
[styles$m['zds-calendar__day--today']]: dayItem.isToday,
|
|
532
|
+
[styles$m['zds-calendar__day--selected']]: dayItem.isSelected,
|
|
533
|
+
[styles$m['zds-calendar__day--disabled']]: isDisabled,
|
|
534
534
|
}), 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));
|
|
535
535
|
});
|
|
536
536
|
}, [
|
|
@@ -546,7 +546,7 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
546
546
|
const weekdaysComponent = useMemo(() => {
|
|
547
547
|
if (changeView)
|
|
548
548
|
return null;
|
|
549
|
-
return weekDaysLabels.map((day, idx) => (jsx("div", { className: styles$
|
|
549
|
+
return weekDaysLabels.map((day, idx) => (jsx("div", { className: styles$m['zds-calendar__weekday'], children: day }, `${day}-${idx}`)));
|
|
550
550
|
}, [changeView, weekDaysLabels]);
|
|
551
551
|
// ✅ Limpa o anúncio após um tempo para evitar repetições
|
|
552
552
|
useEffect(() => {
|
|
@@ -561,13 +561,13 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
561
561
|
setYearRangeStart(year - 13);
|
|
562
562
|
}
|
|
563
563
|
}, [changeView, year]);
|
|
564
|
-
return (jsxs("div", { className: clsx(styles$
|
|
564
|
+
return (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: [jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: styles$m['zds-calendar__aria-live'], style: {
|
|
565
565
|
position: 'absolute',
|
|
566
566
|
width: 1,
|
|
567
567
|
height: 1,
|
|
568
568
|
overflow: 'hidden',
|
|
569
569
|
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
570
|
-
}, children: announcement }), jsxs("div", { className: styles$
|
|
570
|
+
}, children: announcement }), jsxs("div", { className: styles$m['zds-calendar__header'], children: [jsxs("span", { className: styles$m['zds-calendar__month-name'], onClick: handleToggleView, onKeyDown: (e) => {
|
|
571
571
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
572
572
|
e.preventDefault();
|
|
573
573
|
handleToggleView();
|
|
@@ -578,7 +578,7 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
578
578
|
: 'Fechar seleção de ano'
|
|
579
579
|
: locale === 'en-us'
|
|
580
580
|
? 'Open year selection'
|
|
581
|
-
: 'Abrir seleção de ano', children: [`${getMonthName()} ${year}`, changeView ? (jsx(ChevronUp16Regular, { "aria-hidden": "true" })) : (jsx(ChevronDown16Regular, { "aria-hidden": "true" }))] }), jsxs("div", { className: styles$
|
|
581
|
+
: 'Abrir seleção de ano', children: [`${getMonthName()} ${year}`, changeView ? (jsx(ChevronUp16Regular, { "aria-hidden": "true" })) : (jsx(ChevronDown16Regular, { "aria-hidden": "true" }))] }), jsxs("div", { className: styles$m['zds-calendar__navigation'], children: [jsx("button", { onClick: handlePrevMonth, "aria-label": changeView
|
|
582
582
|
? locale === 'en-us'
|
|
583
583
|
? 'Show previous years'
|
|
584
584
|
: 'Mostrar anos anteriores'
|
|
@@ -590,27 +590,27 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
590
590
|
: 'Mostrar próximos anos'
|
|
591
591
|
: locale === 'en-us'
|
|
592
592
|
? `Next month, ${new Date(year, month + 1, 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}`
|
|
593
|
-
: `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: jsx(ChevronRight16Regular, { "aria-hidden": "true" }) })] })] }), jsx("div", { className: styles$
|
|
593
|
+
: `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: jsx(ChevronRight16Regular, { "aria-hidden": "true" }) })] })] }), jsx("div", { className: styles$m['zds-calendar__weekdays'], children: weekdaysComponent }), jsx("div", { className: styles$m['zds-calendar__grid'], children: changeView ? (jsx("div", { className: styles$m['zds-calendar__year-view'], role: "grid", "aria-label": t('yearSelection'), children: renderYears() })) : (jsx("div", { className: styles$m['zds-calendar__days'], role: "grid", "aria-label": `${getMonthName()} ${year}`, children: renderDays() })) }), jsx("div", { className: styles$m['zds-calendar__clear'], children: jsx(Button, { size: "sm", variant: "outlined", onClick: handleClearDate, disabled: !selectedDate, children: "Limpar" }) })] }));
|
|
594
594
|
};
|
|
595
595
|
// ✅ Default props integrados na função usando valores padrão dos parâmetros
|
|
596
596
|
Calendar.displayName = 'Calendar';
|
|
597
597
|
const MemoizedCalendar = React.memo(Calendar);
|
|
598
598
|
MemoizedCalendar.displayName = 'Calendar';
|
|
599
599
|
|
|
600
|
-
var styles$
|
|
600
|
+
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"};
|
|
601
601
|
|
|
602
602
|
const Callout = ({ type = 'neutral', title = null, text = '', icon = null, className = '', id = '' }) => {
|
|
603
603
|
const generatedId = useId();
|
|
604
604
|
const titleId = id || `callout-title-${generatedId}`;
|
|
605
605
|
const componentId = id || generatedId;
|
|
606
|
-
const calloutClass = clsx(styles$
|
|
607
|
-
[styles$
|
|
608
|
-
[styles$
|
|
606
|
+
const calloutClass = clsx(styles$l['zds-callout__container'], styles$l[`zds-callout__${type}`], {
|
|
607
|
+
[styles$l['zds-callout__container__with-title']]: title,
|
|
608
|
+
[styles$l['zds-callout__no-icon']]: !icon,
|
|
609
609
|
}, className);
|
|
610
|
-
return (jsx("div", { id: componentId, className: calloutClass, "aria-live": "polite", role: "alert", "aria-labelledby": title ? titleId : undefined, children: jsxs("div", { className: styles$
|
|
610
|
+
return (jsx("div", { id: componentId, className: calloutClass, "aria-live": "polite", role: "alert", "aria-labelledby": title ? titleId : undefined, children: jsxs("div", { className: styles$l['zds-callout__content'], children: [icon && jsx("span", { className: styles$l['zds-callout__icon'], children: icon }), jsxs("div", { className: styles$l['zds-callout__subcontent'], children: [title && (jsx("span", { id: titleId, className: styles$l['zds-callout__title'], children: title })), text && jsx("span", { className: styles$l['zds-callout__text'], children: text })] })] }) }));
|
|
611
611
|
};
|
|
612
612
|
|
|
613
|
-
var styles$
|
|
613
|
+
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"};
|
|
614
614
|
|
|
615
615
|
const CheckSmall = ({ className = '', width = 12, height = 10, fill = 'white', ...restProps }) => {
|
|
616
616
|
return (jsx("svg", { width: width, height: height, viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": "true", ...restProps, children: jsx("path", { d: "M4 9.4L0 5.4L1.4 4L4 6.6L10.6 0L12 1.4L4 9.4Z", fill: fill }) }));
|
|
@@ -622,12 +622,12 @@ const CheckHalf = ({ className = '', width = 16, height = 16, fill = 'white', ..
|
|
|
622
622
|
|
|
623
623
|
const Checkbox = ({ id, label = '', onCheckedChange, checked, disabled, className, indeterminate = false, ...rest }) => {
|
|
624
624
|
const componentId = id || useId();
|
|
625
|
-
return (jsxs("div", { className: clsx(styles$
|
|
626
|
-
[styles$
|
|
627
|
-
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsx(Checkbox$1.Root, { className: styles$
|
|
625
|
+
return (jsxs("div", { className: clsx(styles$k.container, className), children: [jsx("div", { className: clsx(styles$k.wrapperCheckbox, {
|
|
626
|
+
[styles$k.disabled]: disabled,
|
|
627
|
+
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsx(Checkbox$1.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: jsx(Checkbox$1.Indicator, { className: styles$k.indicator, children: indeterminate ? jsx(CheckHalf, {}) : jsx(CheckSmall, {}) }) }) }), jsx("label", { className: clsx(styles$k.label, { [styles$k.disabled]: disabled }), htmlFor: componentId, children: label })] }));
|
|
628
628
|
};
|
|
629
629
|
|
|
630
|
-
var styles$
|
|
630
|
+
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"};
|
|
631
631
|
|
|
632
632
|
/**
|
|
633
633
|
* Componente Chips para exibir tags/etiquetas com ícones opcionais
|
|
@@ -637,33 +637,33 @@ const Chips = ({ title, leftIcon = null, rightIcon = null, type = 'neutral', dis
|
|
|
637
637
|
console.warn('Chips: title prop is required and cannot be empty');
|
|
638
638
|
return null;
|
|
639
639
|
}
|
|
640
|
-
const chipsClass = clsx(styles$
|
|
641
|
-
[styles$
|
|
642
|
-
[styles$
|
|
643
|
-
[styles$
|
|
640
|
+
const chipsClass = clsx(styles$j['zds-chips'], styles$j[`zds-chips--${type}`], {
|
|
641
|
+
[styles$j['zds-chips--disabled']]: disabled,
|
|
642
|
+
[styles$j['has-left-icon']]: leftIcon,
|
|
643
|
+
[styles$j['has-right-icon']]: rightIcon,
|
|
644
644
|
}, className);
|
|
645
|
-
return (jsxs("div", { className: chipsClass, "aria-label": `Chip: ${title}`, "aria-disabled": disabled, children: [leftIcon && (jsx("span", { className: styles$
|
|
645
|
+
return (jsxs("div", { className: chipsClass, "aria-label": `Chip: ${title}`, "aria-disabled": disabled, children: [leftIcon && (jsx("span", { className: styles$j['zds-chips__icon__left'], "aria-hidden": "true", children: leftIcon })), jsx("span", { className: styles$j['zds-chips__title'], children: title }), rightIcon && (jsx("span", { className: styles$j['zds-chips__icon__right'], children: rightIcon }))] }));
|
|
646
646
|
};
|
|
647
647
|
const MemoizedChips = React.memo(Chips);
|
|
648
648
|
MemoizedChips.displayName = 'Chips';
|
|
649
649
|
|
|
650
|
-
var styles$
|
|
650
|
+
var styles$i = {"container":"Container-module__container___exPuE"};
|
|
651
651
|
|
|
652
652
|
function Container({ children }) {
|
|
653
|
-
return (jsx("main", { className: `${styles$
|
|
653
|
+
return (jsx("main", { className: `${styles$i['container']} mx-auto`, children: children }));
|
|
654
654
|
}
|
|
655
655
|
|
|
656
|
-
var styles$
|
|
656
|
+
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"};
|
|
657
657
|
|
|
658
|
-
var styles$
|
|
658
|
+
var styles$g = {"tooltipContent":"Tooltip-module__tooltipContent___xycUg","triggerWrapper":"Tooltip-module__triggerWrapper___x83XR"};
|
|
659
659
|
|
|
660
660
|
const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, sideOffset = 10 }) => {
|
|
661
|
-
return (jsx(Tooltip$1.Provider, { children: jsxs(Tooltip$1.Root, { children: [jsx(Tooltip$1.Trigger, { asChild: true, children: jsx("span", { className: styles$
|
|
661
|
+
return (jsx(Tooltip$1.Provider, { children: jsxs(Tooltip$1.Root, { children: [jsx(Tooltip$1.Trigger, { asChild: true, children: jsx("span", { className: styles$g.triggerWrapper, children: children }) }), jsx(Tooltip$1.Portal, { children: jsx(Tooltip$1.Content, { className: styles$g.tooltipContent, side: side, align: align, sideOffset: sideOffset, style: { maxWidth: maxWidth ? `${maxWidth}px` : 'auto' }, children: text }) })] }) }));
|
|
662
662
|
};
|
|
663
663
|
|
|
664
|
-
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) => (jsx(Fragment, { children: tooltip ? (jsx(Tooltip, { side: side, align: align, text: tooltipText || '', children: jsxs(Label.Root, { className: clsx(styles$
|
|
664
|
+
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) => (jsx(Fragment, { children: tooltip ? (jsx(Tooltip, { side: side, align: align, text: tooltipText || '', children: jsxs(Label.Root, { className: clsx(styles$h.wrapperLabel, error && styles$h.errorLabel, className), htmlFor: htmlFor, children: [children, required && jsx("span", { className: styles$h.requiredLabel, children: "*" }), jsx(Info12Regular, { className: styles$h.infoIcon })] }) })) : (jsxs(Label.Root, { className: clsx(styles$h.wrapperLabel, error && styles$h.errorLabel, disabled && styles$h.disabledLabel, className), htmlFor: htmlFor, children: [children, required && jsx("span", { className: styles$h.requiredLabel, children: "*" })] })) }));
|
|
665
665
|
|
|
666
|
-
var styles$
|
|
666
|
+
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"};
|
|
667
667
|
|
|
668
668
|
const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
669
669
|
if (required && value.trim() === '') {
|
|
@@ -718,15 +718,15 @@ const TextField = forwardRef(({ className, value = '', label, placeholder, type
|
|
|
718
718
|
: helperText
|
|
719
719
|
? `${componentId}-helper`
|
|
720
720
|
: undefined;
|
|
721
|
-
const containerClass = clsx(styles$
|
|
722
|
-
[styles$
|
|
723
|
-
[styles$
|
|
721
|
+
const containerClass = clsx(styles$f.container, {
|
|
722
|
+
[styles$f.error]: hasError,
|
|
723
|
+
[styles$f.disabled]: disabled,
|
|
724
724
|
[className]: className,
|
|
725
725
|
});
|
|
726
|
-
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$
|
|
726
|
+
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$f.inputWrapper, children: [jsxs("div", { className: styles$f.inputContainer, children: [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 && jsx("span", { className: styles$f.icon, children: icon }), showClearIcon && (jsx("button", { type: "button", className: styles$f.clearButton, onMouseDown: (e) => {
|
|
727
727
|
e.preventDefault();
|
|
728
728
|
handleClear();
|
|
729
|
-
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx(Dismiss16Regular, {}) }))] }), jsx("span", { id: helperId, className: styles$
|
|
729
|
+
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx(Dismiss16Regular, {}) }))] }), jsx("span", { id: helperId, className: styles$f.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText })] })] }));
|
|
730
730
|
});
|
|
731
731
|
TextField.displayName = 'TextField';
|
|
732
732
|
var TextField$1 = React.memo(TextField);
|
|
@@ -824,7 +824,7 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
824
824
|
return date;
|
|
825
825
|
}
|
|
826
826
|
|
|
827
|
-
var styles$
|
|
827
|
+
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"};
|
|
828
828
|
|
|
829
829
|
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, }) => {
|
|
830
830
|
// ✅ IDs únicos para acessibilidade
|
|
@@ -1006,13 +1006,13 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText =
|
|
|
1006
1006
|
setTempInputValue(formatDate(currentSelectedDate, locale));
|
|
1007
1007
|
}
|
|
1008
1008
|
}, [locale, currentSelectedDate, isEditing]);
|
|
1009
|
-
return (jsx("div", { ref: wrapperRef, children: jsxs("div", { className: clsx(styles$
|
|
1009
|
+
return (jsx("div", { ref: wrapperRef, children: jsxs("div", { className: clsx(styles$e['zds-date-picker']), children: [jsx("div", { onClick: handleFieldClick, onFocus: handleFieldFocus, onKeyDown: handleKeyDown, style: { cursor: 'pointer' }, children: jsx(TextField$1, { type: "tel", icon: jsx(Calendar16Regular, { onClick: handleIconClick, style: { cursor: 'pointer' } }), onChange: (e) => {
|
|
1010
1010
|
handleTextFieldChange(String(e));
|
|
1011
|
-
}, "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 }) }), jsx("div", { className: clsx(styles$
|
|
1011
|
+
}, "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 }) }), 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 && (jsx(MemoizedCalendar, { selectedDate: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy' })) })] }) }));
|
|
1012
1012
|
};
|
|
1013
1013
|
var DatePicker_default = React.memo(DatePicker);
|
|
1014
1014
|
|
|
1015
|
-
var styles$
|
|
1015
|
+
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"};
|
|
1016
1016
|
|
|
1017
1017
|
const useFocusTrap = (isActive) => {
|
|
1018
1018
|
const containerRef = useRef(null);
|
|
@@ -1095,13 +1095,13 @@ const Dialog = ({ show, title, text, textConfirm = 'OK', textCancel = 'Cancelar'
|
|
|
1095
1095
|
}, [show, handleCancel]);
|
|
1096
1096
|
if (!show)
|
|
1097
1097
|
return null;
|
|
1098
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1098
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$d['zds-dialog__overlay'] }), jsx("div", { className: styles$d['zds-dialog__wrapper'], children: 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: [jsx("div", { id: `zds-dialog-title-${id}`, className: styles$d['zds-dialog__title'], children: title }), jsx("div", { id: `zds-dialog-desc-${id}`, className: styles$d['zds-dialog__text'], children: text }), jsxs("div", { className: styles$d['zds-dialog__actions'], children: [!!(textCancel && textCancel.trim()) && (jsx(Button, { variant: "outlined", onClick: handleCancel, children: textCancel })), jsx(Button, { variant: "filled", onClick: handleConfirm, children: textConfirm })] })] }) })] }));
|
|
1099
1099
|
};
|
|
1100
1100
|
// Memoização para otimização de performance
|
|
1101
1101
|
const MemoizedDialog = React.memo(Dialog);
|
|
1102
1102
|
MemoizedDialog.displayName = 'Dialog';
|
|
1103
1103
|
|
|
1104
|
-
var styles$
|
|
1104
|
+
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"};
|
|
1105
1105
|
|
|
1106
1106
|
/**
|
|
1107
1107
|
* Componente Drawer do Zanthus Design System
|
|
@@ -1183,20 +1183,20 @@ onClose, title = 'Título', isOpen = false, onOpen, className = '', id, disabled
|
|
|
1183
1183
|
event.stopPropagation();
|
|
1184
1184
|
internalClose();
|
|
1185
1185
|
};
|
|
1186
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$
|
|
1187
|
-
[styles$
|
|
1188
|
-
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$
|
|
1189
|
-
[styles$
|
|
1190
|
-
[styles$
|
|
1186
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$c['zds-custom__drawer-shadow'], {
|
|
1187
|
+
[styles$c['zds-custom__drawer-shadow--visible']]: isOpen,
|
|
1188
|
+
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$c['zds-custom__drawer-sidebar'], {
|
|
1189
|
+
[styles$c['zds-custom__drawer-sidebar--open']]: isOpen,
|
|
1190
|
+
[styles$c['zds-custom__drawer-sidebar--disabled']]: disabled,
|
|
1191
1191
|
}, className), style: {
|
|
1192
1192
|
// ✅ APENAS: Width customizável via CSS custom property
|
|
1193
1193
|
'--drawer-custom-width': customWidth,
|
|
1194
|
-
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, children: [jsxs("div", { className: clsx(styles$
|
|
1194
|
+
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, children: [jsxs("div", { className: clsx(styles$c['zds-drawer__title-close']), children: [jsx("div", { className: clsx(styles$c['zds-drawer__title']), id: id ? `${id}-title` : 'drawer-title', children: title }), jsx(Button, { onClick: handleCloseClick, variant: 'text', iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: 'lg' })] }), jsx("div", { className: clsx(styles$c['zds-drawer__children']), "data-testid": "drawer-content", children: children })] })] }));
|
|
1195
1195
|
};
|
|
1196
1196
|
|
|
1197
|
-
var styles$
|
|
1197
|
+
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"};
|
|
1198
1198
|
|
|
1199
|
-
const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, id = '', className = '', }, ref) => {
|
|
1199
|
+
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) => {
|
|
1200
1200
|
const [internalValue, setInternalValue] = useState('');
|
|
1201
1201
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
1202
1202
|
const currentValue = isControlled ? value : internalValue;
|
|
@@ -1241,11 +1241,11 @@ const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado',
|
|
|
1241
1241
|
return;
|
|
1242
1242
|
onKeyDown?.(e);
|
|
1243
1243
|
};
|
|
1244
|
-
const searchClass = clsx(styles$
|
|
1244
|
+
const searchClass = clsx(styles$b['zds-search'], {
|
|
1245
1245
|
disabled,
|
|
1246
1246
|
[className]: className,
|
|
1247
1247
|
});
|
|
1248
|
-
return (jsxs("div", { className: searchClass, onClick: onClick, onMouseDown: onMouseDown, children: [jsx("span", { className: clsx(styles$
|
|
1248
|
+
return (jsxs("div", { className: searchClass, onClick: onClick, onMouseDown: onMouseDown, children: [jsx("span", { className: clsx(styles$b['zds-search__leftIcon'], { disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsx(Search16Regular, {}) }), 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 && (jsx("span", { className: styles$b['zds-search__clearIcon'], "aria-hidden": "true", onClick: clearInputSearch, children: jsx(Dismiss16Regular, {}) }))] }));
|
|
1249
1249
|
});
|
|
1250
1250
|
Search.displayName = 'ZdsSearch';
|
|
1251
1251
|
|
|
@@ -1280,7 +1280,7 @@ const validateItems = (items, type) => {
|
|
|
1280
1280
|
});
|
|
1281
1281
|
};
|
|
1282
1282
|
|
|
1283
|
-
var styles$
|
|
1283
|
+
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"};
|
|
1284
1284
|
|
|
1285
1285
|
/**
|
|
1286
1286
|
* Hook otimizado para scroll infinito usando IntersectionObserver
|
|
@@ -1545,17 +1545,17 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1545
1545
|
const renderItemContent = useCallback((item, index) => {
|
|
1546
1546
|
const itemId = item.id || `dropdown-item-${index}`;
|
|
1547
1547
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
1548
|
-
return (jsxs("div", { className: clsx(styles$
|
|
1549
|
-
[styles$
|
|
1548
|
+
return (jsxs("div", { className: clsx(styles$a['zds-dropdown__item-content'], {
|
|
1549
|
+
[styles$a['zds-dropdown__item-content--disabled']]: item.disabled,
|
|
1550
1550
|
}), children: [type === 'checkbox' && (jsx(Checkbox, { checked: !!currentSelection[itemId], onCheckedChange: (checked) => {
|
|
1551
1551
|
if (checked === 'indeterminate')
|
|
1552
1552
|
return;
|
|
1553
1553
|
toggleSelection(itemId, item);
|
|
1554
|
-
}, disabled: item.disabled, label: "" })), type === 'icon' && item.icon && (jsx("div", { className: styles$
|
|
1554
|
+
}, disabled: item.disabled, label: "" })), type === 'icon' && item.icon && (jsx("div", { className: styles$a['zds-dropdown__item-icon-container'], children: jsx("span", { className: styles$a['zds-dropdown__item-icon'], onClick: (event) => {
|
|
1555
1555
|
event.preventDefault();
|
|
1556
1556
|
event.stopPropagation();
|
|
1557
1557
|
handleItemClick(event, itemId, item);
|
|
1558
|
-
}, children: item.icon }) })), jsxs("div", { className: styles$
|
|
1558
|
+
}, children: item.icon }) })), jsxs("div", { className: styles$a['zds-dropdown__item-text'], children: [jsx("span", { id: `dropdown-item-${itemId}-label`, className: styles$a['zds-dropdown__title'], children: item.text }), showSubText && item.subText && (jsx("span", { id: `dropdown-item-${itemId}-desc`, className: styles$a['zds-dropdown__subtext'], children: item.subText }))] })] }));
|
|
1559
1559
|
}, [
|
|
1560
1560
|
type,
|
|
1561
1561
|
selectedItems,
|
|
@@ -1620,10 +1620,10 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1620
1620
|
isSearchFocused,
|
|
1621
1621
|
handleSearchClear,
|
|
1622
1622
|
]);
|
|
1623
|
-
const DropdownClass = clsx(styles$
|
|
1623
|
+
const DropdownClass = clsx(styles$a['zds-dropdown__container'], styles$a[`zds-dropdown__container--${position}`], {
|
|
1624
1624
|
[className || '']: className,
|
|
1625
|
-
[styles$
|
|
1626
|
-
[styles$
|
|
1625
|
+
[styles$a['zds-dropdown__container--search-active']]: searchQuery.length > 0,
|
|
1626
|
+
[styles$a['zds-dropdown__container--fixed-width']]: !!maxWidth,
|
|
1627
1627
|
});
|
|
1628
1628
|
const dropdownStyles = useMemo(() => {
|
|
1629
1629
|
const styles = {};
|
|
@@ -1645,14 +1645,14 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1645
1645
|
}
|
|
1646
1646
|
return styles;
|
|
1647
1647
|
}, [maxWidth, minWidth, width, maxHeight]);
|
|
1648
|
-
return (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: jsxs("ul", { className: styles$
|
|
1648
|
+
return (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: 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 && (jsx("li", { role: "none", className: styles$a['zds-dropdown__search-container'], children: 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) => {
|
|
1649
1649
|
const itemId = generateItemId(item, index);
|
|
1650
1650
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
1651
|
-
return (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$
|
|
1652
|
-
[styles$
|
|
1653
|
-
[styles$
|
|
1654
|
-
[styles$
|
|
1655
|
-
[styles$
|
|
1651
|
+
return (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'], {
|
|
1652
|
+
[styles$a[`zds-dropdown__item--${type}`]]: type,
|
|
1653
|
+
[styles$a['zds-dropdown__item--selected']]: currentSelection[itemId],
|
|
1654
|
+
[styles$a['zds-dropdown__item--focused']]: focusedIndex === index,
|
|
1655
|
+
[styles$a['zds-dropdown__item--disabled']]: item.disabled,
|
|
1656
1656
|
}), tabIndex: focusedIndex === index ? 0 : -1, onFocus: () => setFocusedIndex(index), onClick: (event) => {
|
|
1657
1657
|
event.stopPropagation();
|
|
1658
1658
|
handleItemClick(event, itemId, item);
|
|
@@ -1662,12 +1662,12 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1662
1662
|
setFocusedIndex(index);
|
|
1663
1663
|
}
|
|
1664
1664
|
}, children: renderItemContent(item, index) }, itemId));
|
|
1665
|
-
})) : (jsx("li", { className: styles$
|
|
1665
|
+
})) : (jsx("li", { className: styles$a['zds-dropdown__no-results'], role: "status", "aria-live": "polite", children: "Nenhum item corresponde \u00E0 sua busca" })), filter && (jsxs("div", { className: styles$a['zds-dropdown__container-filter'], children: [jsx(Button, { size: "sm", variant: "outlined", onClick: handleClearFilter, children: "Limpar" }), jsx(Button, { size: "sm", onClick: handleApplyFilter, children: "Aplicar" })] })), infiniteScrollHook && infiniteScrollHook.hasNextPage && (jsx("li", { role: "none", className: styles$a['zds-dropdown__infinite-scroll-trigger'], children: jsx("div", { ref: infiniteScrollHook.observerRef, className: styles$a['zds-dropdown__loading-indicator'], children: infiniteScroll?.status === 'loading' ? (jsx("span", { children: "Carregando..." })) : (jsx("span", { children: "Trigger" })) }) }))] }) }));
|
|
1666
1666
|
};
|
|
1667
1667
|
const MemoizedDropdown = React.memo(Dropdown);
|
|
1668
1668
|
MemoizedDropdown.displayName = 'Dropdown';
|
|
1669
1669
|
|
|
1670
|
-
var styles$
|
|
1670
|
+
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"};
|
|
1671
1671
|
|
|
1672
1672
|
// ✅ CORREÇÃO: Problema de loop infinito no useEffect
|
|
1673
1673
|
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', }) => {
|
|
@@ -1752,25 +1752,25 @@ const Filter = ({ items = [], type = 'checkbox', selectedIds = [], onApplyFilter
|
|
|
1752
1752
|
}
|
|
1753
1753
|
return () => document.removeEventListener('keydown', handleEscape);
|
|
1754
1754
|
}, [isOpen, onClose]);
|
|
1755
|
-
const filterClass = clsx(styles$
|
|
1756
|
-
const dropdownClass = clsx(styles$
|
|
1757
|
-
[styles$
|
|
1755
|
+
const filterClass = clsx(styles$9['zds-filter__container'], className);
|
|
1756
|
+
const dropdownClass = clsx(styles$9['zds-filter__dropdown'], {
|
|
1757
|
+
[styles$9[`zds-filter__dropdown--${position}`]]: position,
|
|
1758
1758
|
});
|
|
1759
|
-
return (jsxs("div", { ref: filterRef, className: filterClass, children: [jsx(Button, { variant: variant, onClick: handleToggle, disabled: disabled, icon: type === 'calendar' ? jsx(Calendar16Regular, {}) : jsx(ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxs("div", { className: styles$
|
|
1759
|
+
return (jsxs("div", { ref: filterRef, className: filterClass, children: [jsx(Button, { variant: variant, onClick: handleToggle, disabled: disabled, icon: type === 'calendar' ? jsx(Calendar16Regular, {}) : jsx(ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxs("div", { className: styles$9['zds-filter-button__content'], children: [icon && jsx("span", { className: styles$9['zds-filter-button__icon'], children: icon }), jsx("span", { className: styles$9['zds-filter-button__text'], children: buttonDisplayText }), jsx("span", { className: `${styles$9['zds-filter-button__arrow']} ${isOpen ? styles$9['zds-filter-button__arrow--open'] : ''}`, children: getBadgeValue() && (jsx(Badge, { badgeValue: `+${getBadgeValue()}`, type: "status" })) })] }) }), isOpen && (jsx("div", { className: dropdownClass, children: type === 'calendar' ? (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" })) : (jsx(MemoizedDropdown, { items: items, type: type, defaultSelectedIds: selectedIds, placeholder: placeholder, applySearch: enableSearch, filter: true, onSelectionChange: handleApplyFilter })) }))] }));
|
|
1760
1760
|
};
|
|
1761
1761
|
|
|
1762
|
-
var styles$
|
|
1762
|
+
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"};
|
|
1763
1763
|
|
|
1764
1764
|
const Radio = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', ...rest }) => {
|
|
1765
1765
|
const componentId = id || useId();
|
|
1766
|
-
return (jsx(RadioGroup.Root, { id: componentId, className: styles$
|
|
1766
|
+
return (jsx(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 }) => {
|
|
1767
1767
|
const itemKey = id ?? value;
|
|
1768
1768
|
const uniqueId = `${componentId}-item-${value}`;
|
|
1769
|
-
return (jsx("div", { className: clsx(styles$
|
|
1769
|
+
return (jsx("div", { className: clsx(styles$8.wrapper, { [styles$8.disabled]: disabled }), children: jsxs("label", { className: styles$8.labelWrapper, htmlFor: uniqueId, children: [jsx("div", { className: styles$8.itemWrapper, children: jsx(RadioGroup.Item, { disabled: disabled, className: styles$8.item, value: value, id: uniqueId, "data-disabled": disabled, children: jsx(RadioGroup.Indicator, { className: styles$8.indicator }) }) }), jsx("span", { className: styles$8.labelText, children: label })] }) }, itemKey));
|
|
1770
1770
|
}) }));
|
|
1771
1771
|
};
|
|
1772
1772
|
|
|
1773
|
-
var styles$
|
|
1773
|
+
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"};
|
|
1774
1774
|
|
|
1775
1775
|
/**
|
|
1776
1776
|
* Componente ListItem do Zanthus Design System
|
|
@@ -1855,24 +1855,24 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1855
1855
|
const currentVariant = validVariants.includes(variant) ? variant : 'text';
|
|
1856
1856
|
switch (currentVariant) {
|
|
1857
1857
|
case 'checkbox':
|
|
1858
|
-
return (jsxs(Fragment, { children: [jsx(Checkbox, { checked: internalChecked, disabled: disabled, onCheckedChange: () => handleCheckboxClick({}) }), jsxs("div", { className: styles$
|
|
1858
|
+
return (jsxs(Fragment, { children: [jsx(Checkbox, { checked: internalChecked, disabled: disabled, onCheckedChange: () => handleCheckboxClick({}) }), jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__text'], onClick: handleCheckboxClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], onClick: handleCheckboxClick, children: subText }))] })] }));
|
|
1859
1859
|
case 'radio':
|
|
1860
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1860
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$7['zds-list-item__wrapper-radio'], children: jsx("span", { className: styles$7['zds-list-item__radio'], "aria-hidden": "true", children: jsx(Radio, { name: name, onValueChange: () => handleRadioClick({}), items: [{
|
|
1861
1861
|
value: value,
|
|
1862
1862
|
label: '',
|
|
1863
1863
|
disabled: disabled
|
|
1864
|
-
}], "aria-labelledby": `${itemId}-text` }) }) }), jsxs("div", { className: styles$
|
|
1864
|
+
}], "aria-labelledby": `${itemId}-text` }) }) }), jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__title'], onClick: handleRadioClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], children: subText }))] })] }));
|
|
1865
1865
|
case 'icon':
|
|
1866
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1866
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$7['zds-list-item__wrapper-icon'], children: icon }), jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__title'], onClick: handleTextOrIconClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], children: subText }))] })] }));
|
|
1867
1867
|
case 'text':
|
|
1868
1868
|
default:
|
|
1869
|
-
return (jsxs("div", { className: styles$
|
|
1869
|
+
return (jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__title'], onClick: handleTextOrIconClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], children: subText }))] }));
|
|
1870
1870
|
}
|
|
1871
1871
|
}, [variant, itemId, internalChecked, disabled, handleCheckboxClick, handleRadioClick, handleTextOrIconClick, value, text, showSubText, subText, icon, name]);
|
|
1872
|
-
const listItemClass = clsx(styles$
|
|
1873
|
-
[styles$
|
|
1874
|
-
[styles$
|
|
1875
|
-
[styles$
|
|
1872
|
+
const listItemClass = clsx(styles$7['zds-list-item__container'], {
|
|
1873
|
+
[styles$7[`zds-list-item--${variant}`]]: variant,
|
|
1874
|
+
[styles$7['zds-list-item--disabled']]: disabled,
|
|
1875
|
+
[styles$7['zds-list-item--hovered']]: hovered,
|
|
1876
1876
|
[className || '']: className
|
|
1877
1877
|
});
|
|
1878
1878
|
const getAriaChecked = useCallback(() => {
|
|
@@ -1884,152 +1884,7 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1884
1884
|
return (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() }));
|
|
1885
1885
|
};
|
|
1886
1886
|
|
|
1887
|
-
var styles$
|
|
1888
|
-
|
|
1889
|
-
const Menu = ({ children, menuItems = [], onMenuItemClick, onToggle, type = 'text', applySearch = false, placeholder = '', showSubText = false, className, id, maxWidth = '210px', minWidth, position = 'left' }) => {
|
|
1890
|
-
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
1891
|
-
const anchorRef = useRef(null);
|
|
1892
|
-
const dropdownRef = useRef(null);
|
|
1893
|
-
const menuContainerRef = useRef(null);
|
|
1894
|
-
const [selectedItems, setSelectedItems] = useState([]);
|
|
1895
|
-
const [focusedItemIndex, setFocusedItemIndex] = useState(-1);
|
|
1896
|
-
const closeMenu = useCallback(() => {
|
|
1897
|
-
setIsMenuOpen(false);
|
|
1898
|
-
if (onToggle) {
|
|
1899
|
-
onToggle(false);
|
|
1900
|
-
}
|
|
1901
|
-
}, [onToggle]);
|
|
1902
|
-
const openMenu = useCallback(() => {
|
|
1903
|
-
setIsMenuOpen(true);
|
|
1904
|
-
if (onToggle) {
|
|
1905
|
-
onToggle(true);
|
|
1906
|
-
}
|
|
1907
|
-
}, [onToggle]);
|
|
1908
|
-
const toggleDropdown = useCallback(() => {
|
|
1909
|
-
if (isMenuOpen) {
|
|
1910
|
-
closeMenu();
|
|
1911
|
-
}
|
|
1912
|
-
else {
|
|
1913
|
-
openMenu();
|
|
1914
|
-
}
|
|
1915
|
-
}, [isMenuOpen, closeMenu, openMenu]);
|
|
1916
|
-
const initialItemsSelected = useMemo(() => {
|
|
1917
|
-
const selectedMap = {};
|
|
1918
|
-
selectedItems.forEach((id) => {
|
|
1919
|
-
selectedMap[id] = true;
|
|
1920
|
-
});
|
|
1921
|
-
return selectedMap;
|
|
1922
|
-
}, [selectedItems, menuItems]);
|
|
1923
|
-
const handleClickOutside = useCallback((event) => {
|
|
1924
|
-
if (!isMenuOpen)
|
|
1925
|
-
return;
|
|
1926
|
-
const target = event.target;
|
|
1927
|
-
if (menuContainerRef.current?.contains(target)) {
|
|
1928
|
-
return;
|
|
1929
|
-
}
|
|
1930
|
-
if (anchorRef.current?.contains(target)) {
|
|
1931
|
-
return;
|
|
1932
|
-
}
|
|
1933
|
-
if (dropdownRef.current?.contains(target)) {
|
|
1934
|
-
return;
|
|
1935
|
-
}
|
|
1936
|
-
closeMenu();
|
|
1937
|
-
}, [isMenuOpen, closeMenu]);
|
|
1938
|
-
const handleKeyDown = useCallback((event) => {
|
|
1939
|
-
if (!isMenuOpen)
|
|
1940
|
-
return;
|
|
1941
|
-
switch (event.key) {
|
|
1942
|
-
case 'Escape':
|
|
1943
|
-
event.preventDefault();
|
|
1944
|
-
closeMenu();
|
|
1945
|
-
if (anchorRef.current) {
|
|
1946
|
-
anchorRef.current.focus();
|
|
1947
|
-
}
|
|
1948
|
-
break;
|
|
1949
|
-
case 'ArrowDown':
|
|
1950
|
-
event.preventDefault();
|
|
1951
|
-
setFocusedItemIndex(prev => {
|
|
1952
|
-
const nextIndex = prev < menuItems.length - 1 ? prev + 1 : 0;
|
|
1953
|
-
return nextIndex;
|
|
1954
|
-
});
|
|
1955
|
-
break;
|
|
1956
|
-
case 'ArrowUp':
|
|
1957
|
-
event.preventDefault();
|
|
1958
|
-
setFocusedItemIndex(prev => {
|
|
1959
|
-
const nextIndex = prev > 0 ? prev - 1 : menuItems.length - 1;
|
|
1960
|
-
return nextIndex;
|
|
1961
|
-
});
|
|
1962
|
-
break;
|
|
1963
|
-
case 'Enter':
|
|
1964
|
-
case ' ':
|
|
1965
|
-
event.preventDefault();
|
|
1966
|
-
if (focusedItemIndex >= 0 && focusedItemIndex < menuItems.length) {
|
|
1967
|
-
const selectedItem = menuItems[focusedItemIndex];
|
|
1968
|
-
if (selectedItem && !selectedItem.disabled && onMenuItemClick) {
|
|
1969
|
-
onMenuItemClick(selectedItem);
|
|
1970
|
-
}
|
|
1971
|
-
}
|
|
1972
|
-
break;
|
|
1973
|
-
case 'Home':
|
|
1974
|
-
event.preventDefault();
|
|
1975
|
-
setFocusedItemIndex(0);
|
|
1976
|
-
break;
|
|
1977
|
-
case 'End':
|
|
1978
|
-
event.preventDefault();
|
|
1979
|
-
setFocusedItemIndex(menuItems.length - 1);
|
|
1980
|
-
break;
|
|
1981
|
-
}
|
|
1982
|
-
}, [isMenuOpen, closeMenu, focusedItemIndex, menuItems, onMenuItemClick, type]);
|
|
1983
|
-
useEffect(() => {
|
|
1984
|
-
if (!isMenuOpen) {
|
|
1985
|
-
setFocusedItemIndex(-1);
|
|
1986
|
-
}
|
|
1987
|
-
}, [isMenuOpen]);
|
|
1988
|
-
const handleSelectionChange = useCallback((selectedIds) => {
|
|
1989
|
-
if (selectedIds.length > 0 && menuItems.length > 0 && onMenuItemClick) {
|
|
1990
|
-
const lastSelectedId = selectedIds[selectedIds.length - 1];
|
|
1991
|
-
const selectedItem = menuItems.find((item) => item.id === lastSelectedId);
|
|
1992
|
-
if (selectedItem) {
|
|
1993
|
-
onMenuItemClick(selectedItem);
|
|
1994
|
-
closeMenu();
|
|
1995
|
-
}
|
|
1996
|
-
}
|
|
1997
|
-
setSelectedItems(selectedIds);
|
|
1998
|
-
}, [menuItems, onMenuItemClick, closeMenu]);
|
|
1999
|
-
useEffect(() => {
|
|
2000
|
-
if (isMenuOpen) {
|
|
2001
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
2002
|
-
document.addEventListener('keydown', handleKeyDown);
|
|
2003
|
-
return () => {
|
|
2004
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
2005
|
-
document.removeEventListener('keydown', handleKeyDown);
|
|
2006
|
-
};
|
|
2007
|
-
}
|
|
2008
|
-
}, [isMenuOpen, handleClickOutside, handleKeyDown]);
|
|
2009
|
-
const renderAnchor = () => {
|
|
2010
|
-
const dropdownId = `${id || 'menu'}-dropdown`;
|
|
2011
|
-
return React.cloneElement(children, {
|
|
2012
|
-
ref: anchorRef,
|
|
2013
|
-
onClick: (e) => {
|
|
2014
|
-
if (dropdownRef.current && dropdownRef.current.contains(e.target)) {
|
|
2015
|
-
return;
|
|
2016
|
-
}
|
|
2017
|
-
if (children.props.onClick) {
|
|
2018
|
-
children.props.onClick(e);
|
|
2019
|
-
}
|
|
2020
|
-
toggleDropdown();
|
|
2021
|
-
},
|
|
2022
|
-
'aria-expanded': isMenuOpen ? 'true' : 'false',
|
|
2023
|
-
'aria-haspopup': 'menu',
|
|
2024
|
-
'aria-controls': isMenuOpen ? dropdownId : undefined
|
|
2025
|
-
});
|
|
2026
|
-
};
|
|
2027
|
-
const menuClass = clsx$1(styles$9['zds-menu__container'], className);
|
|
2028
|
-
const dropdownClass = clsx$1(styles$9['zds-menu__dropdown'], styles$9[`zds-menu__dropdown--${position}`]);
|
|
2029
|
-
return (jsxs("div", { ref: menuContainerRef, className: menuClass, id: id, children: [renderAnchor(), isMenuOpen && (jsx("div", { ref: dropdownRef, className: dropdownClass, role: "menu", "aria-label": "Menu de a\u00E7\u00F5es", id: `${id || 'menu'}-dropdown`, children: 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 }) }))] }));
|
|
2030
|
-
};
|
|
2031
|
-
|
|
2032
|
-
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"};
|
|
1887
|
+
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"};
|
|
2033
1888
|
|
|
2034
1889
|
const normalizeText = (text) => {
|
|
2035
1890
|
if (typeof text === 'string')
|
|
@@ -2152,11 +2007,11 @@ const MenuItem = memo(({ item, isSelected, onSelect }) => {
|
|
|
2152
2007
|
const handleSelect = () => {
|
|
2153
2008
|
onSelect(item);
|
|
2154
2009
|
};
|
|
2155
|
-
return (jsxs(DropdownMenu.Item, { className: clsx(styles$
|
|
2010
|
+
return (jsxs(DropdownMenu.Item, { className: clsx(styles$6.item, { [styles$6.itemSelected]: isSelected }), onSelect: handleSelect, disabled: item.disabled, children: [item.icon && jsx("span", { className: styles$6.itemIcon, children: item.icon }), jsxs("div", { className: styles$6.wrapperText, children: [jsx("span", { className: styles$6.itemText, children: item.text }), item.subText && (jsx("span", { className: styles$6.itemSubText, children: item.subText }))] })] }));
|
|
2156
2011
|
});
|
|
2157
2012
|
MenuItem.displayName = 'MenuItem';
|
|
2158
2013
|
|
|
2159
|
-
const
|
|
2014
|
+
const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onScrollEnd, isLoadingMore, onApiSearch, enableApiSearch, selectedItems = [], onOpenChange, align = 'start', className, maxHeight = 400, ...rest }) => {
|
|
2160
2015
|
const itemsWrapperRef = useRef(null);
|
|
2161
2016
|
const hasReachedEndRef = useRef(false);
|
|
2162
2017
|
const observerRef = useRef(null);
|
|
@@ -2165,16 +2020,14 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2165
2020
|
const isLoadingMoreRef = useRef(isLoadingMore);
|
|
2166
2021
|
const [searchInput, setSearchInput] = useState('');
|
|
2167
2022
|
const [searchTerm, setSearchTerm] = useState('');
|
|
2168
|
-
const [open, setOpen] = useState(false);
|
|
2169
2023
|
const maxHeightStyle = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
|
|
2170
|
-
const { handleItemSelect: handleItemSelectLogic, isItemSelected } = useMenuLogic({
|
|
2024
|
+
const { open, setOpen, handleItemSelect: handleItemSelectLogic, isItemSelected } = useMenuLogic({
|
|
2171
2025
|
selectedItems,
|
|
2172
2026
|
onItemSelect,
|
|
2173
2027
|
onOpenChange,
|
|
2174
2028
|
});
|
|
2175
2029
|
const handleItemSelect = useCallback((item) => {
|
|
2176
2030
|
handleItemSelectLogic(item);
|
|
2177
|
-
setOpen(false);
|
|
2178
2031
|
}, [handleItemSelectLogic]);
|
|
2179
2032
|
const { filteredItems } = useSearchLogic({
|
|
2180
2033
|
items,
|
|
@@ -2200,7 +2053,7 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2200
2053
|
useEffect(() => {
|
|
2201
2054
|
onScrollEndRef.current = onScrollEnd;
|
|
2202
2055
|
isLoadingMoreRef.current = isLoadingMore;
|
|
2203
|
-
});
|
|
2056
|
+
}, [onScrollEnd, isLoadingMore]);
|
|
2204
2057
|
useEffect(() => {
|
|
2205
2058
|
if (!open || !enableInfiniteScroll) {
|
|
2206
2059
|
return;
|
|
@@ -2259,27 +2112,24 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2259
2112
|
const renderMenuItem = useCallback((item, key) => {
|
|
2260
2113
|
const hasChildren = item.children && item.children.length > 0;
|
|
2261
2114
|
if (hasChildren) {
|
|
2262
|
-
return (jsxs(DropdownMenu.Sub, { children: [jsxs(DropdownMenu.SubTrigger, { className: styles$
|
|
2115
|
+
return (jsxs(DropdownMenu.Sub, { children: [jsxs(DropdownMenu.SubTrigger, { className: styles$6.subTrigger, disabled: item.disabled, children: [item.icon && (jsx("span", { className: styles$6.itemIcon, children: item.icon })), jsxs("div", { className: styles$6.wrapperText, children: [jsx("span", { className: styles$6.itemText, children: item.text }), item.subText && (jsx("span", { className: styles$6.itemSubText, children: item.subText }))] }), jsx(ChevronRight16Filled, { className: styles$6.chevronIcon })] }), jsx(DropdownMenu.Portal, { children: jsx(DropdownMenu.SubContent, { className: styles$6.subContent, sideOffset: 16, collisionPadding: 20, children: item.children.map((childItem, childIndex) => renderMenuItem(childItem, `${key}-${childIndex}`)) }) })] }, key));
|
|
2263
2116
|
}
|
|
2264
2117
|
return (jsx(MenuItem, { item: item, isSelected: isItemSelected(item), onSelect: handleItemSelect }, key));
|
|
2265
2118
|
}, [handleItemSelect, isItemSelected]);
|
|
2266
2119
|
const handleOpenChange = (newOpen) => {
|
|
2267
2120
|
setOpen(newOpen);
|
|
2268
|
-
if (onOpenChange) {
|
|
2269
|
-
onOpenChange(newOpen);
|
|
2270
|
-
}
|
|
2271
2121
|
if (!newOpen) {
|
|
2272
2122
|
hasReachedEndRef.current = false;
|
|
2273
2123
|
}
|
|
2274
2124
|
};
|
|
2275
|
-
return (jsxs(DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsx(DropdownMenu.Trigger, { asChild: true, children: children }), jsx(DropdownMenu.Portal, { children: jsxs(DropdownMenu.Content, { className: clsx(styles$
|
|
2125
|
+
return (jsxs(DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsx(DropdownMenu.Trigger, { asChild: true, children: children }), jsx(DropdownMenu.Portal, { children: jsxs(DropdownMenu.Content, { className: clsx(styles$6.content, className), sideOffset: 8, align: align, onKeyDown: (e) => {
|
|
2276
2126
|
if (search) {
|
|
2277
2127
|
e.stopPropagation();
|
|
2278
2128
|
}
|
|
2279
|
-
}, ...rest, children: [search && (jsx("div", { className: styles$
|
|
2129
|
+
}, ...rest, children: [search && (jsx("div", { className: styles$6.searchWrapper, children: jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), 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}`))) : (jsx("div", { className: styles$6.emptyState, children: "Nenhum item encontrado" })), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$6.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
|
|
2280
2130
|
};
|
|
2281
2131
|
|
|
2282
|
-
var styles$
|
|
2132
|
+
var styles$5 = {"zds-quantity":"Quantity-module__zds-quantity___AymLj","zds-quantity__input":"Quantity-module__zds-quantity__input___Wlhmo"};
|
|
2283
2133
|
|
|
2284
2134
|
/**
|
|
2285
2135
|
* Componente Quantity - permite incrementar/decrementar valores numéricos
|
|
@@ -2498,365 +2348,94 @@ const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled
|
|
|
2498
2348
|
}, [disabled, increment, decrement, decimal, decimalPlaces, isControlled, onChange, computedValue]);
|
|
2499
2349
|
const uniqueId = useId();
|
|
2500
2350
|
const inputId = id || uniqueId;
|
|
2501
|
-
return (jsxs("div", { className: clsx(styles$
|
|
2351
|
+
return (jsxs("div", { className: clsx(styles$5['zds-quantity'], { disabled }, className), children: [jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, icon: jsx(Subtract16Regular, {}), onClick: decrement, disabled: disabled || isMinValue, "aria-label": 'Diminuir quantidade' }), 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' }), jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, onClick: increment, disabled: disabled, "aria-label": 'Aumentar quantidade', icon: jsx(Add16Regular, {}) })] }));
|
|
2502
2352
|
};
|
|
2503
2353
|
const memorizedQuantity = React.memo(Quantity);
|
|
2504
2354
|
memorizedQuantity.displayName = 'Quantity';
|
|
2505
2355
|
|
|
2506
|
-
var styles$
|
|
2507
|
-
|
|
2508
|
-
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"};
|
|
2509
|
-
|
|
2510
|
-
const SelectField = forwardRef(({ id, name, value, placeholder, label, helperText, errorMessage, required = false, disabled = false, icon, isOpen = false, className, tooltip, tooltipText, isTouched = false, hasError = false, positionTooltip }, ref) => {
|
|
2511
|
-
// ✅ NOVA LÓGICA: Validação de required
|
|
2512
|
-
const isRequired = required && !disabled;
|
|
2513
|
-
const hasValue = Boolean(value && value.trim().length > 0);
|
|
2514
|
-
const shouldShowRequiredError = isRequired && isTouched && !hasValue;
|
|
2515
|
-
// ✅ NOVA LÓGICA: Mensagem de erro dinâmica
|
|
2516
|
-
const dynamicErrorMessage = shouldShowRequiredError && !errorMessage
|
|
2517
|
-
? 'Este campo é obrigatório'
|
|
2518
|
-
: errorMessage;
|
|
2519
|
-
// ✅ NOVA LÓGICA: Estado de erro combinado
|
|
2520
|
-
const showError = hasError || shouldShowRequiredError || Boolean(errorMessage);
|
|
2521
|
-
// Classes CSS
|
|
2522
|
-
const containerClasses = clsx(styles$5['zds-select-field'], {
|
|
2523
|
-
[styles$5['zds-select-field--open']]: isOpen,
|
|
2524
|
-
[styles$5['zds-select-field--disabled']]: disabled,
|
|
2525
|
-
[styles$5['zds-select-field--error']]: showError,
|
|
2526
|
-
[styles$5['zds-select-field--required']]: isRequired,
|
|
2527
|
-
[styles$5['zds-select-field--touched']]: isTouched,
|
|
2528
|
-
}, className);
|
|
2529
|
-
const displayClasses = clsx(styles$5['zds-select-field__display'], {
|
|
2530
|
-
[styles$5['zds-select-field__display--placeholder']]: !hasValue,
|
|
2531
|
-
'has-value': hasValue,
|
|
2532
|
-
});
|
|
2533
|
-
const displayText = hasValue ? value : placeholder;
|
|
2534
|
-
return (jsxs("div", { className: containerClasses, ref: ref, children: [label && (jsx("label", { htmlFor: id, children: tooltip ? (jsx(Tooltip, { text: tooltipText, position: positionTooltip, children: jsxs("div", { className: styles$5['zds-select-field__container-tooltip'], children: [label, required && jsx("span", { className: styles$5['zds-select-field__required'], children: "*" }), jsx(Info12Regular, { className: styles$5['zds-select-field__tooltip'] })] }) })) : (jsxs("div", { className: styles$5['zds-select-field__container-tooltip'], children: [label, required && jsx("span", { className: styles$5['zds-select-field__required'], children: "*" })] })) })), jsxs("div", { className: styles$5['zds-select-field__container-box'], children: [jsxs("div", { className: styles$5['zds-select-field__box__input'], children: [jsx("div", { id: id, className: displayClasses, "data-placeholder": !hasValue ? placeholder : undefined, children: displayText }), jsx("input", { type: "hidden", name: name, value: value || '', disabled: disabled, required: required, className: styles$5['zds-select-field__input'] }), icon && (jsx("div", { className: styles$5['zds-select-field__icon'], children: icon }))] }), !isOpen && (helperText || showError) && (jsx("div", { className: styles$5['zds-select-field__helper-text'], children: showError ? dynamicErrorMessage : helperText }))] })] }));
|
|
2535
|
-
});
|
|
2536
|
-
SelectField.displayName = 'SelectField';
|
|
2356
|
+
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-"};
|
|
2537
2357
|
|
|
2538
|
-
const
|
|
2539
|
-
|
|
2540
|
-
const
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
// ✅ NOVO: Validação de props em desenvolvimento
|
|
2545
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2546
|
-
// Validar unidades CSS
|
|
2547
|
-
if (maxWidth && typeof maxWidth === 'string' &&
|
|
2548
|
-
!maxWidth.match(/^\d+(px|%|rem|em|vw|vh)$/)) {
|
|
2549
|
-
console.warn('Select: maxWidth deve ter unidade CSS válida (px, %, rem, em, vw, vh)');
|
|
2550
|
-
}
|
|
2551
|
-
if (minWidth && typeof minWidth === 'string' &&
|
|
2552
|
-
!minWidth.match(/^\d+(px|%|rem|em|vw|vh)$/)) {
|
|
2553
|
-
console.warn('Select: minWidth deve ter unidade CSS válida');
|
|
2554
|
-
}
|
|
2555
|
-
// Validar performance
|
|
2556
|
-
if (options.length > 1000) {
|
|
2557
|
-
console.warn('Select: Muitas opções (>1000) podem impactar performance. Considere virtualização.');
|
|
2558
|
-
}
|
|
2559
|
-
// Validar onChange obrigatório
|
|
2560
|
-
if (!onChange) {
|
|
2561
|
-
console.warn('Select: onChange prop é recomendado para controle de estado.');
|
|
2562
|
-
}
|
|
2563
|
-
}
|
|
2564
|
-
// Estados
|
|
2565
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
2566
|
-
const [selectedOptions, setSelectedOptions] = useState(() => {
|
|
2567
|
-
// Se tem value controlado, não usar initialValue
|
|
2568
|
-
if (value !== undefined) {
|
|
2569
|
-
return [];
|
|
2570
|
-
}
|
|
2571
|
-
// Se tem initialValue, processar na inicialização
|
|
2572
|
-
if (initialValue !== undefined) {
|
|
2573
|
-
// Inicializar com array vazio primeiro, será populado no useEffect
|
|
2574
|
-
return [];
|
|
2575
|
-
}
|
|
2576
|
-
return [];
|
|
2577
|
-
});
|
|
2578
|
-
const [isTouched, setIsTouched] = useState(false);
|
|
2579
|
-
const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
|
|
2580
|
-
// Lógica de validação para campo obrigatório
|
|
2581
|
-
const hasValue = selectedOptions.length > 0;
|
|
2582
|
-
const shouldShowRequiredError = required && isTouched && !hasValue && !disabled;
|
|
2583
|
-
// Validação e normalização das opções
|
|
2584
|
-
const validatedOptions = useMemo(() => {
|
|
2585
|
-
if (!Array.isArray(options)) {
|
|
2586
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2587
|
-
console.warn('Select: options deve ser um array, recebido:', typeof options, options);
|
|
2588
|
-
}
|
|
2589
|
-
return [];
|
|
2590
|
-
}
|
|
2591
|
-
return options.filter((option, index) => {
|
|
2592
|
-
if (!option || typeof option !== 'object') {
|
|
2593
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2594
|
-
console.warn(`Select: opção ${index} é inválida (null/undefined):`, option);
|
|
2595
|
-
}
|
|
2596
|
-
return false;
|
|
2597
|
-
}
|
|
2598
|
-
if (!option.text || typeof option.text !== 'string' || option.text.trim().length === 0) {
|
|
2599
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2600
|
-
console.warn(`Select: opção ${index} sem text válido:`, option);
|
|
2601
|
-
}
|
|
2602
|
-
return false;
|
|
2603
|
-
}
|
|
2604
|
-
if (option.text.length > 200) {
|
|
2605
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2606
|
-
console.warn(`Select: opção ${index} com text muito longo (${option.text.length} chars):`, option.text.substring(0, 50) + '...');
|
|
2607
|
-
}
|
|
2608
|
-
return false;
|
|
2609
|
-
}
|
|
2610
|
-
return true;
|
|
2611
|
-
});
|
|
2612
|
-
}, [options]);
|
|
2613
|
-
// Conversão para itens do Dropdown
|
|
2614
|
-
const dropdownItems = useMemo(() => {
|
|
2615
|
-
return validatedOptions.map((option, index) => ({
|
|
2616
|
-
id: option.id || `dropdown-item-${index}`,
|
|
2617
|
-
text: option.text,
|
|
2618
|
-
subText: option.subText,
|
|
2619
|
-
icon: option.icon,
|
|
2620
|
-
disabled: option.disabled || disabled
|
|
2621
|
-
}));
|
|
2622
|
-
}, [validatedOptions, disabled]);
|
|
2623
|
-
// Texto de exibição das opções selecionadas
|
|
2624
|
-
const displayText = useMemo(() => {
|
|
2625
|
-
if (selectedOptions.length === 0)
|
|
2626
|
-
return '';
|
|
2627
|
-
return selectedOptions
|
|
2628
|
-
.map((item) => item.text || 'Item sem nome')
|
|
2629
|
-
.join(', ');
|
|
2630
|
-
}, [selectedOptions]);
|
|
2631
|
-
// IDs das opções selecionadas para o Dropdown
|
|
2632
|
-
const selectedIds = useMemo(() => {
|
|
2633
|
-
return selectedOptions.map((selectedItem) => {
|
|
2634
|
-
const optionIndex = validatedOptions.findIndex((option) => {
|
|
2635
|
-
return option.id === selectedItem.id ||
|
|
2636
|
-
option.text === selectedItem.text ||
|
|
2637
|
-
option === selectedItem;
|
|
2638
|
-
});
|
|
2639
|
-
return optionIndex !== -1
|
|
2640
|
-
? (validatedOptions[optionIndex].id || `dropdown-item-${optionIndex}`)
|
|
2641
|
-
: null;
|
|
2642
|
-
}).filter((id) => Boolean(id));
|
|
2643
|
-
}, [selectedOptions, validatedOptions]);
|
|
2644
|
-
// Mapa inicial de seleção para o Dropdown
|
|
2645
|
-
const initialItemsSelected = useMemo(() => {
|
|
2646
|
-
const selectedMap = {};
|
|
2647
|
-
selectedIds.forEach((id) => {
|
|
2648
|
-
selectedMap[id] = true;
|
|
2649
|
-
});
|
|
2650
|
-
return selectedMap;
|
|
2651
|
-
}, [selectedIds]);
|
|
2652
|
-
// ✅ SIMPLIFICADO: Handlers de evento sem refs desnecessários
|
|
2653
|
-
const handleOptionSelect = useCallback((selectedIds) => {
|
|
2358
|
+
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange, value, ...restProps }) => {
|
|
2359
|
+
const itemRef = useRef(null);
|
|
2360
|
+
const handleCheckboxChange = (checkedValue) => {
|
|
2361
|
+
onCheckedChange(Boolean(checkedValue));
|
|
2362
|
+
};
|
|
2363
|
+
const handleKeyDown = (e) => {
|
|
2654
2364
|
if (disabled)
|
|
2655
2365
|
return;
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
if (!foundOption && id.startsWith('dropdown-item-')) {
|
|
2661
|
-
const index = parseInt(id.replace('dropdown-item-', ''), 10);
|
|
2662
|
-
foundOption = validatedOptions[index];
|
|
2663
|
-
}
|
|
2664
|
-
return foundOption;
|
|
2665
|
-
}).filter((option) => Boolean(option));
|
|
2666
|
-
setSelectedOptions(selectedItems);
|
|
2667
|
-
onChange?.(selectedItems);
|
|
2668
|
-
// Fechar dropdown se não for múltipla seleção
|
|
2669
|
-
if (type !== 'checkbox') {
|
|
2670
|
-
setIsOpen(false);
|
|
2671
|
-
}
|
|
2672
|
-
}, [validatedOptions, onChange, type, disabled]);
|
|
2673
|
-
// ✅ NOVO: Busca rápida por primeira letra
|
|
2674
|
-
const handleQuickSearch = useCallback((char) => {
|
|
2675
|
-
if (!isOpen || dropdownItems.length === 0)
|
|
2366
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
2367
|
+
e.preventDefault();
|
|
2368
|
+
e.stopPropagation();
|
|
2369
|
+
onCheckedChange(!checked);
|
|
2676
2370
|
return;
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
matchingIndex = dropdownItems.findIndex(item => item.text.toLowerCase().startsWith(char) &&
|
|
2685
|
-
!item.disabled);
|
|
2686
|
-
}
|
|
2687
|
-
if (matchingIndex >= 0) {
|
|
2688
|
-
setFocusedOptionIndex(matchingIndex);
|
|
2689
|
-
}
|
|
2690
|
-
}, [isOpen, focusedOptionIndex, dropdownItems]);
|
|
2691
|
-
const handleTriggerClick = useCallback((event) => {
|
|
2692
|
-
if (disabled)
|
|
2371
|
+
}
|
|
2372
|
+
if (e.key === 'ArrowDown') {
|
|
2373
|
+
e.preventDefault();
|
|
2374
|
+
const nextElement = itemRef.current?.nextElementSibling;
|
|
2375
|
+
if (nextElement && nextElement.getAttribute('tabIndex') === '0') {
|
|
2376
|
+
nextElement.focus();
|
|
2377
|
+
}
|
|
2693
2378
|
return;
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2379
|
+
}
|
|
2380
|
+
if (e.key === 'ArrowUp') {
|
|
2381
|
+
e.preventDefault();
|
|
2382
|
+
const prevElement = itemRef.current?.previousElementSibling;
|
|
2383
|
+
if (prevElement && prevElement.getAttribute('tabIndex') === '0') {
|
|
2384
|
+
prevElement.focus();
|
|
2385
|
+
}
|
|
2701
2386
|
return;
|
|
2702
|
-
const relatedTarget = event.relatedTarget;
|
|
2703
|
-
if (selectRef.current && relatedTarget && selectRef.current.contains(relatedTarget)) {
|
|
2704
|
-
return; // Não fechar se foco está dentro do select
|
|
2705
2387
|
}
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
setIsOpen(false);
|
|
2709
|
-
setFocusedOptionIndex(-1);
|
|
2710
|
-
}, 200);
|
|
2711
|
-
}, [disabled]);
|
|
2712
|
-
const handleKeyDown = useCallback((event) => {
|
|
2388
|
+
};
|
|
2389
|
+
const handleClick = (e) => {
|
|
2713
2390
|
if (disabled)
|
|
2714
2391
|
return;
|
|
2715
|
-
|
|
2716
|
-
|
|
2717
|
-
|
|
2718
|
-
|
|
2719
|
-
|
|
2720
|
-
|
|
2721
|
-
// Selecionar opção focada
|
|
2722
|
-
const optionId = dropdownItems[focusedOptionIndex]?.id;
|
|
2723
|
-
if (optionId) {
|
|
2724
|
-
handleOptionSelect([optionId]);
|
|
2725
|
-
}
|
|
2726
|
-
}
|
|
2727
|
-
else {
|
|
2728
|
-
setIsOpen(prev => !prev);
|
|
2729
|
-
if (!isOpen) {
|
|
2730
|
-
setFocusedOptionIndex(0);
|
|
2731
|
-
}
|
|
2732
|
-
}
|
|
2733
|
-
break;
|
|
2734
|
-
case 'Escape':
|
|
2735
|
-
event.preventDefault();
|
|
2736
|
-
event.stopPropagation();
|
|
2737
|
-
setIsTouched(true);
|
|
2738
|
-
setIsOpen(false);
|
|
2739
|
-
setFocusedOptionIndex(-1);
|
|
2740
|
-
// ✅ Devolver foco para o trigger
|
|
2741
|
-
selectRef.current?.focus();
|
|
2742
|
-
break;
|
|
2743
|
-
case 'ArrowDown':
|
|
2744
|
-
event.preventDefault();
|
|
2745
|
-
event.stopPropagation();
|
|
2746
|
-
if (!isOpen) {
|
|
2747
|
-
setIsOpen(true);
|
|
2748
|
-
setFocusedOptionIndex(0);
|
|
2749
|
-
}
|
|
2750
|
-
else {
|
|
2751
|
-
setFocusedOptionIndex(prev => prev < dropdownItems.length - 1 ? prev + 1 : 0);
|
|
2752
|
-
}
|
|
2753
|
-
break;
|
|
2754
|
-
case 'ArrowUp':
|
|
2755
|
-
event.preventDefault();
|
|
2756
|
-
event.stopPropagation();
|
|
2757
|
-
if (isOpen) {
|
|
2758
|
-
setFocusedOptionIndex(prev => prev > 0 ? prev - 1 : dropdownItems.length - 1);
|
|
2759
|
-
}
|
|
2760
|
-
break;
|
|
2761
|
-
case 'Home':
|
|
2762
|
-
if (isOpen) {
|
|
2763
|
-
event.preventDefault();
|
|
2764
|
-
setFocusedOptionIndex(0);
|
|
2765
|
-
}
|
|
2766
|
-
break;
|
|
2767
|
-
case 'End':
|
|
2768
|
-
if (isOpen) {
|
|
2769
|
-
event.preventDefault();
|
|
2770
|
-
setFocusedOptionIndex(dropdownItems.length - 1);
|
|
2771
|
-
}
|
|
2772
|
-
break;
|
|
2773
|
-
case 'Tab':
|
|
2774
|
-
if (isOpen) {
|
|
2775
|
-
setIsOpen(false);
|
|
2776
|
-
setIsTouched(true);
|
|
2777
|
-
setFocusedOptionIndex(-1);
|
|
2778
|
-
}
|
|
2779
|
-
break;
|
|
2780
|
-
default:
|
|
2781
|
-
if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) {
|
|
2782
|
-
handleQuickSearch(event.key.toLowerCase());
|
|
2783
|
-
}
|
|
2784
|
-
break;
|
|
2785
|
-
}
|
|
2786
|
-
}, [isOpen, disabled, focusedOptionIndex, dropdownItems, handleOptionSelect]);
|
|
2787
|
-
// Click outside handler
|
|
2788
|
-
const handleClickOutside = useCallback((event) => {
|
|
2789
|
-
const target = event.target;
|
|
2790
|
-
if (selectRef.current && !selectRef.current.contains(target)) {
|
|
2791
|
-
setIsTouched(true);
|
|
2792
|
-
setIsOpen(false);
|
|
2793
|
-
setFocusedOptionIndex(-1);
|
|
2392
|
+
const target = e.target;
|
|
2393
|
+
const isCheckboxClick = target.closest('input[type="checkbox"]') ||
|
|
2394
|
+
target.closest('label');
|
|
2395
|
+
if (!isCheckboxClick) {
|
|
2396
|
+
e.preventDefault();
|
|
2397
|
+
onCheckedChange(!checked);
|
|
2794
2398
|
}
|
|
2795
|
-
}
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2399
|
+
};
|
|
2400
|
+
return (jsx("div", { ref: itemRef, className: clsx(styles$4.checkboxItem, {
|
|
2401
|
+
[styles$4.disabled]: disabled,
|
|
2402
|
+
}), 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: jsx("div", { className: styles$4.checkboxContent, children: jsx(Checkbox, { checked: checked, onCheckedChange: handleCheckboxChange, disabled: disabled, label: jsxs("div", { className: styles$4.textContent, children: [jsx("span", { className: styles$4.title, children: text }), subTitle && jsx("div", { className: styles$4.subTitle, children: subTitle })] }) }) }) }));
|
|
2403
|
+
};
|
|
2404
|
+
CheckboxSelectItem.displayName = 'CheckboxSelectItem';
|
|
2405
|
+
|
|
2406
|
+
const ExpandableSelectItem = ({ item, variant, onSelect, selectedValues, level = 0, }) => {
|
|
2407
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
2408
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
2409
|
+
const isSelected = selectedValues.includes(item.value);
|
|
2410
|
+
const handleClick = (e) => {
|
|
2411
|
+
if (hasChildren) {
|
|
2412
|
+
e.preventDefault();
|
|
2413
|
+
e.stopPropagation();
|
|
2414
|
+
setIsExpanded(!isExpanded);
|
|
2801
2415
|
}
|
|
2802
2416
|
else {
|
|
2803
|
-
|
|
2804
|
-
document.removeEventListener('touchstart', handleClickOutside);
|
|
2805
|
-
}
|
|
2806
|
-
return () => {
|
|
2807
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
2808
|
-
document.removeEventListener('touchstart', handleClickOutside);
|
|
2809
|
-
};
|
|
2810
|
-
}, [isOpen, handleClickOutside]);
|
|
2811
|
-
useEffect(() => {
|
|
2812
|
-
if (value !== undefined) {
|
|
2813
|
-
// Valor controlado - sempre usar value
|
|
2814
|
-
const valueArray = Array.isArray(value) ? value : [value];
|
|
2815
|
-
const newSelectedOptions = valueArray
|
|
2816
|
-
.map((val) => validatedOptions.find((option) => option.id === val || option.text === val))
|
|
2817
|
-
.filter((option) => Boolean(option));
|
|
2818
|
-
setSelectedOptions(newSelectedOptions);
|
|
2819
|
-
}
|
|
2820
|
-
else if (initialValue !== undefined && selectedOptions.length === 0) {
|
|
2821
|
-
// Valor inicial não controlado - só aplicar se ainda não há seleções
|
|
2822
|
-
const initialValueArray = Array.isArray(initialValue) ? initialValue : [initialValue];
|
|
2823
|
-
const newSelectedOptions = initialValueArray
|
|
2824
|
-
.map((val) => validatedOptions.find((option) => option.id === val || option.text === val))
|
|
2825
|
-
.filter((option) => Boolean(option));
|
|
2826
|
-
setSelectedOptions(newSelectedOptions);
|
|
2827
|
-
}
|
|
2828
|
-
else if (value === undefined && initialValue === undefined && selectedOptions.length > 0) {
|
|
2829
|
-
// Nenhum valor definido - limpar seleções apenas se havia seleções
|
|
2830
|
-
setSelectedOptions([]);
|
|
2831
|
-
}
|
|
2832
|
-
}, [value, initialValue, validatedOptions]);
|
|
2833
|
-
const containerStyles = useMemo(() => {
|
|
2834
|
-
const styles = {};
|
|
2835
|
-
if (minWidth) {
|
|
2836
|
-
styles.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
|
|
2837
|
-
}
|
|
2838
|
-
if (maxWidth) {
|
|
2839
|
-
const maxWidthValue = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
|
|
2840
|
-
styles.maxWidth = maxWidthValue;
|
|
2841
|
-
}
|
|
2842
|
-
if (width) {
|
|
2843
|
-
styles.width = typeof width === 'number' ? `${width}px` : width;
|
|
2417
|
+
onSelect(item.value);
|
|
2844
2418
|
}
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2419
|
+
};
|
|
2420
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$4.expandableItemContainer, style: { paddingLeft: `${level * 16}px` }, children: jsxs("div", { className: clsx(styles$4.itemWrapper, {
|
|
2421
|
+
[styles$4.selected]: isSelected && !hasChildren,
|
|
2422
|
+
[styles$4.disabled]: item.disabled,
|
|
2423
|
+
}), onClick: handleClick, onKeyDown: (e) => {
|
|
2424
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
2425
|
+
e.preventDefault();
|
|
2426
|
+
handleClick(e);
|
|
2427
|
+
}
|
|
2428
|
+
}, 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 && (jsx("span", { className: styles$4.icon, children: item.icon })), jsxs("div", { className: styles$4.textContent, children: [jsx("div", { className: styles$4.title, children: item.text }), item.subTitle && jsx("div", { className: styles$4.subTitle, children: item.subTitle })] }), hasChildren && (jsx("span", { className: styles$4.chevron, children: isExpanded ? jsx(ChevronDown16Regular, {}) : jsx(ChevronRight16Regular, {}) }))] }) }), hasChildren && isExpanded && (jsx("div", { className: styles$4.childrenWrapper, children: item.children.map((child) => (jsx(ExpandableSelectItem, { item: child, variant: variant, onSelect: onSelect, selectedValues: selectedValues, level: level + 1 }, child.id || child.value))) }))] }));
|
|
2429
|
+
};
|
|
2430
|
+
|
|
2431
|
+
const SelectItem = React.forwardRef(({ text, subTitle, icon, disabled, value, variant, ...restProps }, ref) => {
|
|
2432
|
+
return (jsxs("div", { className: clsx(styles$4.itemWrapper, {
|
|
2433
|
+
[styles$4.disabled]: disabled,
|
|
2434
|
+
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$4.icon, children: icon })), jsxs(Select$1.Item, { className: clsx(styles$4.item, {
|
|
2435
|
+
[styles$4.disabled]: disabled,
|
|
2436
|
+
}), value: value, disabled: disabled, ...restProps, children: [jsx(Select$1.ItemText, { className: styles$4.title, children: text }), subTitle && jsx("div", { className: styles$4.subTitle, children: subTitle }), jsx(Select$1.ItemIndicator, { className: styles$4.itemIndicator })] })] }));
|
|
2858
2437
|
});
|
|
2859
|
-
|
|
2438
|
+
SelectItem.displayName = 'SelectItem';
|
|
2860
2439
|
|
|
2861
2440
|
const initialState = {
|
|
2862
2441
|
isOpen: false,
|
|
@@ -2882,16 +2461,15 @@ function selectReducer(state, action) {
|
|
|
2882
2461
|
return { ...state, hasError: action.payload };
|
|
2883
2462
|
case 'RESET_SEARCH':
|
|
2884
2463
|
return { ...state, searchInput: '', searchTerm: '' };
|
|
2885
|
-
case 'VALIDATE':
|
|
2464
|
+
case 'VALIDATE': {
|
|
2886
2465
|
const hasError = action.payload.required && state.selectedValues.length === 0;
|
|
2887
2466
|
return { ...state, hasError, touched: true };
|
|
2467
|
+
}
|
|
2888
2468
|
default:
|
|
2889
2469
|
return state;
|
|
2890
2470
|
}
|
|
2891
2471
|
}
|
|
2892
|
-
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange,
|
|
2893
|
-
// API search props
|
|
2894
|
-
enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
2472
|
+
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange, enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
2895
2473
|
const [state, dispatch] = useReducer(selectReducer, {
|
|
2896
2474
|
...initialState,
|
|
2897
2475
|
selectedValues: Array.isArray(value) ? value : value ? [value] : [],
|
|
@@ -2900,9 +2478,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2900
2478
|
const debounceTimeoutRef = useRef(null);
|
|
2901
2479
|
const hasInitialSearchRef = useRef(false);
|
|
2902
2480
|
const lastSearchTermRef = useRef('');
|
|
2903
|
-
// Função de debounce para busca em API
|
|
2904
2481
|
const debouncedApiSearch = useCallback((searchTerm) => {
|
|
2905
|
-
// Evita chamadas duplicadas com o mesmo termo
|
|
2906
2482
|
if (lastSearchTermRef.current === searchTerm) {
|
|
2907
2483
|
return;
|
|
2908
2484
|
}
|
|
@@ -2914,7 +2490,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2914
2490
|
if (enableApiSearch && onApiSearch) {
|
|
2915
2491
|
onApiSearch(searchTerm);
|
|
2916
2492
|
}
|
|
2917
|
-
}, 300);
|
|
2493
|
+
}, 300);
|
|
2918
2494
|
}, [enableApiSearch, onApiSearch]);
|
|
2919
2495
|
useEffect(() => {
|
|
2920
2496
|
const newValues = Array.isArray(value) ? value : value ? [value] : [];
|
|
@@ -2930,35 +2506,28 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2930
2506
|
useEffect(() => {
|
|
2931
2507
|
if (!state.isOpen) {
|
|
2932
2508
|
dispatch({ type: 'RESET_SEARCH' });
|
|
2933
|
-
// Reset flags quando fechar
|
|
2934
2509
|
hasInitialSearchRef.current = false;
|
|
2935
2510
|
lastSearchTermRef.current = '';
|
|
2936
2511
|
}
|
|
2937
2512
|
}, [state.isOpen]);
|
|
2938
|
-
// Efeito para busca inicial quando abrir o select com API search
|
|
2939
2513
|
useEffect(() => {
|
|
2940
2514
|
if (state.isOpen && enableApiSearch && !hasInitialSearchRef.current) {
|
|
2941
2515
|
hasInitialSearchRef.current = true;
|
|
2942
|
-
// Faz uma busca inicial vazia para carregar os itens (sem debounce para ser mais rápido)
|
|
2943
2516
|
if (onApiSearch) {
|
|
2944
2517
|
onApiSearch('');
|
|
2945
2518
|
lastSearchTermRef.current = '';
|
|
2946
2519
|
}
|
|
2947
2520
|
}
|
|
2948
2521
|
}, [state.isOpen, enableApiSearch, onApiSearch]);
|
|
2949
|
-
// Efeito para disparar busca via API somente quando searchTerm for definido (Enter pressionado)
|
|
2950
2522
|
useEffect(() => {
|
|
2951
2523
|
if (enableApiSearch && state.searchTerm && state.isOpen) {
|
|
2952
|
-
// Só dispara se for diferente do último termo pesquisado
|
|
2953
2524
|
if (lastSearchTermRef.current !== state.searchTerm) {
|
|
2954
2525
|
debouncedApiSearch(state.searchTerm);
|
|
2955
2526
|
}
|
|
2956
2527
|
}
|
|
2957
2528
|
}, [state.searchTerm, enableApiSearch, state.isOpen, debouncedApiSearch]);
|
|
2958
|
-
// Efeito para recarregar dados quando o campo de busca ficar vazio
|
|
2959
2529
|
useEffect(() => {
|
|
2960
2530
|
if (enableApiSearch && state.isOpen && state.searchInput === '' && state.searchTerm === '') {
|
|
2961
|
-
// Só recarrega se já teve alguma busca anterior
|
|
2962
2531
|
if (lastSearchTermRef.current !== '') {
|
|
2963
2532
|
lastSearchTermRef.current = '';
|
|
2964
2533
|
if (onApiSearch) {
|
|
@@ -2967,13 +2536,11 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2967
2536
|
}
|
|
2968
2537
|
}
|
|
2969
2538
|
}, [state.searchInput, state.searchTerm, enableApiSearch, state.isOpen, onApiSearch]);
|
|
2970
|
-
// Cleanup do timeout quando componente for desmontado
|
|
2971
2539
|
useEffect(() => {
|
|
2972
2540
|
return () => {
|
|
2973
2541
|
if (debounceTimeoutRef.current) {
|
|
2974
2542
|
clearTimeout(debounceTimeoutRef.current);
|
|
2975
2543
|
}
|
|
2976
|
-
// Limpar refs no cleanup
|
|
2977
2544
|
hasInitialSearchRef.current = false;
|
|
2978
2545
|
lastSearchTermRef.current = '';
|
|
2979
2546
|
};
|
|
@@ -3002,7 +2569,6 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3002
2569
|
};
|
|
3003
2570
|
const resetSearch = () => {
|
|
3004
2571
|
dispatch({ type: 'RESET_SEARCH' });
|
|
3005
|
-
// Reset da ref para permitir nova busca vazia
|
|
3006
2572
|
lastSearchTermRef.current = '';
|
|
3007
2573
|
};
|
|
3008
2574
|
const validate = () => {
|
|
@@ -3051,12 +2617,9 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3051
2617
|
selectedValues[0]);
|
|
3052
2618
|
};
|
|
3053
2619
|
const getFilteredItems = (items, searchTerm) => {
|
|
3054
|
-
// Se busca via API estiver ativa, não filtra localmente
|
|
3055
|
-
// Assume que a API já retornou os dados filtrados
|
|
3056
2620
|
if (enableApiSearch) {
|
|
3057
2621
|
return items;
|
|
3058
2622
|
}
|
|
3059
|
-
// Busca local (comportamento original)
|
|
3060
2623
|
if (!searchTerm)
|
|
3061
2624
|
return items;
|
|
3062
2625
|
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
|
@@ -3099,34 +2662,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3099
2662
|
};
|
|
3100
2663
|
}
|
|
3101
2664
|
|
|
3102
|
-
|
|
3103
|
-
|
|
3104
|
-
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange, value, ...restProps }) => {
|
|
3105
|
-
const handleCheckboxChange = (checkedValue) => {
|
|
3106
|
-
onCheckedChange(Boolean(checkedValue));
|
|
3107
|
-
};
|
|
3108
|
-
return (jsx("div", { className: clsx(styles$4.item, styles$4.checkboxItem, {
|
|
3109
|
-
[styles$4.disabled]: disabled,
|
|
3110
|
-
}), role: "option", "aria-selected": checked, "data-selected": checked, "data-testid": `checkbox-item-${value}`, ...restProps, children: jsx("div", { className: styles$4.checkboxContent, children: jsx(Checkbox, { checked: checked, onCheckedChange: handleCheckboxChange, disabled: disabled, label: jsxs("div", { className: styles$4.textContent, children: [jsx("span", { className: styles$4.title, children: text }), subTitle && jsx("div", { className: styles$4.subTitle, children: subTitle })] }) }) }) }));
|
|
3111
|
-
};
|
|
3112
|
-
CheckboxSelectItem.displayName = 'CheckboxSelectItem';
|
|
3113
|
-
|
|
3114
|
-
const SelectItem = React.forwardRef(({ text, subTitle, icon, disabled, value, variant, ...restProps }, ref) => {
|
|
3115
|
-
return (jsxs("div", { className: clsx(styles$4.itemWrapper, {
|
|
3116
|
-
[styles$4.disabled]: disabled,
|
|
3117
|
-
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$4.icon, children: icon })), jsxs(Select$1.Item, { className: clsx(styles$4.item, {
|
|
3118
|
-
[styles$4.disabled]: disabled,
|
|
3119
|
-
}), value: value, disabled: disabled, ...restProps, children: [jsx(Select$1.ItemText, { className: styles$4.title, children: text }), subTitle && jsx("div", { className: styles$4.subTitle, children: subTitle }), jsx(Select$1.ItemIndicator, { className: styles$4.itemIndicator })] })] }));
|
|
3120
|
-
});
|
|
3121
|
-
SelectItem.displayName = 'SelectItem';
|
|
3122
|
-
|
|
3123
|
-
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,
|
|
3124
|
-
// Props para label com tooltip
|
|
3125
|
-
tooltip = false, tooltipText, side = 'bottom', align = 'start',
|
|
3126
|
-
// Props para scroll infinito
|
|
3127
|
-
enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false,
|
|
3128
|
-
// Props para busca em API
|
|
3129
|
-
enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
2665
|
+
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 }) => {
|
|
3130
2666
|
const componentId = useId();
|
|
3131
2667
|
const selectId = `select-${componentId}`;
|
|
3132
2668
|
const viewportRef = useRef(null);
|
|
@@ -3137,12 +2673,10 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3137
2673
|
search,
|
|
3138
2674
|
onValueChange,
|
|
3139
2675
|
onOpenChange,
|
|
3140
|
-
// API search props
|
|
3141
2676
|
enableApiSearch,
|
|
3142
2677
|
onApiSearch,
|
|
3143
2678
|
isSearching,
|
|
3144
2679
|
});
|
|
3145
|
-
// Infinite Scroll Logic
|
|
3146
2680
|
useEffect(() => {
|
|
3147
2681
|
const viewport = viewportRef.current;
|
|
3148
2682
|
if (!viewport || !enableInfiniteScroll)
|
|
@@ -3163,7 +2697,6 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3163
2697
|
viewport.removeEventListener('scroll', handleScroll);
|
|
3164
2698
|
};
|
|
3165
2699
|
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore]);
|
|
3166
|
-
// Reset a flag when the select opens
|
|
3167
2700
|
useEffect(() => {
|
|
3168
2701
|
if (state.isOpen && enableInfiniteScroll) {
|
|
3169
2702
|
hasReachedEndRef.current = false;
|
|
@@ -3171,21 +2704,27 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3171
2704
|
}, [state.isOpen, enableInfiniteScroll]);
|
|
3172
2705
|
const displayText = useMemo(() => utils.getDisplayText(state.selectedValues, placeholder, variant, items), [state.selectedValues, placeholder, variant, items, utils]);
|
|
3173
2706
|
const filteredItems = useMemo(() => {
|
|
3174
|
-
// Para busca via API, usa searchTerm (só atualiza quando Enter é pressionado)
|
|
3175
|
-
// Para busca local, usa searchInput (atualiza a cada tecla para filtro em tempo real)
|
|
3176
2707
|
const termToFilter = enableApiSearch ? state.searchTerm : state.searchInput;
|
|
3177
2708
|
return utils.getFilteredItems(items, termToFilter);
|
|
3178
2709
|
}, [items, state.searchTerm, state.searchInput, enableApiSearch, utils]);
|
|
3179
2710
|
const containerStyle = useMemo(() => ({
|
|
3180
|
-
maxWidth:
|
|
2711
|
+
maxWidth: maxWidth ? `${maxWidth}px` : undefined,
|
|
3181
2712
|
}), [maxWidth]);
|
|
3182
2713
|
const handleSearchChange = (e) => {
|
|
3183
2714
|
actions.setSearchInput(e.target.value);
|
|
3184
2715
|
};
|
|
3185
2716
|
const handleSearchKeyDown = (e) => {
|
|
3186
|
-
e.
|
|
2717
|
+
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
|
2718
|
+
const input = e.currentTarget;
|
|
2719
|
+
const hasSelection = input.selectionStart !== input.selectionEnd;
|
|
2720
|
+
if (!hasSelection) {
|
|
2721
|
+
e.preventDefault();
|
|
2722
|
+
return;
|
|
2723
|
+
}
|
|
2724
|
+
}
|
|
3187
2725
|
if (e.key === 'Enter') {
|
|
3188
2726
|
e.preventDefault();
|
|
2727
|
+
e.stopPropagation();
|
|
3189
2728
|
actions.setSearchTerm(state.searchInput);
|
|
3190
2729
|
}
|
|
3191
2730
|
if (e.key === 'Escape') {
|
|
@@ -3207,11 +2746,25 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3207
2746
|
[styles$4.open]: state.isOpen,
|
|
3208
2747
|
}), id: selectId, "aria-label": ariaLabel, "data-testid": `${testId}-trigger`, children: [variant === 'checkbox' ? (jsx("span", { className: styles$4.triggerText, children: displayText })) : (jsx(Select$1.Value, { placeholder: placeholder, className: styles$4.placeholder, children: displayText })), state.isOpen ? jsx(ChevronUp16Regular, {}) : jsx(ChevronDown16Regular, {})] }), !state.isOpen && helperText && !state.hasError && (jsx("span", { className: clsx(styles$4.helper, {
|
|
3209
2748
|
[styles$4.disabled]: disabled
|
|
3210
|
-
}), children: helperText })), state.hasError && state.touched && (jsx("span", { className: styles$4.errorMessage, children: errorMessage || 'Campo obrigatório' }))] }) }), jsx(Select$1.Portal, { children: jsxs(Select$1.Content, { className: styles$4.content, position: "popper", side: "bottom", sideOffset: 8, align: "start", avoidCollisions: true, children: [search && (jsx("div", { className: styles$4.searchWrapper, children: jsx(Search, { ref: refs.searchInputRef, className: styles$4.search, placeholder: "Buscar", value: state.searchInput, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: handleClear, "data-testid": `${testId}-search` }) })), jsx(Select$1.Viewport, { ref: viewportRef, className: styles$4.viewport, children: jsx(Select$1.Group, { className: styles$4.group, children: filteredItems.length === 0 ? (jsx("div", { className: styles$4.noResults, children: "Nenhum resultado encontrado" })) : (jsxs(Fragment, { children: [filteredItems.map((item) =>
|
|
2749
|
+
}), children: helperText })), state.hasError && state.touched && (jsx("span", { className: styles$4.errorMessage, children: errorMessage || 'Campo obrigatório' }))] }) }), jsx(Select$1.Portal, { children: jsxs(Select$1.Content, { className: styles$4.content, position: "popper", side: "bottom", sideOffset: 8, align: "start", avoidCollisions: true, children: [search && (jsx("div", { className: styles$4.searchWrapper, children: jsx(Search, { ref: refs.searchInputRef, className: styles$4.search, placeholder: "Buscar", value: state.searchInput, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: handleClear, "data-testid": `${testId}-search` }) })), jsx(Select$1.Viewport, { ref: viewportRef, className: styles$4.viewport, children: jsx(Select$1.Group, { className: styles$4.group, children: filteredItems.length === 0 ? (jsx("div", { className: styles$4.noResults, children: "Nenhum resultado encontrado" })) : (jsxs(Fragment, { children: [filteredItems.map((item) => {
|
|
2750
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
2751
|
+
if (hasChildren) {
|
|
2752
|
+
return (jsx(ExpandableSelectItem, { item: item, variant: variant, selectedValues: state.selectedValues, onSelect: (value) => {
|
|
2753
|
+
if (variant === 'checkbox') {
|
|
2754
|
+
const isSelected = state.selectedValues.includes(value);
|
|
2755
|
+
actions.handleMultipleSelect(value, !isSelected);
|
|
2756
|
+
}
|
|
2757
|
+
else {
|
|
2758
|
+
actions.handleSingleSelect(value);
|
|
2759
|
+
}
|
|
2760
|
+
} }, item.id || item.value));
|
|
2761
|
+
}
|
|
2762
|
+
return variant === 'checkbox' ? (jsx(CheckboxSelectItem, { ...item, checked: state.selectedValues.includes(item.value), onCheckedChange: (checked) => actions.handleMultipleSelect(item.value, checked) }, item.id || item.value)) : (jsx(SelectItem, { ...item, variant: variant }, item.id || item.value));
|
|
2763
|
+
}), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$4.loadingMore, children: "Carregando mais itens..." }))] })) }) })] }) })] }) }));
|
|
3211
2764
|
};
|
|
3212
|
-
|
|
2765
|
+
Select.displayName = 'Select';
|
|
3213
2766
|
|
|
3214
|
-
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-
|
|
2767
|
+
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"};
|
|
3215
2768
|
|
|
3216
2769
|
/**
|
|
3217
2770
|
* @module constants
|
|
@@ -6649,10 +6202,10 @@ const Table = ({ columns = [], dataSource = [], className, loading = false, rowS
|
|
|
6649
6202
|
return columns;
|
|
6650
6203
|
const checkboxColumn = {
|
|
6651
6204
|
key: '__checkbox__',
|
|
6652
|
-
label: (jsx(Checkbox, { checked: isAllSelected, indeterminate: isIndeterminate, onCheckedChange: toggleAll,
|
|
6205
|
+
label: (jsx(Checkbox, { checked: isAllSelected || isIndeterminate, indeterminate: isIndeterminate, onCheckedChange: toggleAll, disabled: rowSelection.disableSelectAll })),
|
|
6653
6206
|
render: (_, index) => {
|
|
6654
6207
|
const props = rowSelection.getCheckboxProps?.(dataSource[index], index) || {};
|
|
6655
|
-
return (jsx(Checkbox, { checked: selectedSet.has(index), onCheckedChange: () => toggleRow(index), disabled: props.disabled
|
|
6208
|
+
return (jsx(Checkbox, { checked: selectedSet.has(index), onCheckedChange: () => toggleRow(index), disabled: props.disabled }));
|
|
6656
6209
|
},
|
|
6657
6210
|
align: 'center',
|
|
6658
6211
|
};
|
|
@@ -7201,5 +6754,5 @@ function useApiSimulation(config = {}) {
|
|
|
7201
6754
|
};
|
|
7202
6755
|
}
|
|
7203
6756
|
|
|
7204
|
-
export { Avatar, Badge, Button, MemoizedCalendar as Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, MemoizedDialog as Dialog, Drawer, MemoizedDropdown as Dropdown, Filter, ListItem, Menu,
|
|
6757
|
+
export { Avatar, Badge, Button, MemoizedCalendar as Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, MemoizedDialog as Dialog, Drawer, MemoizedDropdown as Dropdown, Filter, ListItem, Menu, memorizedQuantity as Quantity, Radio, Search, Select, Switch, Table, TableHeader, TablePagination, TextField$1 as TextField, ToastProvider as Toast, ToastProvider, Tooltip, VerificationCode, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
7205
6758
|
//# sourceMappingURL=index.esm.js.map
|