@giro-ds/react 1.0.4 → 1.0.5
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/TextField/TextField.d.ts +2 -2
- package/dist/components/TextField/TextField.types.d.ts +24 -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/index.cjs +150 -157
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +20 -17
- package/dist/index.esm.js +152 -159
- package/dist/index.esm.js.map +1 -1
- package/dist/shared/Label/index.d.ts +2 -1
- package/dist/styles.css +1 -1
- package/package.json +15 -13
- package/dist/components/TextField/ValidationUtils.d.ts +0 -8
package/dist/index.esm.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import React__default, { useId, useMemo, useRef, useState, useEffect, useCallback,
|
|
3
|
+
import React__default, { useId, useMemo, useRef, useState, useEffect, useCallback, forwardRef, memo, useReducer, createElement, isValidElement, createContext, useContext } from 'react';
|
|
4
4
|
import clsx, { clsx as clsx$1 } from 'clsx';
|
|
5
5
|
import { ChevronUp16Regular, ChevronDown16Regular, ChevronLeft16Regular, ChevronRight16Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, Info20Filled, Warning20Filled, CheckmarkCircle20Filled } from '@fluentui/react-icons';
|
|
6
6
|
import { initReactI18next, useTranslation } from 'react-i18next';
|
|
7
7
|
import i18n from 'i18next';
|
|
8
|
-
import { Checkbox as Checkbox$1, DropdownMenu, RadioGroup, Select as Select$1
|
|
8
|
+
import { Checkbox as Checkbox$1, Label, DropdownMenu, RadioGroup, Select as Select$1 } from 'radix-ui';
|
|
9
9
|
|
|
10
10
|
var styles$t = {"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
11
|
|
|
@@ -700,7 +700,9 @@ function Container({ children }) {
|
|
|
700
700
|
return (jsx("main", { className: `${styles$l['container']} mx-auto`, children: children }));
|
|
701
701
|
}
|
|
702
702
|
|
|
703
|
-
var styles$k = {"
|
|
703
|
+
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"};
|
|
704
|
+
|
|
705
|
+
var styles$j = {"zds-tooltip__wrapper":"Tooltip-module__zds-tooltip__wrapper___BaLW6","zds-tooltip__content":"Tooltip-module__zds-tooltip__content___E6A4Q","zds-tooltip__top-right":"Tooltip-module__zds-tooltip__top-right___04O6s","zds-tooltip__top-left":"Tooltip-module__zds-tooltip__top-left___EqSvC","zds-tooltip__left":"Tooltip-module__zds-tooltip__left___yxr2G","zds-tooltip__right":"Tooltip-module__zds-tooltip__right___Fq5jm","zds-tooltip__bottom-left":"Tooltip-module__zds-tooltip__bottom-left___aBINN","zds-tooltip__bottom-right":"Tooltip-module__zds-tooltip__bottom-right___yVKMn"};
|
|
704
706
|
|
|
705
707
|
const Tooltip = ({ id, text, children, position = 'top-right' }) => {
|
|
706
708
|
const [visible, setVisible] = useState(false);
|
|
@@ -736,85 +738,79 @@ const Tooltip = ({ id, text, children, position = 'top-right' }) => {
|
|
|
736
738
|
}
|
|
737
739
|
};
|
|
738
740
|
}, []);
|
|
739
|
-
const tooltipClass = clsx(styles$
|
|
740
|
-
return (jsxs("div", { className: clsx(styles$
|
|
741
|
+
const tooltipClass = clsx(styles$j['zds-tooltip__content'], styles$j[`zds-tooltip__${position}`]);
|
|
742
|
+
return (jsxs("div", { className: clsx(styles$j['zds-tooltip__wrapper']), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, onKeyDown: handleKeyDown, tabIndex: 0, "aria-describedby": visible ? tooltipId : undefined, children: [children, visible && (jsx("div", { ref: tooltipRef, className: tooltipClass, role: 'tooltip', id: tooltipId, "aria-describedby": tooltipId, "aria-hidden": !visible, children: text }))] }));
|
|
741
743
|
};
|
|
742
744
|
|
|
743
|
-
|
|
745
|
+
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipMessage, tooltipPosition = 'top-left', className, error = false, disabled = false }) => (jsx(Fragment, { children: tooltip ? (jsx(Tooltip, { position: tooltipPosition, text: tooltipMessage || '', 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: "*" })] })) }));
|
|
746
|
+
|
|
747
|
+
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
748
|
|
|
745
|
-
const validateInput = ({ value, maxLength,
|
|
746
|
-
if (required &&
|
|
749
|
+
const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
750
|
+
if (required && value.trim() === '') {
|
|
747
751
|
return errorMessage || 'Campo obrigatório.';
|
|
748
752
|
}
|
|
749
|
-
if (
|
|
753
|
+
if (maxLength && value.length > maxLength) {
|
|
750
754
|
return errorMessage || `Campo deve ter no máximo ${maxLength} caracteres.`;
|
|
751
755
|
}
|
|
752
756
|
return '';
|
|
753
757
|
};
|
|
754
758
|
|
|
755
|
-
const TextField = ({
|
|
756
|
-
const [inputValue,
|
|
759
|
+
const TextField = forwardRef(({ className, value = '', label, placeholder, type = 'text', onChange, disabled = false, maxLength = 30, required = false, helperText, tooltip = false, tooltipText = '', positionTooltip = 'top-right', errorMessage = '', id, icon, onBlur, onFocus, name, ...inputProps }, ref) => {
|
|
760
|
+
const [inputValue, setInputValue] = useState(value);
|
|
757
761
|
const [inputError, setInputError] = useState('');
|
|
758
|
-
const [
|
|
759
|
-
const
|
|
762
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
763
|
+
const generatedId = useId();
|
|
764
|
+
const componentId = id || generatedId;
|
|
760
765
|
const handleChange = useCallback((e) => {
|
|
761
766
|
const newValue = e.target.value;
|
|
762
767
|
if (!disabled && (!maxLength || newValue.length <= maxLength)) {
|
|
763
|
-
|
|
768
|
+
setInputValue(newValue);
|
|
764
769
|
onChange?.(newValue);
|
|
765
770
|
}
|
|
766
771
|
}, [disabled, maxLength, onChange]);
|
|
767
|
-
const
|
|
772
|
+
const handleClear = useCallback(() => {
|
|
768
773
|
if (!disabled) {
|
|
769
|
-
|
|
774
|
+
setInputValue('');
|
|
770
775
|
onChange?.('');
|
|
771
776
|
}
|
|
772
777
|
}, [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';
|
|
778
|
+
const handleBlur = useCallback((e) => {
|
|
779
|
+
const error = validateInput({
|
|
780
|
+
value: inputValue,
|
|
781
|
+
maxLength,
|
|
782
|
+
errorMessage,
|
|
783
|
+
required,
|
|
784
|
+
});
|
|
785
|
+
setInputError(error);
|
|
786
|
+
setIsFocused(false);
|
|
787
|
+
onBlur?.(e);
|
|
788
|
+
}, [inputValue, type, maxLength, errorMessage, required, onBlur]);
|
|
789
|
+
const handleFocus = useCallback((e) => {
|
|
790
|
+
setIsFocused(true);
|
|
791
|
+
onFocus?.(e);
|
|
792
|
+
}, [onFocus]);
|
|
793
|
+
const showCustomIcon = inputValue.trim().length === 0 && icon;
|
|
794
|
+
const showClearIcon = isFocused && inputValue.trim().length > 0;
|
|
795
|
+
const hasError = Boolean(inputError);
|
|
796
|
+
const displayHelperText = inputError || helperText || '\u00A0';
|
|
809
797
|
const helperId = inputError
|
|
810
798
|
? `${componentId}-error`
|
|
811
|
-
:
|
|
799
|
+
: helperText
|
|
812
800
|
? `${componentId}-helper`
|
|
813
801
|
: undefined;
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
802
|
+
const containerClass = clsx(styles$i.container, {
|
|
803
|
+
[styles$i.error]: hasError,
|
|
804
|
+
[styles$i.disabled]: disabled,
|
|
805
|
+
[className]: className,
|
|
806
|
+
});
|
|
807
|
+
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipMessage: tooltipText, tooltipPosition: positionTooltip, 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) => {
|
|
808
|
+
e.preventDefault();
|
|
809
|
+
handleClear();
|
|
810
|
+
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx(Dismiss16Regular, {}) }))] }), jsx("span", { id: helperId, className: styles$i.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText })] })] }));
|
|
811
|
+
});
|
|
812
|
+
TextField.displayName = 'TextField';
|
|
813
|
+
var TextField$1 = React__default.memo(TextField);
|
|
818
814
|
|
|
819
815
|
/**
|
|
820
816
|
* Formata uma data para string conforme o locale.
|
|
@@ -909,7 +905,7 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
909
905
|
return date;
|
|
910
906
|
}
|
|
911
907
|
|
|
912
|
-
var styles$
|
|
908
|
+
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
909
|
|
|
914
910
|
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
911
|
// ✅ IDs únicos para acessibilidade
|
|
@@ -1091,13 +1087,13 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText =
|
|
|
1091
1087
|
setTempInputValue(formatDate(currentSelectedDate, locale));
|
|
1092
1088
|
}
|
|
1093
1089
|
}, [locale, currentSelectedDate, isEditing]);
|
|
1094
|
-
return (jsx("div", { ref: wrapperRef, children: jsxs("div", { className: clsx(styles$
|
|
1090
|
+
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
1091
|
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, helper: combinedHelperText ? true : false, helperText: combinedHelperText, required: required, label: label }) }), jsx("div", { className: clsx(styles$
|
|
1092
|
+
}, "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": "calendar-popup", placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', value: displayValue, errorMessage: undefined, "aria-invalid": !!currentError, "aria-describedby": combinedHelperText ? helperTextId : undefined, maxLength: 10, helper: combinedHelperText ? true : false, 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
1093
|
};
|
|
1098
1094
|
var DatePicker_default = React__default.memo(DatePicker);
|
|
1099
1095
|
|
|
1100
|
-
var styles$
|
|
1096
|
+
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
1097
|
|
|
1102
1098
|
const useFocusTrap = (isActive) => {
|
|
1103
1099
|
const containerRef = useRef(null);
|
|
@@ -1180,13 +1176,13 @@ const Dialog = ({ show, title, text, textConfirm = 'OK', textCancel = 'Cancelar'
|
|
|
1180
1176
|
}, [show, handleCancel]);
|
|
1181
1177
|
if (!show)
|
|
1182
1178
|
return null;
|
|
1183
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1179
|
+
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
1180
|
};
|
|
1185
1181
|
// Memoização para otimização de performance
|
|
1186
1182
|
const MemoizedDialog = React__default.memo(Dialog);
|
|
1187
1183
|
MemoizedDialog.displayName = 'Dialog';
|
|
1188
1184
|
|
|
1189
|
-
var styles$
|
|
1185
|
+
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
1186
|
|
|
1191
1187
|
/**
|
|
1192
1188
|
* Componente Drawer do Zanthus Design System
|
|
@@ -1268,18 +1264,18 @@ onClose, title = 'Título', isOpen = false, onOpen, className = '', id, disabled
|
|
|
1268
1264
|
event.stopPropagation();
|
|
1269
1265
|
internalClose();
|
|
1270
1266
|
};
|
|
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$
|
|
1267
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$f['zds-custom__drawer-shadow'], {
|
|
1268
|
+
[styles$f['zds-custom__drawer-shadow--visible']]: isOpen,
|
|
1269
|
+
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$f['zds-custom__drawer-sidebar'], {
|
|
1270
|
+
[styles$f['zds-custom__drawer-sidebar--open']]: isOpen,
|
|
1271
|
+
[styles$f['zds-custom__drawer-sidebar--disabled']]: disabled,
|
|
1276
1272
|
}, className), style: {
|
|
1277
1273
|
// ✅ APENAS: Width customizável via CSS custom property
|
|
1278
1274
|
'--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$
|
|
1275
|
+
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, children: [jsxs("div", { className: clsx(styles$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
1276
|
};
|
|
1281
1277
|
|
|
1282
|
-
var styles$
|
|
1278
|
+
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
1279
|
|
|
1284
1280
|
const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, id = '', className = '', }, ref) => {
|
|
1285
1281
|
const [internalValue, setInternalValue] = useState('');
|
|
@@ -1326,11 +1322,11 @@ const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser
|
|
|
1326
1322
|
return;
|
|
1327
1323
|
onKeyDown?.(e);
|
|
1328
1324
|
};
|
|
1329
|
-
const searchClass = clsx(styles$
|
|
1325
|
+
const searchClass = clsx(styles$e['zds-search'], {
|
|
1330
1326
|
disabled,
|
|
1331
1327
|
[className]: className,
|
|
1332
1328
|
});
|
|
1333
|
-
return (jsxs("div", { className: searchClass, onClick: onClick, onMouseDown: onMouseDown, children: [jsx("span", { className: clsx(styles$
|
|
1329
|
+
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
1330
|
});
|
|
1335
1331
|
Search.displayName = 'ZdsSearch';
|
|
1336
1332
|
|
|
@@ -1365,7 +1361,7 @@ const validateItems = (items, type) => {
|
|
|
1365
1361
|
});
|
|
1366
1362
|
};
|
|
1367
1363
|
|
|
1368
|
-
var styles$
|
|
1364
|
+
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
1365
|
|
|
1370
1366
|
/**
|
|
1371
1367
|
* Hook otimizado para scroll infinito usando IntersectionObserver
|
|
@@ -1630,17 +1626,17 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1630
1626
|
const renderItemContent = useCallback((item, index) => {
|
|
1631
1627
|
const itemId = item.id || `dropdown-item-${index}`;
|
|
1632
1628
|
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
1633
|
-
return (jsxs("div", { className: clsx(styles$
|
|
1634
|
-
[styles$
|
|
1629
|
+
return (jsxs("div", { className: clsx(styles$d['zds-dropdown__item-content'], {
|
|
1630
|
+
[styles$d['zds-dropdown__item-content--disabled']]: item.disabled,
|
|
1635
1631
|
}), children: [type === 'checkbox' && (jsx(MemoizedCheckbox, { checked: currentSelection[itemId], onChange: (event) => {
|
|
1636
1632
|
event.preventDefault();
|
|
1637
1633
|
event.stopPropagation();
|
|
1638
1634
|
toggleSelection(itemId, item);
|
|
1639
|
-
}, disabled: item.disabled, label: "" })), type === 'icon' && item.icon && (jsx("div", { className: styles$
|
|
1635
|
+
}, 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
1636
|
event.preventDefault();
|
|
1641
1637
|
event.stopPropagation();
|
|
1642
1638
|
handleItemClick(event, itemId, item);
|
|
1643
|
-
}, children: item.icon }) })), jsxs("div", { className: styles$
|
|
1639
|
+
}, 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
1640
|
}, [
|
|
1645
1641
|
type,
|
|
1646
1642
|
selectedItems,
|
|
@@ -1705,10 +1701,10 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1705
1701
|
isSearchFocused,
|
|
1706
1702
|
handleSearchClear,
|
|
1707
1703
|
]);
|
|
1708
|
-
const DropdownClass = clsx(styles$
|
|
1704
|
+
const DropdownClass = clsx(styles$d['zds-dropdown__container'], styles$d[`zds-dropdown__container--${position}`], {
|
|
1709
1705
|
[className || '']: className,
|
|
1710
|
-
[styles$
|
|
1711
|
-
[styles$
|
|
1706
|
+
[styles$d['zds-dropdown__container--search-active']]: searchQuery.length > 0,
|
|
1707
|
+
[styles$d['zds-dropdown__container--fixed-width']]: !!maxWidth,
|
|
1712
1708
|
});
|
|
1713
1709
|
const dropdownStyles = useMemo(() => {
|
|
1714
1710
|
const styles = {};
|
|
@@ -1730,14 +1726,14 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1730
1726
|
}
|
|
1731
1727
|
return styles;
|
|
1732
1728
|
}, [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$
|
|
1729
|
+
return (jsx("div", { ref: containerRef, className: DropdownClass, tabIndex: 0, role: "combobox", "aria-expanded": filteredItems.length > 0 ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": id ? `${id}-listbox` : undefined, "aria-controls": id ? `${id}-listbox` : undefined, "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : undefined, "aria-label": "Dropdown de sele\u00E7\u00E3o", "aria-describedby": searchVisible ? `${id}-search-help` : undefined, onKeyDown: handleKeyDown, style: dropdownStyles, children: jsxs("ul", { className: styles$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
1730
|
const itemId = generateItemId(item, index);
|
|
1735
1731
|
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$
|
|
1732
|
+
return (jsx("li", { role: "option", "aria-selected": !!currentSelection[itemId], "aria-labelledby": `dropdown-item-${itemId}-label`, "aria-describedby": item.subText ? `dropdown-item-${itemId}-desc` : undefined, className: clsx(styles$d['zds-dropdown__item'], {
|
|
1733
|
+
[styles$d[`zds-dropdown__item--${type}`]]: type,
|
|
1734
|
+
[styles$d['zds-dropdown__item--selected']]: currentSelection[itemId],
|
|
1735
|
+
[styles$d['zds-dropdown__item--focused']]: focusedIndex === index,
|
|
1736
|
+
[styles$d['zds-dropdown__item--disabled']]: item.disabled,
|
|
1741
1737
|
}), tabIndex: focusedIndex === index ? 0 : -1, onFocus: () => setFocusedIndex(index), onClick: (event) => {
|
|
1742
1738
|
event.stopPropagation();
|
|
1743
1739
|
handleItemClick(event, itemId, item);
|
|
@@ -1747,12 +1743,12 @@ const Dropdown = ({ className, items = [], id, type = 'text', applySearch = fals
|
|
|
1747
1743
|
setFocusedIndex(index);
|
|
1748
1744
|
}
|
|
1749
1745
|
}, children: renderItemContent(item, index) }, itemId));
|
|
1750
|
-
})) : (jsx("li", { className: styles$
|
|
1746
|
+
})) : (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
1747
|
};
|
|
1752
1748
|
const MemoizedDropdown = React__default.memo(Dropdown);
|
|
1753
1749
|
MemoizedDropdown.displayName = 'Dropdown';
|
|
1754
1750
|
|
|
1755
|
-
var styles$
|
|
1751
|
+
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
1752
|
|
|
1757
1753
|
// ✅ CORREÇÃO: Problema de loop infinito no useEffect
|
|
1758
1754
|
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,14 +1833,14 @@ const Filter = ({ items = [], type = 'checkbox', selectedIds = [], onApplyFilter
|
|
|
1837
1833
|
}
|
|
1838
1834
|
return () => document.removeEventListener('keydown', handleEscape);
|
|
1839
1835
|
}, [isOpen, onClose]);
|
|
1840
|
-
const filterClass = clsx(styles$
|
|
1841
|
-
const dropdownClass = clsx(styles$
|
|
1842
|
-
[styles$
|
|
1836
|
+
const filterClass = clsx(styles$c['zds-filter__container'], className);
|
|
1837
|
+
const dropdownClass = clsx(styles$c['zds-filter__dropdown'], {
|
|
1838
|
+
[styles$c[`zds-filter__dropdown--${position}`]]: position,
|
|
1843
1839
|
});
|
|
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$
|
|
1840
|
+
return (jsxs("div", { ref: filterRef, className: filterClass, children: [jsx(Button, { variant: variant, onClick: handleToggle, disabled: disabled, icon: type === 'calendar' ? jsx(Calendar16Regular, {}) : jsx(ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxs("div", { className: styles$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
1841
|
};
|
|
1846
1842
|
|
|
1847
|
-
var styles$
|
|
1843
|
+
var styles$b = {"zds-radiobutton":"Radio-module__zds-radiobutton___b7a-O","zds-radiobutton__box-check":"Radio-module__zds-radiobutton__box-check___nJoyz","zds-radiobutton__box-check__text":"Radio-module__zds-radiobutton__box-check__text___xk4xV","zds-radiobutton__mini-box":"Radio-module__zds-radiobutton__mini-box___o0vCx","zds-radiobutton__disabled":"Radio-module__zds-radiobutton__disabled___rU5Yf"};
|
|
1848
1844
|
|
|
1849
1845
|
/**
|
|
1850
1846
|
* Componente Radio para seleção única em grupos
|
|
@@ -1860,18 +1856,18 @@ const Radio = ({ name = 'radiobutton', value = '', id, checked = false, classNam
|
|
|
1860
1856
|
return;
|
|
1861
1857
|
onChange?.(e.target.value);
|
|
1862
1858
|
};
|
|
1863
|
-
const radioClass = clsx(styles$
|
|
1864
|
-
[styles$
|
|
1859
|
+
const radioClass = clsx(styles$b['zds-radiobutton'], {
|
|
1860
|
+
[styles$b['zds-radiobutton--disabled']]: disabled,
|
|
1865
1861
|
}, className);
|
|
1866
|
-
const labelClass = clsx(styles$
|
|
1867
|
-
[styles$
|
|
1862
|
+
const labelClass = clsx(styles$b['zds-radiobutton__box-check'], {
|
|
1863
|
+
[styles$b['zds-radiobutton__disabled']]: disabled,
|
|
1868
1864
|
});
|
|
1869
|
-
return (jsx("div", { className: radioClass, children: jsxs("label", { className: labelClass, htmlFor: inputId, children: [jsx("div", { className: styles$
|
|
1865
|
+
return (jsx("div", { className: radioClass, children: jsxs("label", { className: labelClass, htmlFor: inputId, children: [jsx("div", { className: styles$b['zds-radiobutton__mini-box'], children: jsx("input", { id: inputId, type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: handleChange }) }), label && (jsx("span", { id: `${inputId}-description`, className: styles$b['zds-radiobutton__box-check__text'], children: label }))] }) }));
|
|
1870
1866
|
};
|
|
1871
1867
|
const MemoizedRadio = React__default.memo(Radio);
|
|
1872
1868
|
MemoizedRadio.displayName = 'Radio';
|
|
1873
1869
|
|
|
1874
|
-
var styles$
|
|
1870
|
+
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
1871
|
|
|
1876
1872
|
/**
|
|
1877
1873
|
* Componente ListItem do Zanthus Design System
|
|
@@ -1956,20 +1952,20 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1956
1952
|
const currentVariant = validVariants.includes(variant) ? variant : 'text';
|
|
1957
1953
|
switch (currentVariant) {
|
|
1958
1954
|
case 'checkbox':
|
|
1959
|
-
return (jsxs(Fragment, { children: [jsx(MemoizedCheckbox, { name: name, checked: internalChecked, disabled: disabled, label: "", onChange: () => handleCheckboxClick({}), value: value }), jsxs("div", { className: styles$
|
|
1955
|
+
return (jsxs(Fragment, { children: [jsx(MemoizedCheckbox, { name: name, checked: internalChecked, disabled: disabled, label: "", onChange: () => handleCheckboxClick({}), value: value }), 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
1956
|
case 'radio':
|
|
1961
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1957
|
+
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(MemoizedRadio, { name: name, checked: internalChecked, disabled: disabled, onChange: () => handleRadioClick({}), value: value, "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
1958
|
case 'icon':
|
|
1963
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
1959
|
+
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
1960
|
case 'text':
|
|
1965
1961
|
default:
|
|
1966
|
-
return (jsxs("div", { className: styles$
|
|
1962
|
+
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
1963
|
}
|
|
1968
1964
|
}, [variant, itemId, internalChecked, disabled, handleCheckboxClick, handleRadioClick, handleTextOrIconClick, value, text, showSubText, subText, icon, name]);
|
|
1969
|
-
const listItemClass = clsx(styles$
|
|
1970
|
-
[styles$
|
|
1971
|
-
[styles$
|
|
1972
|
-
[styles$
|
|
1965
|
+
const listItemClass = clsx(styles$a['zds-list-item__container'], {
|
|
1966
|
+
[styles$a[`zds-list-item--${variant}`]]: variant,
|
|
1967
|
+
[styles$a['zds-list-item--disabled']]: disabled,
|
|
1968
|
+
[styles$a['zds-list-item--hovered']]: hovered,
|
|
1973
1969
|
[className || '']: className
|
|
1974
1970
|
});
|
|
1975
1971
|
const getAriaChecked = useCallback(() => {
|
|
@@ -1981,7 +1977,7 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1981
1977
|
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
1978
|
};
|
|
1983
1979
|
|
|
1984
|
-
var styles$
|
|
1980
|
+
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
1981
|
|
|
1986
1982
|
const Menu = ({ children, menuItems = [], onMenuItemClick, onToggle, type = 'text', applySearch = false, placeholder = '', showSubText = false, className, id, maxWidth = '210px', minWidth, position = 'left' }) => {
|
|
1987
1983
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
@@ -2121,12 +2117,12 @@ const Menu = ({ children, menuItems = [], onMenuItemClick, onToggle, type = 'tex
|
|
|
2121
2117
|
'aria-controls': isMenuOpen ? dropdownId : undefined
|
|
2122
2118
|
});
|
|
2123
2119
|
};
|
|
2124
|
-
const menuClass = clsx$1(styles$
|
|
2125
|
-
const dropdownClass = clsx$1(styles$
|
|
2120
|
+
const menuClass = clsx$1(styles$9['zds-menu__container'], className);
|
|
2121
|
+
const dropdownClass = clsx$1(styles$9['zds-menu__dropdown'], styles$9[`zds-menu__dropdown--${position}`]);
|
|
2126
2122
|
return (jsxs("div", { ref: menuContainerRef, className: menuClass, id: id, children: [renderAnchor(), isMenuOpen && (jsx("div", { ref: dropdownRef, className: dropdownClass, role: "menu", "aria-label": "Menu de a\u00E7\u00F5es", id: `${id || 'menu'}-dropdown`, children: jsx(MemoizedDropdown, { type: type, items: menuItems, onSelectionChange: handleSelectionChange, initialItemsSelected: initialItemsSelected, applySearch: applySearch, placeholder: placeholder, showSubText: showSubText, "aria-label": "Menu de a\u00E7\u00F5es", minWidth: minWidth, maxWidth: maxWidth, className: dropdownClass }) }))] }));
|
|
2127
2123
|
};
|
|
2128
2124
|
|
|
2129
|
-
var styles$
|
|
2125
|
+
var styles$8 = {"content":"MenuRadix-module__content___zlnmj","subContent":"MenuRadix-module__subContent___tnX0E","itemsWrapper":"MenuRadix-module__itemsWrapper___FaUM1","item":"MenuRadix-module__item___xYiTK","subTrigger":"MenuRadix-module__subTrigger___HIuMb","itemSubText":"MenuRadix-module__itemSubText___Z8qgX","itemIcon":"MenuRadix-module__itemIcon___la-QC","itemSelected":"MenuRadix-module__itemSelected___sEBh6","itemText":"MenuRadix-module__itemText___ybPJy","wrapperText":"MenuRadix-module__wrapperText___-Sji9","chevronIcon":"MenuRadix-module__chevronIcon___VMHpF","searchWrapper":"MenuRadix-module__searchWrapper___qrshb","emptyState":"MenuRadix-module__emptyState___SVFf0","loadingMore":"MenuRadix-module__loadingMore___rYo-t"};
|
|
2130
2126
|
|
|
2131
2127
|
const normalizeText = (text) => {
|
|
2132
2128
|
if (typeof text === 'string')
|
|
@@ -2249,7 +2245,7 @@ const MenuItem = memo(({ item, isSelected, onSelect }) => {
|
|
|
2249
2245
|
const handleSelect = () => {
|
|
2250
2246
|
onSelect(item);
|
|
2251
2247
|
};
|
|
2252
|
-
return (jsxs(DropdownMenu.Item, { className: clsx(styles$
|
|
2248
|
+
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
2249
|
});
|
|
2254
2250
|
MenuItem.displayName = 'MenuItem';
|
|
2255
2251
|
|
|
@@ -2356,7 +2352,7 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2356
2352
|
const renderMenuItem = useCallback((item, key) => {
|
|
2357
2353
|
const hasChildren = item.children && item.children.length > 0;
|
|
2358
2354
|
if (hasChildren) {
|
|
2359
|
-
return (jsxs(DropdownMenu.Sub, { children: [jsxs(DropdownMenu.SubTrigger, { className: styles$
|
|
2355
|
+
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
2356
|
}
|
|
2361
2357
|
return (jsx(MenuItem, { item: item, isSelected: isItemSelected(item), onSelect: handleItemSelect }, key));
|
|
2362
2358
|
}, [handleItemSelect, isItemSelected]);
|
|
@@ -2369,14 +2365,14 @@ const MenuRadix = ({ items, children, onItemSelect, search, enableInfiniteScroll
|
|
|
2369
2365
|
hasReachedEndRef.current = false;
|
|
2370
2366
|
}
|
|
2371
2367
|
};
|
|
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$
|
|
2368
|
+
return (jsxs(DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsx(DropdownMenu.Trigger, { asChild: true, children: children }), jsx(DropdownMenu.Portal, { children: jsxs(DropdownMenu.Content, { className: clsx(styles$8.content, className), sideOffset: 8, align: align, onKeyDown: (e) => {
|
|
2373
2369
|
if (search) {
|
|
2374
2370
|
e.stopPropagation();
|
|
2375
2371
|
}
|
|
2376
|
-
}, ...rest, children: [search && (jsx("div", { className: styles$
|
|
2372
|
+
}, ...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
2373
|
};
|
|
2378
2374
|
|
|
2379
|
-
var styles$
|
|
2375
|
+
var styles$7 = {"zds-quantity":"Quantity-module__zds-quantity___AymLj","zds-quantity__input":"Quantity-module__zds-quantity__input___Wlhmo"};
|
|
2380
2376
|
|
|
2381
2377
|
/**
|
|
2382
2378
|
* Componente Quantity - permite incrementar/decrementar valores numéricos
|
|
@@ -2595,25 +2591,25 @@ const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled
|
|
|
2595
2591
|
}, [disabled, increment, decrement, decimal, decimalPlaces, isControlled, onChange, computedValue]);
|
|
2596
2592
|
const uniqueId = useId();
|
|
2597
2593
|
const inputId = id || uniqueId;
|
|
2598
|
-
return (jsxs("div", { className: clsx(styles$
|
|
2594
|
+
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
2595
|
};
|
|
2600
2596
|
const memorizedQuantity = React__default.memo(Quantity);
|
|
2601
2597
|
memorizedQuantity.displayName = 'Quantity';
|
|
2602
2598
|
|
|
2603
|
-
var styles$
|
|
2599
|
+
var styles$6 = {"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
2600
|
|
|
2605
2601
|
const RadioRadix = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', ...rest }) => {
|
|
2606
2602
|
const componentId = id || useId();
|
|
2607
|
-
return (jsx(RadioGroup.Root, { id: componentId, className: styles$
|
|
2603
|
+
return (jsx(RadioGroup.Root, { id: componentId, className: styles$6.root, defaultValue: defaultValue, onValueChange: onValueChange, name: name, "aria-label": ariaLabel, "data-orientation": orientation, orientation: orientation, ...rest, children: items.map(({ id, value, disabled, label }, index) => {
|
|
2608
2604
|
const itemKey = id ?? value ?? `radio-${index}`;
|
|
2609
2605
|
const uniqueId = `${componentId}-item-${value}`;
|
|
2610
|
-
return (jsx("div", { className: clsx(styles$
|
|
2606
|
+
return (jsx("div", { className: clsx(styles$6.wrapper, { [styles$6.disabled]: disabled }), children: jsxs("label", { className: styles$6.labelWrapper, htmlFor: uniqueId, children: [jsx("div", { className: styles$6.itemWrapper, children: jsx(RadioGroup.Item, { disabled: disabled, className: styles$6.item, value: value, id: uniqueId, "data-disabled": disabled, children: jsx(RadioGroup.Indicator, { className: styles$6.indicator }) }) }), jsx("span", { className: styles$6.labelText, children: label })] }) }, itemKey));
|
|
2611
2607
|
}) }));
|
|
2612
2608
|
};
|
|
2613
2609
|
|
|
2614
|
-
var styles$
|
|
2610
|
+
var styles$5 = {"zds-select":"Select-module__zds-select___TePBJ","zds-select__dropdown":"Select-module__zds-select__dropdown___pEXsY","zds-dropdown__container":"Select-module__zds-dropdown__container___TJvrT","zds-select__dropdown--top":"Select-module__zds-select__dropdown--top___O3u5M","zds-select__dropdown--bottom":"Select-module__zds-select__dropdown--bottom___qfKLH"};
|
|
2615
2611
|
|
|
2616
|
-
var styles$
|
|
2612
|
+
var styles$4 = {"zds-select-field":"SelectField-module__zds-select-field___djzS5","zds-select-field__required":"SelectField-module__zds-select-field__required___T-LvC","zds-select-field__container-box":"SelectField-module__zds-select-field__container-box___nkzZy","zds-select-field__box__input":"SelectField-module__zds-select-field__box__input___xBdKZ","zds-select-field__display":"SelectField-module__zds-select-field__display___snLz3","zds-select-field--open":"SelectField-module__zds-select-field--open___IUfIn","zds-select-field__icon":"SelectField-module__zds-select-field__icon___kt-SW","zds-select-field__helper-text":"SelectField-module__zds-select-field__helper-text___9jTiW","zds-select-field__container-tooltip":"SelectField-module__zds-select-field__container-tooltip___xZr46","zds-select-field__tooltip":"SelectField-module__zds-select-field__tooltip___XYAEC","zds-select-field--error":"SelectField-module__zds-select-field--error___sb6H6","zds-select-field--disabled":"SelectField-module__zds-select-field--disabled___48f33"};
|
|
2617
2613
|
|
|
2618
2614
|
const SelectField = forwardRef(({ id, name, value, placeholder, label, helperText, errorMessage, required = false, disabled = false, icon, isOpen = false, className, tooltip, tooltipText, isTouched = false, hasError = false, positionTooltip }, ref) => {
|
|
2619
2615
|
// ✅ NOVA LÓGICA: Validação de required
|
|
@@ -2627,19 +2623,19 @@ const SelectField = forwardRef(({ id, name, value, placeholder, label, helperTex
|
|
|
2627
2623
|
// ✅ NOVA LÓGICA: Estado de erro combinado
|
|
2628
2624
|
const showError = hasError || shouldShowRequiredError || Boolean(errorMessage);
|
|
2629
2625
|
// Classes CSS
|
|
2630
|
-
const containerClasses = clsx(styles$
|
|
2631
|
-
[styles$
|
|
2632
|
-
[styles$
|
|
2633
|
-
[styles$
|
|
2634
|
-
[styles$
|
|
2635
|
-
[styles$
|
|
2626
|
+
const containerClasses = clsx(styles$4['zds-select-field'], {
|
|
2627
|
+
[styles$4['zds-select-field--open']]: isOpen,
|
|
2628
|
+
[styles$4['zds-select-field--disabled']]: disabled,
|
|
2629
|
+
[styles$4['zds-select-field--error']]: showError,
|
|
2630
|
+
[styles$4['zds-select-field--required']]: isRequired,
|
|
2631
|
+
[styles$4['zds-select-field--touched']]: isTouched,
|
|
2636
2632
|
}, className);
|
|
2637
|
-
const displayClasses = clsx(styles$
|
|
2638
|
-
[styles$
|
|
2633
|
+
const displayClasses = clsx(styles$4['zds-select-field__display'], {
|
|
2634
|
+
[styles$4['zds-select-field__display--placeholder']]: !hasValue,
|
|
2639
2635
|
'has-value': hasValue,
|
|
2640
2636
|
});
|
|
2641
2637
|
const displayText = hasValue ? value : placeholder;
|
|
2642
|
-
return (jsxs("div", { className: containerClasses, ref: ref, children: [label && (jsx("label", { htmlFor: id, children: tooltip ? (jsx(Tooltip, { text: tooltipText, position: positionTooltip, children: jsxs("div", { className: styles$
|
|
2638
|
+
return (jsxs("div", { className: containerClasses, ref: ref, children: [label && (jsx("label", { htmlFor: id, children: tooltip ? (jsx(Tooltip, { text: tooltipText, position: positionTooltip, children: jsxs("div", { className: styles$4['zds-select-field__container-tooltip'], children: [label, required && jsx("span", { className: styles$4['zds-select-field__required'], children: "*" }), jsx(Info12Regular, { className: styles$4['zds-select-field__tooltip'] })] }) })) : (jsxs("div", { className: styles$4['zds-select-field__container-tooltip'], children: [label, required && jsx("span", { className: styles$4['zds-select-field__required'], children: "*" })] })) })), jsxs("div", { className: styles$4['zds-select-field__container-box'], children: [jsxs("div", { className: styles$4['zds-select-field__box__input'], children: [jsx("div", { id: id, className: displayClasses, "data-placeholder": !hasValue ? placeholder : undefined, children: displayText }), jsx("input", { type: "hidden", name: name, value: value || '', disabled: disabled, required: required, className: styles$4['zds-select-field__input'] }), icon && (jsx("div", { className: styles$4['zds-select-field__icon'], children: icon }))] }), !isOpen && (helperText || showError) && (jsx("div", { className: styles$4['zds-select-field__helper-text'], children: showError ? dynamicErrorMessage : helperText }))] })] }));
|
|
2643
2639
|
});
|
|
2644
2640
|
SelectField.displayName = 'SelectField';
|
|
2645
2641
|
|
|
@@ -2953,16 +2949,16 @@ const Select = React__default.memo(({ id, options = [], value, initialValue, onC
|
|
|
2953
2949
|
return styles;
|
|
2954
2950
|
}, [maxWidth, minWidth, width]);
|
|
2955
2951
|
// ✅ MELHORADO: Classes CSS com estados visuais
|
|
2956
|
-
const selectClasses = clsx(styles$
|
|
2957
|
-
[styles$
|
|
2958
|
-
[styles$
|
|
2959
|
-
[styles$
|
|
2960
|
-
[styles$
|
|
2961
|
-
[styles$
|
|
2952
|
+
const selectClasses = clsx(styles$5['zds-select'], {
|
|
2953
|
+
[styles$5['zds-select--disabled']]: disabled,
|
|
2954
|
+
[styles$5['zds-select--error']]: Boolean(errorMessage) || shouldShowRequiredError,
|
|
2955
|
+
[styles$5['zds-select--focused']]: isOpen,
|
|
2956
|
+
[styles$5['zds-select--required']]: required,
|
|
2957
|
+
[styles$5['zds-select--touched']]: isTouched,
|
|
2962
2958
|
}, className);
|
|
2963
2959
|
return (jsxs("div", { className: selectClasses, ref: selectRef, id: finalId, "data-testid": "select-container", style: containerStyles, children: [jsx("div", { role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-owns": isOpen ? `${finalId}-dropdown` : undefined, "aria-controls": `${finalId}-dropdown`, "aria-describedby": helperText ? `${finalId}-helper` : undefined, "aria-invalid": Boolean(errorMessage), "aria-required": required, "aria-label": ariaLabel || label || placeholder || 'Selecione uma opção', "aria-activedescendant": isOpen && focusedOptionIndex >= 0
|
|
2964
2960
|
? dropdownItems[focusedOptionIndex]?.id
|
|
2965
|
-
: selectedIds.length > 0 ? selectedIds[0] : undefined, tabIndex: disabled ? -1 : 0, onBlur: handleBlur, onKeyDown: handleKeyDown, onClick: handleTriggerClick, className: styles$
|
|
2961
|
+
: selectedIds.length > 0 ? selectedIds[0] : undefined, tabIndex: disabled ? -1 : 0, onBlur: handleBlur, onKeyDown: handleKeyDown, onClick: handleTriggerClick, className: styles$5['zds-select__trigger'], children: jsx(SelectField, { name: `select-${finalId}`, placeholder: displayText || placeholder, value: displayText, disabled: disabled, helperText: !isOpen ? helperText : undefined, errorMessage: !isOpen ? errorMessage : undefined, icon: isOpen ? jsx(ChevronUp16Regular, {}) : jsx(ChevronDown16Regular, {}), required: required, label: label, isTouched: isTouched, hasError: shouldShowRequiredError, isOpen: isOpen, tooltip: tooltip, tooltipText: tooltipText, positionTooltip: positionTooltip }) }), isOpen && !disabled && (jsx("div", { className: clsx(styles$5['zds-select__dropdown'], position && styles$5[`zds-select__dropdown--${position}`]), children: jsx(MemoizedDropdown, { items: dropdownItems, type: type, onSelectionChange: handleOptionSelect, initialItemsSelected: initialItemsSelected, defaultSelectedIds: selectedIds, id: `${finalId}-dropdown`, showSubText: showSubText, maxWidth: maxWidth, minWidth: minWidth, width: width, maxHeight: maxHeight, infiniteScroll: infiniteScroll }, `dropdown-${selectedIds.join('-')}`) }))] }));
|
|
2966
2962
|
});
|
|
2967
2963
|
Select.displayName = 'Select';
|
|
2968
2964
|
|
|
@@ -3207,32 +3203,28 @@ enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
|
3207
3203
|
};
|
|
3208
3204
|
}
|
|
3209
3205
|
|
|
3210
|
-
var styles$
|
|
3206
|
+
var styles$3 = {"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
3207
|
|
|
3212
3208
|
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onChange, value, ...restProps }) => {
|
|
3213
3209
|
const handleCheckboxChange = (e) => {
|
|
3214
3210
|
e.stopPropagation();
|
|
3215
3211
|
onChange(e.target.checked);
|
|
3216
3212
|
};
|
|
3217
|
-
return (jsx("div", { className: clsx(styles$
|
|
3218
|
-
[styles$
|
|
3219
|
-
}), role: "option", "aria-selected": checked, "data-selected": checked, "data-testid": `checkbox-item-${value}`, ...restProps, children: jsx("div", { className: styles$
|
|
3213
|
+
return (jsx("div", { className: clsx(styles$3.item, styles$3.checkboxItem, {
|
|
3214
|
+
[styles$3.disabled]: disabled,
|
|
3215
|
+
}), role: "option", "aria-selected": checked, "data-selected": checked, "data-testid": `checkbox-item-${value}`, ...restProps, children: jsx("div", { className: styles$3.checkboxContent, children: jsx(MemoizedCheckbox, { checked: checked, onChange: handleCheckboxChange, disabled: disabled, label: jsxs("div", { className: styles$3.textContent, children: [jsx("span", { className: styles$3.title, children: text }), subTitle && jsx("div", { className: styles$3.subTitle, children: subTitle })] }), onClick: (e) => e.stopPropagation() }) }) }));
|
|
3220
3216
|
};
|
|
3221
3217
|
CheckboxSelectItem.displayName = 'CheckboxSelectItem';
|
|
3222
3218
|
|
|
3223
3219
|
const SelectItem = React__default.forwardRef(({ text, subTitle, icon, disabled, value, variant, ...restProps }, ref) => {
|
|
3224
|
-
return (jsxs("div", { className: clsx(styles$
|
|
3225
|
-
[styles$
|
|
3226
|
-
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$
|
|
3227
|
-
[styles$
|
|
3228
|
-
}), value: value, disabled: disabled, ...restProps, children: [jsx(Select$1.ItemText, { className: styles$
|
|
3220
|
+
return (jsxs("div", { className: clsx(styles$3.itemWrapper, {
|
|
3221
|
+
[styles$3.disabled]: disabled,
|
|
3222
|
+
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$3.icon, children: icon })), jsxs(Select$1.Item, { className: clsx(styles$3.item, {
|
|
3223
|
+
[styles$3.disabled]: disabled,
|
|
3224
|
+
}), value: value, disabled: disabled, ...restProps, children: [jsx(Select$1.ItemText, { className: styles$3.title, children: text }), subTitle && jsx("div", { className: styles$3.subTitle, children: subTitle }), jsx(Select$1.ItemIndicator, { className: styles$3.itemIndicator })] })] }));
|
|
3229
3225
|
});
|
|
3230
3226
|
SelectItem.displayName = 'SelectItem';
|
|
3231
3227
|
|
|
3232
|
-
var styles$3 = {"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"};
|
|
3233
|
-
|
|
3234
|
-
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipMessage, className, error = false, disabled = false }) => (jsx("div", { className: styles$3.containerLabel, children: tooltip ? (jsx(Tooltip, { position: "top-left", text: tooltipMessage || '', children: jsxs(Label.Root, { className: clsx(styles$3.wrapperLabel, error && styles$3.errorLabel, className), htmlFor: htmlFor, children: [children, required && jsx("span", { className: styles$3.requiredLabel, children: "*" }), jsx(Info12Regular, { className: styles$3.infoIcon })] }) })) : (jsxs(Label.Root, { className: clsx(styles$3.wrapperLabel, error && styles$3.errorLabel, disabled && styles$3.disabledLabel, className), htmlFor: htmlFor, children: [children, required && jsx("span", { className: styles$3.requiredLabel, children: "*" })] })) }));
|
|
3235
|
-
|
|
3236
3228
|
const SelectRadix = ({ items, onValueChange, onOpenChange, variant, required = false, value, tooltip = false, tooltipMessage, label, helperText, placeholder = 'Selecione', maxWidth, search = false, errorMessage, disabled = false, className, 'aria-label': ariaLabel, 'data-testid': testId,
|
|
3237
3229
|
// Props para scroll infinito
|
|
3238
3230
|
enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false,
|
|
@@ -3311,13 +3303,14 @@ enableApiSearch = false, onApiSearch, isSearching = false, ...restProps }) => {
|
|
|
3311
3303
|
onApiSearch('');
|
|
3312
3304
|
}
|
|
3313
3305
|
};
|
|
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$
|
|
3315
|
-
[styles$
|
|
3316
|
-
[styles$
|
|
3317
|
-
[styles$
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3306
|
+
return (jsx(Select$1.Root, { value: variant === 'checkbox' ? '' : (state.selectedValues[0] || ''), onValueChange: variant === 'checkbox' ? undefined : actions.handleSingleSelect, required: required, open: state.isOpen, onOpenChange: actions.setOpen, disabled: disabled, ...restProps, children: jsxs("div", { className: clsx(styles$3.container, className), style: containerStyle, "data-testid": testId, children: [jsx("div", { className: styles$3.fieldContainer, children: jsxs("div", { className: styles$3.containerLabel, children: [jsx(LabelComponent, { htmlFor: selectId, required: required, tooltipMessage: tooltipMessage, tooltip: tooltip, error: state.hasError && state.touched, disabled: disabled, children: label }), jsxs(Select$1.Trigger, { className: clsx(styles$3.trigger, {
|
|
3307
|
+
[styles$3.error]: state.hasError && state.touched,
|
|
3308
|
+
[styles$3.disabled]: disabled,
|
|
3309
|
+
[styles$3.hasValue]: state.selectedValues.length > 0,
|
|
3310
|
+
[styles$3.open]: state.isOpen,
|
|
3311
|
+
}), id: selectId, "aria-label": ariaLabel, "data-testid": `${testId}-trigger`, children: [variant === 'checkbox' ? (jsx("span", { className: styles$3.triggerText, children: displayText })) : (jsx(Select$1.Value, { placeholder: placeholder, className: styles$3.placeholder, children: displayText })), state.isOpen ? jsx(ChevronUp16Regular, {}) : jsx(ChevronDown16Regular, {})] }), !state.isOpen && helperText && !state.hasError && (jsx("span", { className: clsx(styles$3.helper, {
|
|
3312
|
+
[styles$3.disabled]: disabled
|
|
3313
|
+
}), children: helperText })), state.hasError && state.touched && (jsx("span", { className: styles$3.errorMessage, children: errorMessage || 'Campo obrigatório' }))] }) }), jsx(Select$1.Portal, { children: jsxs(Select$1.Content, { className: styles$3.content, position: "popper", side: "bottom", sideOffset: 8, align: "start", avoidCollisions: true, children: [search && (jsx("div", { className: styles$3.searchWrapper, children: jsx(Search, { ref: refs.searchInputRef, className: styles$3.search, placeholder: "Buscar", value: state.searchInput, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: handleClear, "data-testid": `${testId}-search` }) })), jsx(Select$1.Viewport, { ref: viewportRef, className: styles$3.viewport, children: jsx(Select$1.Group, { className: styles$3.group, children: filteredItems.length === 0 ? (jsx("div", { className: styles$3.noResults, children: "Nenhum resultado encontrado" })) : (jsxs(Fragment, { children: [filteredItems.map((item) => (variant === 'checkbox' ? (jsx(CheckboxSelectItem, { ...item, checked: state.selectedValues.includes(item.value), onChange: (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$3.loadingMore, children: "Carregando mais itens..." }))] })) }) })] }) })] }) }));
|
|
3321
3314
|
};
|
|
3322
3315
|
SelectRadix.displayName = 'SelectRadix';
|
|
3323
3316
|
|
|
@@ -7307,5 +7300,5 @@ function useApiSimulation(config = {}) {
|
|
|
7307
7300
|
};
|
|
7308
7301
|
}
|
|
7309
7302
|
|
|
7310
|
-
export { Avatar, Badge, Button, MemoizedCalendar as Calendar, Callout, MemoizedCheckbox as Checkbox, CheckboxRadix, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, MemoizedDialog as Dialog, Drawer, MemoizedDropdown as Dropdown, Filter, ListItem, Menu, MenuRadix, memorizedQuantity as Quantity, MemoizedRadio as Radio, RadioRadix, Search, Select, SelectField, SelectRadix, Table, TableHeader, TablePagination,
|
|
7303
|
+
export { Avatar, Badge, Button, MemoizedCalendar as Calendar, Callout, MemoizedCheckbox as Checkbox, CheckboxRadix, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, MemoizedDialog as Dialog, Drawer, MemoizedDropdown as Dropdown, Filter, ListItem, Menu, MenuRadix, memorizedQuantity as Quantity, MemoizedRadio as Radio, RadioRadix, Search, Select, SelectField, SelectRadix, Table, TableHeader, TablePagination, TextField$1 as TextField, ToastProvider as Toast, ToastProvider, Tooltip, VerificationCode, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
7311
7304
|
//# sourceMappingURL=index.esm.js.map
|