@giro-ds/react 1.0.5 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/Button.types.d.ts +3 -23
- package/dist/components/Button/__tests__/Button.test.d.ts +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +4 -4
- package/dist/components/Checkbox/Checkbox.types.d.ts +4 -19
- package/dist/components/Checkbox/__tests__/Checkbox.test.d.ts +1 -0
- package/dist/components/Menu/Menu.d.ts +1 -1
- package/dist/components/Menu/Menu.types.d.ts +25 -34
- package/dist/components/Menu/__tests__/Menu.test.d.ts +1 -0
- package/dist/components/{MenuRadix → Menu}/components/MenuItem.d.ts +1 -6
- package/dist/components/{MenuRadix → Menu}/hooks/useMenuLogic.d.ts +1 -1
- package/dist/components/{MenuRadix → Menu}/hooks/useSearchLogic.d.ts +1 -1
- package/dist/components/Menu/index.d.ts +1 -1
- package/dist/components/Radio/Radio.d.ts +3 -3
- package/dist/components/Radio/Radio.types.d.ts +11 -14
- package/dist/components/Radio/__tests__/Radio.test.d.ts +1 -0
- package/dist/components/Radio/index.d.ts +1 -0
- package/dist/components/Search/Search.types.d.ts +1 -0
- package/dist/components/Select/Select.d.ts +2 -2
- package/dist/components/Select/Select.types.d.ts +100 -52
- package/dist/components/Select/__tests__/SelectRadix.test.d.ts +1 -0
- package/dist/components/{SelectRadix → Select}/components/CheckboxSelectItem.d.ts +1 -1
- package/dist/components/Select/components/ExpandableSelectItem.d.ts +11 -0
- package/dist/components/{SelectRadix → Select}/components/SelectItem.d.ts +1 -1
- package/dist/components/{SelectRadix → Select}/hooks/useSelectLogic.d.ts +1 -1
- package/dist/components/Select/index.d.ts +4 -1
- package/dist/components/Switch/Switch.d.ts +4 -0
- package/dist/components/{CheckboxRadix/CheckboxRadix.types.d.ts → Switch/Switch.types.d.ts} +5 -7
- package/dist/components/Switch/__tests__/Switch.test.d.ts +1 -0
- package/dist/components/Switch/index.d.ts +2 -0
- package/dist/components/Table/Table.d.ts +2 -3
- package/dist/components/Table/Table.types.d.ts +46 -10
- package/dist/components/Table/index.d.ts +1 -1
- package/dist/components/TextField/TextField.types.d.ts +2 -3
- package/dist/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.types.d.ts +5 -1
- package/dist/components/Tooltip/__tests__/Tooltip.test.d.ts +1 -0
- package/dist/components/Tooltip/index.d.ts +1 -0
- package/dist/components/index.d.ts +5 -13
- package/dist/index.cjs +275 -843
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +85 -248
- package/dist/index.esm.js +287 -833
- package/dist/index.esm.js.map +1 -1
- package/dist/shared/Label/index.d.ts +4 -3
- package/dist/styles.css +1 -1
- package/package.json +3 -2
- package/dist/components/CheckboxRadix/CheckboxRadix.d.ts +0 -4
- package/dist/components/CheckboxRadix/index.d.ts +0 -2
- package/dist/components/MenuRadix/MenuRadix.d.ts +0 -4
- package/dist/components/MenuRadix/MenuRadix.types.d.ts +0 -27
- package/dist/components/MenuRadix/index.d.ts +0 -2
- package/dist/components/RadioRadix/RadioRadix.d.ts +0 -4
- package/dist/components/RadioRadix/RadioRadix.types.d.ts +0 -15
- package/dist/components/RadioRadix/index.d.ts +0 -2
- package/dist/components/SelectField/SelectField.d.ts +0 -4
- package/dist/components/SelectField/SelectField.types.d.ts +0 -35
- package/dist/components/SelectRadix/SelectRadix.d.ts +0 -4
- package/dist/components/SelectRadix/SelectRadix.types.d.ts +0 -112
- package/dist/components/SelectRadix/index.d.ts +0 -5
package/dist/index.esm.js
CHANGED
|
@@ -1,24 +1,23 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { ChevronUp16Regular, ChevronDown16Regular, ChevronLeft16Regular, ChevronRight16Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, Info20Filled, Warning20Filled, CheckmarkCircle20Filled } from '@fluentui/react-icons';
|
|
2
|
+
import React, { useId, useMemo, useRef, useState, useEffect, useCallback, forwardRef, memo, useReducer, createElement, isValidElement, createContext, useContext } from 'react';
|
|
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';
|
|
6
5
|
import { initReactI18next, useTranslation } from 'react-i18next';
|
|
7
6
|
import i18n from 'i18next';
|
|
8
|
-
import { Checkbox as Checkbox$1,
|
|
7
|
+
import { Checkbox as Checkbox$1, Tooltip as Tooltip$1, Label, RadioGroup, DropdownMenu, Select as Select$1, Switch as Switch$1 } from 'radix-ui';
|
|
9
8
|
|
|
10
|
-
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"};
|
|
11
10
|
|
|
12
11
|
let Avatar = ({ id = '', icon, size = 'small', className = '' }) => {
|
|
13
12
|
const componentId = id || useId();
|
|
14
|
-
const AvatarClass = clsx(styles$
|
|
15
|
-
[styles$
|
|
16
|
-
[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',
|
|
17
16
|
}, className);
|
|
18
|
-
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 }) }));
|
|
19
18
|
};
|
|
20
19
|
|
|
21
|
-
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"};
|
|
22
21
|
|
|
23
22
|
const Badge = ({ children, badgeValue = null, type = 'notification', className = '', id, 'aria-label': ariaLabel, }) => {
|
|
24
23
|
const isEmpty = badgeValue === null || badgeValue === undefined || badgeValue === '';
|
|
@@ -41,20 +40,21 @@ const Badge = ({ children, badgeValue = null, type = 'notification', className =
|
|
|
41
40
|
};
|
|
42
41
|
const displayValue = getDisplayValue(badgeValue);
|
|
43
42
|
if (type === 'notification') {
|
|
44
|
-
return (jsxs("div", { className: clsx(styles$
|
|
45
|
-
[styles$
|
|
46
|
-
[styles$
|
|
47
|
-
}, 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 }))] }));
|
|
48
47
|
}
|
|
49
|
-
return (jsx("div", { className: clsx(styles$
|
|
50
|
-
[styles$
|
|
51
|
-
}, 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 })) }) }));
|
|
52
51
|
};
|
|
53
52
|
|
|
54
|
-
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"};
|
|
55
54
|
|
|
56
|
-
const Button =
|
|
57
|
-
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;
|
|
58
58
|
const getComponent = () => {
|
|
59
59
|
if (as)
|
|
60
60
|
return as;
|
|
@@ -66,23 +66,20 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
66
66
|
};
|
|
67
67
|
const Component = getComponent();
|
|
68
68
|
const hasContent = useMemo(() => {
|
|
69
|
-
return children &&
|
|
69
|
+
return children && React.Children.count(children) > 0;
|
|
70
70
|
}, [children]);
|
|
71
|
-
const buttonClasses = clsx(styles$
|
|
72
|
-
[styles$
|
|
73
|
-
[styles$
|
|
74
|
-
[styles$
|
|
75
|
-
[styles$
|
|
76
|
-
[styles$
|
|
77
|
-
[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,
|
|
78
78
|
}, className);
|
|
79
79
|
const getAriaLabel = () => {
|
|
80
80
|
if (ariaLabel)
|
|
81
81
|
return ariaLabel;
|
|
82
82
|
if (iconOnly && !ariaLabel) {
|
|
83
|
-
if (process.env.NODE_ENV === 'development') {
|
|
84
|
-
console.warn('Button: Icon-only buttons should have an ariaLabel for accessibility');
|
|
85
|
-
}
|
|
86
83
|
return 'Botão de ação';
|
|
87
84
|
}
|
|
88
85
|
if (typeof children === 'string')
|
|
@@ -97,10 +94,13 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
97
94
|
onClick?.(e);
|
|
98
95
|
};
|
|
99
96
|
const renderContent = () => {
|
|
100
|
-
if (iconOnly &&
|
|
101
|
-
return (jsx("span", { className: styles$
|
|
97
|
+
if (iconOnly && !loading) {
|
|
98
|
+
return (jsx("span", { className: styles$n.buttonIconOnly, "aria-hidden": "true", children: icon }));
|
|
99
|
+
}
|
|
100
|
+
if (loading) {
|
|
101
|
+
return (jsx("span", { className: styles$n.buttonLoading, "aria-hidden": "true", children: jsx(SpinnerIos16Regular, { "aria-hidden": "true" }) }));
|
|
102
102
|
}
|
|
103
|
-
return (jsxs(Fragment, { children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$
|
|
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 }))] }));
|
|
104
104
|
};
|
|
105
105
|
const baseProps = {
|
|
106
106
|
ref,
|
|
@@ -124,7 +124,6 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
124
124
|
if (Component !== 'a') {
|
|
125
125
|
return {
|
|
126
126
|
to: disabled ? '#' : to,
|
|
127
|
-
...routerProps,
|
|
128
127
|
};
|
|
129
128
|
}
|
|
130
129
|
return {
|
|
@@ -143,7 +142,7 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
143
142
|
});
|
|
144
143
|
Button.displayName = 'Button';
|
|
145
144
|
|
|
146
|
-
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"};
|
|
147
146
|
|
|
148
147
|
// i18n.ts
|
|
149
148
|
// Resources configuration
|
|
@@ -503,8 +502,8 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
503
502
|
* Renderiza os anos usando o array de objetos memoizado.
|
|
504
503
|
*/
|
|
505
504
|
const renderYears = useCallback(() => {
|
|
506
|
-
return yearsArray.map((item) => (jsx("div", { className: clsx(styles$
|
|
507
|
-
[styles$
|
|
505
|
+
return yearsArray.map((item) => (jsx("div", { className: clsx(styles$m['zds-calendar__year'], {
|
|
506
|
+
[styles$m['zds-calendar__year--current']]: item.isCurrent,
|
|
508
507
|
}), onClick: () => handleYearSelect(item.year), tabIndex: 0, role: "button", "aria-pressed": item.isCurrent, "aria-label": item.isCurrent
|
|
509
508
|
? locale === 'en-us'
|
|
510
509
|
? `Current year, ${item.year}`
|
|
@@ -524,14 +523,14 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
524
523
|
const renderDays = useCallback(() => {
|
|
525
524
|
return daysArray.map((item) => {
|
|
526
525
|
if (item.type === 'empty') {
|
|
527
|
-
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));
|
|
528
527
|
}
|
|
529
528
|
const dayItem = item;
|
|
530
529
|
const isDisabled = !isDateInRange(dayItem.date);
|
|
531
|
-
return (jsx("div", { className: clsx(styles$
|
|
532
|
-
[styles$
|
|
533
|
-
[styles$
|
|
534
|
-
[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,
|
|
535
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));
|
|
536
535
|
});
|
|
537
536
|
}, [
|
|
@@ -547,7 +546,7 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
547
546
|
const weekdaysComponent = useMemo(() => {
|
|
548
547
|
if (changeView)
|
|
549
548
|
return null;
|
|
550
|
-
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}`)));
|
|
551
550
|
}, [changeView, weekDaysLabels]);
|
|
552
551
|
// ✅ Limpa o anúncio após um tempo para evitar repetições
|
|
553
552
|
useEffect(() => {
|
|
@@ -562,13 +561,13 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
562
561
|
setYearRangeStart(year - 13);
|
|
563
562
|
}
|
|
564
563
|
}, [changeView, year]);
|
|
565
|
-
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: {
|
|
566
565
|
position: 'absolute',
|
|
567
566
|
width: 1,
|
|
568
567
|
height: 1,
|
|
569
568
|
overflow: 'hidden',
|
|
570
569
|
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
571
|
-
}, 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) => {
|
|
572
571
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
573
572
|
e.preventDefault();
|
|
574
573
|
handleToggleView();
|
|
@@ -579,7 +578,7 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
579
578
|
: 'Fechar seleção de ano'
|
|
580
579
|
: locale === 'en-us'
|
|
581
580
|
? 'Open year selection'
|
|
582
|
-
: '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
|
|
583
582
|
? locale === 'en-us'
|
|
584
583
|
? 'Show previous years'
|
|
585
584
|
: 'Mostrar anos anteriores'
|
|
@@ -591,27 +590,27 @@ const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, o
|
|
|
591
590
|
: 'Mostrar próximos anos'
|
|
592
591
|
: locale === 'en-us'
|
|
593
592
|
? `Next month, ${new Date(year, month + 1, 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}`
|
|
594
|
-
: `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" }) })] }));
|
|
595
594
|
};
|
|
596
595
|
// ✅ Default props integrados na função usando valores padrão dos parâmetros
|
|
597
596
|
Calendar.displayName = 'Calendar';
|
|
598
|
-
const MemoizedCalendar =
|
|
597
|
+
const MemoizedCalendar = React.memo(Calendar);
|
|
599
598
|
MemoizedCalendar.displayName = 'Calendar';
|
|
600
599
|
|
|
601
|
-
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"};
|
|
602
601
|
|
|
603
602
|
const Callout = ({ type = 'neutral', title = null, text = '', icon = null, className = '', id = '' }) => {
|
|
604
603
|
const generatedId = useId();
|
|
605
604
|
const titleId = id || `callout-title-${generatedId}`;
|
|
606
605
|
const componentId = id || generatedId;
|
|
607
|
-
const calloutClass = clsx(styles$
|
|
608
|
-
[styles$
|
|
609
|
-
[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,
|
|
610
609
|
}, className);
|
|
611
|
-
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 })] })] }) }));
|
|
612
611
|
};
|
|
613
612
|
|
|
614
|
-
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"};
|
|
615
614
|
|
|
616
615
|
const CheckSmall = ({ className = '', width = 12, height = 10, fill = 'white', ...restProps }) => {
|
|
617
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 }) }));
|
|
@@ -621,60 +620,14 @@ const CheckHalf = ({ className = '', width = 16, height = 16, fill = 'white', ..
|
|
|
621
620
|
return (jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": "true", ...restProps, children: jsx("g", { id: "Icons/check_indeterminate_small", children: jsx("path", { id: "icon", d: "M3 9V7H13V9H3Z", fill: fill }) }) }));
|
|
622
621
|
};
|
|
623
622
|
|
|
624
|
-
|
|
625
|
-
* A customizable Checkbox component that supports controlled and uncontrolled states.
|
|
626
|
-
*/
|
|
627
|
-
const Checkbox = ({ id, name, onChange, label = 'Checkbox', className = '', value = '', disabled = false, indeterminate = false, checked = false, ariaDescribedby = '', }) => {
|
|
628
|
-
const elementRef = useRef(null);
|
|
629
|
-
const generatedId = useId();
|
|
630
|
-
const inputId = id || generatedId;
|
|
631
|
-
const handleChange = (e) => {
|
|
632
|
-
if (disabled)
|
|
633
|
-
return;
|
|
634
|
-
onChange?.(e);
|
|
635
|
-
};
|
|
636
|
-
const checkboxClass = clsx(styles$o['zds-checkbox'], {
|
|
637
|
-
[styles$o['zds-checkbox__disabled']]: disabled,
|
|
638
|
-
[styles$o['zds-checkbox__checked']]: checked && !indeterminate,
|
|
639
|
-
[styles$o['zds-checkbox__indeterminate']]: indeterminate,
|
|
640
|
-
}, className);
|
|
641
|
-
useEffect(() => {
|
|
642
|
-
if (elementRef.current) {
|
|
643
|
-
elementRef.current.indeterminate = indeterminate;
|
|
644
|
-
}
|
|
645
|
-
}, [indeterminate]);
|
|
646
|
-
return (jsx("div", { className: checkboxClass, children: jsxs("label", { htmlFor: inputId, className: styles$o['zds-checkbox__box-check'], children: [jsxs("div", { className: clsx(styles$o['zds-checkbox__checkmark'], {
|
|
647
|
-
[styles$o['zds-checkbox__checkmark__checked']]: checked && !indeterminate,
|
|
648
|
-
[styles$o['zds-checkbox__checkmark__indeterminate']]: indeterminate,
|
|
649
|
-
}), children: [jsx("input", { id: inputId, ref: elementRef, name: name, type: "checkbox", value: value, checked: checked, onChange: handleChange, disabled: disabled, "aria-checked": indeterminate ? 'mixed' : checked, "aria-describedby": ariaDescribedby || undefined, "aria-label": typeof label === 'string' ? label : 'Checkbox', tabIndex: disabled ? -1 : 0 }), checked && !indeterminate && (jsx("span", { className: styles$o['zds-checkbox__icon'], "aria-hidden": "true", children: jsx(CheckSmall, {}) })), indeterminate && (jsx("span", { className: styles$o['zds-checkbox__icon'], "aria-hidden": "true", children: jsx(CheckHalf, {}) }))] }), label && (jsx("div", { className: styles$o['zds-checkbox__text'], children: jsx("span", { className: styles$o['zds-checkbox__label'], children: label }) }))] }) }));
|
|
650
|
-
};
|
|
651
|
-
const MemoizedCheckbox = React__default.memo(Checkbox);
|
|
652
|
-
MemoizedCheckbox.displayName = 'Checkbox';
|
|
653
|
-
|
|
654
|
-
var styles$n = {"container":"CheckboxRadix-module__container___34peZ","root":"CheckboxRadix-module__root___P9Ddi","disabled":"CheckboxRadix-module__disabled___WmZnj","label":"CheckboxRadix-module__label___-d8vL","indicator":"CheckboxRadix-module__indicator___jwn2k","wrapperCheckbox":"CheckboxRadix-module__wrapperCheckbox___--xXQ"};
|
|
655
|
-
|
|
656
|
-
const CheckboxRadix = ({ id, label, onCheckedChange, checked, disabled, className, indeterminate = false, ...rest }) => {
|
|
623
|
+
const Checkbox = ({ id, label = '', onCheckedChange, checked, disabled, className, indeterminate = false, ...rest }) => {
|
|
657
624
|
const componentId = id || useId();
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
e.stopPropagation();
|
|
662
|
-
e.preventDefault();
|
|
663
|
-
checkboxRef.current?.click();
|
|
664
|
-
}
|
|
665
|
-
};
|
|
666
|
-
const handleWrapperKeyDown = (e) => {
|
|
667
|
-
if ((e.key === ' ' || e.key === 'Enter') && !disabled) {
|
|
668
|
-
e.preventDefault();
|
|
669
|
-
checkboxRef.current?.click();
|
|
670
|
-
}
|
|
671
|
-
};
|
|
672
|
-
return (jsxs("div", { className: clsx(styles$n.container, className), children: [jsx("div", { className: clsx(styles$n.wrapperCheckbox, {
|
|
673
|
-
[styles$n.disabled]: disabled,
|
|
674
|
-
}), onClick: handleWrapperClick, role: "presentation", tabIndex: disabled ? -1 : 0, onKeyDown: handleWrapperKeyDown, children: jsx(Checkbox$1.Root, { ref: checkboxRef, className: styles$n.root, checked: checked, id: componentId, onCheckedChange: onCheckedChange, disabled: disabled, "data-disabled": disabled, "data-indeterminate": indeterminate, "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false', ...rest, children: jsx(Checkbox$1.Indicator, { className: styles$n.indicator, children: indeterminate ? jsx(CheckHalf, {}) : jsx(CheckSmall, {}) }) }) }), jsx("label", { className: clsx(styles$n.label, { [styles$n.disabled]: disabled }), htmlFor: componentId, onClick: handleWrapperClick, children: label })] }));
|
|
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 })] }));
|
|
675
628
|
};
|
|
676
629
|
|
|
677
|
-
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"};
|
|
678
631
|
|
|
679
632
|
/**
|
|
680
633
|
* Componente Chips para exibir tags/etiquetas com ícones opcionais
|
|
@@ -684,67 +637,33 @@ const Chips = ({ title, leftIcon = null, rightIcon = null, type = 'neutral', dis
|
|
|
684
637
|
console.warn('Chips: title prop is required and cannot be empty');
|
|
685
638
|
return null;
|
|
686
639
|
}
|
|
687
|
-
const chipsClass = clsx(styles$
|
|
688
|
-
[styles$
|
|
689
|
-
[styles$
|
|
690
|
-
[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,
|
|
691
644
|
}, className);
|
|
692
|
-
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 }))] }));
|
|
693
646
|
};
|
|
694
|
-
const MemoizedChips =
|
|
647
|
+
const MemoizedChips = React.memo(Chips);
|
|
695
648
|
MemoizedChips.displayName = 'Chips';
|
|
696
649
|
|
|
697
|
-
var styles$
|
|
650
|
+
var styles$i = {"container":"Container-module__container___exPuE"};
|
|
698
651
|
|
|
699
652
|
function Container({ children }) {
|
|
700
|
-
return (jsx("main", { className: `${styles$
|
|
653
|
+
return (jsx("main", { className: `${styles$i['container']} mx-auto`, children: children }));
|
|
701
654
|
}
|
|
702
655
|
|
|
703
|
-
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"};
|
|
704
657
|
|
|
705
|
-
var styles$
|
|
658
|
+
var styles$g = {"tooltipContent":"Tooltip-module__tooltipContent___xycUg","triggerWrapper":"Tooltip-module__triggerWrapper___x83XR"};
|
|
706
659
|
|
|
707
|
-
const Tooltip = ({
|
|
708
|
-
|
|
709
|
-
const timeoutRef = useRef(null);
|
|
710
|
-
const tooltipRef = useRef(null);
|
|
711
|
-
const tooltipId = id || useId();
|
|
712
|
-
const handleMouseEnter = () => {
|
|
713
|
-
if (timeoutRef.current)
|
|
714
|
-
clearTimeout(timeoutRef.current);
|
|
715
|
-
setVisible(true);
|
|
716
|
-
};
|
|
717
|
-
const handleMouseLeave = () => {
|
|
718
|
-
timeoutRef.current = setTimeout(() => {
|
|
719
|
-
setVisible(false);
|
|
720
|
-
}, 800);
|
|
721
|
-
};
|
|
722
|
-
const handleKeyDown = (e) => {
|
|
723
|
-
switch (e.key) {
|
|
724
|
-
case 'Escape':
|
|
725
|
-
setVisible(false);
|
|
726
|
-
break;
|
|
727
|
-
case 'Enter':
|
|
728
|
-
case ' ':
|
|
729
|
-
e.preventDefault();
|
|
730
|
-
setVisible(!visible);
|
|
731
|
-
break;
|
|
732
|
-
}
|
|
733
|
-
};
|
|
734
|
-
useEffect(() => {
|
|
735
|
-
return () => {
|
|
736
|
-
if (timeoutRef.current) {
|
|
737
|
-
clearTimeout(timeoutRef.current);
|
|
738
|
-
}
|
|
739
|
-
};
|
|
740
|
-
}, []);
|
|
741
|
-
const tooltipClass = clsx(styles$j['zds-tooltip__content'], styles$j[`zds-tooltip__${position}`]);
|
|
742
|
-
return (jsxs("div", { className: clsx(styles$j['zds-tooltip__wrapper']), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, onKeyDown: handleKeyDown, tabIndex: 0, "aria-describedby": visible ? tooltipId : undefined, children: [children, visible && (jsx("div", { ref: tooltipRef, className: tooltipClass, role: 'tooltip', id: tooltipId, "aria-describedby": tooltipId, "aria-hidden": !visible, children: text }))] }));
|
|
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$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 }) })] }) }));
|
|
743
662
|
};
|
|
744
663
|
|
|
745
|
-
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false,
|
|
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: "*" })] })) }));
|
|
746
665
|
|
|
747
|
-
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"};
|
|
748
667
|
|
|
749
668
|
const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
750
669
|
if (required && value.trim() === '') {
|
|
@@ -756,7 +675,7 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
|
756
675
|
return '';
|
|
757
676
|
};
|
|
758
677
|
|
|
759
|
-
const TextField = forwardRef(({ className, value = '', label, placeholder, type = 'text', onChange, disabled = false, maxLength = 30, required = false, helperText, tooltip = false, tooltipText = '',
|
|
678
|
+
const TextField = forwardRef(({ className, value = '', label, placeholder, type = 'text', onChange, disabled = false, maxLength = 30, required = false, helperText, tooltip = false, tooltipText = '', side = 'bottom', align = 'start', errorMessage = '', id, icon, onBlur, onFocus, name, ...inputProps }, ref) => {
|
|
760
679
|
const [inputValue, setInputValue] = useState(value);
|
|
761
680
|
const [inputError, setInputError] = useState('');
|
|
762
681
|
const [isFocused, setIsFocused] = useState(false);
|
|
@@ -799,18 +718,18 @@ const TextField = forwardRef(({ className, value = '', label, placeholder, type
|
|
|
799
718
|
: helperText
|
|
800
719
|
? `${componentId}-helper`
|
|
801
720
|
: undefined;
|
|
802
|
-
const containerClass = clsx(styles$
|
|
803
|
-
[styles$
|
|
804
|
-
[styles$
|
|
721
|
+
const containerClass = clsx(styles$f.container, {
|
|
722
|
+
[styles$f.error]: hasError,
|
|
723
|
+
[styles$f.disabled]: disabled,
|
|
805
724
|
[className]: className,
|
|
806
725
|
});
|
|
807
|
-
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip,
|
|
726
|
+
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$f.inputWrapper, children: [jsxs("div", { className: styles$f.inputContainer, children: [jsx("input", { ...inputProps, ref: ref, id: componentId, name: name, type: type, value: inputValue, placeholder: placeholder, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": hasError, "aria-required": required, "aria-describedby": helperId }), showCustomIcon && jsx("span", { className: styles$f.icon, children: icon }), showClearIcon && (jsx("button", { type: "button", className: styles$f.clearButton, onMouseDown: (e) => {
|
|
808
727
|
e.preventDefault();
|
|
809
728
|
handleClear();
|
|
810
|
-
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx(Dismiss16Regular, {}) }))] }), jsx("span", { id: helperId, className: styles$
|
|
729
|
+
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx(Dismiss16Regular, {}) }))] }), jsx("span", { id: helperId, className: styles$f.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText })] })] }));
|
|
811
730
|
});
|
|
812
731
|
TextField.displayName = 'TextField';
|
|
813
|
-
var TextField$1 =
|
|
732
|
+
var TextField$1 = React.memo(TextField);
|
|
814
733
|
|
|
815
734
|
/**
|
|
816
735
|
* Formata uma data para string conforme o locale.
|
|
@@ -905,7 +824,7 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
905
824
|
return date;
|
|
906
825
|
}
|
|
907
826
|
|
|
908
|
-
var styles$
|
|
827
|
+
var styles$e = {"zds-date-picker":"DatePicker-module__zds-date-picker___FjFTb","zds-date-picker__calendar-popup":"DatePicker-module__zds-date-picker__calendar-popup___hEkq7","zds-calendar--left":"DatePicker-module__zds-calendar--left___5z2UM","zds-calendar--right":"DatePicker-module__zds-calendar--right___NCJtd"};
|
|
909
828
|
|
|
910
829
|
const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText = '', required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, className = '', 'data-testid': testId, }) => {
|
|
911
830
|
// ✅ IDs únicos para acessibilidade
|
|
@@ -1087,13 +1006,13 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText =
|
|
|
1087
1006
|
setTempInputValue(formatDate(currentSelectedDate, locale));
|
|
1088
1007
|
}
|
|
1089
1008
|
}, [locale, currentSelectedDate, isEditing]);
|
|
1090
|
-
return (jsx("div", { ref: wrapperRef, children: jsxs("div", { className: clsx(styles$
|
|
1009
|
+
return (jsx("div", { ref: wrapperRef, children: jsxs("div", { className: clsx(styles$e['zds-date-picker']), children: [jsx("div", { onClick: handleFieldClick, onFocus: handleFieldFocus, onKeyDown: handleKeyDown, style: { cursor: 'pointer' }, children: jsx(TextField$1, { type: "tel", icon: jsx(Calendar16Regular, { onClick: handleIconClick, style: { cursor: 'pointer' } }), onChange: (e) => {
|
|
1091
1010
|
handleTextFieldChange(String(e));
|
|
1092
|
-
}, "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": "calendar-popup", placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', value: displayValue, errorMessage: undefined, "aria-invalid": !!currentError, "aria-describedby": combinedHelperText ? helperTextId : undefined, maxLength: 10,
|
|
1011
|
+
}, "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": "calendar-popup", placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', value: displayValue, errorMessage: undefined, "aria-invalid": !!currentError, "aria-describedby": combinedHelperText ? helperTextId : undefined, maxLength: 10, helperText: combinedHelperText, required: required, label: label }) }), jsx("div", { className: clsx(styles$e['zds-date-picker__calendar-popup'], calendarPosition === 'left' && styles$e['zds-calendar--left'], calendarPosition === 'right' && styles$e['zds-calendar--right']), children: showCalendar && (jsx(MemoizedCalendar, { selectedDate: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy' })) })] }) }));
|
|
1093
1012
|
};
|
|
1094
|
-
var DatePicker_default =
|
|
1013
|
+
var DatePicker_default = React.memo(DatePicker);
|
|
1095
1014
|
|
|
1096
|
-
var styles$
|
|
1015
|
+
var styles$d = {"zds-dialog__overlay":"Dialog-module__zds-dialog__overlay___I0T-Q","zds-dialog__wrapper":"Dialog-module__zds-dialog__wrapper___Va69y","zds-dialog":"Dialog-module__zds-dialog___Bi-9b","zds-dialog__title":"Dialog-module__zds-dialog__title___w9yHe","zds-dialog__text":"Dialog-module__zds-dialog__text___-GmvH","zds-dialog__actions":"Dialog-module__zds-dialog__actions___hHHmN"};
|
|
1097
1016
|
|
|
1098
1017
|
const useFocusTrap = (isActive) => {
|
|
1099
1018
|
const containerRef = useRef(null);
|
|
@@ -1176,13 +1095,13 @@ const Dialog = ({ show, title, text, textConfirm = 'OK', textCancel = 'Cancelar'
|
|
|
1176
1095
|
}, [show, handleCancel]);
|
|
1177
1096
|
if (!show)
|
|
1178
1097
|
return null;
|
|
1179
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1098
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$d['zds-dialog__overlay'] }), jsx("div", { className: styles$d['zds-dialog__wrapper'], children: jsxs("div", { className: clsx(styles$d['zds-dialog'], className), role: "dialog", "aria-modal": "true", id: id, "aria-labelledby": `zds-dialog-title-${id}`, "aria-describedby": `zds-dialog-desc-${id}`, tabIndex: -1, ref: containerRef, children: [jsx("div", { id: `zds-dialog-title-${id}`, className: styles$d['zds-dialog__title'], children: title }), jsx("div", { id: `zds-dialog-desc-${id}`, className: styles$d['zds-dialog__text'], children: text }), jsxs("div", { className: styles$d['zds-dialog__actions'], children: [!!(textCancel && textCancel.trim()) && (jsx(Button, { variant: "outlined", onClick: handleCancel, children: textCancel })), jsx(Button, { variant: "filled", onClick: handleConfirm, children: textConfirm })] })] }) })] }));
|
|
1180
1099
|
};
|
|
1181
1100
|
// Memoização para otimização de performance
|
|
1182
|
-
const MemoizedDialog =
|
|
1101
|
+
const MemoizedDialog = React.memo(Dialog);
|
|
1183
1102
|
MemoizedDialog.displayName = 'Dialog';
|
|
1184
1103
|
|
|
1185
|
-
var styles$
|
|
1104
|
+
var styles$c = {"zds-custom__drawer-shadow":"Drawer-module__zds-custom__drawer-shadow___xoF-q","zds-custom__drawer-shadow--visible":"Drawer-module__zds-custom__drawer-shadow--visible___9JUdU","zds-custom__drawer-sidebar":"Drawer-module__zds-custom__drawer-sidebar___MC8Zt","zds-custom__drawer-sidebar--open":"Drawer-module__zds-custom__drawer-sidebar--open___DiMJb","zds-custom__drawer-sidebar--disabled":"Drawer-module__zds-custom__drawer-sidebar--disabled___6OGsA","zds-drawer__title-close":"Drawer-module__zds-drawer__title-close___g9K3D","zds-drawer__title":"Drawer-module__zds-drawer__title___lqHFw","zds-drawer__children":"Drawer-module__zds-drawer__children___ZnzF6"};
|
|
1186
1105
|
|
|
1187
1106
|
/**
|
|
1188
1107
|
* Componente Drawer do Zanthus Design System
|
|
@@ -1264,20 +1183,20 @@ onClose, title = 'Título', isOpen = false, onOpen, className = '', id, disabled
|
|
|
1264
1183
|
event.stopPropagation();
|
|
1265
1184
|
internalClose();
|
|
1266
1185
|
};
|
|
1267
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$
|
|
1268
|
-
[styles$
|
|
1269
|
-
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$
|
|
1270
|
-
[styles$
|
|
1271
|
-
[styles$
|
|
1186
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$c['zds-custom__drawer-shadow'], {
|
|
1187
|
+
[styles$c['zds-custom__drawer-shadow--visible']]: isOpen,
|
|
1188
|
+
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$c['zds-custom__drawer-sidebar'], {
|
|
1189
|
+
[styles$c['zds-custom__drawer-sidebar--open']]: isOpen,
|
|
1190
|
+
[styles$c['zds-custom__drawer-sidebar--disabled']]: disabled,
|
|
1272
1191
|
}, className), style: {
|
|
1273
1192
|
// ✅ APENAS: Width customizável via CSS custom property
|
|
1274
1193
|
'--drawer-custom-width': customWidth,
|
|
1275
|
-
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, children: [jsxs("div", { className: clsx(styles$
|
|
1194
|
+
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, children: [jsxs("div", { className: clsx(styles$c['zds-drawer__title-close']), children: [jsx("div", { className: clsx(styles$c['zds-drawer__title']), id: id ? `${id}-title` : 'drawer-title', children: title }), jsx(Button, { onClick: handleCloseClick, variant: 'text', iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: 'lg' })] }), jsx("div", { className: clsx(styles$c['zds-drawer__children']), "data-testid": "drawer-content", children: children })] })] }));
|
|
1276
1195
|
};
|
|
1277
1196
|
|
|
1278
|
-
var styles$
|
|
1197
|
+
var styles$b = {"zds-search":"Search-module__zds-search___DRIVl","zds-search__leftIcon":"Search-module__zds-search__leftIcon___gBvTI","zds-search__clearIcon":"Search-module__zds-search__clearIcon___wsOBs"};
|
|
1279
1198
|
|
|
1280
|
-
const Search =
|
|
1199
|
+
const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, id = '', className = '', 'data-testid': testId, }, ref) => {
|
|
1281
1200
|
const [internalValue, setInternalValue] = useState('');
|
|
1282
1201
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
1283
1202
|
const currentValue = isControlled ? value : internalValue;
|
|
@@ -1322,11 +1241,11 @@ const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser
|
|
|
1322
1241
|
return;
|
|
1323
1242
|
onKeyDown?.(e);
|
|
1324
1243
|
};
|
|
1325
|
-
const searchClass = clsx(styles$
|
|
1244
|
+
const searchClass = clsx(styles$b['zds-search'], {
|
|
1326
1245
|
disabled,
|
|
1327
1246
|
[className]: className,
|
|
1328
1247
|
});
|
|
1329
|
-
return (jsxs("div", { className: searchClass, onClick: onClick, onMouseDown: onMouseDown, children: [jsx("span", { className: clsx(styles$
|
|
1248
|
+
return (jsxs("div", { className: searchClass, onClick: onClick, onMouseDown: onMouseDown, children: [jsx("span", { className: clsx(styles$b['zds-search__leftIcon'], { disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsx(Search16Regular, {}) }), jsx("input", { ref: ref, id: inputId, type: "text", placeholder: placeholder, "aria-label": placeholder, value: currentValue || '', onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, "data-testid": testId }), currentValue && currentValue.length > 0 && (jsx("span", { className: styles$b['zds-search__clearIcon'], "aria-hidden": "true", onClick: clearInputSearch, children: jsx(Dismiss16Regular, {}) }))] }));
|
|
1330
1249
|
});
|
|
1331
1250
|
Search.displayName = 'ZdsSearch';
|
|
1332
1251
|
|
|
@@ -1361,7 +1280,7 @@ const validateItems = (items, type) => {
|
|
|
1361
1280
|
});
|
|
1362
1281
|
};
|
|
1363
1282
|
|
|
1364
|
-
var styles$
|
|
1283
|
+
var styles$a = {"zds-dropdown__container":"Dropdown-module__zds-dropdown__container___UMV5O","zds-dropdown__container--top":"Dropdown-module__zds-dropdown__container--top___nys1y","zds-dropdown__container--bottom":"Dropdown-module__zds-dropdown__container--bottom___5ncXH","zds-dropdown__search-container":"Dropdown-module__zds-dropdown__search-container___5igq1","zds-dropdown__item":"Dropdown-module__zds-dropdown__item___bqAnI","zds-dropdown--disabled":"Dropdown-module__zds-dropdown--disabled___WF-ao","zds-dropdown__item--focused":"Dropdown-module__zds-dropdown__item--focused___ulKda","zds-dropdown__item--selected":"Dropdown-module__zds-dropdown__item--selected___K-Mk-","zds-dropdown__title":"Dropdown-module__zds-dropdown__title___emxcQ","zds-dropdown__subtext":"Dropdown-module__zds-dropdown__subtext___YzXrw","zds-dropdown__item-content":"Dropdown-module__zds-dropdown__item-content___E3qkd","zds-dropdown__item-content--disabled":"Dropdown-module__zds-dropdown__item-content--disabled___RmhHd","zds-dropdown__item-text":"Dropdown-module__zds-dropdown__item-text___D39Qy","zds-dropdown__item-icon":"Dropdown-module__zds-dropdown__item-icon___QdCJz","zds-dropdown__item-icon-container":"Dropdown-module__zds-dropdown__item-icon-container___ULMHu","zds-dropdown__no-results":"Dropdown-module__zds-dropdown__no-results___rUZ-Z","zds-dropdown__list":"Dropdown-module__zds-dropdown__list___d65nL","zds-checkbox":"Dropdown-module__zds-checkbox___rJTmR","zds-dropdown__item--checkbox":"Dropdown-module__zds-dropdown__item--checkbox___z94nE","zds-dropdown__container-filter":"Dropdown-module__zds-dropdown__container-filter___Deixf","zds-dropdown__infinite-scroll-trigger":"Dropdown-module__zds-dropdown__infinite-scroll-trigger___RA9Gd","zds-dropdown__loading-indicator":"Dropdown-module__zds-dropdown__loading-indicator___Zf-uW"};
|
|
1365
1284
|
|
|
1366
1285
|
/**
|
|
1367
1286
|
* Hook otimizado para scroll infinito usando IntersectionObserver
|
|
@@ -1602,7 +1521,7 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1602
1521
|
setSelectedItems({});
|
|
1603
1522
|
onSelectionChange?.([]);
|
|
1604
1523
|
}, [filter, onSelectionChange]);
|
|
1605
|
-
const isFirstRender =
|
|
1524
|
+
const isFirstRender = React.useRef(true);
|
|
1606
1525
|
useEffect(() => {
|
|
1607
1526
|
if (isFirstRender.current) {
|
|
1608
1527
|
isFirstRender.current = false;
|
|
@@ -1626,17 +1545,17 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1626
1545
|
const renderItemContent = useCallback((item, index) => {
|
|
1627
1546
|
const itemId = item.id || `dropdown-item-${index}`;
|
|
1628
1547
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
1629
|
-
return (jsxs("div", { className: clsx(styles$
|
|
1630
|
-
[styles$
|
|
1631
|
-
}), children: [type === 'checkbox' && (jsx(
|
|
1632
|
-
|
|
1633
|
-
|
|
1548
|
+
return (jsxs("div", { className: clsx(styles$a['zds-dropdown__item-content'], {
|
|
1549
|
+
[styles$a['zds-dropdown__item-content--disabled']]: item.disabled,
|
|
1550
|
+
}), children: [type === 'checkbox' && (jsx(Checkbox, { checked: !!currentSelection[itemId], onCheckedChange: (checked) => {
|
|
1551
|
+
if (checked === 'indeterminate')
|
|
1552
|
+
return;
|
|
1634
1553
|
toggleSelection(itemId, item);
|
|
1635
|
-
}, disabled: item.disabled, label: "" })), type === 'icon' && item.icon && (jsx("div", { className: styles$
|
|
1554
|
+
}, disabled: item.disabled, label: "" })), type === 'icon' && item.icon && (jsx("div", { className: styles$a['zds-dropdown__item-icon-container'], children: jsx("span", { className: styles$a['zds-dropdown__item-icon'], onClick: (event) => {
|
|
1636
1555
|
event.preventDefault();
|
|
1637
1556
|
event.stopPropagation();
|
|
1638
1557
|
handleItemClick(event, itemId, item);
|
|
1639
|
-
}, children: item.icon }) })), jsxs("div", { className: styles$
|
|
1558
|
+
}, children: item.icon }) })), jsxs("div", { className: styles$a['zds-dropdown__item-text'], children: [jsx("span", { id: `dropdown-item-${itemId}-label`, className: styles$a['zds-dropdown__title'], children: item.text }), showSubText && item.subText && (jsx("span", { id: `dropdown-item-${itemId}-desc`, className: styles$a['zds-dropdown__subtext'], children: item.subText }))] })] }));
|
|
1640
1559
|
}, [
|
|
1641
1560
|
type,
|
|
1642
1561
|
selectedItems,
|
|
@@ -1701,10 +1620,10 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1701
1620
|
isSearchFocused,
|
|
1702
1621
|
handleSearchClear,
|
|
1703
1622
|
]);
|
|
1704
|
-
const DropdownClass = clsx(styles$
|
|
1623
|
+
const DropdownClass = clsx(styles$a['zds-dropdown__container'], styles$a[`zds-dropdown__container--${position}`], {
|
|
1705
1624
|
[className || '']: className,
|
|
1706
|
-
[styles$
|
|
1707
|
-
[styles$
|
|
1625
|
+
[styles$a['zds-dropdown__container--search-active']]: searchQuery.length > 0,
|
|
1626
|
+
[styles$a['zds-dropdown__container--fixed-width']]: !!maxWidth,
|
|
1708
1627
|
});
|
|
1709
1628
|
const dropdownStyles = useMemo(() => {
|
|
1710
1629
|
const styles = {};
|
|
@@ -1726,14 +1645,14 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1726
1645
|
}
|
|
1727
1646
|
return styles;
|
|
1728
1647
|
}, [maxWidth, minWidth, width, maxHeight]);
|
|
1729
|
-
return (jsx("div", { ref: containerRef, className: DropdownClass, tabIndex: 0, role: "combobox", "aria-expanded": filteredItems.length > 0 ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": id ? `${id}-listbox` : undefined, "aria-controls": id ? `${id}-listbox` : undefined, "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : undefined, "aria-label": "Dropdown de sele\u00E7\u00E3o", "aria-describedby": searchVisible ? `${id}-search-help` : undefined, onKeyDown: handleKeyDown, style: dropdownStyles, children: jsxs("ul", { className: styles$
|
|
1648
|
+
return (jsx("div", { ref: containerRef, className: DropdownClass, tabIndex: 0, role: "combobox", "aria-expanded": filteredItems.length > 0 ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": id ? `${id}-listbox` : undefined, "aria-controls": id ? `${id}-listbox` : undefined, "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : undefined, "aria-label": "Dropdown de sele\u00E7\u00E3o", "aria-describedby": searchVisible ? `${id}-search-help` : undefined, onKeyDown: handleKeyDown, style: dropdownStyles, children: jsxs("ul", { className: styles$a['zds-dropdown__list'], id: id || undefined, role: "listbox", "aria-label": "Lista de op\u00E7\u00F5es", "aria-multiselectable": isMultiSelectable, children: [searchVisible && (jsx("li", { role: "none", className: styles$a['zds-dropdown__search-container'], children: jsx(Search, { value: inputValue, placeholder: placeholder || 'Digite e pressione Enter para buscar...', onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onFocus: () => setIsSearchFocused(true), onBlur: () => setIsSearchFocused(false), onClear: handleSearchClear, "aria-label": "Campo de busca - pressione Enter para pesquisar" }) })), filteredItems.length > 0 ? (filteredItems.map((item, index) => {
|
|
1730
1649
|
const itemId = generateItemId(item, index);
|
|
1731
1650
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
1732
|
-
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$
|
|
1733
|
-
[styles$
|
|
1734
|
-
[styles$
|
|
1735
|
-
[styles$
|
|
1736
|
-
[styles$
|
|
1651
|
+
return (jsx("li", { role: "option", "aria-selected": !!currentSelection[itemId], "aria-labelledby": `dropdown-item-${itemId}-label`, "aria-describedby": item.subText ? `dropdown-item-${itemId}-desc` : undefined, className: clsx(styles$a['zds-dropdown__item'], {
|
|
1652
|
+
[styles$a[`zds-dropdown__item--${type}`]]: type,
|
|
1653
|
+
[styles$a['zds-dropdown__item--selected']]: currentSelection[itemId],
|
|
1654
|
+
[styles$a['zds-dropdown__item--focused']]: focusedIndex === index,
|
|
1655
|
+
[styles$a['zds-dropdown__item--disabled']]: item.disabled,
|
|
1737
1656
|
}), tabIndex: focusedIndex === index ? 0 : -1, onFocus: () => setFocusedIndex(index), onClick: (event) => {
|
|
1738
1657
|
event.stopPropagation();
|
|
1739
1658
|
handleItemClick(event, itemId, item);
|
|
@@ -1743,12 +1662,12 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1743
1662
|
setFocusedIndex(index);
|
|
1744
1663
|
}
|
|
1745
1664
|
}, children: renderItemContent(item, index) }, itemId));
|
|
1746
|
-
})) : (jsx("li", { className: styles$
|
|
1665
|
+
})) : (jsx("li", { className: styles$a['zds-dropdown__no-results'], role: "status", "aria-live": "polite", children: "Nenhum item corresponde \u00E0 sua busca" })), filter && (jsxs("div", { className: styles$a['zds-dropdown__container-filter'], children: [jsx(Button, { size: "sm", variant: "outlined", onClick: handleClearFilter, children: "Limpar" }), jsx(Button, { size: "sm", onClick: handleApplyFilter, children: "Aplicar" })] })), infiniteScrollHook && infiniteScrollHook.hasNextPage && (jsx("li", { role: "none", className: styles$a['zds-dropdown__infinite-scroll-trigger'], children: jsx("div", { ref: infiniteScrollHook.observerRef, className: styles$a['zds-dropdown__loading-indicator'], children: infiniteScroll?.status === 'loading' ? (jsx("span", { children: "Carregando..." })) : (jsx("span", { children: "Trigger" })) }) }))] }) }));
|
|
1747
1666
|
};
|
|
1748
|
-
const MemoizedDropdown =
|
|
1667
|
+
const MemoizedDropdown = React.memo(Dropdown);
|
|
1749
1668
|
MemoizedDropdown.displayName = 'Dropdown';
|
|
1750
1669
|
|
|
1751
|
-
var styles$
|
|
1670
|
+
var styles$9 = {"zds-filter__container":"Filter-module__zds-filter__container___0E-nC","zds-filter__button":"Filter-module__zds-filter__button___gT9yM","zds-filter__icon":"Filter-module__zds-filter__icon___ypiCu","zds-filter__text":"Filter-module__zds-filter__text___1iywL","zds-filter__arrow":"Filter-module__zds-filter__arrow___xflU2","zds-filter__arrow--up":"Filter-module__zds-filter__arrow--up___R0HR-","zds-filter__arrow--down":"Filter-module__zds-filter__arrow--down___4YMmg","zds-filter__button--open":"Filter-module__zds-filter__button--open___OA6EF","zds-filter__dropdown":"Filter-module__zds-filter__dropdown___-67MJ","zds-filter__dropdown--left":"Filter-module__zds-filter__dropdown--left___GgonW","zds-filter__dropdown--right":"Filter-module__zds-filter__dropdown--right___7GS9L","zds-filter-button__content":"Filter-module__zds-filter-button__content___eNIIz","zds-filter-button__arrow":"Filter-module__zds-filter-button__arrow___ZhymS","zds-filter-button__icon":"Filter-module__zds-filter-button__icon___-42Ey"};
|
|
1752
1671
|
|
|
1753
1672
|
// ✅ CORREÇÃO: Problema de loop infinito no useEffect
|
|
1754
1673
|
const Filter = ({ items = [], type = 'checkbox', selectedIds = [], onApplyFilter, placeholder = 'Selecionar...', enableSearch = false, buttonText = 'Filter', icon, variant = 'outlined', onOpen, onClose, position = 'left', disabled = false, className = '', selectedDate, onDateSelect, onClearDate, minDate, maxDate, locale = 'pt-br', }) => {
|
|
@@ -1833,41 +1752,25 @@ const Filter = ({ items = [], type = 'checkbox', selectedIds = [], onApplyFilter
|
|
|
1833
1752
|
}
|
|
1834
1753
|
return () => document.removeEventListener('keydown', handleEscape);
|
|
1835
1754
|
}, [isOpen, onClose]);
|
|
1836
|
-
const filterClass = clsx(styles$
|
|
1837
|
-
const dropdownClass = clsx(styles$
|
|
1838
|
-
[styles$
|
|
1755
|
+
const filterClass = clsx(styles$9['zds-filter__container'], className);
|
|
1756
|
+
const dropdownClass = clsx(styles$9['zds-filter__dropdown'], {
|
|
1757
|
+
[styles$9[`zds-filter__dropdown--${position}`]]: position,
|
|
1839
1758
|
});
|
|
1840
|
-
return (jsxs("div", { ref: filterRef, className: filterClass, children: [jsx(Button, { variant: variant, onClick: handleToggle, disabled: disabled, icon: type === 'calendar' ? jsx(Calendar16Regular, {}) : jsx(ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxs("div", { className: styles$
|
|
1759
|
+
return (jsxs("div", { ref: filterRef, className: filterClass, children: [jsx(Button, { variant: variant, onClick: handleToggle, disabled: disabled, icon: type === 'calendar' ? jsx(Calendar16Regular, {}) : jsx(ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxs("div", { className: styles$9['zds-filter-button__content'], children: [icon && jsx("span", { className: styles$9['zds-filter-button__icon'], children: icon }), jsx("span", { className: styles$9['zds-filter-button__text'], children: buttonDisplayText }), jsx("span", { className: `${styles$9['zds-filter-button__arrow']} ${isOpen ? styles$9['zds-filter-button__arrow--open'] : ''}`, children: getBadgeValue() && (jsx(Badge, { badgeValue: `+${getBadgeValue()}`, type: "status" })) })] }) }), isOpen && (jsx("div", { className: dropdownClass, children: type === 'calendar' ? (jsx(MemoizedCalendar, { currentDate: currentCalendarDate, selectedDate: selectedDate, onDaySelect: handleDateSelection, onDateChange: handleCalendarNavigation, minDate: minDate, maxDate: maxDate, locale: locale, onClear: handleClear, id: `filter-calendar-${filterRef.current?.id || ''}`, "aria-label": "Selecionar data para filtro" })) : (jsx(MemoizedDropdown, { items: items, type: type, defaultSelectedIds: selectedIds, placeholder: placeholder, applySearch: enableSearch, filter: true, onSelectionChange: handleApplyFilter })) }))] }));
|
|
1841
1760
|
};
|
|
1842
1761
|
|
|
1843
|
-
var styles$
|
|
1762
|
+
var styles$8 = {"root":"Radio-module__root___7ElY2","wrapper":"Radio-module__wrapper___NYQ1y","disabled":"Radio-module__disabled___RZ0be","labelText":"Radio-module__labelText___Wkb41","item":"Radio-module__item___3Kvj7","itemWrapper":"Radio-module__itemWrapper___5KbM1","labelWrapper":"Radio-module__labelWrapper___LOHmJ","indicator":"Radio-module__indicator___TJ5hz"};
|
|
1844
1763
|
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
const uniqueId = useId();
|
|
1853
|
-
const inputId = id || uniqueId;
|
|
1854
|
-
const handleChange = (e) => {
|
|
1855
|
-
if (disabled)
|
|
1856
|
-
return;
|
|
1857
|
-
onChange?.(e.target.value);
|
|
1858
|
-
};
|
|
1859
|
-
const radioClass = clsx(styles$b['zds-radiobutton'], {
|
|
1860
|
-
[styles$b['zds-radiobutton--disabled']]: disabled,
|
|
1861
|
-
}, className);
|
|
1862
|
-
const labelClass = clsx(styles$b['zds-radiobutton__box-check'], {
|
|
1863
|
-
[styles$b['zds-radiobutton__disabled']]: disabled,
|
|
1864
|
-
});
|
|
1865
|
-
return (jsx("div", { className: radioClass, children: jsxs("label", { className: labelClass, htmlFor: inputId, children: [jsx("div", { className: styles$b['zds-radiobutton__mini-box'], children: jsx("input", { id: inputId, type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: handleChange }) }), label && (jsx("span", { id: `${inputId}-description`, className: styles$b['zds-radiobutton__box-check__text'], children: label }))] }) }));
|
|
1764
|
+
const Radio = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', ...rest }) => {
|
|
1765
|
+
const componentId = id || useId();
|
|
1766
|
+
return (jsx(RadioGroup.Root, { id: componentId, className: styles$8.root, defaultValue: defaultValue, onValueChange: onValueChange, name: name, "aria-label": ariaLabel, "data-orientation": orientation, orientation: orientation, ...rest, children: items.map(({ id, value, disabled, label }) => {
|
|
1767
|
+
const itemKey = id ?? value;
|
|
1768
|
+
const uniqueId = `${componentId}-item-${value}`;
|
|
1769
|
+
return (jsx("div", { className: clsx(styles$8.wrapper, { [styles$8.disabled]: disabled }), children: jsxs("label", { className: styles$8.labelWrapper, htmlFor: uniqueId, children: [jsx("div", { className: styles$8.itemWrapper, children: jsx(RadioGroup.Item, { disabled: disabled, className: styles$8.item, value: value, id: uniqueId, "data-disabled": disabled, children: jsx(RadioGroup.Indicator, { className: styles$8.indicator }) }) }), jsx("span", { className: styles$8.labelText, children: label })] }) }, itemKey));
|
|
1770
|
+
}) }));
|
|
1866
1771
|
};
|
|
1867
|
-
const MemoizedRadio = React__default.memo(Radio);
|
|
1868
|
-
MemoizedRadio.displayName = 'Radio';
|
|
1869
1772
|
|
|
1870
|
-
var styles$
|
|
1773
|
+
var styles$7 = {"zds-list-item__container":"ListItem-module__zds-list-item__container___mEIUK","zds-list-item--checkbox":"ListItem-module__zds-list-item--checkbox___wfi9-","zds-list-item--icon":"ListItem-module__zds-list-item--icon___h3Ijt","zds-list-item--radio":"ListItem-module__zds-list-item--radio___2l7mK","zds-list-item--text":"ListItem-module__zds-list-item--text___F0PDx","zds-list-item--hovered":"ListItem-module__zds-list-item--hovered___XrDWn","zds-list-item--disabled":"ListItem-module__zds-list-item--disabled___p1xZF","zds-list-item__wrapper-text":"ListItem-module__zds-list-item__wrapper-text___5-TX2","zds-list-item__wrapper-icon":"ListItem-module__zds-list-item__wrapper-icon___S6Fr1","zds-list-item__title":"ListItem-module__zds-list-item__title___AV7nz","zds-list-item__subtext":"ListItem-module__zds-list-item__subtext___nfXky","zds-list-item__text":"ListItem-module__zds-list-item__text___3y0sB"};
|
|
1871
1774
|
|
|
1872
1775
|
/**
|
|
1873
1776
|
* Componente ListItem do Zanthus Design System
|
|
@@ -1952,20 +1855,24 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1952
1855
|
const currentVariant = validVariants.includes(variant) ? variant : 'text';
|
|
1953
1856
|
switch (currentVariant) {
|
|
1954
1857
|
case 'checkbox':
|
|
1955
|
-
return (jsxs(Fragment, { children: [jsx(
|
|
1858
|
+
return (jsxs(Fragment, { children: [jsx(Checkbox, { checked: internalChecked, disabled: disabled, onCheckedChange: () => handleCheckboxClick({}) }), jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__text'], onClick: handleCheckboxClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], onClick: handleCheckboxClick, children: subText }))] })] }));
|
|
1956
1859
|
case 'radio':
|
|
1957
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1860
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$7['zds-list-item__wrapper-radio'], children: jsx("span", { className: styles$7['zds-list-item__radio'], "aria-hidden": "true", children: jsx(Radio, { name: name, onValueChange: () => handleRadioClick({}), items: [{
|
|
1861
|
+
value: value,
|
|
1862
|
+
label: '',
|
|
1863
|
+
disabled: disabled
|
|
1864
|
+
}], "aria-labelledby": `${itemId}-text` }) }) }), jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__title'], onClick: handleRadioClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], children: subText }))] })] }));
|
|
1958
1865
|
case 'icon':
|
|
1959
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1866
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$7['zds-list-item__wrapper-icon'], children: icon }), jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__title'], onClick: handleTextOrIconClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], children: subText }))] })] }));
|
|
1960
1867
|
case 'text':
|
|
1961
1868
|
default:
|
|
1962
|
-
return (jsxs("div", { className: styles$
|
|
1869
|
+
return (jsxs("div", { className: styles$7['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$7['zds-list-item__title'], onClick: handleTextOrIconClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$7['zds-list-item__subtext'], children: subText }))] }));
|
|
1963
1870
|
}
|
|
1964
1871
|
}, [variant, itemId, internalChecked, disabled, handleCheckboxClick, handleRadioClick, handleTextOrIconClick, value, text, showSubText, subText, icon, name]);
|
|
1965
|
-
const listItemClass = clsx(styles$
|
|
1966
|
-
[styles$
|
|
1967
|
-
[styles$
|
|
1968
|
-
[styles$
|
|
1872
|
+
const listItemClass = clsx(styles$7['zds-list-item__container'], {
|
|
1873
|
+
[styles$7[`zds-list-item--${variant}`]]: variant,
|
|
1874
|
+
[styles$7['zds-list-item--disabled']]: disabled,
|
|
1875
|
+
[styles$7['zds-list-item--hovered']]: hovered,
|
|
1969
1876
|
[className || '']: className
|
|
1970
1877
|
});
|
|
1971
1878
|
const getAriaChecked = useCallback(() => {
|
|
@@ -1977,152 +1884,7 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1977
1884
|
return (jsx("li", { className: listItemClass, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, "aria-selected": variant === 'text' || variant === 'icon' ? internalSelected : undefined, "aria-disabled": disabled, "aria-checked": getAriaChecked(), "aria-labelledby": `${itemId}-text`, "aria-describedby": showSubText && subText ? `${itemId}-subtext` : undefined, "data-testid": "list-item", children: renderVariantContent() }));
|
|
1978
1885
|
};
|
|
1979
1886
|
|
|
1980
|
-
var styles$
|
|
1981
|
-
|
|
1982
|
-
const Menu = ({ children, menuItems = [], onMenuItemClick, onToggle, type = 'text', applySearch = false, placeholder = '', showSubText = false, className, id, maxWidth = '210px', minWidth, position = 'left' }) => {
|
|
1983
|
-
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
1984
|
-
const anchorRef = useRef(null);
|
|
1985
|
-
const dropdownRef = useRef(null);
|
|
1986
|
-
const menuContainerRef = useRef(null);
|
|
1987
|
-
const [selectedItems, setSelectedItems] = useState([]);
|
|
1988
|
-
const [focusedItemIndex, setFocusedItemIndex] = useState(-1);
|
|
1989
|
-
const closeMenu = useCallback(() => {
|
|
1990
|
-
setIsMenuOpen(false);
|
|
1991
|
-
if (onToggle) {
|
|
1992
|
-
onToggle(false);
|
|
1993
|
-
}
|
|
1994
|
-
}, [onToggle]);
|
|
1995
|
-
const openMenu = useCallback(() => {
|
|
1996
|
-
setIsMenuOpen(true);
|
|
1997
|
-
if (onToggle) {
|
|
1998
|
-
onToggle(true);
|
|
1999
|
-
}
|
|
2000
|
-
}, [onToggle]);
|
|
2001
|
-
const toggleDropdown = useCallback(() => {
|
|
2002
|
-
if (isMenuOpen) {
|
|
2003
|
-
closeMenu();
|
|
2004
|
-
}
|
|
2005
|
-
else {
|
|
2006
|
-
openMenu();
|
|
2007
|
-
}
|
|
2008
|
-
}, [isMenuOpen, closeMenu, openMenu]);
|
|
2009
|
-
const initialItemsSelected = useMemo(() => {
|
|
2010
|
-
const selectedMap = {};
|
|
2011
|
-
selectedItems.forEach((id) => {
|
|
2012
|
-
selectedMap[id] = true;
|
|
2013
|
-
});
|
|
2014
|
-
return selectedMap;
|
|
2015
|
-
}, [selectedItems, menuItems]);
|
|
2016
|
-
const handleClickOutside = useCallback((event) => {
|
|
2017
|
-
if (!isMenuOpen)
|
|
2018
|
-
return;
|
|
2019
|
-
const target = event.target;
|
|
2020
|
-
if (menuContainerRef.current?.contains(target)) {
|
|
2021
|
-
return;
|
|
2022
|
-
}
|
|
2023
|
-
if (anchorRef.current?.contains(target)) {
|
|
2024
|
-
return;
|
|
2025
|
-
}
|
|
2026
|
-
if (dropdownRef.current?.contains(target)) {
|
|
2027
|
-
return;
|
|
2028
|
-
}
|
|
2029
|
-
closeMenu();
|
|
2030
|
-
}, [isMenuOpen, closeMenu]);
|
|
2031
|
-
const handleKeyDown = useCallback((event) => {
|
|
2032
|
-
if (!isMenuOpen)
|
|
2033
|
-
return;
|
|
2034
|
-
switch (event.key) {
|
|
2035
|
-
case 'Escape':
|
|
2036
|
-
event.preventDefault();
|
|
2037
|
-
closeMenu();
|
|
2038
|
-
if (anchorRef.current) {
|
|
2039
|
-
anchorRef.current.focus();
|
|
2040
|
-
}
|
|
2041
|
-
break;
|
|
2042
|
-
case 'ArrowDown':
|
|
2043
|
-
event.preventDefault();
|
|
2044
|
-
setFocusedItemIndex(prev => {
|
|
2045
|
-
const nextIndex = prev < menuItems.length - 1 ? prev + 1 : 0;
|
|
2046
|
-
return nextIndex;
|
|
2047
|
-
});
|
|
2048
|
-
break;
|
|
2049
|
-
case 'ArrowUp':
|
|
2050
|
-
event.preventDefault();
|
|
2051
|
-
setFocusedItemIndex(prev => {
|
|
2052
|
-
const nextIndex = prev > 0 ? prev - 1 : menuItems.length - 1;
|
|
2053
|
-
return nextIndex;
|
|
2054
|
-
});
|
|
2055
|
-
break;
|
|
2056
|
-
case 'Enter':
|
|
2057
|
-
case ' ':
|
|
2058
|
-
event.preventDefault();
|
|
2059
|
-
if (focusedItemIndex >= 0 && focusedItemIndex < menuItems.length) {
|
|
2060
|
-
const selectedItem = menuItems[focusedItemIndex];
|
|
2061
|
-
if (selectedItem && !selectedItem.disabled && onMenuItemClick) {
|
|
2062
|
-
onMenuItemClick(selectedItem);
|
|
2063
|
-
}
|
|
2064
|
-
}
|
|
2065
|
-
break;
|
|
2066
|
-
case 'Home':
|
|
2067
|
-
event.preventDefault();
|
|
2068
|
-
setFocusedItemIndex(0);
|
|
2069
|
-
break;
|
|
2070
|
-
case 'End':
|
|
2071
|
-
event.preventDefault();
|
|
2072
|
-
setFocusedItemIndex(menuItems.length - 1);
|
|
2073
|
-
break;
|
|
2074
|
-
}
|
|
2075
|
-
}, [isMenuOpen, closeMenu, focusedItemIndex, menuItems, onMenuItemClick, type]);
|
|
2076
|
-
useEffect(() => {
|
|
2077
|
-
if (!isMenuOpen) {
|
|
2078
|
-
setFocusedItemIndex(-1);
|
|
2079
|
-
}
|
|
2080
|
-
}, [isMenuOpen]);
|
|
2081
|
-
const handleSelectionChange = useCallback((selectedIds) => {
|
|
2082
|
-
if (selectedIds.length > 0 && menuItems.length > 0 && onMenuItemClick) {
|
|
2083
|
-
const lastSelectedId = selectedIds[selectedIds.length - 1];
|
|
2084
|
-
const selectedItem = menuItems.find((item) => item.id === lastSelectedId);
|
|
2085
|
-
if (selectedItem) {
|
|
2086
|
-
onMenuItemClick(selectedItem);
|
|
2087
|
-
closeMenu();
|
|
2088
|
-
}
|
|
2089
|
-
}
|
|
2090
|
-
setSelectedItems(selectedIds);
|
|
2091
|
-
}, [menuItems, onMenuItemClick, closeMenu]);
|
|
2092
|
-
useEffect(() => {
|
|
2093
|
-
if (isMenuOpen) {
|
|
2094
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
2095
|
-
document.addEventListener('keydown', handleKeyDown);
|
|
2096
|
-
return () => {
|
|
2097
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
2098
|
-
document.removeEventListener('keydown', handleKeyDown);
|
|
2099
|
-
};
|
|
2100
|
-
}
|
|
2101
|
-
}, [isMenuOpen, handleClickOutside, handleKeyDown]);
|
|
2102
|
-
const renderAnchor = () => {
|
|
2103
|
-
const dropdownId = `${id || 'menu'}-dropdown`;
|
|
2104
|
-
return React__default.cloneElement(children, {
|
|
2105
|
-
ref: anchorRef,
|
|
2106
|
-
onClick: (e) => {
|
|
2107
|
-
if (dropdownRef.current && dropdownRef.current.contains(e.target)) {
|
|
2108
|
-
return;
|
|
2109
|
-
}
|
|
2110
|
-
if (children.props.onClick) {
|
|
2111
|
-
children.props.onClick(e);
|
|
2112
|
-
}
|
|
2113
|
-
toggleDropdown();
|
|
2114
|
-
},
|
|
2115
|
-
'aria-expanded': isMenuOpen ? 'true' : 'false',
|
|
2116
|
-
'aria-haspopup': 'menu',
|
|
2117
|
-
'aria-controls': isMenuOpen ? dropdownId : undefined
|
|
2118
|
-
});
|
|
2119
|
-
};
|
|
2120
|
-
const menuClass = clsx$1(styles$9['zds-menu__container'], className);
|
|
2121
|
-
const dropdownClass = clsx$1(styles$9['zds-menu__dropdown'], styles$9[`zds-menu__dropdown--${position}`]);
|
|
2122
|
-
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 }) }))] }));
|
|
2123
|
-
};
|
|
2124
|
-
|
|
2125
|
-
var styles$8 = {"content":"MenuRadix-module__content___zlnmj","subContent":"MenuRadix-module__subContent___tnX0E","itemsWrapper":"MenuRadix-module__itemsWrapper___FaUM1","item":"MenuRadix-module__item___xYiTK","subTrigger":"MenuRadix-module__subTrigger___HIuMb","itemSubText":"MenuRadix-module__itemSubText___Z8qgX","itemIcon":"MenuRadix-module__itemIcon___la-QC","itemSelected":"MenuRadix-module__itemSelected___sEBh6","itemText":"MenuRadix-module__itemText___ybPJy","wrapperText":"MenuRadix-module__wrapperText___-Sji9","chevronIcon":"MenuRadix-module__chevronIcon___VMHpF","searchWrapper":"MenuRadix-module__searchWrapper___qrshb","emptyState":"MenuRadix-module__emptyState___SVFf0","loadingMore":"MenuRadix-module__loadingMore___rYo-t"};
|
|
1887
|
+
var styles$6 = {"content":"Menu-module__content___pnDF6","subContent":"Menu-module__subContent___O9T-y","itemsWrapper":"Menu-module__itemsWrapper___Fcg71","item":"Menu-module__item___S3HKY","subTrigger":"Menu-module__subTrigger___CdnJE","itemSubText":"Menu-module__itemSubText___U1HFP","itemIcon":"Menu-module__itemIcon___iyxmZ","itemSelected":"Menu-module__itemSelected___O5Ebi","itemText":"Menu-module__itemText___2fd2B","wrapperText":"Menu-module__wrapperText___PomUe","chevronIcon":"Menu-module__chevronIcon___Gda-U","searchWrapper":"Menu-module__searchWrapper___e0knQ","emptyState":"Menu-module__emptyState___3wh-S","loadingMore":"Menu-module__loadingMore___fUCvH"};
|
|
2126
1888
|
|
|
2127
1889
|
const normalizeText = (text) => {
|
|
2128
1890
|
if (typeof text === 'string')
|
|
@@ -2245,11 +2007,11 @@ const MenuItem = memo(({ item, isSelected, onSelect }) => {
|
|
|
2245
2007
|
const handleSelect = () => {
|
|
2246
2008
|
onSelect(item);
|
|
2247
2009
|
};
|
|
2248
|
-
return (jsxs(DropdownMenu.Item, { className: clsx(styles$
|
|
2010
|
+
return (jsxs(DropdownMenu.Item, { className: clsx(styles$6.item, { [styles$6.itemSelected]: isSelected }), onSelect: handleSelect, disabled: item.disabled, children: [item.icon && jsx("span", { className: styles$6.itemIcon, children: item.icon }), jsxs("div", { className: styles$6.wrapperText, children: [jsx("span", { className: styles$6.itemText, children: item.text }), item.subText && (jsx("span", { className: styles$6.itemSubText, children: item.subText }))] })] }));
|
|
2249
2011
|
});
|
|
2250
2012
|
MenuItem.displayName = 'MenuItem';
|
|
2251
2013
|
|
|
2252
|
-
const
|
|
2014
|
+
const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onScrollEnd, isLoadingMore, onApiSearch, enableApiSearch, selectedItems = [], onOpenChange, align = 'start', className, maxHeight = 400, ...rest }) => {
|
|
2253
2015
|
const itemsWrapperRef = useRef(null);
|
|
2254
2016
|
const hasReachedEndRef = useRef(false);
|
|
2255
2017
|
const observerRef = useRef(null);
|
|
@@ -2258,16 +2020,14 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2258
2020
|
const isLoadingMoreRef = useRef(isLoadingMore);
|
|
2259
2021
|
const [searchInput, setSearchInput] = useState('');
|
|
2260
2022
|
const [searchTerm, setSearchTerm] = useState('');
|
|
2261
|
-
const [open, setOpen] = useState(false);
|
|
2262
2023
|
const maxHeightStyle = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
|
|
2263
|
-
const { handleItemSelect: handleItemSelectLogic, isItemSelected } = useMenuLogic({
|
|
2024
|
+
const { open, setOpen, handleItemSelect: handleItemSelectLogic, isItemSelected } = useMenuLogic({
|
|
2264
2025
|
selectedItems,
|
|
2265
2026
|
onItemSelect,
|
|
2266
2027
|
onOpenChange,
|
|
2267
2028
|
});
|
|
2268
2029
|
const handleItemSelect = useCallback((item) => {
|
|
2269
2030
|
handleItemSelectLogic(item);
|
|
2270
|
-
setOpen(false);
|
|
2271
2031
|
}, [handleItemSelectLogic]);
|
|
2272
2032
|
const { filteredItems } = useSearchLogic({
|
|
2273
2033
|
items,
|
|
@@ -2293,7 +2053,7 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2293
2053
|
useEffect(() => {
|
|
2294
2054
|
onScrollEndRef.current = onScrollEnd;
|
|
2295
2055
|
isLoadingMoreRef.current = isLoadingMore;
|
|
2296
|
-
});
|
|
2056
|
+
}, [onScrollEnd, isLoadingMore]);
|
|
2297
2057
|
useEffect(() => {
|
|
2298
2058
|
if (!open || !enableInfiniteScroll) {
|
|
2299
2059
|
return;
|
|
@@ -2352,27 +2112,24 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2352
2112
|
const renderMenuItem = useCallback((item, key) => {
|
|
2353
2113
|
const hasChildren = item.children && item.children.length > 0;
|
|
2354
2114
|
if (hasChildren) {
|
|
2355
|
-
return (jsxs(DropdownMenu.Sub, { children: [jsxs(DropdownMenu.SubTrigger, { className: styles$
|
|
2115
|
+
return (jsxs(DropdownMenu.Sub, { children: [jsxs(DropdownMenu.SubTrigger, { className: styles$6.subTrigger, disabled: item.disabled, children: [item.icon && (jsx("span", { className: styles$6.itemIcon, children: item.icon })), jsxs("div", { className: styles$6.wrapperText, children: [jsx("span", { className: styles$6.itemText, children: item.text }), item.subText && (jsx("span", { className: styles$6.itemSubText, children: item.subText }))] }), jsx(ChevronRight16Filled, { className: styles$6.chevronIcon })] }), jsx(DropdownMenu.Portal, { children: jsx(DropdownMenu.SubContent, { className: styles$6.subContent, sideOffset: 16, collisionPadding: 20, children: item.children.map((childItem, childIndex) => renderMenuItem(childItem, `${key}-${childIndex}`)) }) })] }, key));
|
|
2356
2116
|
}
|
|
2357
2117
|
return (jsx(MenuItem, { item: item, isSelected: isItemSelected(item), onSelect: handleItemSelect }, key));
|
|
2358
2118
|
}, [handleItemSelect, isItemSelected]);
|
|
2359
2119
|
const handleOpenChange = (newOpen) => {
|
|
2360
2120
|
setOpen(newOpen);
|
|
2361
|
-
if (onOpenChange) {
|
|
2362
|
-
onOpenChange(newOpen);
|
|
2363
|
-
}
|
|
2364
2121
|
if (!newOpen) {
|
|
2365
2122
|
hasReachedEndRef.current = false;
|
|
2366
2123
|
}
|
|
2367
2124
|
};
|
|
2368
|
-
return (jsxs(DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsx(DropdownMenu.Trigger, { asChild: true, children: children }), jsx(DropdownMenu.Portal, { children: jsxs(DropdownMenu.Content, { className: clsx(styles$
|
|
2125
|
+
return (jsxs(DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsx(DropdownMenu.Trigger, { asChild: true, children: children }), jsx(DropdownMenu.Portal, { children: jsxs(DropdownMenu.Content, { className: clsx(styles$6.content, className), sideOffset: 8, align: align, onKeyDown: (e) => {
|
|
2369
2126
|
if (search) {
|
|
2370
2127
|
e.stopPropagation();
|
|
2371
2128
|
}
|
|
2372
|
-
}, ...rest, children: [search && (jsx("div", { className: styles$
|
|
2129
|
+
}, ...rest, children: [search && (jsx("div", { className: styles$6.searchWrapper, children: jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), jsxs("div", { className: styles$6.itemsWrapper, ref: itemsWrapperRef, style: { maxHeight: maxHeightStyle }, children: [filteredItems.length > 0 ? (filteredItems.map((item, index) => renderMenuItem(item, item.value || item.text || `item-${index}`))) : (jsx("div", { className: styles$6.emptyState, children: "Nenhum item encontrado" })), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$6.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
|
|
2373
2130
|
};
|
|
2374
2131
|
|
|
2375
|
-
var styles$
|
|
2132
|
+
var styles$5 = {"zds-quantity":"Quantity-module__zds-quantity___AymLj","zds-quantity__input":"Quantity-module__zds-quantity__input___Wlhmo"};
|
|
2376
2133
|
|
|
2377
2134
|
/**
|
|
2378
2135
|
* Componente Quantity - permite incrementar/decrementar valores numéricos
|
|
@@ -2591,376 +2348,94 @@ const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled
|
|
|
2591
2348
|
}, [disabled, increment, decrement, decimal, decimalPlaces, isControlled, onChange, computedValue]);
|
|
2592
2349
|
const uniqueId = useId();
|
|
2593
2350
|
const inputId = id || uniqueId;
|
|
2594
|
-
return (jsxs("div", { className: clsx(styles$
|
|
2351
|
+
return (jsxs("div", { className: clsx(styles$5['zds-quantity'], { disabled }, className), children: [jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, icon: jsx(Subtract16Regular, {}), onClick: decrement, disabled: disabled || isMinValue, "aria-label": 'Diminuir quantidade' }), jsx("input", { ref: inputRef, className: clsx(styles$5['zds-quantity__input'], { disabled }), type: 'text', value: inputValue, onChange: handleInputChange, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: inputId, min: '0', step: stepValue, "aria-label": 'Quantidade', role: 'spinbutton', "aria-valuenow": computedValue, "aria-valuemin": 0, "aria-valuemax": decimal ? undefined : 9999, disabled: disabled, inputMode: decimal ? 'decimal' : 'numeric' }), jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, onClick: increment, disabled: disabled, "aria-label": 'Aumentar quantidade', icon: jsx(Add16Regular, {}) })] }));
|
|
2595
2352
|
};
|
|
2596
|
-
const memorizedQuantity =
|
|
2353
|
+
const memorizedQuantity = React.memo(Quantity);
|
|
2597
2354
|
memorizedQuantity.displayName = 'Quantity';
|
|
2598
2355
|
|
|
2599
|
-
var styles$
|
|
2600
|
-
|
|
2601
|
-
const RadioRadix = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', ...rest }) => {
|
|
2602
|
-
const componentId = id || useId();
|
|
2603
|
-
return (jsx(RadioGroup.Root, { id: componentId, className: styles$6.root, defaultValue: defaultValue, onValueChange: onValueChange, name: name, "aria-label": ariaLabel, "data-orientation": orientation, orientation: orientation, ...rest, children: items.map(({ id, value, disabled, label }, index) => {
|
|
2604
|
-
const itemKey = id ?? value ?? `radio-${index}`;
|
|
2605
|
-
const uniqueId = `${componentId}-item-${value}`;
|
|
2606
|
-
return (jsx("div", { className: clsx(styles$6.wrapper, { [styles$6.disabled]: disabled }), children: jsxs("label", { className: styles$6.labelWrapper, htmlFor: uniqueId, children: [jsx("div", { className: styles$6.itemWrapper, children: jsx(RadioGroup.Item, { disabled: disabled, className: styles$6.item, value: value, id: uniqueId, "data-disabled": disabled, children: jsx(RadioGroup.Indicator, { className: styles$6.indicator }) }) }), jsx("span", { className: styles$6.labelText, children: label })] }) }, itemKey));
|
|
2607
|
-
}) }));
|
|
2608
|
-
};
|
|
2609
|
-
|
|
2610
|
-
var styles$5 = {"zds-select":"Select-module__zds-select___TePBJ","zds-select__dropdown":"Select-module__zds-select__dropdown___pEXsY","zds-dropdown__container":"Select-module__zds-dropdown__container___TJvrT","zds-select__dropdown--top":"Select-module__zds-select__dropdown--top___O3u5M","zds-select__dropdown--bottom":"Select-module__zds-select__dropdown--bottom___qfKLH"};
|
|
2611
|
-
|
|
2612
|
-
var styles$4 = {"zds-select-field":"SelectField-module__zds-select-field___djzS5","zds-select-field__required":"SelectField-module__zds-select-field__required___T-LvC","zds-select-field__container-box":"SelectField-module__zds-select-field__container-box___nkzZy","zds-select-field__box__input":"SelectField-module__zds-select-field__box__input___xBdKZ","zds-select-field__display":"SelectField-module__zds-select-field__display___snLz3","zds-select-field--open":"SelectField-module__zds-select-field--open___IUfIn","zds-select-field__icon":"SelectField-module__zds-select-field__icon___kt-SW","zds-select-field__helper-text":"SelectField-module__zds-select-field__helper-text___9jTiW","zds-select-field__container-tooltip":"SelectField-module__zds-select-field__container-tooltip___xZr46","zds-select-field__tooltip":"SelectField-module__zds-select-field__tooltip___XYAEC","zds-select-field--error":"SelectField-module__zds-select-field--error___sb6H6","zds-select-field--disabled":"SelectField-module__zds-select-field--disabled___48f33"};
|
|
2613
|
-
|
|
2614
|
-
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) => {
|
|
2615
|
-
// ✅ NOVA LÓGICA: Validação de required
|
|
2616
|
-
const isRequired = required && !disabled;
|
|
2617
|
-
const hasValue = Boolean(value && value.trim().length > 0);
|
|
2618
|
-
const shouldShowRequiredError = isRequired && isTouched && !hasValue;
|
|
2619
|
-
// ✅ NOVA LÓGICA: Mensagem de erro dinâmica
|
|
2620
|
-
const dynamicErrorMessage = shouldShowRequiredError && !errorMessage
|
|
2621
|
-
? 'Este campo é obrigatório'
|
|
2622
|
-
: errorMessage;
|
|
2623
|
-
// ✅ NOVA LÓGICA: Estado de erro combinado
|
|
2624
|
-
const showError = hasError || shouldShowRequiredError || Boolean(errorMessage);
|
|
2625
|
-
// Classes CSS
|
|
2626
|
-
const containerClasses = clsx(styles$4['zds-select-field'], {
|
|
2627
|
-
[styles$4['zds-select-field--open']]: isOpen,
|
|
2628
|
-
[styles$4['zds-select-field--disabled']]: disabled,
|
|
2629
|
-
[styles$4['zds-select-field--error']]: showError,
|
|
2630
|
-
[styles$4['zds-select-field--required']]: isRequired,
|
|
2631
|
-
[styles$4['zds-select-field--touched']]: isTouched,
|
|
2632
|
-
}, className);
|
|
2633
|
-
const displayClasses = clsx(styles$4['zds-select-field__display'], {
|
|
2634
|
-
[styles$4['zds-select-field__display--placeholder']]: !hasValue,
|
|
2635
|
-
'has-value': hasValue,
|
|
2636
|
-
});
|
|
2637
|
-
const displayText = hasValue ? value : placeholder;
|
|
2638
|
-
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$4['zds-select-field__container-tooltip'], children: [label, required && jsx("span", { className: styles$4['zds-select-field__required'], children: "*" }), jsx(Info12Regular, { className: styles$4['zds-select-field__tooltip'] })] }) })) : (jsxs("div", { className: styles$4['zds-select-field__container-tooltip'], children: [label, required && jsx("span", { className: styles$4['zds-select-field__required'], children: "*" })] })) })), jsxs("div", { className: styles$4['zds-select-field__container-box'], children: [jsxs("div", { className: styles$4['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$4['zds-select-field__input'] }), icon && (jsx("div", { className: styles$4['zds-select-field__icon'], children: icon }))] }), !isOpen && (helperText || showError) && (jsx("div", { className: styles$4['zds-select-field__helper-text'], children: showError ? dynamicErrorMessage : helperText }))] })] }));
|
|
2639
|
-
});
|
|
2640
|
-
SelectField.displayName = 'SelectField';
|
|
2356
|
+
var styles$4 = {"fieldContainer":"index-module__fieldContainer___gp5Hz","trigger":"index-module__trigger___rHQJz","disabled":"index-module__disabled___MIJba","open":"index-module__open___bVB-1","error":"index-module__error___nPFjW","hasValue":"index-module__hasValue___a4Sy4","triggerText":"index-module__triggerText___tyjAQ","containerLabel":"index-module__containerLabel___CExNh","content":"index-module__content___9nWeY","viewport":"index-module__viewport___nkVG9","group":"index-module__group___-PiX6","container":"index-module__container___Wg-pd","searchWrapper":"index-module__searchWrapper___umf9d","item":"index-module__item___R-Xle","subTitle":"index-module__subTitle___sXaqd","title":"index-module__title___x1Bia","checkboxItem":"index-module__checkboxItem___FTUbN","checkboxContent":"index-module__checkboxContent___skcd5","itemWrapper":"index-module__itemWrapper___PAglx","selected":"index-module__selected___VFFMN","icon":"index-module__icon___l2Zze","itemIndicator":"index-module__itemIndicator___FhOim","textContent":"index-module__textContent___cBJbp","helper":"index-module__helper___w4VC7","errorMessage":"index-module__errorMessage___gquqW","noResults":"index-module__noResults___qgzod","loadingMore":"index-module__loadingMore___GHc31","expandableItemContainer":"index-module__expandableItemContainer___NexPi","chevron":"index-module__chevron___c6mu-","childrenWrapper":"index-module__childrenWrapper___tj2R-"};
|
|
2641
2357
|
|
|
2642
|
-
const
|
|
2643
|
-
|
|
2644
|
-
const
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
// ✅ NOVO: Validação de props em desenvolvimento
|
|
2649
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2650
|
-
// Validar unidades CSS
|
|
2651
|
-
if (maxWidth && typeof maxWidth === 'string' &&
|
|
2652
|
-
!maxWidth.match(/^\d+(px|%|rem|em|vw|vh)$/)) {
|
|
2653
|
-
console.warn('Select: maxWidth deve ter unidade CSS válida (px, %, rem, em, vw, vh)');
|
|
2654
|
-
}
|
|
2655
|
-
if (minWidth && typeof minWidth === 'string' &&
|
|
2656
|
-
!minWidth.match(/^\d+(px|%|rem|em|vw|vh)$/)) {
|
|
2657
|
-
console.warn('Select: minWidth deve ter unidade CSS válida');
|
|
2658
|
-
}
|
|
2659
|
-
// Validar performance
|
|
2660
|
-
if (options.length > 1000) {
|
|
2661
|
-
console.warn('Select: Muitas opções (>1000) podem impactar performance. Considere virtualização.');
|
|
2662
|
-
}
|
|
2663
|
-
// Validar onChange obrigatório
|
|
2664
|
-
if (!onChange) {
|
|
2665
|
-
console.warn('Select: onChange prop é recomendado para controle de estado.');
|
|
2666
|
-
}
|
|
2667
|
-
}
|
|
2668
|
-
// Estados
|
|
2669
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
2670
|
-
const [selectedOptions, setSelectedOptions] = useState(() => {
|
|
2671
|
-
// Se tem value controlado, não usar initialValue
|
|
2672
|
-
if (value !== undefined) {
|
|
2673
|
-
return [];
|
|
2674
|
-
}
|
|
2675
|
-
// Se tem initialValue, processar na inicialização
|
|
2676
|
-
if (initialValue !== undefined) {
|
|
2677
|
-
// Inicializar com array vazio primeiro, será populado no useEffect
|
|
2678
|
-
return [];
|
|
2679
|
-
}
|
|
2680
|
-
return [];
|
|
2681
|
-
});
|
|
2682
|
-
const [isTouched, setIsTouched] = useState(false);
|
|
2683
|
-
const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
|
|
2684
|
-
// Lógica de validação para campo obrigatório
|
|
2685
|
-
const hasValue = selectedOptions.length > 0;
|
|
2686
|
-
const shouldShowRequiredError = required && isTouched && !hasValue && !disabled;
|
|
2687
|
-
// Validação e normalização das opções
|
|
2688
|
-
const validatedOptions = useMemo(() => {
|
|
2689
|
-
if (!Array.isArray(options)) {
|
|
2690
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2691
|
-
console.warn('Select: options deve ser um array, recebido:', typeof options, options);
|
|
2692
|
-
}
|
|
2693
|
-
return [];
|
|
2694
|
-
}
|
|
2695
|
-
return options.filter((option, index) => {
|
|
2696
|
-
if (!option || typeof option !== 'object') {
|
|
2697
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2698
|
-
console.warn(`Select: opção ${index} é inválida (null/undefined):`, option);
|
|
2699
|
-
}
|
|
2700
|
-
return false;
|
|
2701
|
-
}
|
|
2702
|
-
if (!option.text || typeof option.text !== 'string' || option.text.trim().length === 0) {
|
|
2703
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2704
|
-
console.warn(`Select: opção ${index} sem text válido:`, option);
|
|
2705
|
-
}
|
|
2706
|
-
return false;
|
|
2707
|
-
}
|
|
2708
|
-
if (option.text.length > 200) {
|
|
2709
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2710
|
-
console.warn(`Select: opção ${index} com text muito longo (${option.text.length} chars):`, option.text.substring(0, 50) + '...');
|
|
2711
|
-
}
|
|
2712
|
-
return false;
|
|
2713
|
-
}
|
|
2714
|
-
return true;
|
|
2715
|
-
});
|
|
2716
|
-
}, [options]);
|
|
2717
|
-
// Conversão para itens do Dropdown
|
|
2718
|
-
const dropdownItems = useMemo(() => {
|
|
2719
|
-
return validatedOptions.map((option, index) => ({
|
|
2720
|
-
id: option.id || `dropdown-item-${index}`,
|
|
2721
|
-
text: option.text,
|
|
2722
|
-
subText: option.subText,
|
|
2723
|
-
icon: option.icon,
|
|
2724
|
-
disabled: option.disabled || disabled
|
|
2725
|
-
}));
|
|
2726
|
-
}, [validatedOptions, disabled]);
|
|
2727
|
-
// Texto de exibição das opções selecionadas
|
|
2728
|
-
const displayText = useMemo(() => {
|
|
2729
|
-
if (selectedOptions.length === 0)
|
|
2730
|
-
return '';
|
|
2731
|
-
return selectedOptions
|
|
2732
|
-
.map((item) => item.text || 'Item sem nome')
|
|
2733
|
-
.join(', ');
|
|
2734
|
-
}, [selectedOptions]);
|
|
2735
|
-
// IDs das opções selecionadas para o Dropdown
|
|
2736
|
-
const selectedIds = useMemo(() => {
|
|
2737
|
-
return selectedOptions.map((selectedItem) => {
|
|
2738
|
-
const optionIndex = validatedOptions.findIndex((option) => {
|
|
2739
|
-
return option.id === selectedItem.id ||
|
|
2740
|
-
option.text === selectedItem.text ||
|
|
2741
|
-
option === selectedItem;
|
|
2742
|
-
});
|
|
2743
|
-
return optionIndex !== -1
|
|
2744
|
-
? (validatedOptions[optionIndex].id || `dropdown-item-${optionIndex}`)
|
|
2745
|
-
: null;
|
|
2746
|
-
}).filter((id) => Boolean(id));
|
|
2747
|
-
}, [selectedOptions, validatedOptions]);
|
|
2748
|
-
// Mapa inicial de seleção para o Dropdown
|
|
2749
|
-
const initialItemsSelected = useMemo(() => {
|
|
2750
|
-
const selectedMap = {};
|
|
2751
|
-
selectedIds.forEach((id) => {
|
|
2752
|
-
selectedMap[id] = true;
|
|
2753
|
-
});
|
|
2754
|
-
return selectedMap;
|
|
2755
|
-
}, [selectedIds]);
|
|
2756
|
-
// ✅ SIMPLIFICADO: Handlers de evento sem refs desnecessários
|
|
2757
|
-
const handleOptionSelect = useCallback((selectedIds) => {
|
|
2358
|
+
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange, value, ...restProps }) => {
|
|
2359
|
+
const itemRef = useRef(null);
|
|
2360
|
+
const handleCheckboxChange = (checkedValue) => {
|
|
2361
|
+
onCheckedChange(Boolean(checkedValue));
|
|
2362
|
+
};
|
|
2363
|
+
const handleKeyDown = (e) => {
|
|
2758
2364
|
if (disabled)
|
|
2759
2365
|
return;
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
if (!foundOption && id.startsWith('dropdown-item-')) {
|
|
2765
|
-
const index = parseInt(id.replace('dropdown-item-', ''), 10);
|
|
2766
|
-
foundOption = validatedOptions[index];
|
|
2767
|
-
}
|
|
2768
|
-
return foundOption;
|
|
2769
|
-
}).filter((option) => Boolean(option));
|
|
2770
|
-
setSelectedOptions(selectedItems);
|
|
2771
|
-
onChange?.(selectedItems);
|
|
2772
|
-
// Fechar dropdown se não for múltipla seleção
|
|
2773
|
-
if (type !== 'checkbox') {
|
|
2774
|
-
setIsOpen(false);
|
|
2775
|
-
}
|
|
2776
|
-
}, [validatedOptions, onChange, type, disabled]);
|
|
2777
|
-
// ✅ NOVO: Busca rápida por primeira letra
|
|
2778
|
-
const handleQuickSearch = useCallback((char) => {
|
|
2779
|
-
if (!isOpen || dropdownItems.length === 0)
|
|
2366
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
2367
|
+
e.preventDefault();
|
|
2368
|
+
e.stopPropagation();
|
|
2369
|
+
onCheckedChange(!checked);
|
|
2780
2370
|
return;
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
matchingIndex = dropdownItems.findIndex(item => item.text.toLowerCase().startsWith(char) &&
|
|
2789
|
-
!item.disabled);
|
|
2790
|
-
}
|
|
2791
|
-
if (matchingIndex >= 0) {
|
|
2792
|
-
setFocusedOptionIndex(matchingIndex);
|
|
2793
|
-
}
|
|
2794
|
-
}, [isOpen, focusedOptionIndex, dropdownItems]);
|
|
2795
|
-
const handleTriggerClick = useCallback((event) => {
|
|
2796
|
-
if (disabled)
|
|
2371
|
+
}
|
|
2372
|
+
if (e.key === 'ArrowDown') {
|
|
2373
|
+
e.preventDefault();
|
|
2374
|
+
const nextElement = itemRef.current?.nextElementSibling;
|
|
2375
|
+
if (nextElement && nextElement.getAttribute('tabIndex') === '0') {
|
|
2376
|
+
nextElement.focus();
|
|
2377
|
+
}
|
|
2797
2378
|
return;
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
|
|
2379
|
+
}
|
|
2380
|
+
if (e.key === 'ArrowUp') {
|
|
2381
|
+
e.preventDefault();
|
|
2382
|
+
const prevElement = itemRef.current?.previousElementSibling;
|
|
2383
|
+
if (prevElement && prevElement.getAttribute('tabIndex') === '0') {
|
|
2384
|
+
prevElement.focus();
|
|
2385
|
+
}
|
|
2805
2386
|
return;
|
|
2806
|
-
const relatedTarget = event.relatedTarget;
|
|
2807
|
-
if (selectRef.current && relatedTarget && selectRef.current.contains(relatedTarget)) {
|
|
2808
|
-
return; // Não fechar se foco está dentro do select
|
|
2809
2387
|
}
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
setIsOpen(false);
|
|
2813
|
-
setFocusedOptionIndex(-1);
|
|
2814
|
-
}, 200);
|
|
2815
|
-
}, [disabled]);
|
|
2816
|
-
const handleKeyDown = useCallback((event) => {
|
|
2388
|
+
};
|
|
2389
|
+
const handleClick = (e) => {
|
|
2817
2390
|
if (disabled)
|
|
2818
2391
|
return;
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
// Selecionar opção focada
|
|
2826
|
-
const optionId = dropdownItems[focusedOptionIndex]?.id;
|
|
2827
|
-
if (optionId) {
|
|
2828
|
-
handleOptionSelect([optionId]);
|
|
2829
|
-
}
|
|
2830
|
-
}
|
|
2831
|
-
else {
|
|
2832
|
-
setIsOpen(prev => !prev);
|
|
2833
|
-
if (!isOpen) {
|
|
2834
|
-
setFocusedOptionIndex(0);
|
|
2835
|
-
}
|
|
2836
|
-
}
|
|
2837
|
-
break;
|
|
2838
|
-
case 'Escape':
|
|
2839
|
-
event.preventDefault();
|
|
2840
|
-
event.stopPropagation();
|
|
2841
|
-
setIsTouched(true);
|
|
2842
|
-
setIsOpen(false);
|
|
2843
|
-
setFocusedOptionIndex(-1);
|
|
2844
|
-
// ✅ Devolver foco para o trigger
|
|
2845
|
-
selectRef.current?.focus();
|
|
2846
|
-
break;
|
|
2847
|
-
case 'ArrowDown':
|
|
2848
|
-
event.preventDefault();
|
|
2849
|
-
event.stopPropagation();
|
|
2850
|
-
if (!isOpen) {
|
|
2851
|
-
setIsOpen(true);
|
|
2852
|
-
setFocusedOptionIndex(0);
|
|
2853
|
-
}
|
|
2854
|
-
else {
|
|
2855
|
-
setFocusedOptionIndex(prev => prev < dropdownItems.length - 1 ? prev + 1 : 0);
|
|
2856
|
-
}
|
|
2857
|
-
break;
|
|
2858
|
-
case 'ArrowUp':
|
|
2859
|
-
event.preventDefault();
|
|
2860
|
-
event.stopPropagation();
|
|
2861
|
-
if (isOpen) {
|
|
2862
|
-
setFocusedOptionIndex(prev => prev > 0 ? prev - 1 : dropdownItems.length - 1);
|
|
2863
|
-
}
|
|
2864
|
-
break;
|
|
2865
|
-
case 'Home':
|
|
2866
|
-
if (isOpen) {
|
|
2867
|
-
event.preventDefault();
|
|
2868
|
-
setFocusedOptionIndex(0);
|
|
2869
|
-
}
|
|
2870
|
-
break;
|
|
2871
|
-
case 'End':
|
|
2872
|
-
if (isOpen) {
|
|
2873
|
-
event.preventDefault();
|
|
2874
|
-
setFocusedOptionIndex(dropdownItems.length - 1);
|
|
2875
|
-
}
|
|
2876
|
-
break;
|
|
2877
|
-
case 'Tab':
|
|
2878
|
-
if (isOpen) {
|
|
2879
|
-
setIsOpen(false);
|
|
2880
|
-
setIsTouched(true);
|
|
2881
|
-
setFocusedOptionIndex(-1);
|
|
2882
|
-
}
|
|
2883
|
-
break;
|
|
2884
|
-
default:
|
|
2885
|
-
if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) {
|
|
2886
|
-
handleQuickSearch(event.key.toLowerCase());
|
|
2887
|
-
}
|
|
2888
|
-
break;
|
|
2889
|
-
}
|
|
2890
|
-
}, [isOpen, disabled, focusedOptionIndex, dropdownItems, handleOptionSelect]);
|
|
2891
|
-
// Click outside handler
|
|
2892
|
-
const handleClickOutside = useCallback((event) => {
|
|
2893
|
-
const target = event.target;
|
|
2894
|
-
if (selectRef.current && !selectRef.current.contains(target)) {
|
|
2895
|
-
setIsTouched(true);
|
|
2896
|
-
setIsOpen(false);
|
|
2897
|
-
setFocusedOptionIndex(-1);
|
|
2392
|
+
const target = e.target;
|
|
2393
|
+
const isCheckboxClick = target.closest('input[type="checkbox"]') ||
|
|
2394
|
+
target.closest('label');
|
|
2395
|
+
if (!isCheckboxClick) {
|
|
2396
|
+
e.preventDefault();
|
|
2397
|
+
onCheckedChange(!checked);
|
|
2898
2398
|
}
|
|
2899
|
-
}
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2399
|
+
};
|
|
2400
|
+
return (jsx("div", { ref: itemRef, className: clsx(styles$4.checkboxItem, {
|
|
2401
|
+
[styles$4.disabled]: disabled,
|
|
2402
|
+
}), role: "option", "aria-selected": checked, "aria-disabled": disabled, "data-selected": checked, "data-testid": `checkbox-item-${value}`, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onClick: handleClick, ...restProps, children: jsx("div", { className: styles$4.checkboxContent, children: jsx(Checkbox, { checked: checked, onCheckedChange: handleCheckboxChange, disabled: disabled, label: jsxs("div", { className: styles$4.textContent, children: [jsx("span", { className: styles$4.title, children: text }), subTitle && jsx("div", { className: styles$4.subTitle, children: subTitle })] }) }) }) }));
|
|
2403
|
+
};
|
|
2404
|
+
CheckboxSelectItem.displayName = 'CheckboxSelectItem';
|
|
2405
|
+
|
|
2406
|
+
const ExpandableSelectItem = ({ item, variant, onSelect, selectedValues, level = 0, }) => {
|
|
2407
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
2408
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
2409
|
+
const isSelected = selectedValues.includes(item.value);
|
|
2410
|
+
const handleClick = (e) => {
|
|
2411
|
+
if (hasChildren) {
|
|
2412
|
+
e.preventDefault();
|
|
2413
|
+
e.stopPropagation();
|
|
2414
|
+
setIsExpanded(!isExpanded);
|
|
2905
2415
|
}
|
|
2906
2416
|
else {
|
|
2907
|
-
|
|
2908
|
-
document.removeEventListener('touchstart', handleClickOutside);
|
|
2909
|
-
}
|
|
2910
|
-
return () => {
|
|
2911
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
2912
|
-
document.removeEventListener('touchstart', handleClickOutside);
|
|
2913
|
-
};
|
|
2914
|
-
}, [isOpen, handleClickOutside]);
|
|
2915
|
-
useEffect(() => {
|
|
2916
|
-
if (value !== undefined) {
|
|
2917
|
-
// Valor controlado - sempre usar value
|
|
2918
|
-
const valueArray = Array.isArray(value) ? value : [value];
|
|
2919
|
-
const newSelectedOptions = valueArray
|
|
2920
|
-
.map((val) => validatedOptions.find((option) => option.id === val || option.text === val))
|
|
2921
|
-
.filter((option) => Boolean(option));
|
|
2922
|
-
setSelectedOptions(newSelectedOptions);
|
|
2923
|
-
}
|
|
2924
|
-
else if (initialValue !== undefined && selectedOptions.length === 0) {
|
|
2925
|
-
// Valor inicial não controlado - só aplicar se ainda não há seleções
|
|
2926
|
-
const initialValueArray = Array.isArray(initialValue) ? initialValue : [initialValue];
|
|
2927
|
-
const newSelectedOptions = initialValueArray
|
|
2928
|
-
.map((val) => validatedOptions.find((option) => option.id === val || option.text === val))
|
|
2929
|
-
.filter((option) => Boolean(option));
|
|
2930
|
-
setSelectedOptions(newSelectedOptions);
|
|
2931
|
-
}
|
|
2932
|
-
else if (value === undefined && initialValue === undefined && selectedOptions.length > 0) {
|
|
2933
|
-
// Nenhum valor definido - limpar seleções apenas se havia seleções
|
|
2934
|
-
setSelectedOptions([]);
|
|
2935
|
-
}
|
|
2936
|
-
}, [value, initialValue, validatedOptions]);
|
|
2937
|
-
const containerStyles = useMemo(() => {
|
|
2938
|
-
const styles = {};
|
|
2939
|
-
if (minWidth) {
|
|
2940
|
-
styles.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
|
|
2417
|
+
onSelect(item.value);
|
|
2941
2418
|
}
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
? dropdownItems[focusedOptionIndex]?.id
|
|
2961
|
-
: selectedIds.length > 0 ? selectedIds[0] : undefined, tabIndex: disabled ? -1 : 0, onBlur: handleBlur, onKeyDown: handleKeyDown, onClick: handleTriggerClick, className: styles$5['zds-select__trigger'], children: jsx(SelectField, { name: `select-${finalId}`, placeholder: displayText || placeholder, value: displayText, disabled: disabled, helperText: !isOpen ? helperText : undefined, errorMessage: !isOpen ? errorMessage : undefined, icon: isOpen ? jsx(ChevronUp16Regular, {}) : jsx(ChevronDown16Regular, {}), required: required, label: label, isTouched: isTouched, hasError: shouldShowRequiredError, isOpen: isOpen, tooltip: tooltip, tooltipText: tooltipText, positionTooltip: positionTooltip }) }), isOpen && !disabled && (jsx("div", { className: clsx(styles$5['zds-select__dropdown'], position && styles$5[`zds-select__dropdown--${position}`]), children: jsx(MemoizedDropdown, { items: dropdownItems, type: type, onSelectionChange: handleOptionSelect, initialItemsSelected: initialItemsSelected, defaultSelectedIds: selectedIds, id: `${finalId}-dropdown`, showSubText: showSubText, maxWidth: maxWidth, minWidth: minWidth, width: width, maxHeight: maxHeight, infiniteScroll: infiniteScroll }, `dropdown-${selectedIds.join('-')}`) }))] }));
|
|
2419
|
+
};
|
|
2420
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$4.expandableItemContainer, style: { paddingLeft: `${level * 16}px` }, children: jsxs("div", { className: clsx(styles$4.itemWrapper, {
|
|
2421
|
+
[styles$4.selected]: isSelected && !hasChildren,
|
|
2422
|
+
[styles$4.disabled]: item.disabled,
|
|
2423
|
+
}), onClick: handleClick, onKeyDown: (e) => {
|
|
2424
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
2425
|
+
e.preventDefault();
|
|
2426
|
+
handleClick(e);
|
|
2427
|
+
}
|
|
2428
|
+
}, role: "button", tabIndex: item.disabled ? -1 : 0, "data-disabled": item.disabled || undefined, "data-selected": isSelected && !hasChildren ? 'true' : undefined, "data-testid": `select-item-${item.value}`, children: [variant === 'icon' && item.icon && (jsx("span", { className: styles$4.icon, children: item.icon })), jsxs("div", { className: styles$4.textContent, children: [jsx("div", { className: styles$4.title, children: item.text }), item.subTitle && jsx("div", { className: styles$4.subTitle, children: item.subTitle })] }), hasChildren && (jsx("span", { className: styles$4.chevron, children: isExpanded ? jsx(ChevronDown16Regular, {}) : jsx(ChevronRight16Regular, {}) }))] }) }), hasChildren && isExpanded && (jsx("div", { className: styles$4.childrenWrapper, children: item.children.map((child) => (jsx(ExpandableSelectItem, { item: child, variant: variant, onSelect: onSelect, selectedValues: selectedValues, level: level + 1 }, child.id || child.value))) }))] }));
|
|
2429
|
+
};
|
|
2430
|
+
|
|
2431
|
+
const SelectItem = React.forwardRef(({ text, subTitle, icon, disabled, value, variant, ...restProps }, ref) => {
|
|
2432
|
+
return (jsxs("div", { className: clsx(styles$4.itemWrapper, {
|
|
2433
|
+
[styles$4.disabled]: disabled,
|
|
2434
|
+
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$4.icon, children: icon })), jsxs(Select$1.Item, { className: clsx(styles$4.item, {
|
|
2435
|
+
[styles$4.disabled]: disabled,
|
|
2436
|
+
}), value: value, disabled: disabled, ...restProps, children: [jsx(Select$1.ItemText, { className: styles$4.title, children: text }), subTitle && jsx("div", { className: styles$4.subTitle, children: subTitle }), jsx(Select$1.ItemIndicator, { className: styles$4.itemIndicator })] })] }));
|
|
2962
2437
|
});
|
|
2963
|
-
|
|
2438
|
+
SelectItem.displayName = 'SelectItem';
|
|
2964
2439
|
|
|
2965
2440
|
const initialState = {
|
|
2966
2441
|
isOpen: false,
|
|
@@ -2986,16 +2461,15 @@ function selectReducer(state, action) {
|
|
|
2986
2461
|
return { ...state, hasError: action.payload };
|
|
2987
2462
|
case 'RESET_SEARCH':
|
|
2988
2463
|
return { ...state, searchInput: '', searchTerm: '' };
|
|
2989
|
-
case 'VALIDATE':
|
|
2464
|
+
case 'VALIDATE': {
|
|
2990
2465
|
const hasError = action.payload.required && state.selectedValues.length === 0;
|
|
2991
2466
|
return { ...state, hasError, touched: true };
|
|
2467
|
+
}
|
|
2992
2468
|
default:
|
|
2993
2469
|
return state;
|
|
2994
2470
|
}
|
|
2995
2471
|
}
|
|
2996
|
-
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange,
|
|
2997
|
-
// API search props
|
|
2998
|
-
enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
2472
|
+
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange, enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
2999
2473
|
const [state, dispatch] = useReducer(selectReducer, {
|
|
3000
2474
|
...initialState,
|
|
3001
2475
|
selectedValues: Array.isArray(value) ? value : value ? [value] : [],
|
|
@@ -3004,9 +2478,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3004
2478
|
const debounceTimeoutRef = useRef(null);
|
|
3005
2479
|
const hasInitialSearchRef = useRef(false);
|
|
3006
2480
|
const lastSearchTermRef = useRef('');
|
|
3007
|
-
// Função de debounce para busca em API
|
|
3008
2481
|
const debouncedApiSearch = useCallback((searchTerm) => {
|
|
3009
|
-
// Evita chamadas duplicadas com o mesmo termo
|
|
3010
2482
|
if (lastSearchTermRef.current === searchTerm) {
|
|
3011
2483
|
return;
|
|
3012
2484
|
}
|
|
@@ -3018,7 +2490,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3018
2490
|
if (enableApiSearch && onApiSearch) {
|
|
3019
2491
|
onApiSearch(searchTerm);
|
|
3020
2492
|
}
|
|
3021
|
-
}, 300);
|
|
2493
|
+
}, 300);
|
|
3022
2494
|
}, [enableApiSearch, onApiSearch]);
|
|
3023
2495
|
useEffect(() => {
|
|
3024
2496
|
const newValues = Array.isArray(value) ? value : value ? [value] : [];
|
|
@@ -3034,35 +2506,28 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3034
2506
|
useEffect(() => {
|
|
3035
2507
|
if (!state.isOpen) {
|
|
3036
2508
|
dispatch({ type: 'RESET_SEARCH' });
|
|
3037
|
-
// Reset flags quando fechar
|
|
3038
2509
|
hasInitialSearchRef.current = false;
|
|
3039
2510
|
lastSearchTermRef.current = '';
|
|
3040
2511
|
}
|
|
3041
2512
|
}, [state.isOpen]);
|
|
3042
|
-
// Efeito para busca inicial quando abrir o select com API search
|
|
3043
2513
|
useEffect(() => {
|
|
3044
2514
|
if (state.isOpen && enableApiSearch && !hasInitialSearchRef.current) {
|
|
3045
2515
|
hasInitialSearchRef.current = true;
|
|
3046
|
-
// Faz uma busca inicial vazia para carregar os itens (sem debounce para ser mais rápido)
|
|
3047
2516
|
if (onApiSearch) {
|
|
3048
2517
|
onApiSearch('');
|
|
3049
2518
|
lastSearchTermRef.current = '';
|
|
3050
2519
|
}
|
|
3051
2520
|
}
|
|
3052
2521
|
}, [state.isOpen, enableApiSearch, onApiSearch]);
|
|
3053
|
-
// Efeito para disparar busca via API somente quando searchTerm for definido (Enter pressionado)
|
|
3054
2522
|
useEffect(() => {
|
|
3055
2523
|
if (enableApiSearch && state.searchTerm && state.isOpen) {
|
|
3056
|
-
// Só dispara se for diferente do último termo pesquisado
|
|
3057
2524
|
if (lastSearchTermRef.current !== state.searchTerm) {
|
|
3058
2525
|
debouncedApiSearch(state.searchTerm);
|
|
3059
2526
|
}
|
|
3060
2527
|
}
|
|
3061
2528
|
}, [state.searchTerm, enableApiSearch, state.isOpen, debouncedApiSearch]);
|
|
3062
|
-
// Efeito para recarregar dados quando o campo de busca ficar vazio
|
|
3063
2529
|
useEffect(() => {
|
|
3064
2530
|
if (enableApiSearch && state.isOpen && state.searchInput === '' && state.searchTerm === '') {
|
|
3065
|
-
// Só recarrega se já teve alguma busca anterior
|
|
3066
2531
|
if (lastSearchTermRef.current !== '') {
|
|
3067
2532
|
lastSearchTermRef.current = '';
|
|
3068
2533
|
if (onApiSearch) {
|
|
@@ -3071,13 +2536,11 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3071
2536
|
}
|
|
3072
2537
|
}
|
|
3073
2538
|
}, [state.searchInput, state.searchTerm, enableApiSearch, state.isOpen, onApiSearch]);
|
|
3074
|
-
// Cleanup do timeout quando componente for desmontado
|
|
3075
2539
|
useEffect(() => {
|
|
3076
2540
|
return () => {
|
|
3077
2541
|
if (debounceTimeoutRef.current) {
|
|
3078
2542
|
clearTimeout(debounceTimeoutRef.current);
|
|
3079
2543
|
}
|
|
3080
|
-
// Limpar refs no cleanup
|
|
3081
2544
|
hasInitialSearchRef.current = false;
|
|
3082
2545
|
lastSearchTermRef.current = '';
|
|
3083
2546
|
};
|
|
@@ -3106,7 +2569,6 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3106
2569
|
};
|
|
3107
2570
|
const resetSearch = () => {
|
|
3108
2571
|
dispatch({ type: 'RESET_SEARCH' });
|
|
3109
|
-
// Reset da ref para permitir nova busca vazia
|
|
3110
2572
|
lastSearchTermRef.current = '';
|
|
3111
2573
|
};
|
|
3112
2574
|
const validate = () => {
|
|
@@ -3155,12 +2617,9 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3155
2617
|
selectedValues[0]);
|
|
3156
2618
|
};
|
|
3157
2619
|
const getFilteredItems = (items, searchTerm) => {
|
|
3158
|
-
// Se busca via API estiver ativa, não filtra localmente
|
|
3159
|
-
// Assume que a API já retornou os dados filtrados
|
|
3160
2620
|
if (enableApiSearch) {
|
|
3161
2621
|
return items;
|
|
3162
2622
|
}
|
|
3163
|
-
// Busca local (comportamento original)
|
|
3164
2623
|
if (!searchTerm)
|
|
3165
2624
|
return items;
|
|
3166
2625
|
const lowercasedSearchTerm = searchTerm.toLowerCase();
|
|
@@ -3203,33 +2662,7 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3203
2662
|
};
|
|
3204
2663
|
}
|
|
3205
2664
|
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onChange, value, ...restProps }) => {
|
|
3209
|
-
const handleCheckboxChange = (e) => {
|
|
3210
|
-
e.stopPropagation();
|
|
3211
|
-
onChange(e.target.checked);
|
|
3212
|
-
};
|
|
3213
|
-
return (jsx("div", { className: clsx(styles$3.item, styles$3.checkboxItem, {
|
|
3214
|
-
[styles$3.disabled]: disabled,
|
|
3215
|
-
}), role: "option", "aria-selected": checked, "data-selected": checked, "data-testid": `checkbox-item-${value}`, ...restProps, children: jsx("div", { className: styles$3.checkboxContent, children: jsx(MemoizedCheckbox, { checked: checked, onChange: handleCheckboxChange, disabled: disabled, label: jsxs("div", { className: styles$3.textContent, children: [jsx("span", { className: styles$3.title, children: text }), subTitle && jsx("div", { className: styles$3.subTitle, children: subTitle })] }), onClick: (e) => e.stopPropagation() }) }) }));
|
|
3216
|
-
};
|
|
3217
|
-
CheckboxSelectItem.displayName = 'CheckboxSelectItem';
|
|
3218
|
-
|
|
3219
|
-
const SelectItem = React__default.forwardRef(({ text, subTitle, icon, disabled, value, variant, ...restProps }, ref) => {
|
|
3220
|
-
return (jsxs("div", { className: clsx(styles$3.itemWrapper, {
|
|
3221
|
-
[styles$3.disabled]: disabled,
|
|
3222
|
-
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$3.icon, children: icon })), jsxs(Select$1.Item, { className: clsx(styles$3.item, {
|
|
3223
|
-
[styles$3.disabled]: disabled,
|
|
3224
|
-
}), value: value, disabled: disabled, ...restProps, children: [jsx(Select$1.ItemText, { className: styles$3.title, children: text }), subTitle && jsx("div", { className: styles$3.subTitle, children: subTitle }), jsx(Select$1.ItemIndicator, { className: styles$3.itemIndicator })] })] }));
|
|
3225
|
-
});
|
|
3226
|
-
SelectItem.displayName = 'SelectItem';
|
|
3227
|
-
|
|
3228
|
-
const SelectRadix = ({ items, onValueChange, onOpenChange, variant, required = false, value, tooltip = false, tooltipMessage, label, helperText, placeholder = 'Selecione', maxWidth, search = false, errorMessage, disabled = false, className, 'aria-label': ariaLabel, 'data-testid': testId,
|
|
3229
|
-
// Props para scroll infinito
|
|
3230
|
-
enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false,
|
|
3231
|
-
// Props para busca em API
|
|
3232
|
-
enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
2665
|
+
const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, errorMessage, disabled = false, className, 'aria-label': ariaLabel, 'data-testid': testId, tooltip = false, tooltipText, side = 'bottom', align = 'start', enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false, enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
3233
2666
|
const componentId = useId();
|
|
3234
2667
|
const selectId = `select-${componentId}`;
|
|
3235
2668
|
const viewportRef = useRef(null);
|
|
@@ -3240,12 +2673,10 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3240
2673
|
search,
|
|
3241
2674
|
onValueChange,
|
|
3242
2675
|
onOpenChange,
|
|
3243
|
-
// API search props
|
|
3244
2676
|
enableApiSearch,
|
|
3245
2677
|
onApiSearch,
|
|
3246
2678
|
isSearching,
|
|
3247
2679
|
});
|
|
3248
|
-
// Infinite Scroll Logic
|
|
3249
2680
|
useEffect(() => {
|
|
3250
2681
|
const viewport = viewportRef.current;
|
|
3251
2682
|
if (!viewport || !enableInfiniteScroll)
|
|
@@ -3266,7 +2697,6 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3266
2697
|
viewport.removeEventListener('scroll', handleScroll);
|
|
3267
2698
|
};
|
|
3268
2699
|
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore]);
|
|
3269
|
-
// Reset a flag when the select opens
|
|
3270
2700
|
useEffect(() => {
|
|
3271
2701
|
if (state.isOpen && enableInfiniteScroll) {
|
|
3272
2702
|
hasReachedEndRef.current = false;
|
|
@@ -3274,21 +2704,27 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3274
2704
|
}, [state.isOpen, enableInfiniteScroll]);
|
|
3275
2705
|
const displayText = useMemo(() => utils.getDisplayText(state.selectedValues, placeholder, variant, items), [state.selectedValues, placeholder, variant, items, utils]);
|
|
3276
2706
|
const filteredItems = useMemo(() => {
|
|
3277
|
-
// Para busca via API, usa searchTerm (só atualiza quando Enter é pressionado)
|
|
3278
|
-
// Para busca local, usa searchInput (atualiza a cada tecla para filtro em tempo real)
|
|
3279
2707
|
const termToFilter = enableApiSearch ? state.searchTerm : state.searchInput;
|
|
3280
2708
|
return utils.getFilteredItems(items, termToFilter);
|
|
3281
2709
|
}, [items, state.searchTerm, state.searchInput, enableApiSearch, utils]);
|
|
3282
2710
|
const containerStyle = useMemo(() => ({
|
|
3283
|
-
maxWidth:
|
|
2711
|
+
maxWidth: maxWidth ? `${maxWidth}px` : undefined,
|
|
3284
2712
|
}), [maxWidth]);
|
|
3285
2713
|
const handleSearchChange = (e) => {
|
|
3286
2714
|
actions.setSearchInput(e.target.value);
|
|
3287
2715
|
};
|
|
3288
2716
|
const handleSearchKeyDown = (e) => {
|
|
3289
|
-
e.
|
|
2717
|
+
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
|
2718
|
+
const input = e.currentTarget;
|
|
2719
|
+
const hasSelection = input.selectionStart !== input.selectionEnd;
|
|
2720
|
+
if (!hasSelection) {
|
|
2721
|
+
e.preventDefault();
|
|
2722
|
+
return;
|
|
2723
|
+
}
|
|
2724
|
+
}
|
|
3290
2725
|
if (e.key === 'Enter') {
|
|
3291
2726
|
e.preventDefault();
|
|
2727
|
+
e.stopPropagation();
|
|
3292
2728
|
actions.setSearchTerm(state.searchInput);
|
|
3293
2729
|
}
|
|
3294
2730
|
if (e.key === 'Escape') {
|
|
@@ -3303,18 +2739,32 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3303
2739
|
onApiSearch('');
|
|
3304
2740
|
}
|
|
3305
2741
|
};
|
|
3306
|
-
return (jsx(Select$1.Root, { value: variant === 'checkbox' ? '' : (state.selectedValues[0] || ''), onValueChange: variant === 'checkbox' ? undefined : actions.handleSingleSelect, required: required, open: state.isOpen, onOpenChange: actions.setOpen, disabled: disabled, ...restProps, children: jsxs("div", { className: clsx(styles$
|
|
3307
|
-
[styles$
|
|
3308
|
-
[styles$
|
|
3309
|
-
[styles$
|
|
3310
|
-
[styles$
|
|
3311
|
-
}), id: selectId, "aria-label": ariaLabel, "data-testid": `${testId}-trigger`, children: [variant === 'checkbox' ? (jsx("span", { className: styles$
|
|
3312
|
-
[styles$
|
|
3313
|
-
}), children: helperText })), state.hasError && state.touched && (jsx("span", { className: styles$
|
|
2742
|
+
return (jsx(Select$1.Root, { value: variant === 'checkbox' ? '' : (state.selectedValues[0] || ''), onValueChange: variant === 'checkbox' ? undefined : actions.handleSingleSelect, required: required, open: state.isOpen, onOpenChange: actions.setOpen, disabled: disabled, ...restProps, children: jsxs("div", { className: clsx(styles$4.container, className), style: containerStyle, "data-testid": testId, children: [jsx("div", { className: styles$4.fieldContainer, children: jsxs("div", { className: styles$4.containerLabel, children: [jsx(LabelComponent, { htmlFor: selectId, required: required, tooltipText: tooltipText, tooltip: tooltip, side: side, align: align, error: state.hasError && state.touched, disabled: disabled, children: label }), jsxs(Select$1.Trigger, { className: clsx(styles$4.trigger, {
|
|
2743
|
+
[styles$4.error]: state.hasError && state.touched,
|
|
2744
|
+
[styles$4.disabled]: disabled,
|
|
2745
|
+
[styles$4.hasValue]: state.selectedValues.length > 0,
|
|
2746
|
+
[styles$4.open]: state.isOpen,
|
|
2747
|
+
}), id: selectId, "aria-label": ariaLabel, "data-testid": `${testId}-trigger`, children: [variant === 'checkbox' ? (jsx("span", { className: styles$4.triggerText, children: displayText })) : (jsx(Select$1.Value, { placeholder: placeholder, className: styles$4.placeholder, children: displayText })), state.isOpen ? jsx(ChevronUp16Regular, {}) : jsx(ChevronDown16Regular, {})] }), !state.isOpen && helperText && !state.hasError && (jsx("span", { className: clsx(styles$4.helper, {
|
|
2748
|
+
[styles$4.disabled]: disabled
|
|
2749
|
+
}), children: helperText })), state.hasError && state.touched && (jsx("span", { className: styles$4.errorMessage, children: errorMessage || 'Campo obrigatório' }))] }) }), jsx(Select$1.Portal, { children: jsxs(Select$1.Content, { className: styles$4.content, position: "popper", side: "bottom", sideOffset: 8, align: "start", avoidCollisions: true, children: [search && (jsx("div", { className: styles$4.searchWrapper, children: jsx(Search, { ref: refs.searchInputRef, className: styles$4.search, placeholder: "Buscar", value: state.searchInput, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: handleClear, "data-testid": `${testId}-search` }) })), jsx(Select$1.Viewport, { ref: viewportRef, className: styles$4.viewport, children: jsx(Select$1.Group, { className: styles$4.group, children: filteredItems.length === 0 ? (jsx("div", { className: styles$4.noResults, children: "Nenhum resultado encontrado" })) : (jsxs(Fragment, { children: [filteredItems.map((item) => {
|
|
2750
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
2751
|
+
if (hasChildren) {
|
|
2752
|
+
return (jsx(ExpandableSelectItem, { item: item, variant: variant, selectedValues: state.selectedValues, onSelect: (value) => {
|
|
2753
|
+
if (variant === 'checkbox') {
|
|
2754
|
+
const isSelected = state.selectedValues.includes(value);
|
|
2755
|
+
actions.handleMultipleSelect(value, !isSelected);
|
|
2756
|
+
}
|
|
2757
|
+
else {
|
|
2758
|
+
actions.handleSingleSelect(value);
|
|
2759
|
+
}
|
|
2760
|
+
} }, item.id || item.value));
|
|
2761
|
+
}
|
|
2762
|
+
return variant === 'checkbox' ? (jsx(CheckboxSelectItem, { ...item, checked: state.selectedValues.includes(item.value), onCheckedChange: (checked) => actions.handleMultipleSelect(item.value, checked) }, item.id || item.value)) : (jsx(SelectItem, { ...item, variant: variant }, item.id || item.value));
|
|
2763
|
+
}), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$4.loadingMore, children: "Carregando mais itens..." }))] })) }) })] }) })] }) }));
|
|
3314
2764
|
};
|
|
3315
|
-
|
|
2765
|
+
Select.displayName = 'Select';
|
|
3316
2766
|
|
|
3317
|
-
var styles$
|
|
2767
|
+
var styles$3 = {"zds-table__container":"Table-module__zds-table__container___9xeVY","zds-table-header":"Table-module__zds-table-header___uPRjd","zds-table__scroll-wrapper":"Table-module__zds-table__scroll-wrapper___xQZPq","zds-table":"Table-module__zds-table___bPvaS","zds-table__head":"Table-module__zds-table__head___FvQuS","zds-table__th":"Table-module__zds-table__th___R03sj","zds-table__th-content":"Table-module__zds-table__th-content___duR3c","zds-table__td":"Table-module__zds-table__td___aY-Nt","zds-table-header__filters-placeholder":"Table-module__zds-table-header__filters-placeholder___GhVwi","zds-table__body":"Table-module__zds-table__body___kuKXb","zds-table__empty":"Table-module__zds-table__empty___ZM4iu","zds-table__empty__content":"Table-module__zds-table__empty__content___8xl-u","zds-table__empty__title":"Table-module__zds-table__empty__title___7Y9Pj","zds-table__empty__caption":"Table-module__zds-table__empty__caption___toS00","zds-table__row":"Table-module__zds-table__row___8cEjq","zds-table__empty-cell":"Table-module__zds-table__empty-cell___Ldb6Z","zds-table-header__search":"Table-module__zds-table-header__search___yzLxw","zds-table__pagination":"Table-module__zds-table__pagination___FR5GH","zds-table-header__search-container":"Table-module__zds-table-header__search-container___-Fzz1","zds-table-header__filters":"Table-module__zds-table-header__filters___ViH07","zds-table-header__filter-label":"Table-module__zds-table-header__filter-label___c3BWI","zds-table-header__custom-filters":"Table-module__zds-table-header__custom-filters___oTuoM","zds-table-header__filters-content":"Table-module__zds-table-header__filters-content___nKlgL","zds-table-header__filters-wrapper":"Table-module__zds-table-header__filters-wrapper___BrZ9A","zds-table-header__filter-items":"Table-module__zds-table-header__filter-items___Tn8Yv","zds-table__pagination-select":"Table-module__zds-table__pagination-select___TZK-y","zds-table__pagination-info":"Table-module__zds-table__pagination-info___3k-B2","zds-table__pagination-controls":"Table-module__zds-table__pagination-controls___S-zs7","zds-table__pagination-button":"Table-module__zds-table__pagination-button___Wvq9W"};
|
|
3318
2768
|
|
|
3319
2769
|
/**
|
|
3320
2770
|
* @module constants
|
|
@@ -6752,10 +6202,10 @@ const Table = ({ columns = [], dataSource = [], className, loading = false, rowS
|
|
|
6752
6202
|
return columns;
|
|
6753
6203
|
const checkboxColumn = {
|
|
6754
6204
|
key: '__checkbox__',
|
|
6755
|
-
label: (jsx(
|
|
6205
|
+
label: (jsx(Checkbox, { checked: isAllSelected || isIndeterminate, indeterminate: isIndeterminate, onCheckedChange: toggleAll, disabled: rowSelection.disableSelectAll })),
|
|
6756
6206
|
render: (_, index) => {
|
|
6757
6207
|
const props = rowSelection.getCheckboxProps?.(dataSource[index], index) || {};
|
|
6758
|
-
return (jsx(
|
|
6208
|
+
return (jsx(Checkbox, { checked: selectedSet.has(index), onCheckedChange: () => toggleRow(index), disabled: props.disabled }));
|
|
6759
6209
|
},
|
|
6760
6210
|
align: 'center',
|
|
6761
6211
|
};
|
|
@@ -6763,13 +6213,13 @@ const Table = ({ columns = [], dataSource = [], className, loading = false, rowS
|
|
|
6763
6213
|
}, [columns, rowSelection, isAllSelected, isIndeterminate, toggleAll, selectedSet, toggleRow, dataSource]);
|
|
6764
6214
|
const tableId = useMemo(() => `table-${Math.random().toString(36).substr(2, 9)}`, []);
|
|
6765
6215
|
if (loading) {
|
|
6766
|
-
return (jsx("div", { className: clsx(styles$
|
|
6216
|
+
return (jsx("div", { className: clsx(styles$3['zds-table__container'], className), children: jsx("div", { className: styles$3['zds-table__loader'], children: jsx(LoaderList, {}) }) }));
|
|
6767
6217
|
}
|
|
6768
|
-
const emptyText = locale.emptyText || (jsxs("div", { className: styles$
|
|
6769
|
-
return (jsx("div", { className: clsx(styles$
|
|
6218
|
+
const emptyText = locale.emptyText || (jsxs("div", { className: styles$3['zds-table__empty'], children: [jsx("div", { className: styles$3['zds-table__empty__content'], children: jsx(EmptyRows150Color, {}) }), jsxs("div", { className: styles$3['zds-table__empty__text'], children: [jsx("h3", { className: styles$3['zds-table__empty__title'], children: "Nenhum dado encontrado" }), jsx("p", { className: styles$3['zds-table__empty__caption'], children: "Nenhum registro encontrado" })] })] }));
|
|
6219
|
+
return (jsx("div", { className: clsx(styles$3['zds-table__container'], className), children: jsx("div", { className: styles$3['zds-table__scroll-wrapper'], children: jsxs("table", { className: styles$3['zds-table'], role: "table", "aria-label": "Tabela de dados", "aria-describedby": loading ? `${tableId}-loading` : undefined, "aria-rowcount": dataSource.length + 1, children: [jsx("thead", { className: styles$3['zds-table__head'], children: jsx("tr", { children: finalColumns.map((column) => (jsx("th", { className: clsx(styles$3['zds-table__th'], column.align && `text-${column.align}`), style: column.style, children: jsx("div", { className: styles$3['zds-table__th-content'], children: column.label }) }, column.key))) }) }), jsx("tbody", { className: styles$3['zds-table__body'], children: dataSource.length > 0 ? (dataSource.map((row, index) => {
|
|
6770
6220
|
const rowProps = onRow?.(row, index) || {};
|
|
6771
|
-
return (jsx("tr", { className: clsx(styles$
|
|
6772
|
-
})) : (jsx("tr", { children: jsx("td", { colSpan: finalColumns.length, className: styles$
|
|
6221
|
+
return (jsx("tr", { className: clsx(styles$3['zds-table__row'], rowProps.className), onClick: rowProps.onClick, onDoubleClick: rowProps.onDoubleClick, children: finalColumns.map((column) => (jsx("td", { className: clsx(styles$3['zds-table__td'], column.align && `text-${column.align}`), children: renderCell(column, row, index) }, column.key))) }, index));
|
|
6222
|
+
})) : (jsx("tr", { children: jsx("td", { colSpan: finalColumns.length, className: styles$3['zds-table__empty-cell'], children: emptyText }) })) })] }) }) }));
|
|
6773
6223
|
};
|
|
6774
6224
|
|
|
6775
6225
|
const isCalendarFilter = (filter) => {
|
|
@@ -6780,7 +6230,7 @@ const isCheckboxFilter = (filter) => {
|
|
|
6780
6230
|
};
|
|
6781
6231
|
const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceholder = 'Pesquisar...', showSearch = true, showFilters = false, filters, filterItems = [], className = '', }) => {
|
|
6782
6232
|
const [internalSearchValue, setInternalSearchValue] = useState(searchValue);
|
|
6783
|
-
|
|
6233
|
+
React.useEffect(() => {
|
|
6784
6234
|
setInternalSearchValue(searchValue);
|
|
6785
6235
|
}, [searchValue]);
|
|
6786
6236
|
const handleInputChange = (e) => {
|
|
@@ -6802,7 +6252,7 @@ const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceho
|
|
|
6802
6252
|
}
|
|
6803
6253
|
};
|
|
6804
6254
|
const hasFilters = filters || (filterItems && filterItems.length > 0);
|
|
6805
|
-
return (jsxs("div", { className: `${styles$
|
|
6255
|
+
return (jsxs("div", { className: `${styles$3['zds-table-header']} ${className}`.trim(), children: [showSearch && (onSearchChange || onSearch) && (jsx("div", { className: styles$3['zds-table-header__search-container'], children: jsx(Search, { value: internalSearchValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: styles$3['zds-table-header__search'] }) })), showFilters && (jsx("div", { className: styles$3['zds-table-header__filters'], children: hasFilters ? (jsxs("div", { className: styles$3['zds-table-header__filters-content'], children: [filters && (jsx("div", { className: styles$3['zds-table-header__custom-filters'], children: filters })), jsxs("div", { className: styles$3['zds-table-header__filters-wrapper'], children: [jsx("span", { className: styles$3['zds-table-header__filter-label'], children: "Filtros" }), jsx("div", { className: styles$3['zds-table-header__filter-items'], children: filterItems && filterItems.map((filterItem, index) => {
|
|
6806
6256
|
const commonProps = {
|
|
6807
6257
|
key: filterItem.id || index,
|
|
6808
6258
|
buttonText: filterItem.buttonText,
|
|
@@ -6821,7 +6271,7 @@ const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceho
|
|
|
6821
6271
|
}
|
|
6822
6272
|
console.warn('TableHeader: Tipo de filtro não reconhecido:', filterItem);
|
|
6823
6273
|
return null;
|
|
6824
|
-
}) })] })] })) : (jsx("div", { className: styles$
|
|
6274
|
+
}) })] })] })) : (jsx("div", { className: styles$3['zds-table-header__filters-placeholder'], children: jsx("span", { children: "Nenhum filtro dispon\u00EDvel" }) })) }))] }));
|
|
6825
6275
|
};
|
|
6826
6276
|
|
|
6827
6277
|
const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange, onItemsPerPageChange, pageSizeOptions = [10, 25, 50, 100], disabled = false, className = '', }) => {
|
|
@@ -6847,12 +6297,12 @@ const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange,
|
|
|
6847
6297
|
const newItemsPerPage = Number(event.target.value);
|
|
6848
6298
|
onItemsPerPageChange(newItemsPerPage);
|
|
6849
6299
|
};
|
|
6850
|
-
return (jsxs("div", { className: `${styles$
|
|
6300
|
+
return (jsxs("div", { className: `${styles$3['zds-table__pagination']} ${className}`.trim(), children: [jsxs("div", { className: styles$3['zds-table__pagination-select'], children: [jsx("label", { htmlFor: "items-per-page", className: styles$3['zds-table__pagination-label'], children: "Itens por p\u00E1gina" }), jsx("select", { id: "items-per-page", value: itemsPerPage, onChange: handleItemsPerPageChange, disabled: disabled, className: styles$3['zds-table__pagination-select-input'], children: pageSizeOptions.map((option) => (jsx("option", { value: option, children: option }, option))) })] }), jsx("div", { className: styles$3['zds-table__pagination-info'], children: jsx("span", { children: totalItems > 0
|
|
6851
6301
|
? `${startItem}–${endItem} de ${totalItems}`
|
|
6852
|
-
: '0 itens' }) }), jsxs("div", { className: styles$
|
|
6302
|
+
: '0 itens' }) }), jsxs("div", { className: styles$3['zds-table__pagination-controls'], children: [jsx("button", { className: styles$3['zds-table__pagination-button'], onClick: handlePrevious, disabled: !canGoPrev, "aria-label": "P\u00E1gina anterior", children: jsx(ChevronLeft16Regular, {}) }), jsx("button", { className: styles$3['zds-table__pagination-button'], onClick: handleNext, disabled: !canGoNext, "aria-label": "Pr\u00F3xima p\u00E1gina", children: jsx(ChevronRight16Regular, {}) })] })] }));
|
|
6853
6303
|
};
|
|
6854
6304
|
|
|
6855
|
-
var styles$
|
|
6305
|
+
var styles$2 = {"zds-toast__container":"Toast-module__zds-toast__container___IE2Z4","zds-toast__item":"Toast-module__zds-toast__item___ysYjL","zds-toast__message":"Toast-module__zds-toast__message___BMJL7","zds-toast__icon":"Toast-module__zds-toast__icon___JCwTV","zds-toast__close":"Toast-module__zds-toast__close___nfxSB","zds-toast__active":"Toast-module__zds-toast__active___IraTZ","zds-toast__success":"Toast-module__zds-toast__success___8z2qq","zds-toast__alert":"Toast-module__zds-toast__alert___TM-W8","zds-toast__info":"Toast-module__zds-toast__info___T3dcI"};
|
|
6856
6306
|
|
|
6857
6307
|
const sanitizeMessage = (message) => {
|
|
6858
6308
|
if (typeof message !== 'string')
|
|
@@ -6874,15 +6324,15 @@ const ToastContext = createContext(undefined);
|
|
|
6874
6324
|
const toastVariants = {
|
|
6875
6325
|
success: {
|
|
6876
6326
|
icon: jsx(CheckmarkCircle20Filled, {}),
|
|
6877
|
-
className: styles$
|
|
6327
|
+
className: styles$2['zds-toast__success'],
|
|
6878
6328
|
},
|
|
6879
6329
|
alert: {
|
|
6880
6330
|
icon: jsx(Warning20Filled, {}),
|
|
6881
|
-
className: styles$
|
|
6331
|
+
className: styles$2['zds-toast__alert'],
|
|
6882
6332
|
},
|
|
6883
6333
|
info: {
|
|
6884
6334
|
icon: jsx(Info20Filled, {}),
|
|
6885
|
-
className: styles$
|
|
6335
|
+
className: styles$2['zds-toast__info'],
|
|
6886
6336
|
},
|
|
6887
6337
|
};
|
|
6888
6338
|
const ToastItem = ({ toast, onClose, isVisible }) => {
|
|
@@ -6892,12 +6342,12 @@ const ToastItem = ({ toast, onClose, isVisible }) => {
|
|
|
6892
6342
|
onClose(toast.id);
|
|
6893
6343
|
}
|
|
6894
6344
|
};
|
|
6895
|
-
return (jsxs("div", { className: clsx(styles$
|
|
6345
|
+
return (jsxs("div", { className: clsx(styles$2['zds-toast__item'], variant.className, isVisible && styles$2['zds-toast__active']), role: toast.type === 'alert' ? 'alert' : 'status', "aria-live": toast.type === 'alert' ? 'assertive' : 'polite', "aria-atomic": "true", tabIndex: toast.persistent ? 0 : -1, onKeyDown: handleKeyDown, children: [jsx("span", { className: styles$2['zds-toast__icon'], "aria-hidden": "true", children: variant.icon }), jsx("span", { className: styles$2['zds-toast__message'], dangerouslySetInnerHTML: { __html: sanitizeMessage(toast.message) } }), jsx("button", { type: "button", className: styles$2['zds-toast__close'], "aria-label": `Fechar notificação: ${toast.message.slice(0, 50)}${toast.message.length > 50 ? '...' : ''}`, onClick: () => onClose(toast.id), children: jsx(Dismiss16Regular, { "aria-hidden": "true" }) })] }));
|
|
6896
6346
|
};
|
|
6897
6347
|
const ToastContainer = ({ toasts, onClose, visibleToasts }) => {
|
|
6898
6348
|
if (toasts.length === 0)
|
|
6899
6349
|
return null;
|
|
6900
|
-
return (jsx("div", { className: styles$
|
|
6350
|
+
return (jsx("div", { className: styles$2['zds-toast__container'], role: "log", "aria-label": "Notifica\u00E7\u00F5es do sistema", children: toasts.map(toast => (jsx(ToastItem, { toast: toast, onClose: onClose, isVisible: visibleToasts.has(toast.id) }, toast.id))) }));
|
|
6901
6351
|
};
|
|
6902
6352
|
const ToastProvider = ({ children, maxToasts = MAX_TOASTS }) => {
|
|
6903
6353
|
const [toasts, setToasts] = useState([]);
|
|
@@ -6985,6 +6435,10 @@ const useToast = () => {
|
|
|
6985
6435
|
return context;
|
|
6986
6436
|
};
|
|
6987
6437
|
|
|
6438
|
+
var styles$1 = {"container":"Switch-module__container___BR1OB","switchRoot":"Switch-module__switchRoot___jz2HD","switchThumb":"Switch-module__switchThumb___X3RL7"};
|
|
6439
|
+
|
|
6440
|
+
const Switch = ({ disabled = false, defaultChecked = false, checked, onCheckedChange, name, value }) => (jsx("div", { className: clsx(styles$1.container), children: jsx(Switch$1.Root, { className: styles$1.switchRoot, disabled: disabled, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, name: name, value: value, children: jsx(Switch$1.Thumb, { className: styles$1.switchThumb }) }) }));
|
|
6441
|
+
|
|
6988
6442
|
var styles = {"zds-verification-code__container":"VerificationCode-module__zds-verification-code__container___tUNuJ","zds-verification-code__input":"VerificationCode-module__zds-verification-code__input___wDIQ6","zds-verification-code__filled":"VerificationCode-module__zds-verification-code__filled___-2VVb","zds-verification-code__has-error":"VerificationCode-module__zds-verification-code__has-error___eqKAp","zds-verification-code__error":"VerificationCode-module__zds-verification-code__error___T53i5"};
|
|
6989
6443
|
|
|
6990
6444
|
/**
|
|
@@ -7300,5 +6754,5 @@ function useApiSimulation(config = {}) {
|
|
|
7300
6754
|
};
|
|
7301
6755
|
}
|
|
7302
6756
|
|
|
7303
|
-
export { Avatar, Badge, Button, MemoizedCalendar as Calendar, Callout,
|
|
6757
|
+
export { Avatar, Badge, Button, MemoizedCalendar as Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, MemoizedDialog as Dialog, Drawer, MemoizedDropdown as Dropdown, Filter, ListItem, Menu, memorizedQuantity as Quantity, Radio, Search, Select, Switch, Table, TableHeader, TablePagination, TextField$1 as TextField, ToastProvider as Toast, ToastProvider, Tooltip, VerificationCode, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
7304
6758
|
//# sourceMappingURL=index.esm.js.map
|