@giro-ds/react 8.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 +131 -62
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +126 -20
- package/dist/index.esm.js +133 -64
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +2 -2
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2635,8 +2635,14 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
|
2635
2635
|
|
|
2636
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"};
|
|
2637
2637
|
|
|
2638
|
-
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) =>
|
|
2639
|
-
|
|
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
|
+
};
|
|
2640
2646
|
|
|
2641
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) => {
|
|
2642
2648
|
const normalizeValue = (val) => {
|
|
@@ -2949,7 +2955,7 @@ const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecon
|
|
|
2949
2955
|
|
|
2950
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"};
|
|
2951
2957
|
|
|
2952
|
-
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 }) => {
|
|
2953
2959
|
const internalClose = React.useCallback(() => {
|
|
2954
2960
|
if (disabled)
|
|
2955
2961
|
return;
|
|
@@ -3003,12 +3009,34 @@ const Drawer = ({ children, headerContent, customWidth = '400px', onClose, title
|
|
|
3003
3009
|
[styles$e['drawerSidebar--disabled']]: disabled,
|
|
3004
3010
|
}, className), style: {
|
|
3005
3011
|
'--drawer-custom-width': customWidth,
|
|
3006
|
-
}, 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);
|
|
3013
|
+
};
|
|
3014
|
+
|
|
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"};
|
|
3016
|
+
|
|
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 }) })] }));
|
|
3007
3035
|
};
|
|
3008
3036
|
|
|
3009
|
-
var styles$
|
|
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"};
|
|
3010
3038
|
|
|
3011
|
-
const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, id, className, 'data-testid': testId, ...rest }, ref) => {
|
|
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) => {
|
|
3012
3040
|
const [internalValue, setInternalValue] = React.useState('');
|
|
3013
3041
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
3014
3042
|
const currentValue = isControlled ? value : internalValue;
|
|
@@ -3023,6 +3051,9 @@ const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado',
|
|
|
3023
3051
|
else {
|
|
3024
3052
|
setInternalValue(e.target.value);
|
|
3025
3053
|
}
|
|
3054
|
+
if (searchMode === 'instant') {
|
|
3055
|
+
onSearch?.(e.target.value);
|
|
3056
|
+
}
|
|
3026
3057
|
};
|
|
3027
3058
|
const handleFocus = (e) => {
|
|
3028
3059
|
if (disabled)
|
|
@@ -3052,20 +3083,21 @@ const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado',
|
|
|
3052
3083
|
const handleKeyDown = (e) => {
|
|
3053
3084
|
if (disabled)
|
|
3054
3085
|
return;
|
|
3086
|
+
if (searchMode === 'on-enter' && e.key === 'Enter') {
|
|
3087
|
+
onSearch?.(currentValue || '');
|
|
3088
|
+
}
|
|
3055
3089
|
onKeyDown?.(e);
|
|
3056
3090
|
};
|
|
3057
|
-
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) => {
|
|
3058
3092
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
3059
3093
|
e.preventDefault();
|
|
3060
3094
|
onClick?.(e);
|
|
3061
3095
|
}
|
|
3062
|
-
} : 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, {}) }))] }));
|
|
3063
3097
|
});
|
|
3064
3098
|
Search.displayName = 'Search';
|
|
3065
3099
|
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
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 }) => {
|
|
3069
3101
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
3070
3102
|
const [tempSelectedItems, setTempSelectedItems] = React.useState({});
|
|
3071
3103
|
const [searchQuery, setSearchQuery] = React.useState('');
|
|
@@ -3108,7 +3140,7 @@ const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placehol
|
|
|
3108
3140
|
if (item.disabled)
|
|
3109
3141
|
return;
|
|
3110
3142
|
setTempSelectedItems((prev) => {
|
|
3111
|
-
if (type === '
|
|
3143
|
+
if (type === 'multiple') {
|
|
3112
3144
|
return { ...prev, [itemId]: !prev[itemId] };
|
|
3113
3145
|
}
|
|
3114
3146
|
return prev[itemId] ? {} : { [itemId]: true };
|
|
@@ -3156,24 +3188,31 @@ const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placehol
|
|
|
3156
3188
|
return null;
|
|
3157
3189
|
return selectedIds.length - 1;
|
|
3158
3190
|
}, [selectedIds]);
|
|
3159
|
-
const filterClass = clsx(styles$
|
|
3160
|
-
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$
|
|
3161
|
-
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) => {
|
|
3162
3194
|
const itemId = item.id || `filter-item-${index}`;
|
|
3163
3195
|
const isSelected = !!tempSelectedItems[itemId];
|
|
3164
|
-
return (jsxRuntime.jsxs("li", { role: "option", "aria-selected": isSelected, "aria-disabled": item.disabled, className: clsx(styles$
|
|
3165
|
-
[styles$
|
|
3166
|
-
[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,
|
|
3167
3199
|
}), onMouseDown: (e) => e.preventDefault(), onClick: () => toggleItem(itemId, item), onKeyDown: (e) => {
|
|
3168
3200
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
3169
3201
|
e.preventDefault();
|
|
3170
3202
|
toggleItem(itemId, item);
|
|
3171
3203
|
}
|
|
3172
|
-
}, children: [type === '
|
|
3173
|
-
})) : (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" })] })] }));
|
|
3174
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 }) }));
|
|
3175
3207
|
};
|
|
3176
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
|
+
|
|
3177
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"};
|
|
3178
3217
|
|
|
3179
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"};
|
|
@@ -4336,7 +4375,7 @@ const isCalendarFilter = (filter) => {
|
|
|
4336
4375
|
return filter.type === 'calendar';
|
|
4337
4376
|
};
|
|
4338
4377
|
const isCheckboxFilter = (filter) => {
|
|
4339
|
-
return filter.type === '
|
|
4378
|
+
return filter.type === 'multiple' || filter.type === 'single';
|
|
4340
4379
|
};
|
|
4341
4380
|
const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceholder = 'Pesquisar...', showSearch = true, showFilters = false, filters, filterItems = [], className = '', ...rest }) => {
|
|
4342
4381
|
const [internalSearchValue, setInternalSearchValue] = React.useState(searchValue);
|
|
@@ -4413,12 +4452,24 @@ var styles$4 = {"wrapper":"Table-module__wrapper___KMc04","tableContainer":"Tabl
|
|
|
4413
4452
|
|
|
4414
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' })] })] }));
|
|
4415
4454
|
|
|
4416
|
-
const TableV2 = ({ columns, data,
|
|
4417
|
-
const
|
|
4418
|
-
const
|
|
4419
|
-
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({});
|
|
4420
4465
|
const rowSelectionRef = React.useRef({});
|
|
4421
|
-
|
|
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;
|
|
4422
4473
|
const lastEmittedSelectionKey = React.useRef('{}');
|
|
4423
4474
|
const [sorting, setSorting] = React.useState([]);
|
|
4424
4475
|
const [pagination, setPagination] = React.useState({
|
|
@@ -4431,27 +4482,22 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4431
4482
|
size: 48,
|
|
4432
4483
|
enableSorting: false,
|
|
4433
4484
|
enableColumnFilter: false,
|
|
4434
|
-
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) }) })),
|
|
4435
|
-
cell: ({ row }) => (jsxRuntime.jsx("div", { className: styles$4.checkboxCell, children: jsxRuntime.jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (checked) => row.toggleSelected(checked) }) })),
|
|
4436
|
-
}), []);
|
|
4437
|
-
const resolvedColumns = React.useMemo(() => (
|
|
4438
|
-
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);
|
|
4439
4490
|
const table = reactTable.useReactTable({
|
|
4440
4491
|
data,
|
|
4441
4492
|
columns: resolvedColumns,
|
|
4442
4493
|
defaultColumn: { minSize: 44, size: 0 },
|
|
4443
4494
|
state: {
|
|
4444
|
-
...(
|
|
4445
|
-
...(showSearch ? { globalFilter } : {}),
|
|
4446
|
-
...(footer ? { pagination: { pageIndex, pageSize } } : {}),
|
|
4447
|
-
...(enableRowSelection ? { rowSelection } : {}),
|
|
4495
|
+
...(isRowSelectionEnabled ? { rowSelection: effectiveRowSelection } : {}),
|
|
4448
4496
|
...(enableSorting ? { sorting } : {}),
|
|
4449
4497
|
},
|
|
4450
|
-
onColumnFiltersChange: enableFilters ? setColumnFilters : undefined,
|
|
4451
|
-
onGlobalFilterChange: showSearch ? setGlobalFilter : undefined,
|
|
4452
4498
|
onSortingChange: enableSorting ? setSorting : undefined,
|
|
4453
4499
|
enableSorting,
|
|
4454
|
-
onRowSelectionChange:
|
|
4500
|
+
onRowSelectionChange: isRowSelectionEnabled
|
|
4455
4501
|
? (updater) => {
|
|
4456
4502
|
const prev = rowSelectionRef.current;
|
|
4457
4503
|
const next = typeof updater === 'function' ? updater(prev) : updater;
|
|
@@ -4460,43 +4506,52 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4460
4506
|
return;
|
|
4461
4507
|
lastEmittedSelectionKey.current = selectionKey;
|
|
4462
4508
|
rowSelectionRef.current = next;
|
|
4463
|
-
|
|
4464
|
-
|
|
4465
|
-
|
|
4466
|
-
|
|
4467
|
-
|
|
4468
|
-
|
|
4469
|
-
|
|
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);
|
|
4470
4517
|
}
|
|
4471
4518
|
}
|
|
4472
4519
|
: undefined,
|
|
4473
|
-
enableRowSelection
|
|
4474
|
-
|
|
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,
|
|
4475
4527
|
getCoreRowModel: reactTable.getCoreRowModel(),
|
|
4476
|
-
getFilteredRowModel: enableFilters || showSearch ? reactTable.getFilteredRowModel() : undefined,
|
|
4477
|
-
getPaginationRowModel: footer ? reactTable.getPaginationRowModel() : undefined,
|
|
4478
4528
|
getSortedRowModel: enableSorting ? reactTable.getSortedRowModel() : undefined,
|
|
4479
4529
|
});
|
|
4480
|
-
const
|
|
4481
|
-
const effectiveTotalItems = footer
|
|
4482
|
-
? (enableFilters || showSearch) ? filteredRowCount : footer.totalItems
|
|
4483
|
-
: 0;
|
|
4530
|
+
const effectiveTotalItems = footer?.totalItems ?? 0;
|
|
4484
4531
|
const totalPages = footer ? Math.ceil(effectiveTotalItems / pageSize) : 0;
|
|
4485
4532
|
const canGoPrev = pageIndex > 0;
|
|
4486
4533
|
const canGoNext = pageIndex + 1 < totalPages;
|
|
4487
4534
|
const skeletonRowCount = footer ? pageSize : (data.length > 0 ? data.length : pageSize);
|
|
4488
4535
|
const selectedRows = React.useMemo(() => table
|
|
4489
4536
|
.getCoreRowModel()
|
|
4490
|
-
.rows.filter((r) =>
|
|
4491
|
-
.map((r) => r.original), [
|
|
4537
|
+
.rows.filter((r) => effectiveRowSelection[r.id])
|
|
4538
|
+
.map((r) => r.original), [effectiveRowSelection, table]);
|
|
4492
4539
|
const selectedCount = selectedRows.length;
|
|
4493
|
-
const showBulkActions =
|
|
4540
|
+
const showBulkActions = isRowSelectionEnabled && !!bulkActions && selectedCount > 0;
|
|
4494
4541
|
React.useEffect(() => {
|
|
4495
|
-
if (
|
|
4542
|
+
if (isRowSelectionEnabled) {
|
|
4496
4543
|
table.resetRowSelection();
|
|
4497
4544
|
}
|
|
4498
4545
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4499
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]);
|
|
4500
4555
|
const handleClearSelection = () => {
|
|
4501
4556
|
table.resetRowSelection();
|
|
4502
4557
|
bulkActions?.onClear?.();
|
|
@@ -4508,10 +4563,21 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4508
4563
|
};
|
|
4509
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
|
|
4510
4565
|
? bulkActions.label(selectedCount, selectedRows)
|
|
4511
|
-
: `${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:
|
|
4512
|
-
|
|
4513
|
-
|
|
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) {
|
|
4514
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?.('');
|
|
4515
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) => {
|
|
4516
4582
|
const commonProps = {
|
|
4517
4583
|
buttonText: filterItem.buttonText,
|
|
@@ -4523,18 +4589,21 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4523
4589
|
onOpen: () => filterItem.onToggle?.(true),
|
|
4524
4590
|
onClose: () => filterItem.onToggle?.(false),
|
|
4525
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
|
+
}
|
|
4526
4595
|
if (filterItem.type === 'calendar') {
|
|
4527
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));
|
|
4528
4597
|
}
|
|
4529
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));
|
|
4530
|
-
}) })] }))] })), 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: {
|
|
4531
4600
|
textAlign: col.column.columnDef.meta?.align,
|
|
4532
4601
|
width: col.column.columnDef.size || undefined,
|
|
4533
4602
|
minWidth: col.column.columnDef.minSize,
|
|
4534
4603
|
maxWidth: col.column.columnDef.maxSize !== Number.MAX_SAFE_INTEGER
|
|
4535
4604
|
? col.column.columnDef.maxSize
|
|
4536
4605
|
: undefined,
|
|
4537
|
-
}, 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) => {
|
|
4538
4607
|
const rowProps = onRow?.(row.original, index) ?? {};
|
|
4539
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: {
|
|
4540
4609
|
textAlign: cell.column.columnDef.meta?.align,
|