@giro-ds/react 12.2.0 → 12.3.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/index.cjs +139 -41
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +8 -10
- package/dist/index.esm.js +107 -42
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +2 -2
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -76,6 +76,39 @@ const Badge = ({ children, badgeValue = null, className, id, filterVariant = fal
|
|
|
76
76
|
}, className), "data-testid": "badge", children: !isEmpty && (jsxRuntime.jsx("span", { "aria-hidden": !!ariaLabel, children: displayValue })) }) }));
|
|
77
77
|
};
|
|
78
78
|
|
|
79
|
+
const REACT_MAJOR = parseInt(React.version.split('.')[0], 10);
|
|
80
|
+
/**
|
|
81
|
+
* Shim de compatibilidade para `React.forwardRef` que funciona tanto no React 18
|
|
82
|
+
* quanto no React 19.
|
|
83
|
+
*
|
|
84
|
+
* - React 18: `ref` não é uma prop comum — usa `React.forwardRef` internamente.
|
|
85
|
+
* - React 19: `ref` é uma prop normal e `forwardRef` foi depreciado. Este shim
|
|
86
|
+
* cria um componente funcional comum que lê `ref` das props diretamente,
|
|
87
|
+
* evitando o aviso de depreciação.
|
|
88
|
+
*
|
|
89
|
+
* O padrão de autoria dos componentes permanece idêntico para ambas as versões.
|
|
90
|
+
*
|
|
91
|
+
* @example
|
|
92
|
+
* const MyInput = forwardRef<HTMLInputElement, MyInputProps>((props, ref) => {
|
|
93
|
+
* return <input ref={ref} {...props} />;
|
|
94
|
+
* });
|
|
95
|
+
*/
|
|
96
|
+
function forwardRef(render) {
|
|
97
|
+
if (REACT_MAJOR >= 19) {
|
|
98
|
+
const Comp = (props) => {
|
|
99
|
+
const { ref, ...rest } = props;
|
|
100
|
+
return render(rest, ref ?? null);
|
|
101
|
+
};
|
|
102
|
+
const displayName = render.displayName ?? render.name;
|
|
103
|
+
if (displayName) {
|
|
104
|
+
Comp.displayName = displayName;
|
|
105
|
+
}
|
|
106
|
+
return Comp;
|
|
107
|
+
}
|
|
108
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
109
|
+
return React.forwardRef(render);
|
|
110
|
+
}
|
|
111
|
+
|
|
79
112
|
var styles$t = {"tooltipContent":"Tooltip-module__tooltipContent___xycUg","triggerWrapper":"Tooltip-module__triggerWrapper___x83XR"};
|
|
80
113
|
|
|
81
114
|
const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, sideOffset = 10, className, ...rest }) => {
|
|
@@ -84,7 +117,7 @@ const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, s
|
|
|
84
117
|
|
|
85
118
|
var styles$s = {"button":"Button-module__button___18Bed","button-lg":"Button-module__button-lg___-A8B9","button-sm":"Button-module__button-sm___L7aT7","button-filled":"Button-module__button-filled___IQx1z","button-outlined":"Button-module__button-outlined___hLkLN","button-text":"Button-module__button-text___8GFeA","buttonWithIcon":"Button-module__buttonWithIcon___8ehK1","buttonIconPosition-left":"Button-module__buttonIconPosition-left___uOY6b","buttonIconPosition-right":"Button-module__buttonIconPosition-right___eswRS","buttonIconPosition-both":"Button-module__buttonIconPosition-both___1Lith","buttonNoContent":"Button-module__buttonNoContent___Tc9jk","buttonIconOnly":"Button-module__buttonIconOnly___aifk4","buttonIconLeft":"Button-module__buttonIconLeft___RICR3","buttonIconRight":"Button-module__buttonIconRight___71lu2","buttonFullWidth":"Button-module__buttonFullWidth___tXuVE","disabled":"Button-module__disabled___UzdWL","buttonLoading":"Button-module__buttonLoading___RGdNw","buttonContentHidden":"Button-module__buttonContentHidden___CoCiN","buttonLoadingSpinner":"Button-module__buttonLoadingSpinner___oZxEU","spin":"Button-module__spin___kQKH9"};
|
|
86
119
|
|
|
87
|
-
const Button =
|
|
120
|
+
const Button = forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel, disabled = false, onClick, size = 'lg', scale = 1, className, type = 'button', id, icon, fullWidth = false, ariaLabel, iconOnly = false, loading = false, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', ...rest }, ref) => {
|
|
88
121
|
const generatedId = React.useId();
|
|
89
122
|
const componentId = id || generatedId;
|
|
90
123
|
const getComponent = () => {
|
|
@@ -196,7 +229,7 @@ const Button = React.forwardRef(({ as, children, variant = 'filled', iconPositio
|
|
|
196
229
|
}
|
|
197
230
|
return {};
|
|
198
231
|
};
|
|
199
|
-
if (
|
|
232
|
+
if (tooltipText && !loading) {
|
|
200
233
|
return (jsxRuntime.jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: jsxRuntime.jsx(Component, { ...baseProps, ...getNavigationProps(), children: renderContent() }) }));
|
|
201
234
|
}
|
|
202
235
|
return (jsxRuntime.jsx(Component, { ...baseProps, ...getNavigationProps(), children: renderContent() }));
|
|
@@ -2929,6 +2962,7 @@ const ICON_KEY_MAP = {
|
|
|
2929
2962
|
downkeyboard: reactIcons.ChevronDown20Regular,
|
|
2930
2963
|
emoji: reactIcons.Emoji20Regular,
|
|
2931
2964
|
enterNumpad: reactIcons.ArrowImport20Regular,
|
|
2965
|
+
spaceNumpad: reactIcons.Spacebar20Regular,
|
|
2932
2966
|
};
|
|
2933
2967
|
const SHARED_DISPLAY = {
|
|
2934
2968
|
'{capslock}': iconSlot('capslock'),
|
|
@@ -2972,7 +3006,7 @@ const QWERTY_LOWERCASE = [
|
|
|
2972
3006
|
'{numbers} {alt} {space} . {enter}',
|
|
2973
3007
|
];
|
|
2974
3008
|
const NUMPAD = ['1 2 3', '4 5 6', '7 8 9', '{abc} 0 {bksp}'];
|
|
2975
|
-
const NUMPAD_WITH_ENTER = ['1 2 3 -', '4 5 6
|
|
3009
|
+
const NUMPAD_WITH_ENTER = ['1 2 3 -', '4 5 6 {space}', '7 8 9 {bksp}', '{abc} 0 . {enter}'];
|
|
2976
3010
|
const SHARED_LAYOUTS = {
|
|
2977
3011
|
shift: [
|
|
2978
3012
|
'1 2 3 4 5 6 7 8 9 0',
|
|
@@ -3049,19 +3083,22 @@ const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFi
|
|
|
3049
3083
|
computedLayout = replaceKeyWithBlank(computedLayout, '{abc}');
|
|
3050
3084
|
}
|
|
3051
3085
|
if (isFixed) {
|
|
3052
|
-
computedLayout = Object.fromEntries(Object.entries(computedLayout).map(([layoutName, rows]) =>
|
|
3053
|
-
|
|
3054
|
-
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
3086
|
+
computedLayout = Object.fromEntries(Object.entries(computedLayout).map(([layoutName, rows]) => {
|
|
3087
|
+
const hasBksp = rows.some((r) => r.includes('{bksp}'));
|
|
3088
|
+
return [
|
|
3089
|
+
layoutName,
|
|
3090
|
+
rows.map((row) => {
|
|
3091
|
+
const trimmed = row.trim();
|
|
3092
|
+
if (/^[a-zA-ZçÇ]/.test(trimmed) && trimmed.endsWith('{bksp}')) {
|
|
3093
|
+
return '{//} ' + trimmed.replace(/\s*\{bksp\}$/, '') + ' {//}';
|
|
3094
|
+
}
|
|
3095
|
+
if (!hasBksp && /\{(shift|capslock|shiftactivated)\}$/.test(trimmed)) {
|
|
3096
|
+
return trimmed.replace(/\{(shift|capslock|shiftactivated)\}$/, '{bksp}');
|
|
3097
|
+
}
|
|
3098
|
+
return row;
|
|
3099
|
+
}),
|
|
3100
|
+
];
|
|
3101
|
+
}));
|
|
3065
3102
|
}
|
|
3066
3103
|
return computedLayout;
|
|
3067
3104
|
};
|
|
@@ -3564,12 +3601,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange
|
|
|
3564
3601
|
if (heldKey &&
|
|
3565
3602
|
input.length >= currentValue.length + 1 &&
|
|
3566
3603
|
input.startsWith(currentValue) &&
|
|
3567
|
-
input.slice(currentValue.length).
|
|
3604
|
+
[...input.slice(currentValue.length)].every((char) => char === heldKey)) {
|
|
3568
3605
|
syncKeyboardInput(currentValue);
|
|
3569
3606
|
return;
|
|
3570
3607
|
}
|
|
3571
3608
|
if (suppressedKey &&
|
|
3572
|
-
input.length === currentValue.length +
|
|
3609
|
+
input.length === currentValue.length + suppressedKey.length &&
|
|
3573
3610
|
input.endsWith(suppressedKey)) {
|
|
3574
3611
|
suppressNextInputRef.current = null;
|
|
3575
3612
|
syncKeyboardInput(currentValue);
|
|
@@ -3599,6 +3636,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange
|
|
|
3599
3636
|
const display = { ...baseDisplay };
|
|
3600
3637
|
if (numpadWithEnter && isNumpadLayout) {
|
|
3601
3638
|
display['{enter}'] = '<span data-icon-key="enterNumpad"></span>';
|
|
3639
|
+
display['{space}'] = '<span data-icon-key="spaceNumpad"></span>';
|
|
3602
3640
|
}
|
|
3603
3641
|
if (variant === 'fixed') {
|
|
3604
3642
|
display['{bksp}'] = (display['{bksp}'] ?? '').replace(/\s*Apagar$/, '');
|
|
@@ -3674,7 +3712,7 @@ const LabelComponent = ({ children, htmlFor, required = false, tooltip = false,
|
|
|
3674
3712
|
return container;
|
|
3675
3713
|
};
|
|
3676
3714
|
|
|
3677
|
-
const TextField$1 =
|
|
3715
|
+
const TextField$1 = forwardRef(({ className, style, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, icon, scale = 1, onBlur, onFocus, name, virtualKeyboard, attachedToVirtualKeyboard, disableAutoComplete = false, ...rest }, ref) => {
|
|
3678
3716
|
const normalizeValue = (val) => {
|
|
3679
3717
|
return val === undefined || val === null ? '' : String(val);
|
|
3680
3718
|
};
|
|
@@ -3725,7 +3763,7 @@ const TextField$1 = React.forwardRef(({ className, style, value, label, placehol
|
|
|
3725
3763
|
setIsFocused(true);
|
|
3726
3764
|
onFocus?.(e);
|
|
3727
3765
|
}, [onFocus]);
|
|
3728
|
-
const showCustomIcon = (inputValue.trim().length === 0 ||
|
|
3766
|
+
const showCustomIcon = (inputValue.trim().length === 0 || !isFocused) && icon;
|
|
3729
3767
|
const showClearIcon = isFocused && inputValue.trim().length > 0;
|
|
3730
3768
|
const hasError = Boolean(inputError) || Boolean(error);
|
|
3731
3769
|
const displayHelperText = (error ? errorMessage : undefined) || inputError || helperText || '\u00A0';
|
|
@@ -3980,7 +4018,7 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
|
|
|
3980
4018
|
};
|
|
3981
4019
|
return (jsxRuntime.jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsxRuntime.jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsxRuntime.jsx(TextField, { className: styles$h.textfieldContainer, type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
|
|
3982
4020
|
handleTextFieldChange(String(e));
|
|
3983
|
-
}, onKeyDown: handleKeyDown, onFocus: handleFocus,
|
|
4021
|
+
}, onKeyDown: handleKeyDown, onFocus: handleFocus, autoComplete: "off", value: displayValue, helperText: !externalError ? (helperText || undefined) : undefined, errorMessage: externalError ? combinedHelperText : undefined, error: hasValidationError ? true : undefined, maxLength: 10, required: required, label: label, disabled: disabled, scale: scale, id: fieldId, "data-testid": testId, placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": calendarId, "aria-invalid": hasValidationError, "aria-describedby": externalError ? undefined : (helperText ? `${fieldId}-help` : undefined) }), content: jsxRuntime.jsx(Calendar, { selected: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy', minDate: minDate, maxDate: maxDate, scale: scale, id: calendarId, onClear: () => {
|
|
3984
4022
|
handleDateChange(null);
|
|
3985
4023
|
setCurrentDate(new Date());
|
|
3986
4024
|
} }), side: calendarSide, align: calendarAlign, sideOffset: 8 }) }));
|
|
@@ -3989,7 +4027,7 @@ var DatePicker_default = React.memo(DatePicker);
|
|
|
3989
4027
|
|
|
3990
4028
|
var styles$g = {"DialogOverlay":"Dialog-module__DialogOverlay___LEX2O","DialogContent":"Dialog-module__DialogContent___ziVXb","DialogTitle":"Dialog-module__DialogTitle___ay1tD","DialogDescription":"Dialog-module__DialogDescription___odslw","DivButtons":"Dialog-module__DivButtons___BiwX-"};
|
|
3991
4029
|
|
|
3992
|
-
const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsxRuntime.jsx(radixUi.AlertDialog.Root, { open: show, ...rest, children: jsxRuntime.jsxs(radixUi.AlertDialog.Portal, { children: [jsxRuntime.jsx(radixUi.AlertDialog.Overlay, { className: styles$g.DialogOverlay }), jsxRuntime.jsxs(radixUi.AlertDialog.Content, { className: clsx(styles$g.DialogContent, className), children: [jsxRuntime.jsx(radixUi.AlertDialog.Title, { className: styles$g.DialogTitle, children: title }), jsxRuntime.jsx(radixUi.AlertDialog.Description, { className: styles$g.DialogDescription, children: bodyContent }), jsxRuntime.jsxs("div", { className: styles$g.DivButtons, children: [!!(textSecondaryAction && textSecondaryAction.trim()) && (jsxRuntime.jsx(radixUi.AlertDialog.Cancel, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "outlined", ...(onSecondaryAction && { onClick: onSecondaryAction }), children: textSecondaryAction }) })), jsxRuntime.jsx(radixUi.AlertDialog.Action, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "filled", ...(onPrimaryAction && { onClick: onPrimaryAction }), children: textPrimaryAction }) })] })] })] }) }));
|
|
4030
|
+
const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsxRuntime.jsx(radixUi.AlertDialog.Root, { open: show, ...rest, children: jsxRuntime.jsxs(radixUi.AlertDialog.Portal, { children: [jsxRuntime.jsx(radixUi.AlertDialog.Overlay, { className: styles$g.DialogOverlay }), jsxRuntime.jsxs(radixUi.AlertDialog.Content, { className: clsx(styles$g.DialogContent, className), children: [jsxRuntime.jsx(radixUi.AlertDialog.Title, { className: styles$g.DialogTitle, children: title }), jsxRuntime.jsx(radixUi.AlertDialog.Description, { asChild: true, className: styles$g.DialogDescription, children: jsxRuntime.jsx("div", { children: bodyContent }) }), jsxRuntime.jsxs("div", { className: styles$g.DivButtons, children: [!!(textSecondaryAction && textSecondaryAction.trim()) && (jsxRuntime.jsx(radixUi.AlertDialog.Cancel, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "outlined", ...(onSecondaryAction && { onClick: onSecondaryAction }), children: textSecondaryAction }) })), jsxRuntime.jsx(radixUi.AlertDialog.Action, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "filled", ...(onPrimaryAction && { onClick: onPrimaryAction }), children: textPrimaryAction }) })] })] })] }) }));
|
|
3993
4031
|
|
|
3994
4032
|
var styles$f = {"drawerShadow":"Drawer-module__drawerShadow___0Z6iL","drawerShadow--visible":"Drawer-module__drawerShadow--visible___FspoH","drawerSidebar":"Drawer-module__drawerSidebar___cdyyb","drawerSidebar--open":"Drawer-module__drawerSidebar--open___ee2-Y","drawerSidebar--disabled":"Drawer-module__drawerSidebar--disabled___MYrBI","drawerTitleClose":"Drawer-module__drawerTitleClose___QzqN-","drawerTitle":"Drawer-module__drawerTitle___naMX0","drawerChildren":"Drawer-module__drawerChildren___xGdg9","drawerHeaderContent":"Drawer-module__drawerHeaderContent___NLSwj"};
|
|
3995
4033
|
|
|
@@ -4082,7 +4120,7 @@ const matchesAccept = (file, accept) => {
|
|
|
4082
4120
|
return fileType === type;
|
|
4083
4121
|
});
|
|
4084
4122
|
};
|
|
4085
|
-
const FileUpload =
|
|
4123
|
+
const FileUpload = forwardRef(({ value, onChange, helperText, error = false, errorMessage, maxFileSize, maxFilesQuantity, disabled = false, className, id, accept, multiple = true, description = 'Clique ou arraste os arquivos aqui', descriptionErrorMessage = 'Falha ao subir um ou mais arquivos.', ...rest }, ref) => {
|
|
4086
4124
|
const generatedId = React.useId();
|
|
4087
4125
|
const componentId = id || generatedId;
|
|
4088
4126
|
const helperId = `${componentId}-helper`;
|
|
@@ -4244,7 +4282,7 @@ const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled
|
|
|
4244
4282
|
|
|
4245
4283
|
var styles$c = {"search":"Search-module__search___u3QsV","searchLeftIcon":"Search-module__searchLeftIcon___OKOBq","disabled":"Search-module__disabled___adbxO","inputWithClearIcon":"Search-module__inputWithClearIcon___cqvkq","searchClearIcon":"Search-module__searchClearIcon___qX9-h"};
|
|
4246
4284
|
|
|
4247
|
-
const Search =
|
|
4285
|
+
const Search = forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, searchMode = 'instant', onSearch, id, scale = 1, className, style, virtualKeyboard, 'data-testid': testId, ...rest }, ref) => {
|
|
4248
4286
|
const [internalValue, setInternalValue] = React.useState('');
|
|
4249
4287
|
const { internalRef: inputRef, setRefs: setInputRefs } = useInputKeyboardValue(ref);
|
|
4250
4288
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
@@ -4854,9 +4892,9 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4854
4892
|
}, ...rest, children: [search && (jsxRuntime.jsx("div", { className: styles$a.searchWrapper, children: jsxRuntime.jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), jsxRuntime.jsxs("div", { className: styles$a.itemsWrapper, ref: itemsWrapperRef, style: { maxHeight: maxHeightStyle }, children: [filteredItems.length > 0 ? (filteredItems.map((item, index) => renderMenuItem(item, item.value || item.text || `item-${index}`))) : (jsxRuntime.jsx("div", { className: styles$a.emptyState, children: "Nenhum item encontrado" })), enableInfiniteScroll && isLoadingMore && (jsxRuntime.jsx("div", { className: styles$a.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsxRuntime.jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
|
|
4855
4893
|
};
|
|
4856
4894
|
|
|
4857
|
-
var styles$9 = {"modalOverlay":"Modal-module__modalOverlay___rI8Wz","modalContent":"Modal-module__modalContent___6Cgb1","modalContent--fullscreen":"Modal-module__modalContent--fullscreen___QeBlG","modalHeader":"Modal-module__modalHeader___IuHIg","modalTitle":"Modal-module__modalTitle___9VDmr","modalBody":"Modal-module__modalBody___ohjQm","modalFooter":"Modal-module__modalFooter___TEqdK"};
|
|
4895
|
+
var styles$9 = {"modalOverlay":"Modal-module__modalOverlay___rI8Wz","modalContent":"Modal-module__modalContent___6Cgb1","modalContent--fullscreen":"Modal-module__modalContent--fullscreen___QeBlG","modalHeader":"Modal-module__modalHeader___IuHIg","modalCloseButton":"Modal-module__modalCloseButton___VoWHD","modalTitle":"Modal-module__modalTitle___9VDmr","modalBody":"Modal-module__modalBody___ohjQm","modalFooter":"Modal-module__modalFooter___TEqdK"};
|
|
4858
4896
|
|
|
4859
|
-
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, customHeight, fullscreen = false, ...rest }) => {
|
|
4897
|
+
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, customHeight, closingButton = true, fullscreen = false, ...rest }) => {
|
|
4860
4898
|
const contentRef = React__namespace.useRef(null);
|
|
4861
4899
|
const handleOpenChange = (open) => {
|
|
4862
4900
|
if (!open) {
|
|
@@ -4870,7 +4908,7 @@ const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeO
|
|
|
4870
4908
|
return (jsxRuntime.jsx(radixUi.Dialog.Root, { open: isOpen, onOpenChange: handleOpenChange, ...rest, children: jsxRuntime.jsxs(radixUi.Dialog.Portal, { children: [jsxRuntime.jsx(radixUi.Dialog.Overlay, { className: styles$9.modalOverlay }), jsxRuntime.jsxs(radixUi.Dialog.Content, { ref: contentRef, className: clsx(styles$9.modalContent, fullscreen && styles$9['modalContent--fullscreen'], className), id: id, style: {
|
|
4871
4909
|
'--modal-custom-width': customWidth,
|
|
4872
4910
|
'--modal-custom-height': customHeight,
|
|
4873
|
-
}, onInteractOutside: !closeOnOverlayClick ? (e) => e.preventDefault() : undefined, onOpenAutoFocus: handleOpenAutoFocus, "aria-labelledby": id ? `${id}-title` : 'modal-title', tabIndex: -1, children: [jsxRuntime.jsxs("header", { className: styles$9.modalHeader, children: [title && (jsxRuntime.jsx(radixUi.Dialog.Title, { className: styles$9.modalTitle, id: id ? `${id}-title` : 'modal-title', children: title })), headerContent && (jsxRuntime.jsx("div", { children: headerContent })), jsxRuntime.jsx(radixUi.Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "outlined", iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: "lg", tooltipText: 'Fechar' }) })] }), jsxRuntime.jsx("section", { className: styles$9.modalBody, children: children }), footer && (jsxRuntime.jsx("footer", { className: styles$9.modalFooter, children: footer }))] })] }) }));
|
|
4911
|
+
}, onInteractOutside: !closeOnOverlayClick ? (e) => e.preventDefault() : undefined, onOpenAutoFocus: handleOpenAutoFocus, "aria-labelledby": id ? `${id}-title` : 'modal-title', tabIndex: -1, children: [(title || headerContent || closingButton) && (jsxRuntime.jsxs("header", { className: styles$9.modalHeader, children: [title && (jsxRuntime.jsx(radixUi.Dialog.Title, { className: styles$9.modalTitle, id: id ? `${id}-title` : 'modal-title', children: title })), headerContent && (jsxRuntime.jsx("div", { children: headerContent })), closingButton && (jsxRuntime.jsx("div", { className: styles$9.modalCloseButton, children: jsxRuntime.jsx(radixUi.Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "outlined", iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: "lg", tooltipText: 'Fechar' }) }) }))] })), jsxRuntime.jsx("section", { className: styles$9.modalBody, children: children }), footer && (jsxRuntime.jsx("footer", { className: styles$9.modalFooter, children: footer }))] })] }) }));
|
|
4874
4912
|
};
|
|
4875
4913
|
|
|
4876
4914
|
var styles$8 = {"quantity":"Quantity-module__quantity___-vndR","quantityInput":"Quantity-module__quantityInput___xZG-v","disabled":"Quantity-module__disabled___X6p5l"};
|
|
@@ -5146,7 +5184,7 @@ const ExpandableSelectItem = ({ item, variant, onSelect, selectedValues, level =
|
|
|
5146
5184
|
}, role: "button", tabIndex: item.disabled ? -1 : 0, "data-disabled": item.disabled || undefined, "data-selected": isSelected && !hasChildren ? 'true' : undefined, "data-testid": `select-item-${item.value}`, children: [variant === 'icon' && item.icon && (jsxRuntime.jsx("span", { className: styles$6.icon, children: item.icon })), jsxRuntime.jsxs("div", { className: styles$6.textContent, children: [jsxRuntime.jsx("div", { className: styles$6.title, children: item.text }), item.subTitle && jsxRuntime.jsx("div", { className: styles$6.subTitle, children: item.subTitle })] }), hasChildren && (jsxRuntime.jsx("span", { className: styles$6.chevron, children: isExpanded ? jsxRuntime.jsx(reactIcons.ChevronDown16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronRight16Regular, {}) }))] }) }), hasChildren && isExpanded && (jsxRuntime.jsx("div", { className: styles$6.childrenWrapper, children: item.children.map((child) => (jsxRuntime.jsx(ExpandableSelectItem, { item: child, variant: variant, onSelect: onSelect, selectedValues: selectedValues, level: level + 1 }, child.id || child.value))) }))] }));
|
|
5147
5185
|
};
|
|
5148
5186
|
|
|
5149
|
-
const SelectItem =
|
|
5187
|
+
const SelectItem = forwardRef(({ text, subTitle, icon, disabled, value, variant, disableFocusOnHover, ...restProps }, ref) => {
|
|
5150
5188
|
return (jsxRuntime.jsxs("div", { className: clsx(styles$6.itemWrapper, {
|
|
5151
5189
|
[styles$6.disabled]: disabled,
|
|
5152
5190
|
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsxRuntime.jsx("span", { className: styles$6.icon, children: icon })), jsxRuntime.jsxs(radixUi.Select.Item, { className: clsx(styles$6.item, {
|
|
@@ -5388,11 +5426,12 @@ function useSelectLogic({ value, required = false, search = false, onValueChange
|
|
|
5388
5426
|
};
|
|
5389
5427
|
}
|
|
5390
5428
|
|
|
5391
|
-
const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, error, errorMessage, disabled = false, className, style, 'aria-label': ariaLabel, 'data-testid': testId, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false, enableApiSearch = false, onApiSearch, isSearching = false, scale = 1, ...rest }) => {
|
|
5429
|
+
const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, error, errorMessage, disabled = false, className, style, 'aria-label': ariaLabel, 'data-testid': testId, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', enableInfiniteScroll = false, onScrollEnd, hasMore = true, isLoadingMore = false, enableApiSearch = false, onApiSearch, isSearching = false, scale = 1, ...rest }) => {
|
|
5392
5430
|
const componentId = React.useId();
|
|
5393
5431
|
const selectId = `select-${componentId}`;
|
|
5394
5432
|
const viewportRef = React.useRef(null);
|
|
5395
5433
|
const hasReachedEndRef = React.useRef(false);
|
|
5434
|
+
const wasLoadingMoreRef = React.useRef(false);
|
|
5396
5435
|
const { state, actions, refs, utils, } = useSelectLogic({
|
|
5397
5436
|
value,
|
|
5398
5437
|
required,
|
|
@@ -5411,7 +5450,7 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
5411
5450
|
const handleScroll = () => {
|
|
5412
5451
|
const { scrollTop, scrollHeight, clientHeight } = viewport;
|
|
5413
5452
|
const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
|
|
5414
|
-
if (isAtBottom && !hasReachedEndRef.current && onScrollEnd && !isLoadingMore) {
|
|
5453
|
+
if (isAtBottom && !hasReachedEndRef.current && onScrollEnd && !isLoadingMore && hasMore) {
|
|
5415
5454
|
hasReachedEndRef.current = true;
|
|
5416
5455
|
onScrollEnd();
|
|
5417
5456
|
}
|
|
@@ -5423,17 +5462,38 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
5423
5462
|
return () => {
|
|
5424
5463
|
viewport.removeEventListener('scroll', handleScroll);
|
|
5425
5464
|
};
|
|
5426
|
-
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore]);
|
|
5465
|
+
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore, hasMore]);
|
|
5427
5466
|
React.useEffect(() => {
|
|
5428
5467
|
if (state.isOpen && enableInfiniteScroll) {
|
|
5429
5468
|
hasReachedEndRef.current = false;
|
|
5430
5469
|
}
|
|
5431
5470
|
}, [state.isOpen, enableInfiniteScroll]);
|
|
5471
|
+
React.useEffect(() => {
|
|
5472
|
+
if (wasLoadingMoreRef.current && !isLoadingMore && enableInfiniteScroll) {
|
|
5473
|
+
hasReachedEndRef.current = false;
|
|
5474
|
+
}
|
|
5475
|
+
wasLoadingMoreRef.current = isLoadingMore;
|
|
5476
|
+
}, [isLoadingMore, enableInfiniteScroll]);
|
|
5432
5477
|
const displayText = React.useMemo(() => utils.getDisplayText(state.selectedValues, placeholder, variant, items), [state.selectedValues, placeholder, variant, items, utils]);
|
|
5433
5478
|
const filteredItems = React.useMemo(() => {
|
|
5434
5479
|
const termToFilter = enableApiSearch ? state.searchTerm : state.searchInput;
|
|
5435
5480
|
return utils.getFilteredItems(items, termToFilter);
|
|
5436
5481
|
}, [items, state.searchTerm, state.searchInput, enableApiSearch, utils]);
|
|
5482
|
+
React.useEffect(() => {
|
|
5483
|
+
if (!state.isOpen || !enableInfiniteScroll || !onScrollEnd || isLoadingMore)
|
|
5484
|
+
return;
|
|
5485
|
+
const timer = setTimeout(() => {
|
|
5486
|
+
const viewport = viewportRef.current;
|
|
5487
|
+
if (!viewport)
|
|
5488
|
+
return;
|
|
5489
|
+
const { scrollHeight, clientHeight } = viewport;
|
|
5490
|
+
if (scrollHeight <= clientHeight && !hasReachedEndRef.current && hasMore) {
|
|
5491
|
+
hasReachedEndRef.current = true;
|
|
5492
|
+
onScrollEnd();
|
|
5493
|
+
}
|
|
5494
|
+
}, 150);
|
|
5495
|
+
return () => clearTimeout(timer);
|
|
5496
|
+
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore, hasMore, filteredItems.length]);
|
|
5437
5497
|
const containerStyle = React.useMemo(() => ({
|
|
5438
5498
|
maxWidth: maxWidth ? `${maxWidth}px` : undefined,
|
|
5439
5499
|
'--giro-scale': scale,
|
|
@@ -5501,18 +5561,18 @@ const EmptyState = ({ emptyIcon, emptyTitle, emptyText }) => (jsxRuntime.jsxs("d
|
|
|
5501
5561
|
|
|
5502
5562
|
var styles$4 = {"toggle":"ToggleButton-module__toggle___c1Ym-","item":"ToggleButton-module__item___2Qll-","toggle-lg":"ToggleButton-module__toggle-lg___8f3lo","item-lg":"ToggleButton-module__item-lg___479w-","toggle-sm":"ToggleButton-module__toggle-sm___SAGGb","item-sm":"ToggleButton-module__item-sm___4ju--","toggleIconLeft":"ToggleButton-module__toggleIconLeft___VwgKk","toggleWithIcon":"ToggleButton-module__toggleWithIcon___WbCr7","toggleIconOnly":"ToggleButton-module__toggleIconOnly___4iMEp","group":"ToggleButton-module__group___BoR-e"};
|
|
5503
5563
|
|
|
5504
|
-
const Toggle = ({ pressed, defaultPressed, onPressedChange, disabled = false, className,
|
|
5564
|
+
const Toggle = ({ pressed, defaultPressed, onPressedChange, disabled = false, className, label, id, size = 'lg', scale = 1, style, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', icon, iconOnly = false, mode: _mode, selectionType: _type, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, items: _items, ...rest }) => {
|
|
5505
5565
|
const toggle = (jsxRuntime.jsx(radixUi.Toggle.Root, { pressed: pressed, defaultPressed: defaultPressed, onPressedChange: onPressedChange, disabled: disabled, className: clsx(styles$4.toggle, styles$4[`toggle-${size}`], {
|
|
5506
5566
|
[styles$4.toggleIconOnly]: iconOnly,
|
|
5507
5567
|
[styles$4.toggleWithIcon]: !!icon && !iconOnly,
|
|
5508
|
-
}, className), id: id, style: { '--giro-scale': scale, ...style }, ...rest, children: iconOnly ? (jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: icon })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: icon }),
|
|
5568
|
+
}, className), id: id, style: { '--giro-scale': scale, ...style }, ...rest, children: iconOnly ? (jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: icon })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: icon }), label] })) }));
|
|
5509
5569
|
if (tooltipText) {
|
|
5510
5570
|
return (jsxRuntime.jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: toggle }));
|
|
5511
5571
|
}
|
|
5512
5572
|
return toggle;
|
|
5513
5573
|
};
|
|
5514
5574
|
|
|
5515
|
-
const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueChange,
|
|
5575
|
+
const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueChange, disabled = false, items = [], className, id, size = 'lg', scale = 1, style, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', mode: _mode, icon: _icon, iconOnly: _iconOnly, pressed: _pressed, defaultPressed: _defaultPressed, onPressedChange: _onPressedChange, ...rest }) => {
|
|
5516
5576
|
const rootProps = selectionType === 'multiple'
|
|
5517
5577
|
? {
|
|
5518
5578
|
type: 'multiple',
|
|
@@ -5526,11 +5586,10 @@ const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueCha
|
|
|
5526
5586
|
defaultValue: defaultValue,
|
|
5527
5587
|
onValueChange: onValueChange,
|
|
5528
5588
|
};
|
|
5529
|
-
const group = (jsxRuntime.jsx(radixUi.ToggleGroup.Root, { ...rootProps,
|
|
5530
|
-
|
|
5531
|
-
|
|
5532
|
-
|
|
5533
|
-
}), style: { '--giro-scale': scale }, children: item.iconOnly ? (jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon && jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon }), item.label] })) }, item.value))) }));
|
|
5589
|
+
const group = (jsxRuntime.jsx(radixUi.ToggleGroup.Root, { ...rootProps, disabled: disabled, className: clsx(styles$4.group, className), id: id, style: { '--giro-scale': scale, ...style }, ...rest, children: items.map((item) => (jsxRuntime.jsx(radixUi.ToggleGroup.Item, { value: item.value, disabled: item.disabled, className: clsx(styles$4.item, styles$4[`item-${size}`], {
|
|
5590
|
+
[styles$4.toggleIconOnly]: item.iconOnly,
|
|
5591
|
+
[styles$4.toggleWithIcon]: !!item.icon && !item.iconOnly,
|
|
5592
|
+
}), style: { '--giro-scale': scale }, children: item.iconOnly ? (jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon && jsxRuntime.jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon }), item.label] })) }, item.value))) }));
|
|
5534
5593
|
if (tooltipText) {
|
|
5535
5594
|
return (jsxRuntime.jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: group }));
|
|
5536
5595
|
}
|
|
@@ -5747,7 +5806,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5747
5806
|
|
|
5748
5807
|
var styles$3 = {"container":"TextArea-module__container___WEBC-","inputWrapper":"TextArea-module__inputWrapper___-omPx","inputContainer":"TextArea-module__inputContainer___0-jKY","footer":"TextArea-module__footer___7XMlj","helperText":"TextArea-module__helperText___709rD","charCount":"TextArea-module__charCount___zdbxM","error":"TextArea-module__error___DWDms","disabled":"TextArea-module__disabled___lHxCa"};
|
|
5749
5808
|
|
|
5750
|
-
const TextArea =
|
|
5809
|
+
const TextArea = forwardRef(({ className, value, label, placeholder, onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, onBlur, onFocus, name, resize = 'vertical', charCount = false, height, virtualKeyboard, ...rest }, ref) => {
|
|
5751
5810
|
const normalizeValue = (val) => {
|
|
5752
5811
|
return val === undefined || val === null ? '' : String(val);
|
|
5753
5812
|
};
|
|
@@ -5896,13 +5955,19 @@ const useToast = () => {
|
|
|
5896
5955
|
const Toast = ({ id, title, duration = 5000, icon, iconClosed = jsxRuntime.jsx(reactIcons.Dismiss16Filled, {}), automaticClose = true, iconType = "Info", className, ...rest }) => {
|
|
5897
5956
|
const [open, setOpen] = React__namespace.useState(false);
|
|
5898
5957
|
const { dismissToast } = useToastContext();
|
|
5958
|
+
const dismissTimerRef = React__namespace.useRef(null);
|
|
5899
5959
|
React__namespace.useEffect(() => {
|
|
5900
5960
|
setOpen(true);
|
|
5961
|
+
return () => {
|
|
5962
|
+
if (dismissTimerRef.current !== null) {
|
|
5963
|
+
clearTimeout(dismissTimerRef.current);
|
|
5964
|
+
}
|
|
5965
|
+
};
|
|
5901
5966
|
}, []);
|
|
5902
5967
|
const handleOpenChange = (isOpen) => {
|
|
5903
5968
|
setOpen(isOpen);
|
|
5904
5969
|
if (!isOpen && id) {
|
|
5905
|
-
setTimeout(() => dismissToast(id), 200);
|
|
5970
|
+
dismissTimerRef.current = setTimeout(() => dismissToast(id), 200);
|
|
5906
5971
|
}
|
|
5907
5972
|
};
|
|
5908
5973
|
let displayIcon = icon;
|
|
@@ -6328,6 +6393,39 @@ exports.Dialog = Dialog;
|
|
|
6328
6393
|
exports.Drawer = Drawer;
|
|
6329
6394
|
exports.FileUpload = FileUpload;
|
|
6330
6395
|
exports.Filter = Filter;
|
|
6396
|
+
exports.G_Avatar = Avatar;
|
|
6397
|
+
exports.G_Badge = Badge;
|
|
6398
|
+
exports.G_Button = Button;
|
|
6399
|
+
exports.G_Calendar = Calendar;
|
|
6400
|
+
exports.G_Callout = Callout;
|
|
6401
|
+
exports.G_Card = Card;
|
|
6402
|
+
exports.G_Checkbox = Checkbox;
|
|
6403
|
+
exports.G_Chips = MemoizedChips;
|
|
6404
|
+
exports.G_Container = Container;
|
|
6405
|
+
exports.G_DatePicker = DatePicker_default;
|
|
6406
|
+
exports.G_Dialog = Dialog;
|
|
6407
|
+
exports.G_Drawer = Drawer;
|
|
6408
|
+
exports.G_FileUpload = FileUpload;
|
|
6409
|
+
exports.G_Filter = Filter;
|
|
6410
|
+
exports.G_ListItem = ListItem;
|
|
6411
|
+
exports.G_Menu = Menu;
|
|
6412
|
+
exports.G_Modal = Modal;
|
|
6413
|
+
exports.G_Popover = Popover;
|
|
6414
|
+
exports.G_Quantity = memorizedQuantity;
|
|
6415
|
+
exports.G_Radio = Radio;
|
|
6416
|
+
exports.G_Search = Search;
|
|
6417
|
+
exports.G_Select = Select;
|
|
6418
|
+
exports.G_Switch = Switch;
|
|
6419
|
+
exports.G_TableV2 = TableV2;
|
|
6420
|
+
exports.G_TextArea = TextArea_default;
|
|
6421
|
+
exports.G_TextField = TextField;
|
|
6422
|
+
exports.G_Toast = Toast;
|
|
6423
|
+
exports.G_ToastContainer = ToastContainer;
|
|
6424
|
+
exports.G_ToastProvider = ToastProvider;
|
|
6425
|
+
exports.G_ToggleButton = ToggleButton;
|
|
6426
|
+
exports.G_Tooltip = Tooltip;
|
|
6427
|
+
exports.G_VerificationCode = VerificationCode;
|
|
6428
|
+
exports.G_VirtualKeyboard = VirtualKeyboard;
|
|
6331
6429
|
exports.ListItem = ListItem;
|
|
6332
6430
|
exports.Menu = Menu;
|
|
6333
6431
|
exports.Modal = Modal;
|