@giro-ds/react 2.0.0 → 3.0.1
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 +242 -683
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +62 -192
- package/dist/index.esm.js +245 -683
- 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() === '') {
|
|
@@ -681,6 +681,10 @@ const TextField = forwardRef(({ className, value = '', label, placeholder, type
|
|
|
681
681
|
const [isFocused, setIsFocused] = useState(false);
|
|
682
682
|
const generatedId = useId();
|
|
683
683
|
const componentId = id || generatedId;
|
|
684
|
+
// ✅ Sincronizar estado interno com prop value externa
|
|
685
|
+
useEffect(() => {
|
|
686
|
+
setInputValue(value);
|
|
687
|
+
}, [value]);
|
|
684
688
|
const handleChange = useCallback((e) => {
|
|
685
689
|
const newValue = e.target.value;
|
|
686
690
|
if (!disabled && (!maxLength || newValue.length <= maxLength)) {
|
|
@@ -718,15 +722,15 @@ const TextField = forwardRef(({ className, value = '', label, placeholder, type
|
|
|
718
722
|
: helperText
|
|
719
723
|
? `${componentId}-helper`
|
|
720
724
|
: undefined;
|
|
721
|
-
const containerClass = clsx(styles$
|
|
722
|
-
[styles$
|
|
723
|
-
[styles$
|
|
725
|
+
const containerClass = clsx(styles$f.container, {
|
|
726
|
+
[styles$f.error]: hasError,
|
|
727
|
+
[styles$f.disabled]: disabled,
|
|
724
728
|
[className]: className,
|
|
725
729
|
});
|
|
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$
|
|
730
|
+
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
731
|
e.preventDefault();
|
|
728
732
|
handleClear();
|
|
729
|
-
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx(Dismiss16Regular, {}) }))] }), jsx("span", { id: helperId, className: styles$
|
|
733
|
+
}, "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
734
|
});
|
|
731
735
|
TextField.displayName = 'TextField';
|
|
732
736
|
var TextField$1 = React.memo(TextField);
|
|
@@ -824,11 +828,13 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
824
828
|
return date;
|
|
825
829
|
}
|
|
826
830
|
|
|
827
|
-
var styles$
|
|
831
|
+
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","zds-date-picker__icon":"DatePicker-module__zds-date-picker__icon___nYEnv","zds-date-picker__icon--disabled":"DatePicker-module__zds-date-picker__icon--disabled___p4Rr2"};
|
|
828
832
|
|
|
829
833
|
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
834
|
// ✅ IDs únicos para acessibilidade
|
|
831
835
|
const fieldId = useId();
|
|
836
|
+
const calendarId = `${fieldId}-calendar`;
|
|
837
|
+
const errorId = `${fieldId}-error`;
|
|
832
838
|
const helperTextId = `${fieldId}-help`;
|
|
833
839
|
// ✅ Suporte controlled/uncontrolled adequado
|
|
834
840
|
const isControlled = value !== undefined;
|
|
@@ -1006,13 +1012,16 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText =
|
|
|
1006
1012
|
setTempInputValue(formatDate(currentSelectedDate, locale));
|
|
1007
1013
|
}
|
|
1008
1014
|
}, [locale, currentSelectedDate, isEditing]);
|
|
1009
|
-
return (jsx("div", { ref: wrapperRef, children: jsxs("div", { className: clsx(styles$
|
|
1010
|
-
|
|
1011
|
-
|
|
1015
|
+
return (jsx("div", { ref: wrapperRef, children: jsxs("div", { className: clsx(styles$e['zds-date-picker']), children: [jsx(TextField$1, { type: "tel", icon: jsx(Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$e['zds-date-picker__icon'], disabled && styles$e['zds-date-picker__icon--disabled']) }), onChange: (e) => {
|
|
1016
|
+
handleTextFieldChange(String(e));
|
|
1017
|
+
}, onClick: !disabled ? handleFieldClick : undefined, onFocus: !disabled ? handleFieldFocus : undefined, onKeyDown: handleKeyDown, value: displayValue, helperText: combinedHelperText, maxLength: 10, required: required, label: label, disabled: disabled, id: fieldId, className: className, "data-testid": testId, placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": calendarId, "aria-invalid": !!currentError, "aria-describedby": currentError ? errorId : (helperText ? helperTextId : undefined) }), 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', minDate: minDate, maxDate: maxDate, id: calendarId, onClear: () => {
|
|
1018
|
+
handleDateChange(null);
|
|
1019
|
+
setCurrentDate(new Date());
|
|
1020
|
+
} })) })] }) }));
|
|
1012
1021
|
};
|
|
1013
1022
|
var DatePicker_default = React.memo(DatePicker);
|
|
1014
1023
|
|
|
1015
|
-
var styles$
|
|
1024
|
+
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
1025
|
|
|
1017
1026
|
const useFocusTrap = (isActive) => {
|
|
1018
1027
|
const containerRef = useRef(null);
|
|
@@ -1095,13 +1104,13 @@ const Dialog = ({ show, title, text, textConfirm = 'OK', textCancel = 'Cancelar'
|
|
|
1095
1104
|
}, [show, handleCancel]);
|
|
1096
1105
|
if (!show)
|
|
1097
1106
|
return null;
|
|
1098
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1107
|
+
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
1108
|
};
|
|
1100
1109
|
// Memoização para otimização de performance
|
|
1101
1110
|
const MemoizedDialog = React.memo(Dialog);
|
|
1102
1111
|
MemoizedDialog.displayName = 'Dialog';
|
|
1103
1112
|
|
|
1104
|
-
var styles$
|
|
1113
|
+
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
1114
|
|
|
1106
1115
|
/**
|
|
1107
1116
|
* Componente Drawer do Zanthus Design System
|
|
@@ -1183,20 +1192,20 @@ onClose, title = 'Título', isOpen = false, onOpen, className = '', id, disabled
|
|
|
1183
1192
|
event.stopPropagation();
|
|
1184
1193
|
internalClose();
|
|
1185
1194
|
};
|
|
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$
|
|
1195
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$c['zds-custom__drawer-shadow'], {
|
|
1196
|
+
[styles$c['zds-custom__drawer-shadow--visible']]: isOpen,
|
|
1197
|
+
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$c['zds-custom__drawer-sidebar'], {
|
|
1198
|
+
[styles$c['zds-custom__drawer-sidebar--open']]: isOpen,
|
|
1199
|
+
[styles$c['zds-custom__drawer-sidebar--disabled']]: disabled,
|
|
1191
1200
|
}, className), style: {
|
|
1192
1201
|
// ✅ APENAS: Width customizável via CSS custom property
|
|
1193
1202
|
'--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$
|
|
1203
|
+
}, 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
1204
|
};
|
|
1196
1205
|
|
|
1197
|
-
var styles$
|
|
1206
|
+
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
1207
|
|
|
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) => {
|
|
1208
|
+
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
1209
|
const [internalValue, setInternalValue] = useState('');
|
|
1201
1210
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
1202
1211
|
const currentValue = isControlled ? value : internalValue;
|
|
@@ -1241,11 +1250,11 @@ const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado',
|
|
|
1241
1250
|
return;
|
|
1242
1251
|
onKeyDown?.(e);
|
|
1243
1252
|
};
|
|
1244
|
-
const searchClass = clsx(styles$
|
|
1253
|
+
const searchClass = clsx(styles$b['zds-search'], {
|
|
1245
1254
|
disabled,
|
|
1246
1255
|
[className]: className,
|
|
1247
1256
|
});
|
|
1248
|
-
return (jsxs("div", { className: searchClass, onClick: onClick, onMouseDown: onMouseDown, children: [jsx("span", { className: clsx(styles$
|
|
1257
|
+
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
1258
|
});
|
|
1250
1259
|
Search.displayName = 'ZdsSearch';
|
|
1251
1260
|
|
|
@@ -1280,7 +1289,7 @@ const validateItems = (items, type) => {
|
|
|
1280
1289
|
});
|
|
1281
1290
|
};
|
|
1282
1291
|
|
|
1283
|
-
var styles$
|
|
1292
|
+
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
1293
|
|
|
1285
1294
|
/**
|
|
1286
1295
|
* Hook otimizado para scroll infinito usando IntersectionObserver
|
|
@@ -1545,17 +1554,17 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1545
1554
|
const renderItemContent = useCallback((item, index) => {
|
|
1546
1555
|
const itemId = item.id || `dropdown-item-${index}`;
|
|
1547
1556
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
1548
|
-
return (jsxs("div", { className: clsx(styles$
|
|
1549
|
-
[styles$
|
|
1557
|
+
return (jsxs("div", { className: clsx(styles$a['zds-dropdown__item-content'], {
|
|
1558
|
+
[styles$a['zds-dropdown__item-content--disabled']]: item.disabled,
|
|
1550
1559
|
}), children: [type === 'checkbox' && (jsx(Checkbox, { checked: !!currentSelection[itemId], onCheckedChange: (checked) => {
|
|
1551
1560
|
if (checked === 'indeterminate')
|
|
1552
1561
|
return;
|
|
1553
1562
|
toggleSelection(itemId, item);
|
|
1554
|
-
}, disabled: item.disabled, label: "" })), type === 'icon' && item.icon && (jsx("div", { className: styles$
|
|
1563
|
+
}, 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
1564
|
event.preventDefault();
|
|
1556
1565
|
event.stopPropagation();
|
|
1557
1566
|
handleItemClick(event, itemId, item);
|
|
1558
|
-
}, children: item.icon }) })), jsxs("div", { className: styles$
|
|
1567
|
+
}, 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
1568
|
}, [
|
|
1560
1569
|
type,
|
|
1561
1570
|
selectedItems,
|
|
@@ -1620,10 +1629,10 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1620
1629
|
isSearchFocused,
|
|
1621
1630
|
handleSearchClear,
|
|
1622
1631
|
]);
|
|
1623
|
-
const DropdownClass = clsx(styles$
|
|
1632
|
+
const DropdownClass = clsx(styles$a['zds-dropdown__container'], styles$a[`zds-dropdown__container--${position}`], {
|
|
1624
1633
|
[className || '']: className,
|
|
1625
|
-
[styles$
|
|
1626
|
-
[styles$
|
|
1634
|
+
[styles$a['zds-dropdown__container--search-active']]: searchQuery.length > 0,
|
|
1635
|
+
[styles$a['zds-dropdown__container--fixed-width']]: !!maxWidth,
|
|
1627
1636
|
});
|
|
1628
1637
|
const dropdownStyles = useMemo(() => {
|
|
1629
1638
|
const styles = {};
|
|
@@ -1645,14 +1654,14 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1645
1654
|
}
|
|
1646
1655
|
return styles;
|
|
1647
1656
|
}, [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$
|
|
1657
|
+
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
1658
|
const itemId = generateItemId(item, index);
|
|
1650
1659
|
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$
|
|
1660
|
+
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'], {
|
|
1661
|
+
[styles$a[`zds-dropdown__item--${type}`]]: type,
|
|
1662
|
+
[styles$a['zds-dropdown__item--selected']]: currentSelection[itemId],
|
|
1663
|
+
[styles$a['zds-dropdown__item--focused']]: focusedIndex === index,
|
|
1664
|
+
[styles$a['zds-dropdown__item--disabled']]: item.disabled,
|
|
1656
1665
|
}), tabIndex: focusedIndex === index ? 0 : -1, onFocus: () => setFocusedIndex(index), onClick: (event) => {
|
|
1657
1666
|
event.stopPropagation();
|
|
1658
1667
|
handleItemClick(event, itemId, item);
|
|
@@ -1662,12 +1671,12 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1662
1671
|
setFocusedIndex(index);
|
|
1663
1672
|
}
|
|
1664
1673
|
}, children: renderItemContent(item, index) }, itemId));
|
|
1665
|
-
})) : (jsx("li", { className: styles$
|
|
1674
|
+
})) : (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
1675
|
};
|
|
1667
1676
|
const MemoizedDropdown = React.memo(Dropdown);
|
|
1668
1677
|
MemoizedDropdown.displayName = 'Dropdown';
|
|
1669
1678
|
|
|
1670
|
-
var styles$
|
|
1679
|
+
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
1680
|
|
|
1672
1681
|
// ✅ CORREÇÃO: Problema de loop infinito no useEffect
|
|
1673
1682
|
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 +1761,25 @@ const Filter = ({ items = [], type = 'checkbox', selectedIds = [], onApplyFilter
|
|
|
1752
1761
|
}
|
|
1753
1762
|
return () => document.removeEventListener('keydown', handleEscape);
|
|
1754
1763
|
}, [isOpen, onClose]);
|
|
1755
|
-
const filterClass = clsx(styles$
|
|
1756
|
-
const dropdownClass = clsx(styles$
|
|
1757
|
-
[styles$
|
|
1764
|
+
const filterClass = clsx(styles$9['zds-filter__container'], className);
|
|
1765
|
+
const dropdownClass = clsx(styles$9['zds-filter__dropdown'], {
|
|
1766
|
+
[styles$9[`zds-filter__dropdown--${position}`]]: position,
|
|
1758
1767
|
});
|
|
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$
|
|
1768
|
+
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
1769
|
};
|
|
1761
1770
|
|
|
1762
|
-
var styles$
|
|
1771
|
+
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
1772
|
|
|
1764
1773
|
const Radio = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', ...rest }) => {
|
|
1765
1774
|
const componentId = id || useId();
|
|
1766
|
-
return (jsx(RadioGroup.Root, { id: componentId, className: styles$
|
|
1775
|
+
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
1776
|
const itemKey = id ?? value;
|
|
1768
1777
|
const uniqueId = `${componentId}-item-${value}`;
|
|
1769
|
-
return (jsx("div", { className: clsx(styles$
|
|
1778
|
+
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
1779
|
}) }));
|
|
1771
1780
|
};
|
|
1772
1781
|
|
|
1773
|
-
var styles$
|
|
1782
|
+
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
1783
|
|
|
1775
1784
|
/**
|
|
1776
1785
|
* Componente ListItem do Zanthus Design System
|
|
@@ -1855,24 +1864,24 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1855
1864
|
const currentVariant = validVariants.includes(variant) ? variant : 'text';
|
|
1856
1865
|
switch (currentVariant) {
|
|
1857
1866
|
case 'checkbox':
|
|
1858
|
-
return (jsxs(Fragment, { children: [jsx(Checkbox, { checked: internalChecked, disabled: disabled, onCheckedChange: () => handleCheckboxClick({}) }), jsxs("div", { className: styles$
|
|
1867
|
+
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
1868
|
case 'radio':
|
|
1860
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1869
|
+
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
1870
|
value: value,
|
|
1862
1871
|
label: '',
|
|
1863
1872
|
disabled: disabled
|
|
1864
|
-
}], "aria-labelledby": `${itemId}-text` }) }) }), jsxs("div", { className: styles$
|
|
1873
|
+
}], "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
1874
|
case 'icon':
|
|
1866
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1875
|
+
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
1876
|
case 'text':
|
|
1868
1877
|
default:
|
|
1869
|
-
return (jsxs("div", { className: styles$
|
|
1878
|
+
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
1879
|
}
|
|
1871
1880
|
}, [variant, itemId, internalChecked, disabled, handleCheckboxClick, handleRadioClick, handleTextOrIconClick, value, text, showSubText, subText, icon, name]);
|
|
1872
|
-
const listItemClass = clsx(styles$
|
|
1873
|
-
[styles$
|
|
1874
|
-
[styles$
|
|
1875
|
-
[styles$
|
|
1881
|
+
const listItemClass = clsx(styles$7['zds-list-item__container'], {
|
|
1882
|
+
[styles$7[`zds-list-item--${variant}`]]: variant,
|
|
1883
|
+
[styles$7['zds-list-item--disabled']]: disabled,
|
|
1884
|
+
[styles$7['zds-list-item--hovered']]: hovered,
|
|
1876
1885
|
[className || '']: className
|
|
1877
1886
|
});
|
|
1878
1887
|
const getAriaChecked = useCallback(() => {
|
|
@@ -1884,152 +1893,7 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1884
1893
|
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
1894
|
};
|
|
1886
1895
|
|
|
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"};
|
|
1896
|
+
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
1897
|
|
|
2034
1898
|
const normalizeText = (text) => {
|
|
2035
1899
|
if (typeof text === 'string')
|
|
@@ -2152,11 +2016,11 @@ const MenuItem = memo(({ item, isSelected, onSelect }) => {
|
|
|
2152
2016
|
const handleSelect = () => {
|
|
2153
2017
|
onSelect(item);
|
|
2154
2018
|
};
|
|
2155
|
-
return (jsxs(DropdownMenu.Item, { className: clsx(styles$
|
|
2019
|
+
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
2020
|
});
|
|
2157
2021
|
MenuItem.displayName = 'MenuItem';
|
|
2158
2022
|
|
|
2159
|
-
const
|
|
2023
|
+
const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onScrollEnd, isLoadingMore, onApiSearch, enableApiSearch, selectedItems = [], onOpenChange, align = 'start', className, maxHeight = 400, ...rest }) => {
|
|
2160
2024
|
const itemsWrapperRef = useRef(null);
|
|
2161
2025
|
const hasReachedEndRef = useRef(false);
|
|
2162
2026
|
const observerRef = useRef(null);
|
|
@@ -2165,16 +2029,14 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2165
2029
|
const isLoadingMoreRef = useRef(isLoadingMore);
|
|
2166
2030
|
const [searchInput, setSearchInput] = useState('');
|
|
2167
2031
|
const [searchTerm, setSearchTerm] = useState('');
|
|
2168
|
-
const [open, setOpen] = useState(false);
|
|
2169
2032
|
const maxHeightStyle = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
|
|
2170
|
-
const { handleItemSelect: handleItemSelectLogic, isItemSelected } = useMenuLogic({
|
|
2033
|
+
const { open, setOpen, handleItemSelect: handleItemSelectLogic, isItemSelected } = useMenuLogic({
|
|
2171
2034
|
selectedItems,
|
|
2172
2035
|
onItemSelect,
|
|
2173
2036
|
onOpenChange,
|
|
2174
2037
|
});
|
|
2175
2038
|
const handleItemSelect = useCallback((item) => {
|
|
2176
2039
|
handleItemSelectLogic(item);
|
|
2177
|
-
setOpen(false);
|
|
2178
2040
|
}, [handleItemSelectLogic]);
|
|
2179
2041
|
const { filteredItems } = useSearchLogic({
|
|
2180
2042
|
items,
|
|
@@ -2200,7 +2062,7 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2200
2062
|
useEffect(() => {
|
|
2201
2063
|
onScrollEndRef.current = onScrollEnd;
|
|
2202
2064
|
isLoadingMoreRef.current = isLoadingMore;
|
|
2203
|
-
});
|
|
2065
|
+
}, [onScrollEnd, isLoadingMore]);
|
|
2204
2066
|
useEffect(() => {
|
|
2205
2067
|
if (!open || !enableInfiniteScroll) {
|
|
2206
2068
|
return;
|
|
@@ -2259,27 +2121,24 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2259
2121
|
const renderMenuItem = useCallback((item, key) => {
|
|
2260
2122
|
const hasChildren = item.children && item.children.length > 0;
|
|
2261
2123
|
if (hasChildren) {
|
|
2262
|
-
return (jsxs(DropdownMenu.Sub, { children: [jsxs(DropdownMenu.SubTrigger, { className: styles$
|
|
2124
|
+
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
2125
|
}
|
|
2264
2126
|
return (jsx(MenuItem, { item: item, isSelected: isItemSelected(item), onSelect: handleItemSelect }, key));
|
|
2265
2127
|
}, [handleItemSelect, isItemSelected]);
|
|
2266
2128
|
const handleOpenChange = (newOpen) => {
|
|
2267
2129
|
setOpen(newOpen);
|
|
2268
|
-
if (onOpenChange) {
|
|
2269
|
-
onOpenChange(newOpen);
|
|
2270
|
-
}
|
|
2271
2130
|
if (!newOpen) {
|
|
2272
2131
|
hasReachedEndRef.current = false;
|
|
2273
2132
|
}
|
|
2274
2133
|
};
|
|
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$
|
|
2134
|
+
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
2135
|
if (search) {
|
|
2277
2136
|
e.stopPropagation();
|
|
2278
2137
|
}
|
|
2279
|
-
}, ...rest, children: [search && (jsx("div", { className: styles$
|
|
2138
|
+
}, ...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
2139
|
};
|
|
2281
2140
|
|
|
2282
|
-
var styles$
|
|
2141
|
+
var styles$5 = {"zds-quantity":"Quantity-module__zds-quantity___AymLj","zds-quantity__input":"Quantity-module__zds-quantity__input___Wlhmo"};
|
|
2283
2142
|
|
|
2284
2143
|
/**
|
|
2285
2144
|
* Componente Quantity - permite incrementar/decrementar valores numéricos
|
|
@@ -2498,365 +2357,94 @@ const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled
|
|
|
2498
2357
|
}, [disabled, increment, decrement, decimal, decimalPlaces, isControlled, onChange, computedValue]);
|
|
2499
2358
|
const uniqueId = useId();
|
|
2500
2359
|
const inputId = id || uniqueId;
|
|
2501
|
-
return (jsxs("div", { className: clsx(styles$
|
|
2360
|
+
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
2361
|
};
|
|
2503
2362
|
const memorizedQuantity = React.memo(Quantity);
|
|
2504
2363
|
memorizedQuantity.displayName = 'Quantity';
|
|
2505
2364
|
|
|
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';
|
|
2365
|
+
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
2366
|
|
|
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) => {
|
|
2367
|
+
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange, value, ...restProps }) => {
|
|
2368
|
+
const itemRef = useRef(null);
|
|
2369
|
+
const handleCheckboxChange = (checkedValue) => {
|
|
2370
|
+
onCheckedChange(Boolean(checkedValue));
|
|
2371
|
+
};
|
|
2372
|
+
const handleKeyDown = (e) => {
|
|
2654
2373
|
if (disabled)
|
|
2655
2374
|
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)
|
|
2375
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
2376
|
+
e.preventDefault();
|
|
2377
|
+
e.stopPropagation();
|
|
2378
|
+
onCheckedChange(!checked);
|
|
2676
2379
|
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)
|
|
2380
|
+
}
|
|
2381
|
+
if (e.key === 'ArrowDown') {
|
|
2382
|
+
e.preventDefault();
|
|
2383
|
+
const nextElement = itemRef.current?.nextElementSibling;
|
|
2384
|
+
if (nextElement && nextElement.getAttribute('tabIndex') === '0') {
|
|
2385
|
+
nextElement.focus();
|
|
2386
|
+
}
|
|
2693
2387
|
return;
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2388
|
+
}
|
|
2389
|
+
if (e.key === 'ArrowUp') {
|
|
2390
|
+
e.preventDefault();
|
|
2391
|
+
const prevElement = itemRef.current?.previousElementSibling;
|
|
2392
|
+
if (prevElement && prevElement.getAttribute('tabIndex') === '0') {
|
|
2393
|
+
prevElement.focus();
|
|
2394
|
+
}
|
|
2701
2395
|
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
2396
|
}
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
setIsOpen(false);
|
|
2709
|
-
setFocusedOptionIndex(-1);
|
|
2710
|
-
}, 200);
|
|
2711
|
-
}, [disabled]);
|
|
2712
|
-
const handleKeyDown = useCallback((event) => {
|
|
2397
|
+
};
|
|
2398
|
+
const handleClick = (e) => {
|
|
2713
2399
|
if (disabled)
|
|
2714
2400
|
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);
|
|
2401
|
+
const target = e.target;
|
|
2402
|
+
const isCheckboxClick = target.closest('input[type="checkbox"]') ||
|
|
2403
|
+
target.closest('label');
|
|
2404
|
+
if (!isCheckboxClick) {
|
|
2405
|
+
e.preventDefault();
|
|
2406
|
+
onCheckedChange(!checked);
|
|
2794
2407
|
}
|
|
2795
|
-
}
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2408
|
+
};
|
|
2409
|
+
return (jsx("div", { ref: itemRef, className: clsx(styles$4.checkboxItem, {
|
|
2410
|
+
[styles$4.disabled]: disabled,
|
|
2411
|
+
}), 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 })] }) }) }) }));
|
|
2412
|
+
};
|
|
2413
|
+
CheckboxSelectItem.displayName = 'CheckboxSelectItem';
|
|
2414
|
+
|
|
2415
|
+
const ExpandableSelectItem = ({ item, variant, onSelect, selectedValues, level = 0, }) => {
|
|
2416
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
2417
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
2418
|
+
const isSelected = selectedValues.includes(item.value);
|
|
2419
|
+
const handleClick = (e) => {
|
|
2420
|
+
if (hasChildren) {
|
|
2421
|
+
e.preventDefault();
|
|
2422
|
+
e.stopPropagation();
|
|
2423
|
+
setIsExpanded(!isExpanded);
|
|
2801
2424
|
}
|
|
2802
2425
|
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;
|
|
2426
|
+
onSelect(item.value);
|
|
2844
2427
|
}
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2428
|
+
};
|
|
2429
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$4.expandableItemContainer, style: { paddingLeft: `${level * 16}px` }, children: jsxs("div", { className: clsx(styles$4.itemWrapper, {
|
|
2430
|
+
[styles$4.selected]: isSelected && !hasChildren,
|
|
2431
|
+
[styles$4.disabled]: item.disabled,
|
|
2432
|
+
}), onClick: handleClick, onKeyDown: (e) => {
|
|
2433
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
2434
|
+
e.preventDefault();
|
|
2435
|
+
handleClick(e);
|
|
2436
|
+
}
|
|
2437
|
+
}, 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))) }))] }));
|
|
2438
|
+
};
|
|
2439
|
+
|
|
2440
|
+
const SelectItem = React.forwardRef(({ text, subTitle, icon, disabled, value, variant, ...restProps }, ref) => {
|
|
2441
|
+
return (jsxs("div", { className: clsx(styles$4.itemWrapper, {
|
|
2442
|
+
[styles$4.disabled]: disabled,
|
|
2443
|
+
}), "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, {
|
|
2444
|
+
[styles$4.disabled]: disabled,
|
|
2445
|
+
}), 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
2446
|
});
|
|
2859
|
-
|
|
2447
|
+
SelectItem.displayName = 'SelectItem';
|
|
2860
2448
|
|
|
2861
2449
|
const initialState = {
|
|
2862
2450
|
isOpen: false,
|
|
@@ -2882,16 +2470,15 @@ function selectReducer(state, action) {
|
|
|
2882
2470
|
return { ...state, hasError: action.payload };
|
|
2883
2471
|
case 'RESET_SEARCH':
|
|
2884
2472
|
return { ...state, searchInput: '', searchTerm: '' };
|
|
2885
|
-
case 'VALIDATE':
|
|
2473
|
+
case 'VALIDATE': {
|
|
2886
2474
|
const hasError = action.payload.required && state.selectedValues.length === 0;
|
|
2887
2475
|
return { ...state, hasError, touched: true };
|
|
2476
|
+
}
|
|
2888
2477
|
default:
|
|
2889
2478
|
return state;
|
|
2890
2479
|
}
|
|
2891
2480
|
}
|
|
2892
|
-
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange,
|
|
2893
|
-
// API search props
|
|
2894
|
-
enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
2481
|
+
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange, enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
2895
2482
|
const [state, dispatch] = useReducer(selectReducer, {
|
|
2896
2483
|
...initialState,
|
|
2897
2484
|
selectedValues: Array.isArray(value) ? value : value ? [value] : [],
|
|
@@ -2900,9 +2487,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2900
2487
|
const debounceTimeoutRef = useRef(null);
|
|
2901
2488
|
const hasInitialSearchRef = useRef(false);
|
|
2902
2489
|
const lastSearchTermRef = useRef('');
|
|
2903
|
-
// Função de debounce para busca em API
|
|
2904
2490
|
const debouncedApiSearch = useCallback((searchTerm) => {
|
|
2905
|
-
// Evita chamadas duplicadas com o mesmo termo
|
|
2906
2491
|
if (lastSearchTermRef.current === searchTerm) {
|
|
2907
2492
|
return;
|
|
2908
2493
|
}
|
|
@@ -2914,7 +2499,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2914
2499
|
if (enableApiSearch && onApiSearch) {
|
|
2915
2500
|
onApiSearch(searchTerm);
|
|
2916
2501
|
}
|
|
2917
|
-
}, 300);
|
|
2502
|
+
}, 300);
|
|
2918
2503
|
}, [enableApiSearch, onApiSearch]);
|
|
2919
2504
|
useEffect(() => {
|
|
2920
2505
|
const newValues = Array.isArray(value) ? value : value ? [value] : [];
|
|
@@ -2930,35 +2515,28 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2930
2515
|
useEffect(() => {
|
|
2931
2516
|
if (!state.isOpen) {
|
|
2932
2517
|
dispatch({ type: 'RESET_SEARCH' });
|
|
2933
|
-
// Reset flags quando fechar
|
|
2934
2518
|
hasInitialSearchRef.current = false;
|
|
2935
2519
|
lastSearchTermRef.current = '';
|
|
2936
2520
|
}
|
|
2937
2521
|
}, [state.isOpen]);
|
|
2938
|
-
// Efeito para busca inicial quando abrir o select com API search
|
|
2939
2522
|
useEffect(() => {
|
|
2940
2523
|
if (state.isOpen && enableApiSearch && !hasInitialSearchRef.current) {
|
|
2941
2524
|
hasInitialSearchRef.current = true;
|
|
2942
|
-
// Faz uma busca inicial vazia para carregar os itens (sem debounce para ser mais rápido)
|
|
2943
2525
|
if (onApiSearch) {
|
|
2944
2526
|
onApiSearch('');
|
|
2945
2527
|
lastSearchTermRef.current = '';
|
|
2946
2528
|
}
|
|
2947
2529
|
}
|
|
2948
2530
|
}, [state.isOpen, enableApiSearch, onApiSearch]);
|
|
2949
|
-
// Efeito para disparar busca via API somente quando searchTerm for definido (Enter pressionado)
|
|
2950
2531
|
useEffect(() => {
|
|
2951
2532
|
if (enableApiSearch && state.searchTerm && state.isOpen) {
|
|
2952
|
-
// Só dispara se for diferente do último termo pesquisado
|
|
2953
2533
|
if (lastSearchTermRef.current !== state.searchTerm) {
|
|
2954
2534
|
debouncedApiSearch(state.searchTerm);
|
|
2955
2535
|
}
|
|
2956
2536
|
}
|
|
2957
2537
|
}, [state.searchTerm, enableApiSearch, state.isOpen, debouncedApiSearch]);
|
|
2958
|
-
// Efeito para recarregar dados quando o campo de busca ficar vazio
|
|
2959
2538
|
useEffect(() => {
|
|
2960
2539
|
if (enableApiSearch && state.isOpen && state.searchInput === '' && state.searchTerm === '') {
|
|
2961
|
-
// Só recarrega se já teve alguma busca anterior
|
|
2962
2540
|
if (lastSearchTermRef.current !== '') {
|
|
2963
2541
|
lastSearchTermRef.current = '';
|
|
2964
2542
|
if (onApiSearch) {
|
|
@@ -2967,13 +2545,11 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
2967
2545
|
}
|
|
2968
2546
|
}
|
|
2969
2547
|
}, [state.searchInput, state.searchTerm, enableApiSearch, state.isOpen, onApiSearch]);
|
|
2970
|
-
// Cleanup do timeout quando componente for desmontado
|
|
2971
2548
|
useEffect(() => {
|
|
2972
2549
|
return () => {
|
|
2973
2550
|
if (debounceTimeoutRef.current) {
|
|
2974
2551
|
clearTimeout(debounceTimeoutRef.current);
|
|
2975
2552
|
}
|
|
2976
|
-
// Limpar refs no cleanup
|
|
2977
2553
|
hasInitialSearchRef.current = false;
|
|
2978
2554
|
lastSearchTermRef.current = '';
|
|
2979
2555
|
};
|
|
@@ -3002,7 +2578,6 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3002
2578
|
};
|
|
3003
2579
|
const resetSearch = () => {
|
|
3004
2580
|
dispatch({ type: 'RESET_SEARCH' });
|
|
3005
|
-
// Reset da ref para permitir nova busca vazia
|
|
3006
2581
|
lastSearchTermRef.current = '';
|
|
3007
2582
|
};
|
|
3008
2583
|
const validate = () => {
|
|
@@ -3051,12 +2626,9 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3051
2626
|
selectedValues[0]);
|
|
3052
2627
|
};
|
|
3053
2628
|
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
2629
|
if (enableApiSearch) {
|
|
3057
2630
|
return items;
|
|
3058
2631
|
}
|
|
3059
|
-
// Busca local (comportamento original)
|
|
3060
2632
|
if (!searchTerm)
|
|
3061
2633
|
return items;
|
|
3062
2634
|
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
|
@@ -3099,34 +2671,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3099
2671
|
};
|
|
3100
2672
|
}
|
|
3101
2673
|
|
|
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 }) => {
|
|
2674
|
+
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
2675
|
const componentId = useId();
|
|
3131
2676
|
const selectId = `select-${componentId}`;
|
|
3132
2677
|
const viewportRef = useRef(null);
|
|
@@ -3137,12 +2682,10 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3137
2682
|
search,
|
|
3138
2683
|
onValueChange,
|
|
3139
2684
|
onOpenChange,
|
|
3140
|
-
// API search props
|
|
3141
2685
|
enableApiSearch,
|
|
3142
2686
|
onApiSearch,
|
|
3143
2687
|
isSearching,
|
|
3144
2688
|
});
|
|
3145
|
-
// Infinite Scroll Logic
|
|
3146
2689
|
useEffect(() => {
|
|
3147
2690
|
const viewport = viewportRef.current;
|
|
3148
2691
|
if (!viewport || !enableInfiniteScroll)
|
|
@@ -3163,7 +2706,6 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3163
2706
|
viewport.removeEventListener('scroll', handleScroll);
|
|
3164
2707
|
};
|
|
3165
2708
|
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore]);
|
|
3166
|
-
// Reset a flag when the select opens
|
|
3167
2709
|
useEffect(() => {
|
|
3168
2710
|
if (state.isOpen && enableInfiniteScroll) {
|
|
3169
2711
|
hasReachedEndRef.current = false;
|
|
@@ -3171,21 +2713,27 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3171
2713
|
}, [state.isOpen, enableInfiniteScroll]);
|
|
3172
2714
|
const displayText = useMemo(() => utils.getDisplayText(state.selectedValues, placeholder, variant, items), [state.selectedValues, placeholder, variant, items, utils]);
|
|
3173
2715
|
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
2716
|
const termToFilter = enableApiSearch ? state.searchTerm : state.searchInput;
|
|
3177
2717
|
return utils.getFilteredItems(items, termToFilter);
|
|
3178
2718
|
}, [items, state.searchTerm, state.searchInput, enableApiSearch, utils]);
|
|
3179
2719
|
const containerStyle = useMemo(() => ({
|
|
3180
|
-
maxWidth:
|
|
2720
|
+
maxWidth: maxWidth ? `${maxWidth}px` : undefined,
|
|
3181
2721
|
}), [maxWidth]);
|
|
3182
2722
|
const handleSearchChange = (e) => {
|
|
3183
2723
|
actions.setSearchInput(e.target.value);
|
|
3184
2724
|
};
|
|
3185
2725
|
const handleSearchKeyDown = (e) => {
|
|
3186
|
-
e.
|
|
2726
|
+
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
|
2727
|
+
const input = e.currentTarget;
|
|
2728
|
+
const hasSelection = input.selectionStart !== input.selectionEnd;
|
|
2729
|
+
if (!hasSelection) {
|
|
2730
|
+
e.preventDefault();
|
|
2731
|
+
return;
|
|
2732
|
+
}
|
|
2733
|
+
}
|
|
3187
2734
|
if (e.key === 'Enter') {
|
|
3188
2735
|
e.preventDefault();
|
|
2736
|
+
e.stopPropagation();
|
|
3189
2737
|
actions.setSearchTerm(state.searchInput);
|
|
3190
2738
|
}
|
|
3191
2739
|
if (e.key === 'Escape') {
|
|
@@ -3207,11 +2755,25 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3207
2755
|
[styles$4.open]: state.isOpen,
|
|
3208
2756
|
}), 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
2757
|
[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) =>
|
|
2758
|
+
}), 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) => {
|
|
2759
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
2760
|
+
if (hasChildren) {
|
|
2761
|
+
return (jsx(ExpandableSelectItem, { item: item, variant: variant, selectedValues: state.selectedValues, onSelect: (value) => {
|
|
2762
|
+
if (variant === 'checkbox') {
|
|
2763
|
+
const isSelected = state.selectedValues.includes(value);
|
|
2764
|
+
actions.handleMultipleSelect(value, !isSelected);
|
|
2765
|
+
}
|
|
2766
|
+
else {
|
|
2767
|
+
actions.handleSingleSelect(value);
|
|
2768
|
+
}
|
|
2769
|
+
} }, item.id || item.value));
|
|
2770
|
+
}
|
|
2771
|
+
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));
|
|
2772
|
+
}), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$4.loadingMore, children: "Carregando mais itens..." }))] })) }) })] }) })] }) }));
|
|
3211
2773
|
};
|
|
3212
|
-
|
|
2774
|
+
Select.displayName = 'Select';
|
|
3213
2775
|
|
|
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-
|
|
2776
|
+
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
2777
|
|
|
3216
2778
|
/**
|
|
3217
2779
|
* @module constants
|
|
@@ -6649,10 +6211,10 @@ const Table = ({ columns = [], dataSource = [], className, loading = false, rowS
|
|
|
6649
6211
|
return columns;
|
|
6650
6212
|
const checkboxColumn = {
|
|
6651
6213
|
key: '__checkbox__',
|
|
6652
|
-
label: (jsx(Checkbox, { checked: isAllSelected, indeterminate: isIndeterminate, onCheckedChange: toggleAll,
|
|
6214
|
+
label: (jsx(Checkbox, { checked: isAllSelected || isIndeterminate, indeterminate: isIndeterminate, onCheckedChange: toggleAll, disabled: rowSelection.disableSelectAll })),
|
|
6653
6215
|
render: (_, index) => {
|
|
6654
6216
|
const props = rowSelection.getCheckboxProps?.(dataSource[index], index) || {};
|
|
6655
|
-
return (jsx(Checkbox, { checked: selectedSet.has(index), onCheckedChange: () => toggleRow(index), disabled: props.disabled
|
|
6217
|
+
return (jsx(Checkbox, { checked: selectedSet.has(index), onCheckedChange: () => toggleRow(index), disabled: props.disabled }));
|
|
6656
6218
|
},
|
|
6657
6219
|
align: 'center',
|
|
6658
6220
|
};
|
|
@@ -7201,5 +6763,5 @@ function useApiSimulation(config = {}) {
|
|
|
7201
6763
|
};
|
|
7202
6764
|
}
|
|
7203
6765
|
|
|
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,
|
|
6766
|
+
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
6767
|
//# sourceMappingURL=index.esm.js.map
|