@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.esm.js
CHANGED
|
@@ -3,11 +3,11 @@ import clsx from 'clsx';
|
|
|
3
3
|
import { Avatar as Avatar$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, Popover as Popover$1, Label, AlertDialog, RadioGroup, DropdownMenu, Dialog as Dialog$1, Select as Select$1, Toast as Toast$1, Switch as Switch$1 } from 'radix-ui';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import React__default, { useId, useMemo, createContext, useState, useContext, forwardRef, useEffect, useCallback, useRef, memo, useReducer, createElement, isValidElement } from 'react';
|
|
6
|
-
import { SpinnerIos16Regular, ChevronUp16Regular, ChevronLeft16Regular, ChevronRight16Regular, ChevronDown16Regular, Dismiss24Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, SearchInfo20Regular, ArrowSortUp16Regular, ArrowSortDown16Regular, ArrowSort16Regular, Info20Filled, CheckmarkCircle20Filled, Warning20Filled, Dismiss16Filled } from '@fluentui/react-icons';
|
|
6
|
+
import { SpinnerIos16Regular, ChevronUp16Regular, ChevronLeft16Regular, ChevronRight16Regular, ChevronDown16Regular, Dismiss24Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, FilterRegular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, SearchInfo20Regular, ArrowSortUp16Regular, ArrowSortDown16Regular, ArrowSort16Regular, Info20Filled, CheckmarkCircle20Filled, Warning20Filled, Dismiss16Filled } from '@fluentui/react-icons';
|
|
7
7
|
import { DayPicker } from 'react-day-picker';
|
|
8
8
|
import { format, addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, eachYearOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, getISOWeek, getMonth, getYear, getWeek, isAfter, isBefore, isDate, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay, startOfISOWeek, startOfMonth, startOfWeek, startOfYear } from 'date-fns';
|
|
9
9
|
import { createPortal } from 'react-dom';
|
|
10
|
-
import { useReactTable, getSortedRowModel,
|
|
10
|
+
import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
|
|
11
11
|
export { createColumnHelper as createTableColumnHelper } from '@tanstack/react-table';
|
|
12
12
|
import Skeleton from 'react-loading-skeleton';
|
|
13
13
|
|
|
@@ -2616,8 +2616,14 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
|
2616
2616
|
|
|
2617
2617
|
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"};
|
|
2618
2618
|
|
|
2619
|
-
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) =>
|
|
2620
|
-
|
|
2619
|
+
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) => {
|
|
2620
|
+
const container = (jsxs("div", { className: clsx(styles$h.labelContainer, disabled && styles$h.disabledContainer), children: [jsxs(Label.Root, { className: clsx(styles$h.wrapperLabel, error && !disabled && styles$h.errorLabel, disabled && styles$h.disabledLabel, className), htmlFor: htmlFor, children: [children, required && jsx("span", { className: styles$h.requiredLabel, children: "*" })] }), tooltip && (jsx("span", { className: disabled ? styles$h.disabledIcon : error ?
|
|
2621
|
+
styles$h.errorIcon : styles$h.infoIcon, children: jsx(Info12Regular, {}) }))] }));
|
|
2622
|
+
if (tooltip) {
|
|
2623
|
+
return (jsx(Tooltip, { side: side, align: align, text: tooltipText || '', children: container }));
|
|
2624
|
+
}
|
|
2625
|
+
return container;
|
|
2626
|
+
};
|
|
2621
2627
|
|
|
2622
2628
|
const TextField = forwardRef(({ className, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength = 30, required = false, helperText, tooltip = false, tooltipText, side = 'bottom', align = 'start', errorMessage, error, id, icon, onBlur, onFocus, name, persistIcon = false, ...rest }, ref) => {
|
|
2623
2629
|
const normalizeValue = (val) => {
|
|
@@ -2930,7 +2936,7 @@ const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecon
|
|
|
2930
2936
|
|
|
2931
2937
|
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"};
|
|
2932
2938
|
|
|
2933
|
-
const Drawer = ({ children, headerContent, customWidth = '400px', onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = false, onOverlayClick, closeOnOverlayClick = true, closeOnEscape = true, ...rest }) => {
|
|
2939
|
+
const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = false, onOverlayClick, closeOnOverlayClick = true, closeOnEscape = true, ...rest }) => {
|
|
2934
2940
|
const internalClose = useCallback(() => {
|
|
2935
2941
|
if (disabled)
|
|
2936
2942
|
return;
|
|
@@ -2984,12 +2990,34 @@ const Drawer = ({ children, headerContent, customWidth = '400px', onClose, title
|
|
|
2984
2990
|
[styles$e['drawerSidebar--disabled']]: disabled,
|
|
2985
2991
|
}, className), style: {
|
|
2986
2992
|
'--drawer-custom-width': customWidth,
|
|
2987
|
-
}, 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: [jsxs("div", { className: styles$e.drawerTitleClose, children: [jsx("div", { className: styles$e.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsx("div", { className: styles$e.drawerHeaderContent, children: headerContent })), jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsx("div", { className: styles$e.drawerChildren, "data-testid": "drawer-content", children: children })] })] }), document.body);
|
|
2993
|
+
}, 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: [jsxs("div", { className: styles$e.drawerTitleClose, children: [jsx("div", { className: styles$e.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsx("div", { className: styles$e.drawerHeaderContent, children: headerContent })), jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsx("div", { className: styles$e.drawerChildren, "data-testid": "drawer-content", children: children }), footer] })] }), document.body);
|
|
2994
|
+
};
|
|
2995
|
+
|
|
2996
|
+
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"};
|
|
2997
|
+
|
|
2998
|
+
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 }) => {
|
|
2999
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
3000
|
+
const handleOpen = useCallback(() => {
|
|
3001
|
+
setIsOpen(true);
|
|
3002
|
+
onOpen?.();
|
|
3003
|
+
}, [onOpen]);
|
|
3004
|
+
const handleClose = useCallback(() => {
|
|
3005
|
+
setIsOpen(false);
|
|
3006
|
+
onClose?.();
|
|
3007
|
+
}, [onClose]);
|
|
3008
|
+
const handleApply = useCallback(() => {
|
|
3009
|
+
onApply?.();
|
|
3010
|
+
handleClose();
|
|
3011
|
+
}, [onApply, handleClose]);
|
|
3012
|
+
const handleClear = useCallback(() => {
|
|
3013
|
+
onClear?.();
|
|
3014
|
+
}, [onClear]);
|
|
3015
|
+
return (jsxs("div", { className: clsx(styles$d.triggerWrapper, className), id: id, ...rest, children: [jsx(Button, { variant: variant, disabled: disabled, icon: icon ?? jsx(FilterRegular, {}), iconPosition: "left", onClick: handleOpen, children: jsxs("span", { className: styles$d.triggerContent, children: [buttonText, activeCount > 0 && (jsx(Badge, { badgeValue: activeCount, filterVariant: true }))] }) }), jsx(Drawer, { isOpen: isOpen, onClose: handleClose, title: title, customWidth: drawerWidth, closeOnOverlayClick: true, closeOnEscape: true, headerContent: drawerHeaderContent, footer: jsxs("div", { className: styles$d.combinedFooter, children: [jsx(Button, { variant: "outlined", onClick: handleClear, children: "Limpar" }), jsx(Button, { onClick: handleApply, children: "Aplicar" })] }), children: jsx("div", { className: styles$d.body, children: children }) })] }));
|
|
2988
3016
|
};
|
|
2989
3017
|
|
|
2990
|
-
var styles$
|
|
3018
|
+
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"};
|
|
2991
3019
|
|
|
2992
|
-
const Search = React__default.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) => {
|
|
3020
|
+
const Search = React__default.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) => {
|
|
2993
3021
|
const [internalValue, setInternalValue] = useState('');
|
|
2994
3022
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
2995
3023
|
const currentValue = isControlled ? value : internalValue;
|
|
@@ -3004,6 +3032,9 @@ const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser
|
|
|
3004
3032
|
else {
|
|
3005
3033
|
setInternalValue(e.target.value);
|
|
3006
3034
|
}
|
|
3035
|
+
if (searchMode === 'instant') {
|
|
3036
|
+
onSearch?.(e.target.value);
|
|
3037
|
+
}
|
|
3007
3038
|
};
|
|
3008
3039
|
const handleFocus = (e) => {
|
|
3009
3040
|
if (disabled)
|
|
@@ -3033,20 +3064,21 @@ const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser
|
|
|
3033
3064
|
const handleKeyDown = (e) => {
|
|
3034
3065
|
if (disabled)
|
|
3035
3066
|
return;
|
|
3067
|
+
if (searchMode === 'on-enter' && e.key === 'Enter') {
|
|
3068
|
+
onSearch?.(currentValue || '');
|
|
3069
|
+
}
|
|
3036
3070
|
onKeyDown?.(e);
|
|
3037
3071
|
};
|
|
3038
|
-
return (jsxs("div", { className: clsx(styles$
|
|
3072
|
+
return (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) => {
|
|
3039
3073
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
3040
3074
|
e.preventDefault();
|
|
3041
3075
|
onClick?.(e);
|
|
3042
3076
|
}
|
|
3043
|
-
} : undefined, children: [jsx("span", { className: clsx(styles$
|
|
3077
|
+
} : undefined, children: [jsx("span", { className: clsx(styles$c.searchLeftIcon, { [styles$c.disabled]: disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsx(Search16Regular, {}) }), jsx("input", { ref: ref, id: inputId, type: "text", placeholder: placeholder, "aria-label": placeholder, value: currentValue || '', onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, "data-testid": testId, ...rest, className: clsx({ [styles$c.inputWithClearIcon]: currentValue && currentValue.length > 0 }) }), currentValue && currentValue.length > 0 && (jsx("span", { className: styles$c.searchClearIcon, "aria-hidden": "true", onClick: clearInputSearch, children: jsx(Dismiss16Regular, {}) }))] }));
|
|
3044
3078
|
});
|
|
3045
3079
|
Search.displayName = 'Search';
|
|
3046
3080
|
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
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 }) => {
|
|
3081
|
+
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 }) => {
|
|
3050
3082
|
const [isOpen, setIsOpen] = useState(false);
|
|
3051
3083
|
const [tempSelectedItems, setTempSelectedItems] = useState({});
|
|
3052
3084
|
const [searchQuery, setSearchQuery] = useState('');
|
|
@@ -3089,7 +3121,7 @@ const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placehol
|
|
|
3089
3121
|
if (item.disabled)
|
|
3090
3122
|
return;
|
|
3091
3123
|
setTempSelectedItems((prev) => {
|
|
3092
|
-
if (type === '
|
|
3124
|
+
if (type === 'multiple') {
|
|
3093
3125
|
return { ...prev, [itemId]: !prev[itemId] };
|
|
3094
3126
|
}
|
|
3095
3127
|
return prev[itemId] ? {} : { [itemId]: true };
|
|
@@ -3137,24 +3169,31 @@ const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placehol
|
|
|
3137
3169
|
return null;
|
|
3138
3170
|
return selectedIds.length - 1;
|
|
3139
3171
|
}, [selectedIds]);
|
|
3140
|
-
const filterClass = clsx(styles$
|
|
3141
|
-
const triggerButton = (jsx(Button, { variant: variant, disabled: disabled, icon: type === 'calendar' ? jsx(Calendar16Regular, {}) : jsx(ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxs("div", { className: styles$
|
|
3142
|
-
const popoverContent = type === 'calendar' ? (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" })) : (jsxs("div", { className: styles$
|
|
3172
|
+
const filterClass = clsx(styles$d.container, className);
|
|
3173
|
+
const triggerButton = (jsx(Button, { variant: variant, disabled: disabled, icon: type === 'calendar' ? jsx(Calendar16Regular, {}) : jsx(ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxs("div", { className: styles$d.buttonContent, children: [icon && jsx("span", { className: styles$d.buttonIcon, children: icon }), jsx("span", { className: styles$d.buttonText, children: buttonDisplayText }), jsx("span", { className: clsx(styles$d.buttonArrow, { [styles$d.buttonArrowOpen]: isOpen }), children: getBadgeValue() && (jsx(Badge, { badgeValue: `+${getBadgeValue()}`, filterVariant: true })) })] }) }));
|
|
3174
|
+
const popoverContent = type === 'calendar' ? (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" })) : (jsxs("div", { className: styles$d.panel, children: [searchVisible && (jsx("div", { className: styles$d.search, children: jsx(Search, { value: searchQuery, placeholder: placeholder, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: () => setSearchQuery('') }) })), jsx("ul", { className: styles$d.list, role: "listbox", "aria-multiselectable": type === 'multiple', children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
|
|
3143
3175
|
const itemId = item.id || `filter-item-${index}`;
|
|
3144
3176
|
const isSelected = !!tempSelectedItems[itemId];
|
|
3145
|
-
return (jsxs("li", { role: "option", "aria-selected": isSelected, "aria-disabled": item.disabled, className: clsx(styles$
|
|
3146
|
-
[styles$
|
|
3147
|
-
[styles$
|
|
3177
|
+
return (jsxs("li", { role: "option", "aria-selected": isSelected, "aria-disabled": item.disabled, className: clsx(styles$d.item, {
|
|
3178
|
+
[styles$d.itemSelected]: isSelected,
|
|
3179
|
+
[styles$d.itemDisabled]: item.disabled,
|
|
3148
3180
|
}), onMouseDown: (e) => e.preventDefault(), onClick: () => toggleItem(itemId, item), onKeyDown: (e) => {
|
|
3149
3181
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
3150
3182
|
e.preventDefault();
|
|
3151
3183
|
toggleItem(itemId, item);
|
|
3152
3184
|
}
|
|
3153
|
-
}, children: [type === '
|
|
3154
|
-
})) : (jsx("li", { className: styles$
|
|
3185
|
+
}, children: [type === 'multiple' && (jsx(Checkbox, { checked: isSelected, disabled: item.disabled, label: "" })), item.icon && (jsx("span", { className: styles$d.itemIcon, children: item.icon })), jsx("span", { className: styles$d.itemText, children: item.text })] }, itemId));
|
|
3186
|
+
})) : (jsx("li", { className: styles$d.noResults, role: "status", "aria-live": "polite", children: "Nenhum item encontrado" })) }), jsxs("div", { className: styles$d.footer, children: [jsx(Button, { fullWidth: true, variant: "outlined", onClick: handleClearFilter, children: "Limpar" }), jsx(Button, { fullWidth: true, onClick: handleApplyFilter, children: "Aplicar" })] })] }));
|
|
3155
3187
|
return (jsx("div", { className: filterClass, id: id, ...rest, children: jsx(Popover, { open: isOpen, onOpenChange: handleOpenChange, side: side, align: align, onOpenAutoFocus: (e) => e.preventDefault(), trigger: triggerButton, content: popoverContent }) }));
|
|
3156
3188
|
};
|
|
3157
3189
|
|
|
3190
|
+
const Filter = ({ mode = 'simple', ...props }) => {
|
|
3191
|
+
if (mode === 'combined') {
|
|
3192
|
+
return jsx(Combined, { ...props });
|
|
3193
|
+
}
|
|
3194
|
+
return jsx(Simple, { ...props });
|
|
3195
|
+
};
|
|
3196
|
+
|
|
3158
3197
|
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"};
|
|
3159
3198
|
|
|
3160
3199
|
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"};
|
|
@@ -4317,7 +4356,7 @@ const isCalendarFilter = (filter) => {
|
|
|
4317
4356
|
return filter.type === 'calendar';
|
|
4318
4357
|
};
|
|
4319
4358
|
const isCheckboxFilter = (filter) => {
|
|
4320
|
-
return filter.type === '
|
|
4359
|
+
return filter.type === 'multiple' || filter.type === 'single';
|
|
4321
4360
|
};
|
|
4322
4361
|
const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceholder = 'Pesquisar...', showSearch = true, showFilters = false, filters, filterItems = [], className = '', ...rest }) => {
|
|
4323
4362
|
const [internalSearchValue, setInternalSearchValue] = useState(searchValue);
|
|
@@ -4394,12 +4433,24 @@ var styles$4 = {"wrapper":"Table-module__wrapper___KMc04","tableContainer":"Tabl
|
|
|
4394
4433
|
|
|
4395
4434
|
const EmptyState = ({ emptyIcon, emptyTitle, emptyText }) => (jsxs("div", { className: styles$4.tableEmpty, children: [jsx("div", { className: styles$4.tableEmptyContent, children: emptyIcon ?? jsx(SearchInfo20Regular, {}) }), jsxs("div", { className: styles$4.tableEmptyText, children: [jsx("h3", { className: styles$4.tableEmptyTitle, children: emptyTitle ?? 'Nenhum dado encontrado' }), jsx("p", { className: styles$4.tableEmptyCaption, children: emptyText ?? 'Nenhum registro encontrado' })] })] }));
|
|
4396
4435
|
|
|
4397
|
-
const TableV2 = ({ columns, data,
|
|
4398
|
-
const
|
|
4399
|
-
const
|
|
4400
|
-
const [
|
|
4436
|
+
const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSorting = true, bulkActions, header, footer, loading = false, emptyIcon, emptyTitle, emptyText, onRow, className, }) => {
|
|
4437
|
+
const isRowSelectionEnabled = !!rowSelectionConfig;
|
|
4438
|
+
const isControlled = rowSelectionConfig?.selectedRowKeys !== undefined;
|
|
4439
|
+
const [pendingSearch, setPendingSearch] = useState(header?.searchValue ?? '');
|
|
4440
|
+
useEffect(() => {
|
|
4441
|
+
if (header?.searchValue !== undefined) {
|
|
4442
|
+
setPendingSearch(header.searchValue);
|
|
4443
|
+
}
|
|
4444
|
+
}, [header?.searchValue]);
|
|
4445
|
+
const [rowSelectionState, setRowSelectionState] = useState({});
|
|
4401
4446
|
const rowSelectionRef = useRef({});
|
|
4402
|
-
|
|
4447
|
+
const externalSelectionState = useMemo(() => {
|
|
4448
|
+
if (!rowSelectionConfig?.selectedRowKeys)
|
|
4449
|
+
return {};
|
|
4450
|
+
return Object.fromEntries(rowSelectionConfig.selectedRowKeys.map((key) => [String(key), true]));
|
|
4451
|
+
}, [rowSelectionConfig?.selectedRowKeys]);
|
|
4452
|
+
const effectiveRowSelection = isControlled ? externalSelectionState : rowSelectionState;
|
|
4453
|
+
rowSelectionRef.current = effectiveRowSelection;
|
|
4403
4454
|
const lastEmittedSelectionKey = useRef('{}');
|
|
4404
4455
|
const [sorting, setSorting] = useState([]);
|
|
4405
4456
|
const [pagination, setPagination] = useState({
|
|
@@ -4412,27 +4463,22 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4412
4463
|
size: 48,
|
|
4413
4464
|
enableSorting: false,
|
|
4414
4465
|
enableColumnFilter: false,
|
|
4415
|
-
header: ({ table: t }) => (jsx("div", { className: styles$4.checkboxCell, children: jsx(Checkbox, { checked: t.getIsAllPageRowsSelected(), indeterminate: t.getIsSomePageRowsSelected(), onCheckedChange: (checked) => t.toggleAllPageRowsSelected(checked) }) })),
|
|
4416
|
-
cell: ({ row }) => (jsx("div", { className: styles$4.checkboxCell, children: jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (checked) => row.toggleSelected(checked) }) })),
|
|
4417
|
-
}), []);
|
|
4418
|
-
const resolvedColumns = useMemo(() => (
|
|
4419
|
-
const showSearch = !!(header
|
|
4466
|
+
header: ({ table: t }) => (jsx("div", { className: styles$4.checkboxCell, children: jsx(Checkbox, { checked: t.getIsAllPageRowsSelected(), indeterminate: t.getIsSomePageRowsSelected(), disabled: rowSelectionConfig?.disableSelectAll, onCheckedChange: (checked) => t.toggleAllPageRowsSelected(checked) }) })),
|
|
4467
|
+
cell: ({ row }) => (jsx("div", { className: styles$4.checkboxCell, children: jsx(Checkbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (checked) => row.toggleSelected(checked) }) })),
|
|
4468
|
+
}), [rowSelectionConfig?.disableSelectAll]);
|
|
4469
|
+
const resolvedColumns = useMemo(() => (isRowSelectionEnabled ? [selectionColumn, ...columns] : columns), [isRowSelectionEnabled, selectionColumn, columns]);
|
|
4470
|
+
const showSearch = !!(header?.onSearchChange);
|
|
4420
4471
|
const table = useReactTable({
|
|
4421
4472
|
data,
|
|
4422
4473
|
columns: resolvedColumns,
|
|
4423
4474
|
defaultColumn: { minSize: 44, size: 0 },
|
|
4424
4475
|
state: {
|
|
4425
|
-
...(
|
|
4426
|
-
...(showSearch ? { globalFilter } : {}),
|
|
4427
|
-
...(footer ? { pagination: { pageIndex, pageSize } } : {}),
|
|
4428
|
-
...(enableRowSelection ? { rowSelection } : {}),
|
|
4476
|
+
...(isRowSelectionEnabled ? { rowSelection: effectiveRowSelection } : {}),
|
|
4429
4477
|
...(enableSorting ? { sorting } : {}),
|
|
4430
4478
|
},
|
|
4431
|
-
onColumnFiltersChange: enableFilters ? setColumnFilters : undefined,
|
|
4432
|
-
onGlobalFilterChange: showSearch ? setGlobalFilter : undefined,
|
|
4433
4479
|
onSortingChange: enableSorting ? setSorting : undefined,
|
|
4434
4480
|
enableSorting,
|
|
4435
|
-
onRowSelectionChange:
|
|
4481
|
+
onRowSelectionChange: isRowSelectionEnabled
|
|
4436
4482
|
? (updater) => {
|
|
4437
4483
|
const prev = rowSelectionRef.current;
|
|
4438
4484
|
const next = typeof updater === 'function' ? updater(prev) : updater;
|
|
@@ -4441,43 +4487,52 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4441
4487
|
return;
|
|
4442
4488
|
lastEmittedSelectionKey.current = selectionKey;
|
|
4443
4489
|
rowSelectionRef.current = next;
|
|
4444
|
-
|
|
4445
|
-
|
|
4446
|
-
|
|
4447
|
-
|
|
4448
|
-
|
|
4449
|
-
|
|
4450
|
-
|
|
4490
|
+
if (!isControlled) {
|
|
4491
|
+
setRowSelectionState(next);
|
|
4492
|
+
}
|
|
4493
|
+
if (rowSelectionConfig?.onRowChange) {
|
|
4494
|
+
const allRows = table.getCoreRowModel().rows;
|
|
4495
|
+
const selectedRows = allRows.filter((r) => next[r.id]).map((r) => r.original);
|
|
4496
|
+
const selectedKeys = allRows.filter((r) => next[r.id]).map((r) => r.index);
|
|
4497
|
+
rowSelectionConfig.onRowChange(selectedRows, selectedKeys);
|
|
4451
4498
|
}
|
|
4452
4499
|
}
|
|
4453
4500
|
: undefined,
|
|
4454
|
-
enableRowSelection
|
|
4455
|
-
|
|
4501
|
+
enableRowSelection: isRowSelectionEnabled
|
|
4502
|
+
? typeof rowSelectionConfig?.disabled === 'function'
|
|
4503
|
+
? (row) => !rowSelectionConfig.disabled(row.original, row.index)
|
|
4504
|
+
: typeof rowSelectionConfig?.disabled === 'boolean'
|
|
4505
|
+
? !rowSelectionConfig.disabled
|
|
4506
|
+
: true
|
|
4507
|
+
: false,
|
|
4456
4508
|
getCoreRowModel: getCoreRowModel(),
|
|
4457
|
-
getFilteredRowModel: enableFilters || showSearch ? getFilteredRowModel() : undefined,
|
|
4458
|
-
getPaginationRowModel: footer ? getPaginationRowModel() : undefined,
|
|
4459
4509
|
getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
|
|
4460
4510
|
});
|
|
4461
|
-
const
|
|
4462
|
-
const effectiveTotalItems = footer
|
|
4463
|
-
? (enableFilters || showSearch) ? filteredRowCount : footer.totalItems
|
|
4464
|
-
: 0;
|
|
4511
|
+
const effectiveTotalItems = footer?.totalItems ?? 0;
|
|
4465
4512
|
const totalPages = footer ? Math.ceil(effectiveTotalItems / pageSize) : 0;
|
|
4466
4513
|
const canGoPrev = pageIndex > 0;
|
|
4467
4514
|
const canGoNext = pageIndex + 1 < totalPages;
|
|
4468
4515
|
const skeletonRowCount = footer ? pageSize : (data.length > 0 ? data.length : pageSize);
|
|
4469
4516
|
const selectedRows = useMemo(() => table
|
|
4470
4517
|
.getCoreRowModel()
|
|
4471
|
-
.rows.filter((r) =>
|
|
4472
|
-
.map((r) => r.original), [
|
|
4518
|
+
.rows.filter((r) => effectiveRowSelection[r.id])
|
|
4519
|
+
.map((r) => r.original), [effectiveRowSelection, table]);
|
|
4473
4520
|
const selectedCount = selectedRows.length;
|
|
4474
|
-
const showBulkActions =
|
|
4521
|
+
const showBulkActions = isRowSelectionEnabled && !!bulkActions && selectedCount > 0;
|
|
4475
4522
|
useEffect(() => {
|
|
4476
|
-
if (
|
|
4523
|
+
if (isRowSelectionEnabled) {
|
|
4477
4524
|
table.resetRowSelection();
|
|
4478
4525
|
}
|
|
4479
4526
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4480
4527
|
}, [pageIndex]);
|
|
4528
|
+
useEffect(() => {
|
|
4529
|
+
if (footer?.currentPage !== undefined) {
|
|
4530
|
+
const targetPageIndex = footer.currentPage - 1;
|
|
4531
|
+
setPagination((prev) => prev.pageIndex !== targetPageIndex
|
|
4532
|
+
? { ...prev, pageIndex: targetPageIndex }
|
|
4533
|
+
: prev);
|
|
4534
|
+
}
|
|
4535
|
+
}, [footer?.currentPage]);
|
|
4481
4536
|
const handleClearSelection = () => {
|
|
4482
4537
|
table.resetRowSelection();
|
|
4483
4538
|
bulkActions?.onClear?.();
|
|
@@ -4489,10 +4544,21 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4489
4544
|
};
|
|
4490
4545
|
return (jsxs("div", { className: clsx(styles$4.wrapper, className), children: [showBulkActions && (jsxs("div", { className: styles$4.bulkActionsBar, children: [jsxs("div", { className: styles$4.bulkActionsInfo, children: [jsx(Button, { variant: "text", iconOnly: true, icon: jsx(Dismiss16Regular, {}), ariaLabel: "Limpar sele\u00E7\u00E3o", onClick: handleClearSelection, className: styles$4.bulkActionsClearButton }), jsx("span", { className: styles$4.bulkActionsLabel, children: bulkActions.label
|
|
4491
4546
|
? bulkActions.label(selectedCount, selectedRows)
|
|
4492
|
-
: `${selectedCount} ${selectedCount === 1 ? 'item selecionado' : 'itens selecionados'}` })] }), jsx("div", { className: styles$4.bulkActionsButtons, children: bulkActions.actions.map((action, index) => (jsx(Button, { variant: action.variant ?? 'outlined', type: "button", disabled: action.disabled, onClick: action.onClick, size: "sm", children: action.label }, index))) })] })), header && (jsxs("div", { className: styles$4.tableHeader, children: [showSearch && (jsx("div", { className: styles$4.tableHeaderSearchContainer, children: jsx(Search, { value:
|
|
4493
|
-
|
|
4494
|
-
|
|
4547
|
+
: `${selectedCount} ${selectedCount === 1 ? 'item selecionado' : 'itens selecionados'}` })] }), jsx("div", { className: styles$4.bulkActionsButtons, children: bulkActions.actions.map((action, index) => (jsx(Button, { variant: action.variant ?? 'outlined', type: "button", disabled: action.disabled, onClick: action.onClick, size: "sm", children: action.label }, index))) })] })), header && (jsxs("div", { className: styles$4.tableHeader, children: [showSearch && (jsx("div", { className: styles$4.tableHeaderSearchContainer, children: jsx(Search, { value: pendingSearch, searchMode: header?.searchMode ?? "on-enter", onChange: (e) => {
|
|
4548
|
+
setPendingSearch(e.target.value);
|
|
4549
|
+
}, onSearch: (val) => {
|
|
4550
|
+
if (footer) {
|
|
4495
4551
|
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
|
|
4552
|
+
footer?.onPageChange?.(1);
|
|
4553
|
+
}
|
|
4554
|
+
header?.onSearchChange?.(val);
|
|
4555
|
+
}, onClear: () => {
|
|
4556
|
+
setPendingSearch('');
|
|
4557
|
+
if (footer) {
|
|
4558
|
+
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
|
|
4559
|
+
footer?.onPageChange?.(1);
|
|
4560
|
+
}
|
|
4561
|
+
header?.onSearchChange?.('');
|
|
4496
4562
|
}, placeholder: header.searchPlaceholder ?? 'Pesquisar...', className: styles$4.tableHeaderSearch }) })), !!header.filterItems?.length && (jsxs("div", { className: styles$4.tableHeaderFilters, children: [jsx("span", { className: styles$4.tableHeaderFilterLabel, children: "Filtros" }), jsx("div", { className: styles$4.tableHeaderFilterItems, children: header.filterItems.map((filterItem, index) => {
|
|
4497
4563
|
const commonProps = {
|
|
4498
4564
|
buttonText: filterItem.buttonText,
|
|
@@ -4504,18 +4570,21 @@ const TableV2 = ({ columns, data, enableFilters = false, enableRowSelection = fa
|
|
|
4504
4570
|
onOpen: () => filterItem.onToggle?.(true),
|
|
4505
4571
|
onClose: () => filterItem.onToggle?.(false),
|
|
4506
4572
|
};
|
|
4573
|
+
if (filterItem.type === 'combined') {
|
|
4574
|
+
return (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));
|
|
4575
|
+
}
|
|
4507
4576
|
if (filterItem.type === 'calendar') {
|
|
4508
4577
|
return (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));
|
|
4509
4578
|
}
|
|
4510
4579
|
return (jsx(Filter, { ...commonProps, type: filterItem.type, items: filterItem.items, selectedIds: filterItem.selectedIds, onApplyFilter: filterItem.onSelectionChange, placeholder: filterItem.placeholder, enableSearch: filterItem.enableSearch }, filterItem.id ?? index));
|
|
4511
|
-
}) })] }))] })), jsx("div", { className: styles$4.tableContainer, children: jsx("div", { className: styles$4.tableScrollWrapper, children: jsxs("table", { className: styles$4.table, "aria-label": "Tabela de dados", "aria-rowcount":
|
|
4580
|
+
}) })] }))] })), jsx("div", { className: styles$4.tableContainer, children: jsx("div", { className: styles$4.tableScrollWrapper, children: jsxs("table", { className: styles$4.table, "aria-label": "Tabela de dados", "aria-rowcount": data.length + 1, children: [jsx("thead", { className: styles$4.tableHead, children: table.getHeaderGroups().map((headerGroup) => (jsx("tr", { children: headerGroup.headers.map((col) => (jsx("th", { className: styles$4.tableTh, style: {
|
|
4512
4581
|
textAlign: col.column.columnDef.meta?.align,
|
|
4513
4582
|
width: col.column.columnDef.size || undefined,
|
|
4514
4583
|
minWidth: col.column.columnDef.minSize,
|
|
4515
4584
|
maxWidth: col.column.columnDef.maxSize !== Number.MAX_SAFE_INTEGER
|
|
4516
4585
|
? col.column.columnDef.maxSize
|
|
4517
4586
|
: undefined,
|
|
4518
|
-
}, children:
|
|
4587
|
+
}, children: jsx("div", { className: styles$4.tableThContent, children: col.isPlaceholder ? null : col.column.getCanSort() ? (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: [flexRender(col.column.columnDef.header, col.getContext()), col.column.getIsSorted() === 'asc' ? (jsx(ArrowSortUp16Regular, { className: styles$4.tableSortIcon })) : col.column.getIsSorted() === 'desc' ? (jsx(ArrowSortDown16Regular, { className: styles$4.tableSortIcon })) : (jsx(ArrowSort16Regular, { className: clsx(styles$4.tableSortIcon, styles$4.tableSortIconNeutral) }))] })) : (flexRender(col.column.columnDef.header, col.getContext())) }) }, col.id))) }, headerGroup.id))) }), jsx("tbody", { className: styles$4.tableBody, children: loading ? (Array.from({ length: skeletonRowCount }).map((_, rowIdx) => (jsx("tr", { className: styles$4.tableRow, children: table.getVisibleLeafColumns().map((col) => (jsx("td", { className: styles$4.tableTd, children: jsx(Skeleton, {}) }, col.id))) }, `skeleton-row-${rowIdx}`)))) : table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map((row, index) => {
|
|
4519
4588
|
const rowProps = onRow?.(row.original, index) ?? {};
|
|
4520
4589
|
return (jsx("tr", { className: clsx(styles$4.tableRow, rowProps.className), onClick: rowProps.onClick, onDoubleClick: rowProps.onDoubleClick, children: row.getVisibleCells().map((cell) => (jsx("td", { className: styles$4.tableTd, style: {
|
|
4521
4590
|
textAlign: cell.column.columnDef.meta?.align,
|