@giro-ds/react 1.0.4 → 2.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/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/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/SelectRadix/SelectRadix.types.d.ts +5 -3
- package/dist/components/Switch/Switch.d.ts +4 -0
- package/dist/components/Switch/Switch.types.d.ts +8 -0
- package/dist/components/Switch/__tests__/Switch.test.d.ts +1 -0
- package/dist/components/Switch/index.d.ts +2 -0
- package/dist/components/TextField/TextField.d.ts +2 -2
- package/dist/components/TextField/TextField.types.d.ts +23 -14
- package/dist/components/TextField/__tests__/Textfield.test.d.ts +1 -0
- package/dist/components/TextField/utils/__tests__/validation.test.d.ts +1 -0
- package/dist/components/TextField/utils/index.d.ts +2 -0
- package/dist/components/TextField/utils/validation.d.ts +8 -0
- 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 +3 -5
- package/dist/index.cjs +202 -327
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +42 -72
- package/dist/index.esm.js +215 -321
- package/dist/index.esm.js.map +1 -1
- package/dist/shared/Label/index.d.ts +4 -2
- package/dist/styles.css +1 -1
- package/package.json +15 -13
- package/dist/components/CheckboxRadix/CheckboxRadix.d.ts +0 -4
- package/dist/components/CheckboxRadix/CheckboxRadix.types.d.ts +0 -10
- package/dist/components/CheckboxRadix/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/TextField/ValidationUtils.d.ts +0 -8
package/dist/index.esm.js
CHANGED
|
@@ -1,24 +1,23 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
-
import React__default, { useId, useMemo, useRef, useState, useEffect, useCallback, memo, forwardRef, useReducer, createElement, isValidElement, createContext, useContext } from 'react';
|
|
2
|
+
import React, { useId, useMemo, useRef, useState, useEffect, useCallback, forwardRef, memo, useReducer, createElement, isValidElement, createContext, useContext } from 'react';
|
|
4
3
|
import clsx, { clsx as clsx$1 } from 'clsx';
|
|
5
4
|
import { 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$s = {"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$s['zds-avatar__circle'], {
|
|
14
|
+
[styles$s['zds-avatar__large']]: size === 'large',
|
|
15
|
+
[styles$s['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$s['zds-avatar__circle__icon'], children: icon }) }));
|
|
19
18
|
};
|
|
20
19
|
|
|
21
|
-
var styles$
|
|
20
|
+
var styles$r = {"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,19 +40,19 @@ 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$r['zds-badge__container']), children: [jsx("div", { id: componentId, className: clsx(styles$r['zds-badge'], {
|
|
44
|
+
[styles$r['zds-badge__small']]: Number(badgeValue) <= 10,
|
|
45
|
+
[styles$r['zds-badge__large']]: Number(badgeValue) > 10,
|
|
46
|
+
}, className), "data-testid": "badge-notification", children: !isEmpty && (jsx("span", { className: styles$r['zds-badge__value'], "aria-hidden": ariaLabel ? 'true' : 'false', children: displayValue })) }), children && (jsx("div", { className: styles$r['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$r['zds-badge__container']), children: jsx("div", { className: clsx(styles$r['zds-badge__status'], {
|
|
49
|
+
[styles$r['zds-badge__status__empty']]: isEmpty,
|
|
50
|
+
}, className), "data-testid": "badge-status", children: !isEmpty && (jsx("span", { className: styles$r['zds-badge__status-value'], "aria-hidden": ariaLabel ? 'true' : 'false', children: displayValue })) }) }));
|
|
52
51
|
};
|
|
53
52
|
|
|
54
|
-
var styles$
|
|
53
|
+
var styles$q = {"zds-button":"Button-module__zds-button___yeGfH","zds-button__lg":"Button-module__zds-button__lg___3VQCU","zds-button__sm":"Button-module__zds-button__sm___YoOxy","zds-button__filled":"Button-module__zds-button__filled___8J2j-","zds-button__outlined":"Button-module__zds-button__outlined___fvHfI","zds-button__text":"Button-module__zds-button__text___WR6Oo","zds-button__with-icon":"Button-module__zds-button__with-icon___a2CVV","zds-button__icon-position-left":"Button-module__zds-button__icon-position-left___0Oid0","zds-button__icon-position-right":"Button-module__zds-button__icon-position-right___-rTaE","zds-button__no-content":"Button-module__zds-button__no-content___SpTQ-","zds-button__icon-only":"Button-module__zds-button__icon-only___jv5KY","zds-button__icon-left":"Button-module__zds-button__icon-left___fzDuF","zds-button__icon-right":"Button-module__zds-button__icon-right___IUOQu","zds-button__full-width":"Button-module__zds-button__full-width___GklRb","disabled":"Button-module__disabled___UzdWL"};
|
|
55
54
|
|
|
56
|
-
const Button =
|
|
55
|
+
const Button = React.forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel, routerProps = {}, disabled = false, onClick, size = 'lg', className = '', type = 'button', id = '', icon = null, fullWidth = false, ariaLabel = '', iconOnly = false, ...restProps }, ref) => {
|
|
57
56
|
const componentId = id || useId();
|
|
58
57
|
const getComponent = () => {
|
|
59
58
|
if (as)
|
|
@@ -66,15 +65,15 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
66
65
|
};
|
|
67
66
|
const Component = getComponent();
|
|
68
67
|
const hasContent = useMemo(() => {
|
|
69
|
-
return children &&
|
|
68
|
+
return children && React.Children.count(children) > 0;
|
|
70
69
|
}, [children]);
|
|
71
|
-
const buttonClasses = clsx(styles$
|
|
72
|
-
[styles$
|
|
73
|
-
[styles$
|
|
74
|
-
[styles$
|
|
75
|
-
[styles$
|
|
76
|
-
[styles$
|
|
77
|
-
[styles$
|
|
70
|
+
const buttonClasses = clsx(styles$q['zds-button'], styles$q[`zds-button__${variant}`], styles$q[`zds-button__${size}`], {
|
|
71
|
+
[styles$q['zds-button__with-icon']]: icon && !iconOnly,
|
|
72
|
+
[styles$q[`zds-button__icon-position-${iconPosition}`]]: icon && !iconOnly && iconPosition !== 'none',
|
|
73
|
+
[styles$q['zds-button__no-content']]: icon && !hasContent && !iconOnly,
|
|
74
|
+
[styles$q['zds-button__full-width']]: fullWidth,
|
|
75
|
+
[styles$q['zds-button__icon-only']]: iconOnly,
|
|
76
|
+
[styles$q['zds-button__disabled']]: disabled,
|
|
78
77
|
}, className);
|
|
79
78
|
const getAriaLabel = () => {
|
|
80
79
|
if (ariaLabel)
|
|
@@ -98,9 +97,9 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
98
97
|
};
|
|
99
98
|
const renderContent = () => {
|
|
100
99
|
if (iconOnly && icon) {
|
|
101
|
-
return (jsx("span", { className: styles$
|
|
100
|
+
return (jsx("span", { className: styles$q['zds-button__icon-only'], "aria-hidden": "true", children: icon }));
|
|
102
101
|
}
|
|
103
|
-
return (jsxs(Fragment, { children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$
|
|
102
|
+
return (jsxs(Fragment, { children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$q['zds-button__icon-left'], "aria-hidden": "true", children: icon })), children, icon && iconPosition === 'right' && (jsx("span", { className: styles$q['zds-button__icon-right'], "aria-hidden": "true", children: icon }))] }));
|
|
104
103
|
};
|
|
105
104
|
const baseProps = {
|
|
106
105
|
ref,
|
|
@@ -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$p = {"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$p['zds-calendar__year'], {
|
|
506
|
+
[styles$p['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$p['zds-calendar__day'], styles$p['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$p['zds-calendar__day'], {
|
|
531
|
+
[styles$p['zds-calendar__day--today']]: dayItem.isToday,
|
|
532
|
+
[styles$p['zds-calendar__day--selected']]: dayItem.isSelected,
|
|
533
|
+
[styles$p['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$p['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$p['zds-calendar'], { [styles$p['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$p['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$p['zds-calendar__header'], children: [jsxs("span", { className: styles$p['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$p['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$p['zds-calendar__weekdays'], children: weekdaysComponent }), jsx("div", { className: styles$p['zds-calendar__grid'], children: changeView ? (jsx("div", { className: styles$p['zds-calendar__year-view'], role: "grid", "aria-label": t('yearSelection'), children: renderYears() })) : (jsx("div", { className: styles$p['zds-calendar__days'], role: "grid", "aria-label": `${getMonthName()} ${year}`, children: renderDays() })) }), jsx("div", { className: styles$p['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$o = {"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$o['zds-callout__container'], styles$o[`zds-callout__${type}`], {
|
|
607
|
+
[styles$o['zds-callout__container__with-title']]: title,
|
|
608
|
+
[styles$o['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$o['zds-callout__content'], children: [icon && jsx("span", { className: styles$o['zds-callout__icon'], children: icon }), jsxs("div", { className: styles$o['zds-callout__subcontent'], children: [title && (jsx("span", { id: titleId, className: styles$o['zds-callout__title'], children: title })), text && jsx("span", { className: styles$o['zds-callout__text'], children: text })] })] }) }));
|
|
612
611
|
};
|
|
613
612
|
|
|
614
|
-
var styles$
|
|
613
|
+
var styles$n = {"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,57 +620,11 @@ 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
|
-
const checkboxRef = React.useRef(null);
|
|
659
|
-
const handleWrapperClick = (e) => {
|
|
660
|
-
if (e.target !== checkboxRef.current && !disabled) {
|
|
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
625
|
return (jsxs("div", { className: clsx(styles$n.container, className), children: [jsx("div", { className: clsx(styles$n.wrapperCheckbox, {
|
|
673
626
|
[styles$n.disabled]: disabled,
|
|
674
|
-
}),
|
|
627
|
+
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsx(Checkbox$1.Root, { 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, children: label })] }));
|
|
675
628
|
};
|
|
676
629
|
|
|
677
630
|
var styles$m = {"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"};
|
|
@@ -691,7 +644,7 @@ const Chips = ({ title, leftIcon = null, rightIcon = null, type = 'neutral', dis
|
|
|
691
644
|
}, className);
|
|
692
645
|
return (jsxs("div", { className: chipsClass, "aria-label": `Chip: ${title}`, "aria-disabled": disabled, children: [leftIcon && (jsx("span", { className: styles$m['zds-chips__icon__left'], "aria-hidden": "true", children: leftIcon })), jsx("span", { className: styles$m['zds-chips__title'], children: title }), rightIcon && (jsx("span", { className: styles$m['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
650
|
var styles$l = {"container":"Container-module__container___exPuE"};
|
|
@@ -700,121 +653,83 @@ function Container({ children }) {
|
|
|
700
653
|
return (jsx("main", { className: `${styles$l['container']} mx-auto`, children: children }));
|
|
701
654
|
}
|
|
702
655
|
|
|
703
|
-
var styles$k = {"
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
const tooltipId = id || useId();
|
|
710
|
-
const handleMouseEnter = () => {
|
|
711
|
-
if (timeoutRef.current)
|
|
712
|
-
clearTimeout(timeoutRef.current);
|
|
713
|
-
setVisible(true);
|
|
714
|
-
};
|
|
715
|
-
const handleMouseLeave = () => {
|
|
716
|
-
timeoutRef.current = setTimeout(() => {
|
|
717
|
-
setVisible(false);
|
|
718
|
-
}, 800);
|
|
719
|
-
};
|
|
720
|
-
const handleKeyDown = (e) => {
|
|
721
|
-
switch (e.key) {
|
|
722
|
-
case 'Escape':
|
|
723
|
-
setVisible(false);
|
|
724
|
-
break;
|
|
725
|
-
case 'Enter':
|
|
726
|
-
case ' ':
|
|
727
|
-
e.preventDefault();
|
|
728
|
-
setVisible(!visible);
|
|
729
|
-
break;
|
|
730
|
-
}
|
|
731
|
-
};
|
|
732
|
-
useEffect(() => {
|
|
733
|
-
return () => {
|
|
734
|
-
if (timeoutRef.current) {
|
|
735
|
-
clearTimeout(timeoutRef.current);
|
|
736
|
-
}
|
|
737
|
-
};
|
|
738
|
-
}, []);
|
|
739
|
-
const tooltipClass = clsx(styles$k['zds-tooltip__content'], styles$k[`zds-tooltip__${position}`]);
|
|
740
|
-
return (jsxs("div", { className: clsx(styles$k['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 }))] }));
|
|
656
|
+
var styles$k = {"wrapperLabel":"index-module__wrapperLabel___XJzZO","requiredLabel":"index-module__requiredLabel___7oZkh","infoIcon":"index-module__infoIcon___lClx4","errorLabel":"index-module__errorLabel___qa6h6","disabledLabel":"index-module__disabledLabel___U9vL8"};
|
|
657
|
+
|
|
658
|
+
var styles$j = {"tooltipContent":"Tooltip-module__tooltipContent___xycUg","triggerWrapper":"Tooltip-module__triggerWrapper___x83XR"};
|
|
659
|
+
|
|
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$j.triggerWrapper, children: children }) }), jsx(Tooltip$1.Portal, { children: jsx(Tooltip$1.Content, { className: styles$j.tooltipContent, side: side, align: align, sideOffset: sideOffset, style: { maxWidth: maxWidth ? `${maxWidth}px` : 'auto' }, children: text }) })] }) }));
|
|
741
662
|
};
|
|
742
663
|
|
|
743
|
-
|
|
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$k.wrapperLabel, error && styles$k.errorLabel, className), htmlFor: htmlFor, children: [children, required && jsx("span", { className: styles$k.requiredLabel, children: "*" }), jsx(Info12Regular, { className: styles$k.infoIcon })] }) })) : (jsxs(Label.Root, { className: clsx(styles$k.wrapperLabel, error && styles$k.errorLabel, disabled && styles$k.disabledLabel, className), htmlFor: htmlFor, children: [children, required && jsx("span", { className: styles$k.requiredLabel, children: "*" })] })) }));
|
|
665
|
+
|
|
666
|
+
var styles$i = {"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"};
|
|
744
667
|
|
|
745
|
-
const validateInput = ({ value, maxLength,
|
|
746
|
-
if (required &&
|
|
668
|
+
const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
669
|
+
if (required && value.trim() === '') {
|
|
747
670
|
return errorMessage || 'Campo obrigatório.';
|
|
748
671
|
}
|
|
749
|
-
if (
|
|
672
|
+
if (maxLength && value.length > maxLength) {
|
|
750
673
|
return errorMessage || `Campo deve ter no máximo ${maxLength} caracteres.`;
|
|
751
674
|
}
|
|
752
675
|
return '';
|
|
753
676
|
};
|
|
754
677
|
|
|
755
|
-
const TextField = ({
|
|
756
|
-
const [inputValue,
|
|
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) => {
|
|
679
|
+
const [inputValue, setInputValue] = useState(value);
|
|
757
680
|
const [inputError, setInputError] = useState('');
|
|
758
|
-
const [
|
|
759
|
-
const
|
|
681
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
682
|
+
const generatedId = useId();
|
|
683
|
+
const componentId = id || generatedId;
|
|
760
684
|
const handleChange = useCallback((e) => {
|
|
761
685
|
const newValue = e.target.value;
|
|
762
686
|
if (!disabled && (!maxLength || newValue.length <= maxLength)) {
|
|
763
|
-
|
|
687
|
+
setInputValue(newValue);
|
|
764
688
|
onChange?.(newValue);
|
|
765
689
|
}
|
|
766
690
|
}, [disabled, maxLength, onChange]);
|
|
767
|
-
const
|
|
691
|
+
const handleClear = useCallback(() => {
|
|
768
692
|
if (!disabled) {
|
|
769
|
-
|
|
693
|
+
setInputValue('');
|
|
770
694
|
onChange?.('');
|
|
771
695
|
}
|
|
772
696
|
}, [disabled, onChange]);
|
|
773
|
-
const
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
// Sincroniza errorMessage externo com estado interno
|
|
793
|
-
useEffect(() => {
|
|
794
|
-
if (errorMessage) {
|
|
795
|
-
setInputError(errorMessage);
|
|
796
|
-
}
|
|
797
|
-
else if (!errorMessage && inputError && !required) {
|
|
798
|
-
setInputError('');
|
|
799
|
-
}
|
|
800
|
-
}, [errorMessage]);
|
|
801
|
-
const TextFieldClass = clsx(styles$j['zds-textfield__container'], {
|
|
802
|
-
[styles$j['zds-textfield__error']]: inputError,
|
|
803
|
-
[styles$j['zds-textfield__disabled']]: disabled,
|
|
804
|
-
[className]: className,
|
|
805
|
-
});
|
|
806
|
-
const shouldRenderCustomIcon = typeof inputValue === 'string' && inputValue.trim().length === 0;
|
|
807
|
-
const shouldRenderClearIcon = focus && typeof inputValue === 'string' && inputValue.trim().length > 0;
|
|
808
|
-
const helperContent = inputError || (helper && helperText) || '\u00A0';
|
|
697
|
+
const handleBlur = useCallback((e) => {
|
|
698
|
+
const error = validateInput({
|
|
699
|
+
value: inputValue,
|
|
700
|
+
maxLength,
|
|
701
|
+
errorMessage,
|
|
702
|
+
required,
|
|
703
|
+
});
|
|
704
|
+
setInputError(error);
|
|
705
|
+
setIsFocused(false);
|
|
706
|
+
onBlur?.(e);
|
|
707
|
+
}, [inputValue, type, maxLength, errorMessage, required, onBlur]);
|
|
708
|
+
const handleFocus = useCallback((e) => {
|
|
709
|
+
setIsFocused(true);
|
|
710
|
+
onFocus?.(e);
|
|
711
|
+
}, [onFocus]);
|
|
712
|
+
const showCustomIcon = inputValue.trim().length === 0 && icon;
|
|
713
|
+
const showClearIcon = isFocused && inputValue.trim().length > 0;
|
|
714
|
+
const hasError = Boolean(inputError);
|
|
715
|
+
const displayHelperText = inputError || helperText || '\u00A0';
|
|
809
716
|
const helperId = inputError
|
|
810
717
|
? `${componentId}-error`
|
|
811
|
-
:
|
|
718
|
+
: helperText
|
|
812
719
|
? `${componentId}-helper`
|
|
813
720
|
: undefined;
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
721
|
+
const containerClass = clsx(styles$i.container, {
|
|
722
|
+
[styles$i.error]: hasError,
|
|
723
|
+
[styles$i.disabled]: disabled,
|
|
724
|
+
[className]: className,
|
|
725
|
+
});
|
|
726
|
+
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$i.inputWrapper, children: [jsxs("div", { className: styles$i.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$i.icon, children: icon }), showClearIcon && (jsx("button", { type: "button", className: styles$i.clearButton, onMouseDown: (e) => {
|
|
727
|
+
e.preventDefault();
|
|
728
|
+
handleClear();
|
|
729
|
+
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx(Dismiss16Regular, {}) }))] }), jsx("span", { id: helperId, className: styles$i.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText })] })] }));
|
|
730
|
+
});
|
|
731
|
+
TextField.displayName = 'TextField';
|
|
732
|
+
var TextField$1 = React.memo(TextField);
|
|
818
733
|
|
|
819
734
|
/**
|
|
820
735
|
* Formata uma data para string conforme o locale.
|
|
@@ -909,7 +824,7 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
909
824
|
return date;
|
|
910
825
|
}
|
|
911
826
|
|
|
912
|
-
var styles$
|
|
827
|
+
var styles$h = {"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"};
|
|
913
828
|
|
|
914
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, }) => {
|
|
915
830
|
// ✅ IDs únicos para acessibilidade
|
|
@@ -1091,13 +1006,13 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText =
|
|
|
1091
1006
|
setTempInputValue(formatDate(currentSelectedDate, locale));
|
|
1092
1007
|
}
|
|
1093
1008
|
}, [locale, currentSelectedDate, isEditing]);
|
|
1094
|
-
return (jsx("div", { ref: wrapperRef, children: jsxs("div", { className: clsx(styles$
|
|
1009
|
+
return (jsx("div", { ref: wrapperRef, children: jsxs("div", { className: clsx(styles$h['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) => {
|
|
1095
1010
|
handleTextFieldChange(String(e));
|
|
1096
|
-
}, "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$h['zds-date-picker__calendar-popup'], calendarPosition === 'left' && styles$h['zds-calendar--left'], calendarPosition === 'right' && styles$h['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' })) })] }) }));
|
|
1097
1012
|
};
|
|
1098
|
-
var DatePicker_default =
|
|
1013
|
+
var DatePicker_default = React.memo(DatePicker);
|
|
1099
1014
|
|
|
1100
|
-
var styles$
|
|
1015
|
+
var styles$g = {"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"};
|
|
1101
1016
|
|
|
1102
1017
|
const useFocusTrap = (isActive) => {
|
|
1103
1018
|
const containerRef = useRef(null);
|
|
@@ -1180,13 +1095,13 @@ const Dialog = ({ show, title, text, textConfirm = 'OK', textCancel = 'Cancelar'
|
|
|
1180
1095
|
}, [show, handleCancel]);
|
|
1181
1096
|
if (!show)
|
|
1182
1097
|
return null;
|
|
1183
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1098
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$g['zds-dialog__overlay'] }), jsx("div", { className: styles$g['zds-dialog__wrapper'], children: jsxs("div", { className: clsx(styles$g['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$g['zds-dialog__title'], children: title }), jsx("div", { id: `zds-dialog-desc-${id}`, className: styles$g['zds-dialog__text'], children: text }), jsxs("div", { className: styles$g['zds-dialog__actions'], children: [!!(textCancel && textCancel.trim()) && (jsx(Button, { variant: "outlined", onClick: handleCancel, children: textCancel })), jsx(Button, { variant: "filled", onClick: handleConfirm, children: textConfirm })] })] }) })] }));
|
|
1184
1099
|
};
|
|
1185
1100
|
// Memoização para otimização de performance
|
|
1186
|
-
const MemoizedDialog =
|
|
1101
|
+
const MemoizedDialog = React.memo(Dialog);
|
|
1187
1102
|
MemoizedDialog.displayName = 'Dialog';
|
|
1188
1103
|
|
|
1189
|
-
var styles$
|
|
1104
|
+
var styles$f = {"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"};
|
|
1190
1105
|
|
|
1191
1106
|
/**
|
|
1192
1107
|
* Componente Drawer do Zanthus Design System
|
|
@@ -1268,20 +1183,20 @@ onClose, title = 'Título', isOpen = false, onOpen, className = '', id, disabled
|
|
|
1268
1183
|
event.stopPropagation();
|
|
1269
1184
|
internalClose();
|
|
1270
1185
|
};
|
|
1271
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$
|
|
1272
|
-
[styles$
|
|
1273
|
-
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$
|
|
1274
|
-
[styles$
|
|
1275
|
-
[styles$
|
|
1186
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$f['zds-custom__drawer-shadow'], {
|
|
1187
|
+
[styles$f['zds-custom__drawer-shadow--visible']]: isOpen,
|
|
1188
|
+
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$f['zds-custom__drawer-sidebar'], {
|
|
1189
|
+
[styles$f['zds-custom__drawer-sidebar--open']]: isOpen,
|
|
1190
|
+
[styles$f['zds-custom__drawer-sidebar--disabled']]: disabled,
|
|
1276
1191
|
}, className), style: {
|
|
1277
1192
|
// ✅ APENAS: Width customizável via CSS custom property
|
|
1278
1193
|
'--drawer-custom-width': customWidth,
|
|
1279
|
-
}, 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$f['zds-drawer__title-close']), children: [jsx("div", { className: clsx(styles$f['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$f['zds-drawer__children']), "data-testid": "drawer-content", children: children })] })] }));
|
|
1280
1195
|
};
|
|
1281
1196
|
|
|
1282
|
-
var styles$
|
|
1197
|
+
var styles$e = {"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"};
|
|
1283
1198
|
|
|
1284
|
-
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 = '', }, ref) => {
|
|
1285
1200
|
const [internalValue, setInternalValue] = useState('');
|
|
1286
1201
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
1287
1202
|
const currentValue = isControlled ? value : internalValue;
|
|
@@ -1326,11 +1241,11 @@ const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser
|
|
|
1326
1241
|
return;
|
|
1327
1242
|
onKeyDown?.(e);
|
|
1328
1243
|
};
|
|
1329
|
-
const searchClass = clsx(styles$
|
|
1244
|
+
const searchClass = clsx(styles$e['zds-search'], {
|
|
1330
1245
|
disabled,
|
|
1331
1246
|
[className]: className,
|
|
1332
1247
|
});
|
|
1333
|
-
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$e['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 }), currentValue && currentValue.length > 0 && (jsx("span", { className: styles$e['zds-search__clearIcon'], "aria-hidden": "true", onClick: clearInputSearch, children: jsx(Dismiss16Regular, {}) }))] }));
|
|
1334
1249
|
});
|
|
1335
1250
|
Search.displayName = 'ZdsSearch';
|
|
1336
1251
|
|
|
@@ -1365,7 +1280,7 @@ const validateItems = (items, type) => {
|
|
|
1365
1280
|
});
|
|
1366
1281
|
};
|
|
1367
1282
|
|
|
1368
|
-
var styles$
|
|
1283
|
+
var styles$d = {"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"};
|
|
1369
1284
|
|
|
1370
1285
|
/**
|
|
1371
1286
|
* Hook otimizado para scroll infinito usando IntersectionObserver
|
|
@@ -1606,7 +1521,7 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1606
1521
|
setSelectedItems({});
|
|
1607
1522
|
onSelectionChange?.([]);
|
|
1608
1523
|
}, [filter, onSelectionChange]);
|
|
1609
|
-
const isFirstRender =
|
|
1524
|
+
const isFirstRender = React.useRef(true);
|
|
1610
1525
|
useEffect(() => {
|
|
1611
1526
|
if (isFirstRender.current) {
|
|
1612
1527
|
isFirstRender.current = false;
|
|
@@ -1630,17 +1545,17 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1630
1545
|
const renderItemContent = useCallback((item, index) => {
|
|
1631
1546
|
const itemId = item.id || `dropdown-item-${index}`;
|
|
1632
1547
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
1633
|
-
return (jsxs("div", { className: clsx(styles$
|
|
1634
|
-
[styles$
|
|
1635
|
-
}), children: [type === 'checkbox' && (jsx(
|
|
1636
|
-
|
|
1637
|
-
|
|
1548
|
+
return (jsxs("div", { className: clsx(styles$d['zds-dropdown__item-content'], {
|
|
1549
|
+
[styles$d['zds-dropdown__item-content--disabled']]: item.disabled,
|
|
1550
|
+
}), children: [type === 'checkbox' && (jsx(Checkbox, { checked: !!currentSelection[itemId], onCheckedChange: (checked) => {
|
|
1551
|
+
if (checked === 'indeterminate')
|
|
1552
|
+
return;
|
|
1638
1553
|
toggleSelection(itemId, item);
|
|
1639
|
-
}, 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$d['zds-dropdown__item-icon-container'], children: jsx("span", { className: styles$d['zds-dropdown__item-icon'], onClick: (event) => {
|
|
1640
1555
|
event.preventDefault();
|
|
1641
1556
|
event.stopPropagation();
|
|
1642
1557
|
handleItemClick(event, itemId, item);
|
|
1643
|
-
}, children: item.icon }) })), jsxs("div", { className: styles$
|
|
1558
|
+
}, children: item.icon }) })), jsxs("div", { className: styles$d['zds-dropdown__item-text'], children: [jsx("span", { id: `dropdown-item-${itemId}-label`, className: styles$d['zds-dropdown__title'], children: item.text }), showSubText && item.subText && (jsx("span", { id: `dropdown-item-${itemId}-desc`, className: styles$d['zds-dropdown__subtext'], children: item.subText }))] })] }));
|
|
1644
1559
|
}, [
|
|
1645
1560
|
type,
|
|
1646
1561
|
selectedItems,
|
|
@@ -1705,10 +1620,10 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1705
1620
|
isSearchFocused,
|
|
1706
1621
|
handleSearchClear,
|
|
1707
1622
|
]);
|
|
1708
|
-
const DropdownClass = clsx(styles$
|
|
1623
|
+
const DropdownClass = clsx(styles$d['zds-dropdown__container'], styles$d[`zds-dropdown__container--${position}`], {
|
|
1709
1624
|
[className || '']: className,
|
|
1710
|
-
[styles$
|
|
1711
|
-
[styles$
|
|
1625
|
+
[styles$d['zds-dropdown__container--search-active']]: searchQuery.length > 0,
|
|
1626
|
+
[styles$d['zds-dropdown__container--fixed-width']]: !!maxWidth,
|
|
1712
1627
|
});
|
|
1713
1628
|
const dropdownStyles = useMemo(() => {
|
|
1714
1629
|
const styles = {};
|
|
@@ -1730,14 +1645,14 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1730
1645
|
}
|
|
1731
1646
|
return styles;
|
|
1732
1647
|
}, [maxWidth, minWidth, width, maxHeight]);
|
|
1733
|
-
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$d['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$d['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) => {
|
|
1734
1649
|
const itemId = generateItemId(item, index);
|
|
1735
1650
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
1736
|
-
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$
|
|
1737
|
-
[styles$
|
|
1738
|
-
[styles$
|
|
1739
|
-
[styles$
|
|
1740
|
-
[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$d['zds-dropdown__item'], {
|
|
1652
|
+
[styles$d[`zds-dropdown__item--${type}`]]: type,
|
|
1653
|
+
[styles$d['zds-dropdown__item--selected']]: currentSelection[itemId],
|
|
1654
|
+
[styles$d['zds-dropdown__item--focused']]: focusedIndex === index,
|
|
1655
|
+
[styles$d['zds-dropdown__item--disabled']]: item.disabled,
|
|
1741
1656
|
}), tabIndex: focusedIndex === index ? 0 : -1, onFocus: () => setFocusedIndex(index), onClick: (event) => {
|
|
1742
1657
|
event.stopPropagation();
|
|
1743
1658
|
handleItemClick(event, itemId, item);
|
|
@@ -1747,12 +1662,12 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1747
1662
|
setFocusedIndex(index);
|
|
1748
1663
|
}
|
|
1749
1664
|
}, children: renderItemContent(item, index) }, itemId));
|
|
1750
|
-
})) : (jsx("li", { className: styles$
|
|
1665
|
+
})) : (jsx("li", { className: styles$d['zds-dropdown__no-results'], role: "status", "aria-live": "polite", children: "Nenhum item corresponde \u00E0 sua busca" })), filter && (jsxs("div", { className: styles$d['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$d['zds-dropdown__infinite-scroll-trigger'], children: jsx("div", { ref: infiniteScrollHook.observerRef, className: styles$d['zds-dropdown__loading-indicator'], children: infiniteScroll?.status === 'loading' ? (jsx("span", { children: "Carregando..." })) : (jsx("span", { children: "Trigger" })) }) }))] }) }));
|
|
1751
1666
|
};
|
|
1752
|
-
const MemoizedDropdown =
|
|
1667
|
+
const MemoizedDropdown = React.memo(Dropdown);
|
|
1753
1668
|
MemoizedDropdown.displayName = 'Dropdown';
|
|
1754
1669
|
|
|
1755
|
-
var styles$
|
|
1670
|
+
var styles$c = {"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"};
|
|
1756
1671
|
|
|
1757
1672
|
// ✅ CORREÇÃO: Problema de loop infinito no useEffect
|
|
1758
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', }) => {
|
|
@@ -1837,41 +1752,25 @@ const Filter = ({ items = [], type = 'checkbox', selectedIds = [], onApplyFilter
|
|
|
1837
1752
|
}
|
|
1838
1753
|
return () => document.removeEventListener('keydown', handleEscape);
|
|
1839
1754
|
}, [isOpen, onClose]);
|
|
1840
|
-
const filterClass = clsx(styles$
|
|
1841
|
-
const dropdownClass = clsx(styles$
|
|
1842
|
-
[styles$
|
|
1755
|
+
const filterClass = clsx(styles$c['zds-filter__container'], className);
|
|
1756
|
+
const dropdownClass = clsx(styles$c['zds-filter__dropdown'], {
|
|
1757
|
+
[styles$c[`zds-filter__dropdown--${position}`]]: position,
|
|
1843
1758
|
});
|
|
1844
|
-
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$c['zds-filter-button__content'], children: [icon && jsx("span", { className: styles$c['zds-filter-button__icon'], children: icon }), jsx("span", { className: styles$c['zds-filter-button__text'], children: buttonDisplayText }), jsx("span", { className: `${styles$c['zds-filter-button__arrow']} ${isOpen ? styles$c['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 })) }))] }));
|
|
1845
1760
|
};
|
|
1846
1761
|
|
|
1847
|
-
var styles$
|
|
1762
|
+
var styles$b = {"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"};
|
|
1848
1763
|
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
const uniqueId = useId();
|
|
1857
|
-
const inputId = id || uniqueId;
|
|
1858
|
-
const handleChange = (e) => {
|
|
1859
|
-
if (disabled)
|
|
1860
|
-
return;
|
|
1861
|
-
onChange?.(e.target.value);
|
|
1862
|
-
};
|
|
1863
|
-
const radioClass = clsx(styles$c['zds-radiobutton'], {
|
|
1864
|
-
[styles$c['zds-radiobutton--disabled']]: disabled,
|
|
1865
|
-
}, className);
|
|
1866
|
-
const labelClass = clsx(styles$c['zds-radiobutton__box-check'], {
|
|
1867
|
-
[styles$c['zds-radiobutton__disabled']]: disabled,
|
|
1868
|
-
});
|
|
1869
|
-
return (jsx("div", { className: radioClass, children: jsxs("label", { className: labelClass, htmlFor: inputId, children: [jsx("div", { className: styles$c['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$c['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$b.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$b.wrapper, { [styles$b.disabled]: disabled }), children: jsxs("label", { className: styles$b.labelWrapper, htmlFor: uniqueId, children: [jsx("div", { className: styles$b.itemWrapper, children: jsx(RadioGroup.Item, { disabled: disabled, className: styles$b.item, value: value, id: uniqueId, "data-disabled": disabled, children: jsx(RadioGroup.Indicator, { className: styles$b.indicator }) }) }), jsx("span", { className: styles$b.labelText, children: label })] }) }, itemKey));
|
|
1770
|
+
}) }));
|
|
1870
1771
|
};
|
|
1871
|
-
const MemoizedRadio = React__default.memo(Radio);
|
|
1872
|
-
MemoizedRadio.displayName = 'Radio';
|
|
1873
1772
|
|
|
1874
|
-
var styles$
|
|
1773
|
+
var styles$a = {"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"};
|
|
1875
1774
|
|
|
1876
1775
|
/**
|
|
1877
1776
|
* Componente ListItem do Zanthus Design System
|
|
@@ -1956,20 +1855,24 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1956
1855
|
const currentVariant = validVariants.includes(variant) ? variant : 'text';
|
|
1957
1856
|
switch (currentVariant) {
|
|
1958
1857
|
case 'checkbox':
|
|
1959
|
-
return (jsxs(Fragment, { children: [jsx(
|
|
1858
|
+
return (jsxs(Fragment, { children: [jsx(Checkbox, { checked: internalChecked, disabled: disabled, onCheckedChange: () => handleCheckboxClick({}) }), jsxs("div", { className: styles$a['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$a['zds-list-item__text'], onClick: handleCheckboxClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$a['zds-list-item__subtext'], onClick: handleCheckboxClick, children: subText }))] })] }));
|
|
1960
1859
|
case 'radio':
|
|
1961
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1860
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$a['zds-list-item__wrapper-radio'], children: jsx("span", { className: styles$a['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$a['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$a['zds-list-item__title'], onClick: handleRadioClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$a['zds-list-item__subtext'], children: subText }))] })] }));
|
|
1962
1865
|
case 'icon':
|
|
1963
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1866
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$a['zds-list-item__wrapper-icon'], children: icon }), jsxs("div", { className: styles$a['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$a['zds-list-item__title'], onClick: handleTextOrIconClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$a['zds-list-item__subtext'], children: subText }))] })] }));
|
|
1964
1867
|
case 'text':
|
|
1965
1868
|
default:
|
|
1966
|
-
return (jsxs("div", { className: styles$
|
|
1869
|
+
return (jsxs("div", { className: styles$a['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$a['zds-list-item__title'], onClick: handleTextOrIconClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$a['zds-list-item__subtext'], children: subText }))] }));
|
|
1967
1870
|
}
|
|
1968
1871
|
}, [variant, itemId, internalChecked, disabled, handleCheckboxClick, handleRadioClick, handleTextOrIconClick, value, text, showSubText, subText, icon, name]);
|
|
1969
|
-
const listItemClass = clsx(styles$
|
|
1970
|
-
[styles$
|
|
1971
|
-
[styles$
|
|
1972
|
-
[styles$
|
|
1872
|
+
const listItemClass = clsx(styles$a['zds-list-item__container'], {
|
|
1873
|
+
[styles$a[`zds-list-item--${variant}`]]: variant,
|
|
1874
|
+
[styles$a['zds-list-item--disabled']]: disabled,
|
|
1875
|
+
[styles$a['zds-list-item--hovered']]: hovered,
|
|
1973
1876
|
[className || '']: className
|
|
1974
1877
|
});
|
|
1975
1878
|
const getAriaChecked = useCallback(() => {
|
|
@@ -1981,7 +1884,7 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1981
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() }));
|
|
1982
1885
|
};
|
|
1983
1886
|
|
|
1984
|
-
var styles$
|
|
1887
|
+
var styles$9 = {"zds-menu__container":"Menu-module__zds-menu__container___BVQ87","zds-search":"Menu-module__zds-search___grixQ","zds-menu__dropdown":"Menu-module__zds-menu__dropdown___rnrrj","zds-menu__dropdown--left":"Menu-module__zds-menu__dropdown--left___1z4dD","zds-menu__dropdown--right":"Menu-module__zds-menu__dropdown--right___A0Mdg"};
|
|
1985
1888
|
|
|
1986
1889
|
const Menu = ({ children, menuItems = [], onMenuItemClick, onToggle, type = 'text', applySearch = false, placeholder = '', showSubText = false, className, id, maxWidth = '210px', minWidth, position = 'left' }) => {
|
|
1987
1890
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
@@ -2105,7 +2008,7 @@ const Menu = ({ children, menuItems = [], onMenuItemClick, onToggle, type = 'tex
|
|
|
2105
2008
|
}, [isMenuOpen, handleClickOutside, handleKeyDown]);
|
|
2106
2009
|
const renderAnchor = () => {
|
|
2107
2010
|
const dropdownId = `${id || 'menu'}-dropdown`;
|
|
2108
|
-
return
|
|
2011
|
+
return React.cloneElement(children, {
|
|
2109
2012
|
ref: anchorRef,
|
|
2110
2013
|
onClick: (e) => {
|
|
2111
2014
|
if (dropdownRef.current && dropdownRef.current.contains(e.target)) {
|
|
@@ -2121,12 +2024,12 @@ const Menu = ({ children, menuItems = [], onMenuItemClick, onToggle, type = 'tex
|
|
|
2121
2024
|
'aria-controls': isMenuOpen ? dropdownId : undefined
|
|
2122
2025
|
});
|
|
2123
2026
|
};
|
|
2124
|
-
const menuClass = clsx$1(styles$
|
|
2125
|
-
const dropdownClass = clsx$1(styles$
|
|
2027
|
+
const menuClass = clsx$1(styles$9['zds-menu__container'], className);
|
|
2028
|
+
const dropdownClass = clsx$1(styles$9['zds-menu__dropdown'], styles$9[`zds-menu__dropdown--${position}`]);
|
|
2126
2029
|
return (jsxs("div", { ref: menuContainerRef, className: menuClass, id: id, children: [renderAnchor(), isMenuOpen && (jsx("div", { ref: dropdownRef, className: dropdownClass, role: "menu", "aria-label": "Menu de a\u00E7\u00F5es", id: `${id || 'menu'}-dropdown`, children: jsx(MemoizedDropdown, { type: type, items: menuItems, onSelectionChange: handleSelectionChange, initialItemsSelected: initialItemsSelected, applySearch: applySearch, placeholder: placeholder, showSubText: showSubText, "aria-label": "Menu de a\u00E7\u00F5es", minWidth: minWidth, maxWidth: maxWidth, className: dropdownClass }) }))] }));
|
|
2127
2030
|
};
|
|
2128
2031
|
|
|
2129
|
-
var styles$
|
|
2032
|
+
var styles$8 = {"content":"MenuRadix-module__content___zlnmj","subContent":"MenuRadix-module__subContent___tnX0E","itemsWrapper":"MenuRadix-module__itemsWrapper___FaUM1","item":"MenuRadix-module__item___xYiTK","subTrigger":"MenuRadix-module__subTrigger___HIuMb","itemSubText":"MenuRadix-module__itemSubText___Z8qgX","itemIcon":"MenuRadix-module__itemIcon___la-QC","itemSelected":"MenuRadix-module__itemSelected___sEBh6","itemText":"MenuRadix-module__itemText___ybPJy","wrapperText":"MenuRadix-module__wrapperText___-Sji9","chevronIcon":"MenuRadix-module__chevronIcon___VMHpF","searchWrapper":"MenuRadix-module__searchWrapper___qrshb","emptyState":"MenuRadix-module__emptyState___SVFf0","loadingMore":"MenuRadix-module__loadingMore___rYo-t"};
|
|
2130
2033
|
|
|
2131
2034
|
const normalizeText = (text) => {
|
|
2132
2035
|
if (typeof text === 'string')
|
|
@@ -2249,7 +2152,7 @@ const MenuItem = memo(({ item, isSelected, onSelect }) => {
|
|
|
2249
2152
|
const handleSelect = () => {
|
|
2250
2153
|
onSelect(item);
|
|
2251
2154
|
};
|
|
2252
|
-
return (jsxs(DropdownMenu.Item, { className: clsx(styles$
|
|
2155
|
+
return (jsxs(DropdownMenu.Item, { className: clsx(styles$8.item, { [styles$8.itemSelected]: isSelected }), onSelect: handleSelect, disabled: item.disabled, children: [item.icon && jsx("span", { className: styles$8.itemIcon, children: item.icon }), jsxs("div", { className: styles$8.wrapperText, children: [jsx("span", { className: styles$8.itemText, children: item.text }), item.subText && (jsx("span", { className: styles$8.itemSubText, children: item.subText }))] })] }));
|
|
2253
2156
|
});
|
|
2254
2157
|
MenuItem.displayName = 'MenuItem';
|
|
2255
2158
|
|
|
@@ -2356,7 +2259,7 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2356
2259
|
const renderMenuItem = useCallback((item, key) => {
|
|
2357
2260
|
const hasChildren = item.children && item.children.length > 0;
|
|
2358
2261
|
if (hasChildren) {
|
|
2359
|
-
return (jsxs(DropdownMenu.Sub, { children: [jsxs(DropdownMenu.SubTrigger, { className: styles$
|
|
2262
|
+
return (jsxs(DropdownMenu.Sub, { children: [jsxs(DropdownMenu.SubTrigger, { className: styles$8.subTrigger, disabled: item.disabled, children: [item.icon && (jsx("span", { className: styles$8.itemIcon, children: item.icon })), jsxs("div", { className: styles$8.wrapperText, children: [jsx("span", { className: styles$8.itemText, children: item.text }), item.subText && (jsx("span", { className: styles$8.itemSubText, children: item.subText }))] }), jsx(ChevronRight16Filled, { className: styles$8.chevronIcon })] }), jsx(DropdownMenu.Portal, { children: jsx(DropdownMenu.SubContent, { className: styles$8.subContent, sideOffset: 10, alignOffset: -5, collisionPadding: 20, children: item.children.map((childItem, childIndex) => renderMenuItem(childItem, `${key}-${childIndex}`)) }) })] }, key));
|
|
2360
2263
|
}
|
|
2361
2264
|
return (jsx(MenuItem, { item: item, isSelected: isItemSelected(item), onSelect: handleItemSelect }, key));
|
|
2362
2265
|
}, [handleItemSelect, isItemSelected]);
|
|
@@ -2369,14 +2272,14 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2369
2272
|
hasReachedEndRef.current = false;
|
|
2370
2273
|
}
|
|
2371
2274
|
};
|
|
2372
|
-
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$
|
|
2275
|
+
return (jsxs(DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsx(DropdownMenu.Trigger, { asChild: true, children: children }), jsx(DropdownMenu.Portal, { children: jsxs(DropdownMenu.Content, { className: clsx(styles$8.content, className), sideOffset: 8, align: align, onKeyDown: (e) => {
|
|
2373
2276
|
if (search) {
|
|
2374
2277
|
e.stopPropagation();
|
|
2375
2278
|
}
|
|
2376
|
-
}, ...rest, children: [search && (jsx("div", { className: styles$
|
|
2279
|
+
}, ...rest, children: [search && (jsx("div", { className: styles$8.searchWrapper, children: jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), jsxs("div", { className: styles$8.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$8.emptyState, children: "Nenhum item encontrado" })), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$8.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
|
|
2377
2280
|
};
|
|
2378
2281
|
|
|
2379
|
-
var styles$
|
|
2282
|
+
var styles$7 = {"zds-quantity":"Quantity-module__zds-quantity___AymLj","zds-quantity__input":"Quantity-module__zds-quantity__input___Wlhmo"};
|
|
2380
2283
|
|
|
2381
2284
|
/**
|
|
2382
2285
|
* Componente Quantity - permite incrementar/decrementar valores numéricos
|
|
@@ -2595,22 +2498,11 @@ const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled
|
|
|
2595
2498
|
}, [disabled, increment, decrement, decimal, decimalPlaces, isControlled, onChange, computedValue]);
|
|
2596
2499
|
const uniqueId = useId();
|
|
2597
2500
|
const inputId = id || uniqueId;
|
|
2598
|
-
return (jsxs("div", { className: clsx(styles$
|
|
2501
|
+
return (jsxs("div", { className: clsx(styles$7['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$7['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, {}) })] }));
|
|
2599
2502
|
};
|
|
2600
|
-
const memorizedQuantity =
|
|
2503
|
+
const memorizedQuantity = React.memo(Quantity);
|
|
2601
2504
|
memorizedQuantity.displayName = 'Quantity';
|
|
2602
2505
|
|
|
2603
|
-
var styles$7 = {"root":"RadioRadix-module__root___fkfHL","wrapper":"RadioRadix-module__wrapper___IzWxC","labelWrapper":"RadioRadix-module__labelWrapper___YJy4H","itemWrapper":"RadioRadix-module__itemWrapper___VzD-H","item":"RadioRadix-module__item___z7087","disabled":"RadioRadix-module__disabled___eGuSF","labelText":"RadioRadix-module__labelText___jP1Lv","indicator":"RadioRadix-module__indicator___oJlhm"};
|
|
2604
|
-
|
|
2605
|
-
const RadioRadix = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', ...rest }) => {
|
|
2606
|
-
const componentId = id || useId();
|
|
2607
|
-
return (jsx(RadioGroup.Root, { id: componentId, className: styles$7.root, defaultValue: defaultValue, onValueChange: onValueChange, name: name, "aria-label": ariaLabel, "data-orientation": orientation, orientation: orientation, ...rest, children: items.map(({ id, value, disabled, label }, index) => {
|
|
2608
|
-
const itemKey = id ?? value ?? `radio-${index}`;
|
|
2609
|
-
const uniqueId = `${componentId}-item-${value}`;
|
|
2610
|
-
return (jsx("div", { className: clsx(styles$7.wrapper, { [styles$7.disabled]: disabled }), children: jsxs("label", { className: styles$7.labelWrapper, htmlFor: uniqueId, children: [jsx("div", { className: styles$7.itemWrapper, children: jsx(RadioGroup.Item, { disabled: disabled, className: styles$7.item, value: value, id: uniqueId, "data-disabled": disabled, children: jsx(RadioGroup.Indicator, { className: styles$7.indicator }) }) }), jsx("span", { className: styles$7.labelText, children: label })] }) }, itemKey));
|
|
2611
|
-
}) }));
|
|
2612
|
-
};
|
|
2613
|
-
|
|
2614
2506
|
var styles$6 = {"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"};
|
|
2615
2507
|
|
|
2616
2508
|
var styles$5 = {"zds-select-field":"SelectField-module__zds-select-field___djzS5","zds-select-field__required":"SelectField-module__zds-select-field__required___T-LvC","zds-select-field__container-box":"SelectField-module__zds-select-field__container-box___nkzZy","zds-select-field__box__input":"SelectField-module__zds-select-field__box__input___xBdKZ","zds-select-field__display":"SelectField-module__zds-select-field__display___snLz3","zds-select-field--open":"SelectField-module__zds-select-field--open___IUfIn","zds-select-field__icon":"SelectField-module__zds-select-field__icon___kt-SW","zds-select-field__helper-text":"SelectField-module__zds-select-field__helper-text___9jTiW","zds-select-field__container-tooltip":"SelectField-module__zds-select-field__container-tooltip___xZr46","zds-select-field__tooltip":"SelectField-module__zds-select-field__tooltip___XYAEC","zds-select-field--error":"SelectField-module__zds-select-field--error___sb6H6","zds-select-field--disabled":"SelectField-module__zds-select-field--disabled___48f33"};
|
|
@@ -2643,7 +2535,7 @@ const SelectField = forwardRef(({ id, name, value, placeholder, label, helperTex
|
|
|
2643
2535
|
});
|
|
2644
2536
|
SelectField.displayName = 'SelectField';
|
|
2645
2537
|
|
|
2646
|
-
const Select =
|
|
2538
|
+
const Select = React.memo(({ id, options = [], value, initialValue, onChange, placeholder = 'Selecione', type = 'text', label, helperText, errorMessage, required = false, disabled = false, className, ariaLabel, showSubText, maxWidth, minWidth, width, position, tooltip = false, tooltipText = 'tooltip', positionTooltip = 'top-right', infiniteScroll, maxHeight }) => {
|
|
2647
2539
|
// Hooks e refs
|
|
2648
2540
|
const componentId = useId();
|
|
2649
2541
|
const finalId = id || componentId;
|
|
@@ -3207,20 +3099,19 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3207
3099
|
};
|
|
3208
3100
|
}
|
|
3209
3101
|
|
|
3210
|
-
var styles$4 = {"fieldContainer":"index-module__fieldContainer___rfpwH","trigger":"index-module__trigger___RCzFG","disabled":"index-module__disabled___ust2Z","error":"index-module__error___bEUc-","hasValue":"index-module__hasValue___pp7kv","triggerText":"index-module__triggerText___Q67w2","containerLabel":"index-module__containerLabel___nM2na","content":"index-module__content___hK3aL","viewport":"index-module__viewport___lJTlo","group":"index-module__group___2RRJc","container":"index-module__container___IPFKk","searchWrapper":"index-module__searchWrapper___Mxi7i","item":"index-module__item___ePUP1","subTitle":"index-module__subTitle___6Iz6p","title":"index-module__title___XHkS6","checkboxItem":"index-module__checkboxItem___3Q7pV","checkboxContent":"index-module__checkboxContent___a9PQw","itemWrapper":"index-module__itemWrapper___LmG00","icon":"index-module__icon___5zWjG","itemIndicator":"index-module__itemIndicator___jC6dI","textContent":"index-module__textContent___sIMxV","helper":"index-module__helper___LK89V","errorMessage":"index-module__errorMessage___MDeJD","noResults":"index-module__noResults___mudWL","loadingMore":"index-module__loadingMore___WvQCu"};
|
|
3102
|
+
var styles$4 = {"fieldContainer":"index-module__fieldContainer___rfpwH","trigger":"index-module__trigger___RCzFG","disabled":"index-module__disabled___ust2Z","open":"index-module__open___JZ3rh","error":"index-module__error___bEUc-","hasValue":"index-module__hasValue___pp7kv","triggerText":"index-module__triggerText___Q67w2","containerLabel":"index-module__containerLabel___nM2na","content":"index-module__content___hK3aL","viewport":"index-module__viewport___lJTlo","group":"index-module__group___2RRJc","container":"index-module__container___IPFKk","searchWrapper":"index-module__searchWrapper___Mxi7i","item":"index-module__item___ePUP1","subTitle":"index-module__subTitle___6Iz6p","title":"index-module__title___XHkS6","checkboxItem":"index-module__checkboxItem___3Q7pV","checkboxContent":"index-module__checkboxContent___a9PQw","itemWrapper":"index-module__itemWrapper___LmG00","icon":"index-module__icon___5zWjG","itemIndicator":"index-module__itemIndicator___jC6dI","textContent":"index-module__textContent___sIMxV","helper":"index-module__helper___LK89V","errorMessage":"index-module__errorMessage___MDeJD","noResults":"index-module__noResults___mudWL","loadingMore":"index-module__loadingMore___WvQCu"};
|
|
3211
3103
|
|
|
3212
|
-
const CheckboxSelectItem = ({ text, subTitle, disabled, checked,
|
|
3213
|
-
const handleCheckboxChange = (
|
|
3214
|
-
|
|
3215
|
-
onChange(e.target.checked);
|
|
3104
|
+
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange, value, ...restProps }) => {
|
|
3105
|
+
const handleCheckboxChange = (checkedValue) => {
|
|
3106
|
+
onCheckedChange(Boolean(checkedValue));
|
|
3216
3107
|
};
|
|
3217
3108
|
return (jsx("div", { className: clsx(styles$4.item, styles$4.checkboxItem, {
|
|
3218
3109
|
[styles$4.disabled]: disabled,
|
|
3219
|
-
}), role: "option", "aria-selected": checked, "data-selected": checked, "data-testid": `checkbox-item-${value}`, ...restProps, children: jsx("div", { className: styles$4.checkboxContent, children: jsx(
|
|
3110
|
+
}), role: "option", "aria-selected": checked, "data-selected": checked, "data-testid": `checkbox-item-${value}`, ...restProps, children: jsx("div", { className: styles$4.checkboxContent, children: jsx(Checkbox, { checked: checked, onCheckedChange: handleCheckboxChange, disabled: disabled, label: jsxs("div", { className: styles$4.textContent, children: [jsx("span", { className: styles$4.title, children: text }), subTitle && jsx("div", { className: styles$4.subTitle, children: subTitle })] }) }) }) }));
|
|
3220
3111
|
};
|
|
3221
3112
|
CheckboxSelectItem.displayName = 'CheckboxSelectItem';
|
|
3222
3113
|
|
|
3223
|
-
const SelectItem =
|
|
3114
|
+
const SelectItem = React.forwardRef(({ text, subTitle, icon, disabled, value, variant, ...restProps }, ref) => {
|
|
3224
3115
|
return (jsxs("div", { className: clsx(styles$4.itemWrapper, {
|
|
3225
3116
|
[styles$4.disabled]: disabled,
|
|
3226
3117
|
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$4.icon, children: icon })), jsxs(Select$1.Item, { className: clsx(styles$4.item, {
|
|
@@ -3229,11 +3120,9 @@ const SelectItem = React__default.forwardRef(({ text, subTitle, icon, disabled,
|
|
|
3229
3120
|
});
|
|
3230
3121
|
SelectItem.displayName = 'SelectItem';
|
|
3231
3122
|
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
3236
|
-
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,
|
|
3123
|
+
const SelectRadix = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, errorMessage, disabled = false, className, 'aria-label': ariaLabel, 'data-testid': testId,
|
|
3124
|
+
// Props para label com tooltip
|
|
3125
|
+
tooltip = false, tooltipText, side = 'bottom', align = 'start',
|
|
3237
3126
|
// Props para scroll infinito
|
|
3238
3127
|
enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false,
|
|
3239
3128
|
// Props para busca em API
|
|
@@ -3311,17 +3200,18 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3311
3200
|
onApiSearch('');
|
|
3312
3201
|
}
|
|
3313
3202
|
};
|
|
3314
|
-
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,
|
|
3203
|
+
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, {
|
|
3315
3204
|
[styles$4.error]: state.hasError && state.touched,
|
|
3316
3205
|
[styles$4.disabled]: disabled,
|
|
3317
3206
|
[styles$4.hasValue]: state.selectedValues.length > 0,
|
|
3207
|
+
[styles$4.open]: state.isOpen,
|
|
3318
3208
|
}), 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, {
|
|
3319
3209
|
[styles$4.disabled]: disabled
|
|
3320
|
-
}), 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) => (variant === 'checkbox' ? (jsx(CheckboxSelectItem, { ...item, checked: state.selectedValues.includes(item.value),
|
|
3210
|
+
}), children: helperText })), state.hasError && state.touched && (jsx("span", { className: styles$4.errorMessage, children: errorMessage || 'Campo obrigatório' }))] }) }), jsx(Select$1.Portal, { children: jsxs(Select$1.Content, { className: styles$4.content, position: "popper", side: "bottom", sideOffset: 8, align: "start", avoidCollisions: true, children: [search && (jsx("div", { className: styles$4.searchWrapper, children: jsx(Search, { ref: refs.searchInputRef, className: styles$4.search, placeholder: "Buscar", value: state.searchInput, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: handleClear, "data-testid": `${testId}-search` }) })), jsx(Select$1.Viewport, { ref: viewportRef, className: styles$4.viewport, children: jsx(Select$1.Group, { className: styles$4.group, children: filteredItems.length === 0 ? (jsx("div", { className: styles$4.noResults, children: "Nenhum resultado encontrado" })) : (jsxs(Fragment, { children: [filteredItems.map((item) => (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)))), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$4.loadingMore, children: "Carregando mais itens..." }))] })) }) })] }) })] }) }));
|
|
3321
3211
|
};
|
|
3322
3212
|
SelectRadix.displayName = 'SelectRadix';
|
|
3323
3213
|
|
|
3324
|
-
var styles$
|
|
3214
|
+
var styles$3 = {"zds-table__container":"Table-module__zds-table__container___9xeVY","zds-table__scroll-wrapper":"Table-module__zds-table__scroll-wrapper___xQZPq","zds-table":"Table-module__zds-table___bPvaS","zds-table__head":"Table-module__zds-table__head___FvQuS","zds-table__th":"Table-module__zds-table__th___R03sj","zds-table__th-content":"Table-module__zds-table__th-content___duR3c","zds-table__td":"Table-module__zds-table__td___aY-Nt","zds-table-header__filters-placeholder":"Table-module__zds-table-header__filters-placeholder___GhVwi","zds-table__body":"Table-module__zds-table__body___kuKXb","zds-table__empty":"Table-module__zds-table__empty___ZM4iu","zds-table__empty__content":"Table-module__zds-table__empty__content___8xl-u","zds-table__empty__title":"Table-module__zds-table__empty__title___7Y9Pj","zds-table__empty__caption":"Table-module__zds-table__empty__caption___toS00","zds-table__row":"Table-module__zds-table__row___8cEjq","zds-table__empty-cell":"Table-module__zds-table__empty-cell___Ldb6Z","zds-table-header__search":"Table-module__zds-table-header__search___yzLxw","zds-table__pagination":"Table-module__zds-table__pagination___FR5GH","zds-table-header":"Table-module__zds-table-header___uPRjd","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"};
|
|
3325
3215
|
|
|
3326
3216
|
/**
|
|
3327
3217
|
* @module constants
|
|
@@ -6759,10 +6649,10 @@ const Table = ({ columns = [], dataSource = [], className, loading = false, rowS
|
|
|
6759
6649
|
return columns;
|
|
6760
6650
|
const checkboxColumn = {
|
|
6761
6651
|
key: '__checkbox__',
|
|
6762
|
-
label: (jsx(
|
|
6652
|
+
label: (jsx(Checkbox, { checked: isAllSelected, indeterminate: isIndeterminate, onCheckedChange: toggleAll, label: '' })),
|
|
6763
6653
|
render: (_, index) => {
|
|
6764
6654
|
const props = rowSelection.getCheckboxProps?.(dataSource[index], index) || {};
|
|
6765
|
-
return (jsx(
|
|
6655
|
+
return (jsx(Checkbox, { checked: selectedSet.has(index), onCheckedChange: () => toggleRow(index), disabled: props.disabled, label: '' }));
|
|
6766
6656
|
},
|
|
6767
6657
|
align: 'center',
|
|
6768
6658
|
};
|
|
@@ -6770,13 +6660,13 @@ const Table = ({ columns = [], dataSource = [], className, loading = false, rowS
|
|
|
6770
6660
|
}, [columns, rowSelection, isAllSelected, isIndeterminate, toggleAll, selectedSet, toggleRow, dataSource]);
|
|
6771
6661
|
const tableId = useMemo(() => `table-${Math.random().toString(36).substr(2, 9)}`, []);
|
|
6772
6662
|
if (loading) {
|
|
6773
|
-
return (jsx("div", { className: clsx(styles$
|
|
6663
|
+
return (jsx("div", { className: clsx(styles$3['zds-table__container'], className), children: jsx("div", { className: styles$3['zds-table__loader'], children: jsx(LoaderList, {}) }) }));
|
|
6774
6664
|
}
|
|
6775
|
-
const emptyText = locale.emptyText || (jsxs("div", { className: styles$
|
|
6776
|
-
return (jsx("div", { className: clsx(styles$
|
|
6665
|
+
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" })] })] }));
|
|
6666
|
+
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) => {
|
|
6777
6667
|
const rowProps = onRow?.(row, index) || {};
|
|
6778
|
-
return (jsx("tr", { className: clsx(styles$
|
|
6779
|
-
})) : (jsx("tr", { children: jsx("td", { colSpan: finalColumns.length, className: styles$
|
|
6668
|
+
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));
|
|
6669
|
+
})) : (jsx("tr", { children: jsx("td", { colSpan: finalColumns.length, className: styles$3['zds-table__empty-cell'], children: emptyText }) })) })] }) }) }));
|
|
6780
6670
|
};
|
|
6781
6671
|
|
|
6782
6672
|
const isCalendarFilter = (filter) => {
|
|
@@ -6787,7 +6677,7 @@ const isCheckboxFilter = (filter) => {
|
|
|
6787
6677
|
};
|
|
6788
6678
|
const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceholder = 'Pesquisar...', showSearch = true, showFilters = false, filters, filterItems = [], className = '', }) => {
|
|
6789
6679
|
const [internalSearchValue, setInternalSearchValue] = useState(searchValue);
|
|
6790
|
-
|
|
6680
|
+
React.useEffect(() => {
|
|
6791
6681
|
setInternalSearchValue(searchValue);
|
|
6792
6682
|
}, [searchValue]);
|
|
6793
6683
|
const handleInputChange = (e) => {
|
|
@@ -6809,7 +6699,7 @@ const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceho
|
|
|
6809
6699
|
}
|
|
6810
6700
|
};
|
|
6811
6701
|
const hasFilters = filters || (filterItems && filterItems.length > 0);
|
|
6812
|
-
return (jsxs("div", { className: `${styles$
|
|
6702
|
+
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) => {
|
|
6813
6703
|
const commonProps = {
|
|
6814
6704
|
key: filterItem.id || index,
|
|
6815
6705
|
buttonText: filterItem.buttonText,
|
|
@@ -6828,7 +6718,7 @@ const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceho
|
|
|
6828
6718
|
}
|
|
6829
6719
|
console.warn('TableHeader: Tipo de filtro não reconhecido:', filterItem);
|
|
6830
6720
|
return null;
|
|
6831
|
-
}) })] })] })) : (jsx("div", { className: styles$
|
|
6721
|
+
}) })] })] })) : (jsx("div", { className: styles$3['zds-table-header__filters-placeholder'], children: jsx("span", { children: "Nenhum filtro dispon\u00EDvel" }) })) }))] }));
|
|
6832
6722
|
};
|
|
6833
6723
|
|
|
6834
6724
|
const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange, onItemsPerPageChange, pageSizeOptions = [10, 25, 50, 100], disabled = false, className = '', }) => {
|
|
@@ -6854,12 +6744,12 @@ const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange,
|
|
|
6854
6744
|
const newItemsPerPage = Number(event.target.value);
|
|
6855
6745
|
onItemsPerPageChange(newItemsPerPage);
|
|
6856
6746
|
};
|
|
6857
|
-
return (jsxs("div", { className: `${styles$
|
|
6747
|
+
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
|
|
6858
6748
|
? `${startItem}–${endItem} de ${totalItems}`
|
|
6859
|
-
: '0 itens' }) }), jsxs("div", { className: styles$
|
|
6749
|
+
: '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, {}) })] })] }));
|
|
6860
6750
|
};
|
|
6861
6751
|
|
|
6862
|
-
var styles$
|
|
6752
|
+
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"};
|
|
6863
6753
|
|
|
6864
6754
|
const sanitizeMessage = (message) => {
|
|
6865
6755
|
if (typeof message !== 'string')
|
|
@@ -6881,15 +6771,15 @@ const ToastContext = createContext(undefined);
|
|
|
6881
6771
|
const toastVariants = {
|
|
6882
6772
|
success: {
|
|
6883
6773
|
icon: jsx(CheckmarkCircle20Filled, {}),
|
|
6884
|
-
className: styles$
|
|
6774
|
+
className: styles$2['zds-toast__success'],
|
|
6885
6775
|
},
|
|
6886
6776
|
alert: {
|
|
6887
6777
|
icon: jsx(Warning20Filled, {}),
|
|
6888
|
-
className: styles$
|
|
6778
|
+
className: styles$2['zds-toast__alert'],
|
|
6889
6779
|
},
|
|
6890
6780
|
info: {
|
|
6891
6781
|
icon: jsx(Info20Filled, {}),
|
|
6892
|
-
className: styles$
|
|
6782
|
+
className: styles$2['zds-toast__info'],
|
|
6893
6783
|
},
|
|
6894
6784
|
};
|
|
6895
6785
|
const ToastItem = ({ toast, onClose, isVisible }) => {
|
|
@@ -6899,12 +6789,12 @@ const ToastItem = ({ toast, onClose, isVisible }) => {
|
|
|
6899
6789
|
onClose(toast.id);
|
|
6900
6790
|
}
|
|
6901
6791
|
};
|
|
6902
|
-
return (jsxs("div", { className: clsx(styles$
|
|
6792
|
+
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" }) })] }));
|
|
6903
6793
|
};
|
|
6904
6794
|
const ToastContainer = ({ toasts, onClose, visibleToasts }) => {
|
|
6905
6795
|
if (toasts.length === 0)
|
|
6906
6796
|
return null;
|
|
6907
|
-
return (jsx("div", { className: styles$
|
|
6797
|
+
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))) }));
|
|
6908
6798
|
};
|
|
6909
6799
|
const ToastProvider = ({ children, maxToasts = MAX_TOASTS }) => {
|
|
6910
6800
|
const [toasts, setToasts] = useState([]);
|
|
@@ -6992,6 +6882,10 @@ const useToast = () => {
|
|
|
6992
6882
|
return context;
|
|
6993
6883
|
};
|
|
6994
6884
|
|
|
6885
|
+
var styles$1 = {"container":"Switch-module__container___BR1OB","switchRoot":"Switch-module__switchRoot___jz2HD","switchThumb":"Switch-module__switchThumb___X3RL7"};
|
|
6886
|
+
|
|
6887
|
+
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 }) }) }));
|
|
6888
|
+
|
|
6995
6889
|
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"};
|
|
6996
6890
|
|
|
6997
6891
|
/**
|
|
@@ -7307,5 +7201,5 @@ function useApiSimulation(config = {}) {
|
|
|
7307
7201
|
};
|
|
7308
7202
|
}
|
|
7309
7203
|
|
|
7310
|
-
export { Avatar, Badge, Button, MemoizedCalendar as Calendar, Callout,
|
|
7204
|
+
export { Avatar, Badge, Button, MemoizedCalendar as Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, MemoizedDialog as Dialog, Drawer, MemoizedDropdown as Dropdown, Filter, ListItem, Menu, MenuRadix, memorizedQuantity as Quantity, Radio, Search, Select, SelectField, SelectRadix, Switch, Table, TableHeader, TablePagination, TextField$1 as TextField, ToastProvider as Toast, ToastProvider, Tooltip, VerificationCode, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
7311
7205
|
//# sourceMappingURL=index.esm.js.map
|