@giro-ds/react 7.0.0 → 9.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +137 -63
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +127 -20
- package/dist/index.esm.js +136 -65
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +2 -2
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2556,7 +2556,7 @@ const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, o
|
|
|
2556
2556
|
|
|
2557
2557
|
var styles$n = {"container":"Callout-module__container___dggFW","withTitle":"Callout-module__withTitle___e-HEg","brand":"Callout-module__brand___YHDPQ","success":"Callout-module__success___RPS0Q","alert":"Callout-module__alert___LVlJM","content":"Callout-module__content___g44Qz","icon":"Callout-module__icon___4CBkz","subcontent":"Callout-module__subcontent___5hz-f","title":"Callout-module__title___IPSdE","text":"Callout-module__text___0Ys48","dismiss":"Callout-module__dismiss___ZaycS"};
|
|
2558
2558
|
|
|
2559
|
-
const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, backgroundColor, textColor, className, id, ...rest }) => {
|
|
2559
|
+
const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, backgroundColor, textColor, className, id, style, ...rest }) => {
|
|
2560
2560
|
if (process.env.NODE_ENV !== 'production' && (text === '' || (typeof text === 'string' && !text.trim()))) {
|
|
2561
2561
|
console.warn('[Callout] A prop `text` não pode ser uma string vazia.');
|
|
2562
2562
|
}
|
|
@@ -2566,6 +2566,7 @@ const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, b
|
|
|
2566
2566
|
const isAlert = variant === 'alert';
|
|
2567
2567
|
const containerClass = clsx(styles$n.container, styles$n[variant], { [styles$n.withTitle]: title }, className);
|
|
2568
2568
|
const customStyle = {
|
|
2569
|
+
...style,
|
|
2569
2570
|
...(backgroundColor && { '--callout-bg': `var(--${backgroundColor})` }),
|
|
2570
2571
|
...(textColor && { '--callout-text': `var(--${textColor})` }),
|
|
2571
2572
|
};
|
|
@@ -2634,8 +2635,14 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
|
2634
2635
|
|
|
2635
2636
|
var styles$h = {"labelContainer":"index-module__labelContainer___WGyDF","wrapperLabel":"index-module__wrapperLabel___XJzZO","requiredLabel":"index-module__requiredLabel___7oZkh","infoIcon":"index-module__infoIcon___lClx4","errorIcon":"index-module__errorIcon___yN-lq","disabledIcon":"index-module__disabledIcon___89Os7","errorLabel":"index-module__errorLabel___qa6h6","disabledLabel":"index-module__disabledLabel___U9vL8","disabledContainer":"index-module__disabledContainer___MtOvy"};
|
|
2636
2637
|
|
|
2637
|
-
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) =>
|
|
2638
|
-
|
|
2638
|
+
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) => {
|
|
2639
|
+
const container = (jsxRuntime.jsxs("div", { className: clsx(styles$h.labelContainer, disabled && styles$h.disabledContainer), children: [jsxRuntime.jsxs(radixUi.Label.Root, { className: clsx(styles$h.wrapperLabel, error && !disabled && styles$h.errorLabel, disabled && styles$h.disabledLabel, className), htmlFor: htmlFor, children: [children, required && jsxRuntime.jsx("span", { className: styles$h.requiredLabel, children: "*" })] }), tooltip && (jsxRuntime.jsx("span", { className: disabled ? styles$h.disabledIcon : error ?
|
|
2640
|
+
styles$h.errorIcon : styles$h.infoIcon, children: jsxRuntime.jsx(reactIcons.Info12Regular, {}) }))] }));
|
|
2641
|
+
if (tooltip) {
|
|
2642
|
+
return (jsxRuntime.jsx(Tooltip, { side: side, align: align, text: tooltipText || '', children: container }));
|
|
2643
|
+
}
|
|
2644
|
+
return container;
|
|
2645
|
+
};
|
|
2639
2646
|
|
|
2640
2647
|
const TextField$1 = React.forwardRef(({ className, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength = 30, required = false, helperText, tooltip = false, tooltipText, side = 'bottom', align = 'start', errorMessage, error, id, icon, onBlur, onFocus, name, persistIcon = false, ...rest }, ref) => {
|
|
2641
2648
|
const normalizeValue = (val) => {
|
|
@@ -2948,7 +2955,7 @@ const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecon
|
|
|
2948
2955
|
|
|
2949
2956
|
var styles$e = {"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"};
|
|
2950
2957
|
|
|
2951
|
-
const Drawer = ({ children, headerContent, customWidth = '400px', onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = false, onOverlayClick, closeOnOverlayClick = true, closeOnEscape = true, ...rest }) => {
|
|
2958
|
+
const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = false, onOverlayClick, closeOnOverlayClick = true, closeOnEscape = true, ...rest }) => {
|
|
2952
2959
|
const internalClose = React.useCallback(() => {
|
|
2953
2960
|
if (disabled)
|
|
2954
2961
|
return;
|
|
@@ -3002,12 +3009,34 @@ const Drawer = ({ children, headerContent, customWidth = '400px', onClose, title
|
|
|
3002
3009
|
[styles$e['drawerSidebar--disabled']]: disabled,
|
|
3003
3010
|
}, className), style: {
|
|
3004
3011
|
'--drawer-custom-width': customWidth,
|
|
3005
|
-
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, ...rest, children: [jsxRuntime.jsxs("div", { className: styles$e.drawerTitleClose, children: [jsxRuntime.jsx("div", { className: styles$e.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsxRuntime.jsx("div", { className: styles$e.drawerHeaderContent, children: headerContent })), jsxRuntime.jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsxRuntime.jsx("div", { className: styles$e.drawerChildren, "data-testid": "drawer-content", children: children })] })] }), document.body);
|
|
3012
|
+
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, ...rest, children: [jsxRuntime.jsxs("div", { className: styles$e.drawerTitleClose, children: [jsxRuntime.jsx("div", { className: styles$e.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsxRuntime.jsx("div", { className: styles$e.drawerHeaderContent, children: headerContent })), jsxRuntime.jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsxRuntime.jsx("div", { className: styles$e.drawerChildren, "data-testid": "drawer-content", children: children }), footer] })] }), document.body);
|
|
3006
3013
|
};
|
|
3007
3014
|
|
|
3008
|
-
var styles$d = {"search":"
|
|
3015
|
+
var styles$d = {"container":"Filter-module__container___cqntK","panel":"Filter-module__panel___19HqD","search":"Filter-module__search___f0gzj","list":"Filter-module__list___UpBk1","item":"Filter-module__item___oNdeY","itemSelected":"Filter-module__itemSelected___JIpJV","itemText":"Filter-module__itemText___RS--0","itemDisabled":"Filter-module__itemDisabled___X-ktg","itemIcon":"Filter-module__itemIcon___RjJSa","noResults":"Filter-module__noResults___3m6pn","footer":"Filter-module__footer___yYS5j","buttonContent":"Filter-module__buttonContent___28fKe","buttonArrow":"Filter-module__buttonArrow___VJlpc","buttonIcon":"Filter-module__buttonIcon___OOBpZ","triggerWrapper":"Filter-module__triggerWrapper___ptPRL","triggerContent":"Filter-module__triggerContent___LYo9j","body":"Filter-module__body___qsyhk","combinedFooter":"Filter-module__combinedFooter___kTnHP"};
|
|
3009
3016
|
|
|
3010
|
-
const
|
|
3017
|
+
const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled = false, className, title = 'Filtrar', drawerWidth = "fit-content", activeCount = 0, drawerHeaderContent, children, onApply, onClear, onOpen, onClose, id, ...rest }) => {
|
|
3018
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
3019
|
+
const handleOpen = React.useCallback(() => {
|
|
3020
|
+
setIsOpen(true);
|
|
3021
|
+
onOpen?.();
|
|
3022
|
+
}, [onOpen]);
|
|
3023
|
+
const handleClose = React.useCallback(() => {
|
|
3024
|
+
setIsOpen(false);
|
|
3025
|
+
onClose?.();
|
|
3026
|
+
}, [onClose]);
|
|
3027
|
+
const handleApply = React.useCallback(() => {
|
|
3028
|
+
onApply?.();
|
|
3029
|
+
handleClose();
|
|
3030
|
+
}, [onApply, handleClose]);
|
|
3031
|
+
const handleClear = React.useCallback(() => {
|
|
3032
|
+
onClear?.();
|
|
3033
|
+
}, [onClear]);
|
|
3034
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$d.triggerWrapper, className), id: id, ...rest, children: [jsxRuntime.jsx(Button, { variant: variant, disabled: disabled, icon: icon ?? jsxRuntime.jsx(reactIcons.FilterRegular, {}), iconPosition: "left", onClick: handleOpen, children: jsxRuntime.jsxs("span", { className: styles$d.triggerContent, children: [buttonText, activeCount > 0 && (jsxRuntime.jsx(Badge, { badgeValue: activeCount, filterVariant: true }))] }) }), jsxRuntime.jsx(Drawer, { isOpen: isOpen, onClose: handleClose, title: title, customWidth: drawerWidth, closeOnOverlayClick: true, closeOnEscape: true, headerContent: drawerHeaderContent, footer: jsxRuntime.jsxs("div", { className: styles$d.combinedFooter, children: [jsxRuntime.jsx(Button, { variant: "outlined", onClick: handleClear, children: "Limpar" }), jsxRuntime.jsx(Button, { onClick: handleApply, children: "Aplicar" })] }), children: jsxRuntime.jsx("div", { className: styles$d.body, children: children }) })] }));
|
|
3035
|
+
};
|
|
3036
|
+
|
|
3037
|
+
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"};
|
|
3038
|
+
|
|
3039
|
+
const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, searchMode = 'instant', onSearch, id, className, 'data-testid': testId, ...rest }, ref) => {
|
|
3011
3040
|
const [internalValue, setInternalValue] = React.useState('');
|
|
3012
3041
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
3013
3042
|
const currentValue = isControlled ? value : internalValue;
|
|
@@ -3022,6 +3051,9 @@ const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado',
|
|
|
3022
3051
|
else {
|
|
3023
3052
|
setInternalValue(e.target.value);
|
|
3024
3053
|
}
|
|
3054
|
+
if (searchMode === 'instant') {
|
|
3055
|
+
onSearch?.(e.target.value);
|
|
3056
|
+
}
|
|
3025
3057
|
};
|
|
3026
3058
|
const handleFocus = (e) => {
|
|
3027
3059
|
if (disabled)
|
|
@@ -3051,20 +3083,21 @@ const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado',
|
|
|
3051
3083
|
const handleKeyDown = (e) => {
|
|
3052
3084
|
if (disabled)
|
|
3053
3085
|
return;
|
|
3086
|
+
if (searchMode === 'on-enter' && e.key === 'Enter') {
|
|
3087
|
+
onSearch?.(currentValue || '');
|
|
3088
|
+
}
|
|
3054
3089
|
onKeyDown?.(e);
|
|
3055
3090
|
};
|
|
3056
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$
|
|
3091
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$c.search, { [styles$c.disabled]: disabled }, className), onClick: onClick, onMouseDown: onMouseDown, role: onClick || onMouseDown ? "button" : undefined, tabIndex: onClick || onMouseDown ? 0 : undefined, onKeyDown: onClick || onMouseDown ? (e) => {
|
|
3057
3092
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
3058
3093
|
e.preventDefault();
|
|
3059
3094
|
onClick?.(e);
|
|
3060
3095
|
}
|
|
3061
|
-
} : undefined, children: [jsxRuntime.jsx("span", { className: clsx(styles$
|
|
3096
|
+
} : undefined, children: [jsxRuntime.jsx("span", { className: clsx(styles$c.searchLeftIcon, { [styles$c.disabled]: disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsxRuntime.jsx(reactIcons.Search16Regular, {}) }), jsxRuntime.jsx("input", { ref: ref, id: inputId, type: "text", placeholder: placeholder, "aria-label": placeholder, value: currentValue || '', onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, "data-testid": testId, ...rest, className: clsx({ [styles$c.inputWithClearIcon]: currentValue && currentValue.length > 0 }) }), currentValue && currentValue.length > 0 && (jsxRuntime.jsx("span", { className: styles$c.searchClearIcon, "aria-hidden": "true", onClick: clearInputSearch, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}) }))] }));
|
|
3062
3097
|
});
|
|
3063
3098
|
Search.displayName = 'Search';
|
|
3064
3099
|
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placeholder = 'Selecionar...', enableSearch = false, buttonText = 'Filter', icon, variant = 'outlined', onOpen, onClose, side = 'bottom', align = 'start', disabled = false, className, selectedDate, onDateSelect, onClearDate, minDate, maxDate, locale = 'pt-br', id, ...rest }) => {
|
|
3100
|
+
const Simple = ({ items, type = 'multiple', selectedIds, onApplyFilter, placeholder = 'Selecionar...', enableSearch = false, buttonText = 'Filter', icon, variant = 'outlined', onOpen, onClose, side = 'bottom', align = 'start', disabled = false, className, selectedDate, onDateSelect, onClearDate, minDate, maxDate, locale = 'pt-br', id, ...rest }) => {
|
|
3068
3101
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
3069
3102
|
const [tempSelectedItems, setTempSelectedItems] = React.useState({});
|
|
3070
3103
|
const [searchQuery, setSearchQuery] = React.useState('');
|
|
@@ -3107,7 +3140,7 @@ const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placehol
|
|
|
3107
3140
|
if (item.disabled)
|
|
3108
3141
|
return;
|
|
3109
3142
|
setTempSelectedItems((prev) => {
|
|
3110
|
-
if (type === '
|
|
3143
|
+
if (type === 'multiple') {
|
|
3111
3144
|
return { ...prev, [itemId]: !prev[itemId] };
|
|
3112
3145
|
}
|
|
3113
3146
|
return prev[itemId] ? {} : { [itemId]: true };
|
|
@@ -3155,24 +3188,31 @@ const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placehol
|
|
|
3155
3188
|
return null;
|
|
3156
3189
|
return selectedIds.length - 1;
|
|
3157
3190
|
}, [selectedIds]);
|
|
3158
|
-
const filterClass = clsx(styles$
|
|
3159
|
-
const triggerButton = (jsxRuntime.jsx(Button, { variant: variant, disabled: disabled, icon: type === 'calendar' ? jsxRuntime.jsx(reactIcons.Calendar16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxRuntime.jsxs("div", { className: styles$
|
|
3160
|
-
const popoverContent = type === 'calendar' ? (jsxRuntime.jsx(Calendar, { currentDate: currentCalendarDate, selected: selectedDate, onDaySelect: handleDateSelection, onDateChange: handleCalendarNavigation, minDate: minDate, maxDate: maxDate, locale: locale, onClear: handleClear, id: `filter-calendar-${id || ''}`, "aria-label": "Selecionar data para filtro" })) : (jsxRuntime.jsxs("div", { className: styles$
|
|
3191
|
+
const filterClass = clsx(styles$d.container, className);
|
|
3192
|
+
const triggerButton = (jsxRuntime.jsx(Button, { variant: variant, disabled: disabled, icon: type === 'calendar' ? jsxRuntime.jsx(reactIcons.Calendar16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxRuntime.jsxs("div", { className: styles$d.buttonContent, children: [icon && jsxRuntime.jsx("span", { className: styles$d.buttonIcon, children: icon }), jsxRuntime.jsx("span", { className: styles$d.buttonText, children: buttonDisplayText }), jsxRuntime.jsx("span", { className: clsx(styles$d.buttonArrow, { [styles$d.buttonArrowOpen]: isOpen }), children: getBadgeValue() && (jsxRuntime.jsx(Badge, { badgeValue: `+${getBadgeValue()}`, filterVariant: true })) })] }) }));
|
|
3193
|
+
const popoverContent = type === 'calendar' ? (jsxRuntime.jsx(Calendar, { currentDate: currentCalendarDate, selected: selectedDate, onDaySelect: handleDateSelection, onDateChange: handleCalendarNavigation, minDate: minDate, maxDate: maxDate, locale: locale, onClear: handleClear, id: `filter-calendar-${id || ''}`, "aria-label": "Selecionar data para filtro" })) : (jsxRuntime.jsxs("div", { className: styles$d.panel, children: [searchVisible && (jsxRuntime.jsx("div", { className: styles$d.search, children: jsxRuntime.jsx(Search, { value: searchQuery, placeholder: placeholder, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: () => setSearchQuery('') }) })), jsxRuntime.jsx("ul", { className: styles$d.list, role: "listbox", "aria-multiselectable": type === 'multiple', children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
|
|
3161
3194
|
const itemId = item.id || `filter-item-${index}`;
|
|
3162
3195
|
const isSelected = !!tempSelectedItems[itemId];
|
|
3163
|
-
return (jsxRuntime.jsxs("li", { role: "option", "aria-selected": isSelected, "aria-disabled": item.disabled, className: clsx(styles$
|
|
3164
|
-
[styles$
|
|
3165
|
-
[styles$
|
|
3196
|
+
return (jsxRuntime.jsxs("li", { role: "option", "aria-selected": isSelected, "aria-disabled": item.disabled, className: clsx(styles$d.item, {
|
|
3197
|
+
[styles$d.itemSelected]: isSelected,
|
|
3198
|
+
[styles$d.itemDisabled]: item.disabled,
|
|
3166
3199
|
}), onMouseDown: (e) => e.preventDefault(), onClick: () => toggleItem(itemId, item), onKeyDown: (e) => {
|
|
3167
3200
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
3168
3201
|
e.preventDefault();
|
|
3169
3202
|
toggleItem(itemId, item);
|
|
3170
3203
|
}
|
|
3171
|
-
}, children: [type === '
|
|
3172
|
-
})) : (jsxRuntime.jsx("li", { className: styles$
|
|
3204
|
+
}, children: [type === 'multiple' && (jsxRuntime.jsx(Checkbox, { checked: isSelected, disabled: item.disabled, label: "" })), item.icon && (jsxRuntime.jsx("span", { className: styles$d.itemIcon, children: item.icon })), jsxRuntime.jsx("span", { className: styles$d.itemText, children: item.text })] }, itemId));
|
|
3205
|
+
})) : (jsxRuntime.jsx("li", { className: styles$d.noResults, role: "status", "aria-live": "polite", children: "Nenhum item encontrado" })) }), jsxRuntime.jsxs("div", { className: styles$d.footer, children: [jsxRuntime.jsx(Button, { fullWidth: true, variant: "outlined", onClick: handleClearFilter, children: "Limpar" }), jsxRuntime.jsx(Button, { fullWidth: true, onClick: handleApplyFilter, children: "Aplicar" })] })] }));
|
|
3173
3206
|
return (jsxRuntime.jsx("div", { className: filterClass, id: id, ...rest, children: jsxRuntime.jsx(Popover, { open: isOpen, onOpenChange: handleOpenChange, side: side, align: align, onOpenAutoFocus: (e) => e.preventDefault(), trigger: triggerButton, content: popoverContent }) }));
|
|
3174
3207
|
};
|
|
3175
3208
|
|
|
3209
|
+
const Filter = ({ mode = 'simple', ...props }) => {
|
|
3210
|
+
if (mode === 'combined') {
|
|
3211
|
+
return jsxRuntime.jsx(Combined, { ...props });
|
|
3212
|
+
}
|
|
3213
|
+
return jsxRuntime.jsx(Simple, { ...props });
|
|
3214
|
+
};
|
|
3215
|
+
|
|
3176
3216
|
var styles$b = {"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"};
|
|
3177
3217
|
|
|
3178
3218
|
var styles$a = {"root":"Radio-module__root___7ElY2","wrapper":"Radio-module__wrapper___NYQ1y","disabled":"Radio-module__disabled___RZ0be","labelText":"Radio-module__labelText___Wkb41","item":"Radio-module__item___3Kvj7","itemWrapper":"Radio-module__itemWrapper___5KbM1","labelWrapper":"Radio-module__labelWrapper___LOHmJ","indicator":"Radio-module__indicator___TJ5hz"};
|
|
@@ -4335,7 +4375,7 @@ const isCalendarFilter = (filter) => {
|
|
|
4335
4375
|
return filter.type === 'calendar';
|
|
4336
4376
|
};
|
|
4337
4377
|
const isCheckboxFilter = (filter) => {
|
|
4338
|
-
return filter.type === '
|
|
4378
|
+
return filter.type === 'multiple' || filter.type === 'single';
|
|
4339
4379
|
};
|
|
4340
4380
|
const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceholder = 'Pesquisar...', showSearch = true, showFilters = false, filters, filterItems = [], className = '', ...rest }) => {
|
|
4341
4381
|
const [internalSearchValue, setInternalSearchValue] = React.useState(searchValue);
|
|
@@ -4412,12 +4452,24 @@ var styles$4 = {"wrapper":"Table-module__wrapper___KMc04","tableContainer":"Tabl
|
|
|
4412
4452
|
|
|
4413
4453
|
const EmptyState = ({ emptyIcon, emptyTitle, emptyText }) => (jsxRuntime.jsxs("div", { className: styles$4.tableEmpty, children: [jsxRuntime.jsx("div", { className: styles$4.tableEmptyContent, children: emptyIcon ?? jsxRuntime.jsx(reactIcons.SearchInfo20Regular, {}) }), jsxRuntime.jsxs("div", { className: styles$4.tableEmptyText, children: [jsxRuntime.jsx("h3", { className: styles$4.tableEmptyTitle, children: emptyTitle ?? 'Nenhum dado encontrado' }), jsxRuntime.jsx("p", { className: styles$4.tableEmptyCaption, children: emptyText ?? 'Nenhum registro encontrado' })] })] }));
|
|
4414
4454
|
|
|
4415
|
-
const TableV2 = ({ columns, data,
|
|
4416
|
-
const
|
|
4417
|
-
const
|
|
4418
|
-
const [
|
|
4455
|
+
const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSorting = true, bulkActions, header, footer, loading = false, emptyIcon, emptyTitle, emptyText, onRow, className, }) => {
|
|
4456
|
+
const isRowSelectionEnabled = !!rowSelectionConfig;
|
|
4457
|
+
const isControlled = rowSelectionConfig?.selectedRowKeys !== undefined;
|
|
4458
|
+
const [pendingSearch, setPendingSearch] = React.useState(header?.searchValue ?? '');
|
|
4459
|
+
React.useEffect(() => {
|
|
4460
|
+
if (header?.searchValue !== undefined) {
|
|
4461
|
+
setPendingSearch(header.searchValue);
|
|
4462
|
+
}
|
|
4463
|
+
}, [header?.searchValue]);
|
|
4464
|
+
const [rowSelectionState, setRowSelectionState] = React.useState({});
|
|
4419
4465
|
const rowSelectionRef = React.useRef({});
|
|
4420
|
-
|
|
4466
|
+
const externalSelectionState = React.useMemo(() => {
|
|
4467
|
+
if (!rowSelectionConfig?.selectedRowKeys)
|
|
4468
|
+
return {};
|
|
4469
|
+
return Object.fromEntries(rowSelectionConfig.selectedRowKeys.map((key) => [String(key), true]));
|
|
4470
|
+
}, [rowSelectionConfig?.selectedRowKeys]);
|
|
4471
|
+
const effectiveRowSelection = isControlled ? externalSelectionState : rowSelectionState;
|
|
4472
|
+
rowSelectionRef.current = effectiveRowSelection;
|
|
4421
4473
|
const lastEmittedSelectionKey = React.useRef('{}');
|
|
4422
4474
|
const [sorting, setSorting] = React.useState([]);
|
|
4423
4475
|
const [pagination, setPagination] = React.useState({
|
|
@@ -4430,27 +4482,22 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4430
4482
|
size: 48,
|
|
4431
4483
|
enableSorting: false,
|
|
4432
4484
|
enableColumnFilter: false,
|
|
4433
|
-
header: ({ table: t }) => (jsxRuntime.jsx("div", { className: styles$4.checkboxCell, children: jsxRuntime.jsx(Checkbox, { checked: t.getIsAllPageRowsSelected(), indeterminate: t.getIsSomePageRowsSelected(), onCheckedChange: (checked) => t.toggleAllPageRowsSelected(checked) }) })),
|
|
4434
|
-
cell: ({ row }) => (jsxRuntime.jsx("div", { className: styles$4.checkboxCell, children: jsxRuntime.jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (checked) => row.toggleSelected(checked) }) })),
|
|
4435
|
-
}), []);
|
|
4436
|
-
const resolvedColumns = React.useMemo(() => (
|
|
4437
|
-
const showSearch = !!(header
|
|
4485
|
+
header: ({ table: t }) => (jsxRuntime.jsx("div", { className: styles$4.checkboxCell, children: jsxRuntime.jsx(Checkbox, { checked: t.getIsAllPageRowsSelected(), indeterminate: t.getIsSomePageRowsSelected(), disabled: rowSelectionConfig?.disableSelectAll, onCheckedChange: (checked) => t.toggleAllPageRowsSelected(checked) }) })),
|
|
4486
|
+
cell: ({ row }) => (jsxRuntime.jsx("div", { className: styles$4.checkboxCell, children: jsxRuntime.jsx(Checkbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (checked) => row.toggleSelected(checked) }) })),
|
|
4487
|
+
}), [rowSelectionConfig?.disableSelectAll]);
|
|
4488
|
+
const resolvedColumns = React.useMemo(() => (isRowSelectionEnabled ? [selectionColumn, ...columns] : columns), [isRowSelectionEnabled, selectionColumn, columns]);
|
|
4489
|
+
const showSearch = !!(header?.onSearchChange);
|
|
4438
4490
|
const table = reactTable.useReactTable({
|
|
4439
4491
|
data,
|
|
4440
4492
|
columns: resolvedColumns,
|
|
4441
4493
|
defaultColumn: { minSize: 44, size: 0 },
|
|
4442
4494
|
state: {
|
|
4443
|
-
...(
|
|
4444
|
-
...(showSearch ? { globalFilter } : {}),
|
|
4445
|
-
...(footer ? { pagination: { pageIndex, pageSize } } : {}),
|
|
4446
|
-
...(enableRowSelection ? { rowSelection } : {}),
|
|
4495
|
+
...(isRowSelectionEnabled ? { rowSelection: effectiveRowSelection } : {}),
|
|
4447
4496
|
...(enableSorting ? { sorting } : {}),
|
|
4448
4497
|
},
|
|
4449
|
-
onColumnFiltersChange: enableFilters ? setColumnFilters : undefined,
|
|
4450
|
-
onGlobalFilterChange: showSearch ? setGlobalFilter : undefined,
|
|
4451
4498
|
onSortingChange: enableSorting ? setSorting : undefined,
|
|
4452
4499
|
enableSorting,
|
|
4453
|
-
onRowSelectionChange:
|
|
4500
|
+
onRowSelectionChange: isRowSelectionEnabled
|
|
4454
4501
|
? (updater) => {
|
|
4455
4502
|
const prev = rowSelectionRef.current;
|
|
4456
4503
|
const next = typeof updater === 'function' ? updater(prev) : updater;
|
|
@@ -4459,43 +4506,52 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4459
4506
|
return;
|
|
4460
4507
|
lastEmittedSelectionKey.current = selectionKey;
|
|
4461
4508
|
rowSelectionRef.current = next;
|
|
4462
|
-
|
|
4463
|
-
|
|
4464
|
-
|
|
4465
|
-
|
|
4466
|
-
|
|
4467
|
-
|
|
4468
|
-
|
|
4509
|
+
if (!isControlled) {
|
|
4510
|
+
setRowSelectionState(next);
|
|
4511
|
+
}
|
|
4512
|
+
if (rowSelectionConfig?.onRowChange) {
|
|
4513
|
+
const allRows = table.getCoreRowModel().rows;
|
|
4514
|
+
const selectedRows = allRows.filter((r) => next[r.id]).map((r) => r.original);
|
|
4515
|
+
const selectedKeys = allRows.filter((r) => next[r.id]).map((r) => r.index);
|
|
4516
|
+
rowSelectionConfig.onRowChange(selectedRows, selectedKeys);
|
|
4469
4517
|
}
|
|
4470
4518
|
}
|
|
4471
4519
|
: undefined,
|
|
4472
|
-
enableRowSelection
|
|
4473
|
-
|
|
4520
|
+
enableRowSelection: isRowSelectionEnabled
|
|
4521
|
+
? typeof rowSelectionConfig?.disabled === 'function'
|
|
4522
|
+
? (row) => !rowSelectionConfig.disabled(row.original, row.index)
|
|
4523
|
+
: typeof rowSelectionConfig?.disabled === 'boolean'
|
|
4524
|
+
? !rowSelectionConfig.disabled
|
|
4525
|
+
: true
|
|
4526
|
+
: false,
|
|
4474
4527
|
getCoreRowModel: reactTable.getCoreRowModel(),
|
|
4475
|
-
getFilteredRowModel: enableFilters || showSearch ? reactTable.getFilteredRowModel() : undefined,
|
|
4476
|
-
getPaginationRowModel: footer ? reactTable.getPaginationRowModel() : undefined,
|
|
4477
4528
|
getSortedRowModel: enableSorting ? reactTable.getSortedRowModel() : undefined,
|
|
4478
4529
|
});
|
|
4479
|
-
const
|
|
4480
|
-
const effectiveTotalItems = footer
|
|
4481
|
-
? (enableFilters || showSearch) ? filteredRowCount : footer.totalItems
|
|
4482
|
-
: 0;
|
|
4530
|
+
const effectiveTotalItems = footer?.totalItems ?? 0;
|
|
4483
4531
|
const totalPages = footer ? Math.ceil(effectiveTotalItems / pageSize) : 0;
|
|
4484
4532
|
const canGoPrev = pageIndex > 0;
|
|
4485
4533
|
const canGoNext = pageIndex + 1 < totalPages;
|
|
4486
4534
|
const skeletonRowCount = footer ? pageSize : (data.length > 0 ? data.length : pageSize);
|
|
4487
4535
|
const selectedRows = React.useMemo(() => table
|
|
4488
4536
|
.getCoreRowModel()
|
|
4489
|
-
.rows.filter((r) =>
|
|
4490
|
-
.map((r) => r.original), [
|
|
4537
|
+
.rows.filter((r) => effectiveRowSelection[r.id])
|
|
4538
|
+
.map((r) => r.original), [effectiveRowSelection, table]);
|
|
4491
4539
|
const selectedCount = selectedRows.length;
|
|
4492
|
-
const showBulkActions =
|
|
4540
|
+
const showBulkActions = isRowSelectionEnabled && !!bulkActions && selectedCount > 0;
|
|
4493
4541
|
React.useEffect(() => {
|
|
4494
|
-
if (
|
|
4542
|
+
if (isRowSelectionEnabled) {
|
|
4495
4543
|
table.resetRowSelection();
|
|
4496
4544
|
}
|
|
4497
4545
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4498
4546
|
}, [pageIndex]);
|
|
4547
|
+
React.useEffect(() => {
|
|
4548
|
+
if (footer?.currentPage !== undefined) {
|
|
4549
|
+
const targetPageIndex = footer.currentPage - 1;
|
|
4550
|
+
setPagination((prev) => prev.pageIndex !== targetPageIndex
|
|
4551
|
+
? { ...prev, pageIndex: targetPageIndex }
|
|
4552
|
+
: prev);
|
|
4553
|
+
}
|
|
4554
|
+
}, [footer?.currentPage]);
|
|
4499
4555
|
const handleClearSelection = () => {
|
|
4500
4556
|
table.resetRowSelection();
|
|
4501
4557
|
bulkActions?.onClear?.();
|
|
@@ -4507,10 +4563,21 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4507
4563
|
};
|
|
4508
4564
|
return (jsxRuntime.jsxs("div", { className: clsx(styles$4.wrapper, className), children: [showBulkActions && (jsxRuntime.jsxs("div", { className: styles$4.bulkActionsBar, children: [jsxRuntime.jsxs("div", { className: styles$4.bulkActionsInfo, children: [jsxRuntime.jsx(Button, { variant: "text", iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), ariaLabel: "Limpar sele\u00E7\u00E3o", onClick: handleClearSelection, className: styles$4.bulkActionsClearButton }), jsxRuntime.jsx("span", { className: styles$4.bulkActionsLabel, children: bulkActions.label
|
|
4509
4565
|
? bulkActions.label(selectedCount, selectedRows)
|
|
4510
|
-
: `${selectedCount} ${selectedCount === 1 ? 'item selecionado' : 'itens selecionados'}` })] }), jsxRuntime.jsx("div", { className: styles$4.bulkActionsButtons, children: bulkActions.actions.map((action, index) => (jsxRuntime.jsx(Button, { variant: action.variant ?? 'outlined', type: "button", disabled: action.disabled, onClick: action.onClick, size: "sm", children: action.label }, index))) })] })), header && (jsxRuntime.jsxs("div", { className: styles$4.tableHeader, children: [showSearch && (jsxRuntime.jsx("div", { className: styles$4.tableHeaderSearchContainer, children: jsxRuntime.jsx(Search, { value:
|
|
4511
|
-
|
|
4512
|
-
|
|
4566
|
+
: `${selectedCount} ${selectedCount === 1 ? 'item selecionado' : 'itens selecionados'}` })] }), jsxRuntime.jsx("div", { className: styles$4.bulkActionsButtons, children: bulkActions.actions.map((action, index) => (jsxRuntime.jsx(Button, { variant: action.variant ?? 'outlined', type: "button", disabled: action.disabled, onClick: action.onClick, size: "sm", children: action.label }, index))) })] })), header && (jsxRuntime.jsxs("div", { className: styles$4.tableHeader, children: [showSearch && (jsxRuntime.jsx("div", { className: styles$4.tableHeaderSearchContainer, children: jsxRuntime.jsx(Search, { value: pendingSearch, searchMode: header?.searchMode ?? "on-enter", onChange: (e) => {
|
|
4567
|
+
setPendingSearch(e.target.value);
|
|
4568
|
+
}, onSearch: (val) => {
|
|
4569
|
+
if (footer) {
|
|
4513
4570
|
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
|
|
4571
|
+
footer?.onPageChange?.(1);
|
|
4572
|
+
}
|
|
4573
|
+
header?.onSearchChange?.(val);
|
|
4574
|
+
}, onClear: () => {
|
|
4575
|
+
setPendingSearch('');
|
|
4576
|
+
if (footer) {
|
|
4577
|
+
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
|
|
4578
|
+
footer?.onPageChange?.(1);
|
|
4579
|
+
}
|
|
4580
|
+
header?.onSearchChange?.('');
|
|
4514
4581
|
}, placeholder: header.searchPlaceholder ?? 'Pesquisar...', className: styles$4.tableHeaderSearch }) })), !!header.filterItems?.length && (jsxRuntime.jsxs("div", { className: styles$4.tableHeaderFilters, children: [jsxRuntime.jsx("span", { className: styles$4.tableHeaderFilterLabel, children: "Filtros" }), jsxRuntime.jsx("div", { className: styles$4.tableHeaderFilterItems, children: header.filterItems.map((filterItem, index) => {
|
|
4515
4582
|
const commonProps = {
|
|
4516
4583
|
buttonText: filterItem.buttonText,
|
|
@@ -4522,18 +4589,21 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4522
4589
|
onOpen: () => filterItem.onToggle?.(true),
|
|
4523
4590
|
onClose: () => filterItem.onToggle?.(false),
|
|
4524
4591
|
};
|
|
4592
|
+
if (filterItem.type === 'combined') {
|
|
4593
|
+
return (jsxRuntime.jsx(Filter, { mode: "combined", buttonText: filterItem.buttonText, icon: filterItem.icon, title: filterItem.title, drawerWidth: filterItem.drawerWidth, activeCount: filterItem.activeCount, drawerHeaderContent: filterItem.drawerHeaderContent, onApply: filterItem.onApply, onClear: filterItem.onClear, variant: filterItem.variant ?? 'outlined', disabled: filterItem.disabled, children: filterItem.children }, filterItem.id ?? index));
|
|
4594
|
+
}
|
|
4525
4595
|
if (filterItem.type === 'calendar') {
|
|
4526
4596
|
return (jsxRuntime.jsx(Filter, { ...commonProps, type: "calendar", selectedDate: filterItem.selectedDate, onDateSelect: filterItem.onDateSelect, onClearDate: filterItem.onClear, minDate: filterItem.minDate, maxDate: filterItem.maxDate, locale: filterItem.locale, placeholder: filterItem.placeholder }, filterItem.id ?? index));
|
|
4527
4597
|
}
|
|
4528
4598
|
return (jsxRuntime.jsx(Filter, { ...commonProps, type: filterItem.type, items: filterItem.items, selectedIds: filterItem.selectedIds, onApplyFilter: filterItem.onSelectionChange, placeholder: filterItem.placeholder, enableSearch: filterItem.enableSearch }, filterItem.id ?? index));
|
|
4529
|
-
}) })] }))] })), jsxRuntime.jsx("div", { className: styles$4.tableContainer, children: jsxRuntime.jsx("div", { className: styles$4.tableScrollWrapper, children: jsxRuntime.jsxs("table", { className: styles$4.table, "aria-label": "Tabela de dados", "aria-rowcount":
|
|
4599
|
+
}) })] }))] })), jsxRuntime.jsx("div", { className: styles$4.tableContainer, children: jsxRuntime.jsx("div", { className: styles$4.tableScrollWrapper, children: jsxRuntime.jsxs("table", { className: styles$4.table, "aria-label": "Tabela de dados", "aria-rowcount": data.length + 1, children: [jsxRuntime.jsx("thead", { className: styles$4.tableHead, children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx("tr", { children: headerGroup.headers.map((col) => (jsxRuntime.jsx("th", { className: styles$4.tableTh, style: {
|
|
4530
4600
|
textAlign: col.column.columnDef.meta?.align,
|
|
4531
4601
|
width: col.column.columnDef.size || undefined,
|
|
4532
4602
|
minWidth: col.column.columnDef.minSize,
|
|
4533
4603
|
maxWidth: col.column.columnDef.maxSize !== Number.MAX_SAFE_INTEGER
|
|
4534
4604
|
? col.column.columnDef.maxSize
|
|
4535
4605
|
: undefined,
|
|
4536
|
-
}, children:
|
|
4606
|
+
}, children: jsxRuntime.jsx("div", { className: styles$4.tableThContent, children: col.isPlaceholder ? null : col.column.getCanSort() ? (jsxRuntime.jsxs("button", { type: "button", className: styles$4.tableSortButton, onClick: col.column.getToggleSortingHandler(), "aria-label": `Ordenar por ${typeof col.column.columnDef.header === 'string' ? col.column.columnDef.header : col.id}`, children: [reactTable.flexRender(col.column.columnDef.header, col.getContext()), col.column.getIsSorted() === 'asc' ? (jsxRuntime.jsx(reactIcons.ArrowSortUp16Regular, { className: styles$4.tableSortIcon })) : col.column.getIsSorted() === 'desc' ? (jsxRuntime.jsx(reactIcons.ArrowSortDown16Regular, { className: styles$4.tableSortIcon })) : (jsxRuntime.jsx(reactIcons.ArrowSort16Regular, { className: clsx(styles$4.tableSortIcon, styles$4.tableSortIconNeutral) }))] })) : (reactTable.flexRender(col.column.columnDef.header, col.getContext())) }) }, col.id))) }, headerGroup.id))) }), jsxRuntime.jsx("tbody", { className: styles$4.tableBody, children: loading ? (Array.from({ length: skeletonRowCount }).map((_, rowIdx) => (jsxRuntime.jsx("tr", { className: styles$4.tableRow, children: table.getVisibleLeafColumns().map((col) => (jsxRuntime.jsx("td", { className: styles$4.tableTd, children: jsxRuntime.jsx(Skeleton, {}) }, col.id))) }, `skeleton-row-${rowIdx}`)))) : table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map((row, index) => {
|
|
4537
4607
|
const rowProps = onRow?.(row.original, index) ?? {};
|
|
4538
4608
|
return (jsxRuntime.jsx("tr", { className: clsx(styles$4.tableRow, rowProps.className), onClick: rowProps.onClick, onDoubleClick: rowProps.onDoubleClick, children: row.getVisibleCells().map((cell) => (jsxRuntime.jsx("td", { className: styles$4.tableTd, style: {
|
|
4539
4609
|
textAlign: cell.column.columnDef.meta?.align,
|
|
@@ -5225,6 +5295,10 @@ function useInfiniteScroll({ status, page, lastPage, onLoadMore, threshold = 0.1
|
|
|
5225
5295
|
};
|
|
5226
5296
|
}
|
|
5227
5297
|
|
|
5298
|
+
Object.defineProperty(exports, "createTableColumnHelper", {
|
|
5299
|
+
enumerable: true,
|
|
5300
|
+
get: function () { return reactTable.createColumnHelper; }
|
|
5301
|
+
});
|
|
5228
5302
|
exports.Avatar = Avatar;
|
|
5229
5303
|
exports.Badge = Badge;
|
|
5230
5304
|
exports.Button = Button;
|