@giro-ds/react 12.0.0 → 12.1.1
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 +248 -366
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +200 -192
- package/dist/index.esm.js +250 -366
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +3 -3
- package/package.json +3 -3
package/dist/index.esm.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { Avatar as Avatar$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, Popover as Popover$1, Label, AlertDialog,
|
|
3
|
+
import { Avatar as Avatar$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, Popover as Popover$1, Label, AlertDialog, DropdownMenu, Dialog as Dialog$1, RadioGroup, Select as Select$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Toast as Toast$1, Switch as Switch$1, unstable_OneTimePasswordField } from 'radix-ui';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import React__default, { useId, useMemo, createContext, useState, useContext, useRef, useCallback, useEffect, useLayoutEffect, createElement, memo, useReducer
|
|
5
|
+
import React__default, { useId, useMemo, createContext, useState, useContext, useRef, useCallback, useEffect, useLayoutEffect, createElement, forwardRef, memo, useReducer } from 'react';
|
|
6
6
|
import { SpinnerIos16Regular, ChevronUp16Regular, ChevronLeft16Regular, ChevronRight16Regular, ChevronDown16Regular, Dismiss24Regular, Emoji20Regular, ChevronDown20Regular, KeyboardShiftUppercase20Regular, KeyboardShift20Filled, KeyboardShift20Regular, Backspace20Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, DocumentAdd24Regular, Warning24Regular, Document24Regular, 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';
|
|
@@ -65,7 +65,7 @@ const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, s
|
|
|
65
65
|
|
|
66
66
|
var styles$s = {"button":"Button-module__button___18Bed","button-lg":"Button-module__button-lg___-A8B9","button-sm":"Button-module__button-sm___L7aT7","button-filled":"Button-module__button-filled___IQx1z","button-outlined":"Button-module__button-outlined___hLkLN","button-text":"Button-module__button-text___8GFeA","buttonWithIcon":"Button-module__buttonWithIcon___8ehK1","buttonIconPosition-left":"Button-module__buttonIconPosition-left___uOY6b","buttonIconPosition-right":"Button-module__buttonIconPosition-right___eswRS","buttonIconPosition-both":"Button-module__buttonIconPosition-both___1Lith","buttonNoContent":"Button-module__buttonNoContent___Tc9jk","buttonIconOnly":"Button-module__buttonIconOnly___aifk4","buttonIconLeft":"Button-module__buttonIconLeft___RICR3","buttonIconRight":"Button-module__buttonIconRight___71lu2","buttonFullWidth":"Button-module__buttonFullWidth___tXuVE","disabled":"Button-module__disabled___UzdWL","buttonLoading":"Button-module__buttonLoading___RGdNw","buttonContentHidden":"Button-module__buttonContentHidden___CoCiN","buttonLoadingSpinner":"Button-module__buttonLoadingSpinner___oZxEU","spin":"Button-module__spin___kQKH9"};
|
|
67
67
|
|
|
68
|
-
const Button = ({
|
|
68
|
+
const Button = React__default.forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel, disabled = false, onClick, size = 'lg', scale = 1, className, type = 'button', id, icon, fullWidth = false, ariaLabel, iconOnly = false, loading = false, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', ...rest }, ref) => {
|
|
69
69
|
const generatedId = useId();
|
|
70
70
|
const componentId = id || generatedId;
|
|
71
71
|
const getComponent = () => {
|
|
@@ -181,7 +181,7 @@ const Button = ({ ref, as, children, variant = 'filled', iconPosition = 'left',
|
|
|
181
181
|
return (jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: jsx(Component, { ...baseProps, ...getNavigationProps(), children: renderContent() }) }));
|
|
182
182
|
}
|
|
183
183
|
return (jsx(Component, { ...baseProps, ...getNavigationProps(), children: renderContent() }));
|
|
184
|
-
};
|
|
184
|
+
});
|
|
185
185
|
Button.displayName = 'Button';
|
|
186
186
|
|
|
187
187
|
function buildFormatLongFn(args) {
|
|
@@ -2845,11 +2845,13 @@ const Checkbox = ({ id, label, onCheckedChange, checked, disabled, className, st
|
|
|
2845
2845
|
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsx(Checkbox$1.Root, { className: styles$o.root, checked: indeterminate ? 'indeterminate' : checked, id: componentId, onCheckedChange: onCheckedChange, disabled: disabled, "data-disabled": disabled, "data-indeterminate": indeterminate, "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false', ...rest, children: jsx(Checkbox$1.Indicator, { className: styles$o.indicator, children: indeterminate ? jsx(CheckHalf, {}) : jsx(CheckSmall, {}) }) }) }), jsx("label", { className: clsx(styles$o.label, { [styles$o.disabled]: disabled }), htmlFor: componentId, children: label })] }));
|
|
2846
2846
|
};
|
|
2847
2847
|
|
|
2848
|
-
var styles$n = {"chips":"Chips-module__chips___SOvBe","title":"Chips-module__title___ZhuQi","iconLeft":"Chips-module__iconLeft___tPhnw","iconRight":"Chips-module__iconRight___-HxL2","hasLeftIcon":"Chips-module__hasLeftIcon___D3quS","hasRightIcon":"Chips-module__hasRightIcon___ZMx2Y","brand":"Chips-module__brand___q1Gsm","success":"Chips-module__success___UhxQa","alert":"Chips-module__alert___nvPnr","disabled":"Chips-module__disabled___ElWLI"};
|
|
2848
|
+
var styles$n = {"chips":"Chips-module__chips___SOvBe","title":"Chips-module__title___ZhuQi","iconLeft":"Chips-module__iconLeft___tPhnw","iconRight":"Chips-module__iconRight___-HxL2","hasLeftIcon":"Chips-module__hasLeftIcon___D3quS","hasRightIcon":"Chips-module__hasRightIcon___ZMx2Y","brand":"Chips-module__brand___q1Gsm","success":"Chips-module__success___UhxQa","alert":"Chips-module__alert___nvPnr","interactive":"Chips-module__interactive___4ytKl","disabled":"Chips-module__disabled___ElWLI"};
|
|
2849
2849
|
|
|
2850
2850
|
const Chips = ({ children, leftIcon, rightIcon, variant = 'neutral', disabled = false, backgroundColor, textColor, scale = 1, className, style, ...rest }) => {
|
|
2851
|
+
const isInteractive = typeof rest.onClick === 'function';
|
|
2851
2852
|
const chipsClass = clsx(styles$n.chips, styles$n[variant], {
|
|
2852
2853
|
[styles$n.disabled]: disabled,
|
|
2854
|
+
[styles$n.interactive]: isInteractive && !disabled,
|
|
2853
2855
|
[styles$n.hasLeftIcon]: leftIcon,
|
|
2854
2856
|
[styles$n.hasRightIcon]: rightIcon,
|
|
2855
2857
|
}, className);
|
|
@@ -2859,7 +2861,6 @@ const Chips = ({ children, leftIcon, rightIcon, variant = 'neutral', disabled =
|
|
|
2859
2861
|
...(!disabled && textColor && { '--chips-text': `var(--${textColor})` }),
|
|
2860
2862
|
...style,
|
|
2861
2863
|
};
|
|
2862
|
-
const isInteractive = typeof rest.onClick === 'function';
|
|
2863
2864
|
const { onKeyDown: userOnKeyDown, ...otherRest } = rest;
|
|
2864
2865
|
const handleKeyDown = (e) => {
|
|
2865
2866
|
userOnKeyDown?.(e);
|
|
@@ -3625,7 +3626,7 @@ const LabelComponent = ({ children, htmlFor, required = false, tooltip = false,
|
|
|
3625
3626
|
return container;
|
|
3626
3627
|
};
|
|
3627
3628
|
|
|
3628
|
-
const TextField = ({
|
|
3629
|
+
const TextField = forwardRef(({ className, style, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, icon, scale = 1, onBlur, onFocus, name, persistIcon = false, virtualKeyboard, attachedToVirtualKeyboard, disableAutoComplete = false, ...rest }, ref) => {
|
|
3629
3630
|
const normalizeValue = (val) => {
|
|
3630
3631
|
return val === undefined || val === null ? '' : String(val);
|
|
3631
3632
|
};
|
|
@@ -3689,7 +3690,7 @@ const TextField = ({ ref, className, style, value, label, placeholder, type = 't
|
|
|
3689
3690
|
const containerClass = clsx(styles$j.container, className, {
|
|
3690
3691
|
[styles$j.attachedToVirtualKeyboard]: attachedToVirtualKeyboard,
|
|
3691
3692
|
[styles$j.disabled]: disabled,
|
|
3692
|
-
[styles$j.error]:
|
|
3693
|
+
[styles$j.error]: hasError,
|
|
3693
3694
|
[styles$j.errorWithMessage]: !!errorMessage,
|
|
3694
3695
|
});
|
|
3695
3696
|
return (jsxs("div", { className: containerClass, style: { ...containerStyle, ...style }, children: [label && (jsx(LabelComponent, { scale: scale, htmlFor: componentId, required: required, tooltip: !!tooltipText, tooltipText: tooltipText, side: tooltipSide, align: tooltipAlign, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$j.inputWrapper, children: [jsxs("div", { className: styles$j.inputContainer, children: [jsx("input", { ...rest, ref: setInputRefs, id: componentId, name: name, type: type, value: inputValue, placeholder: placeholder, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": hasError, "aria-required": required, "aria-describedby": helperId, inputMode: (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') ? 'none' : rest.inputMode, autoComplete: (disableAutoComplete || virtualKeyboard === 'default' || virtualKeyboard === 'numeric') ? 'off' : rest.autoComplete, className: clsx({
|
|
@@ -3703,7 +3704,7 @@ const TextField = ({ ref, className, style, value, label, placeholder, type = 't
|
|
|
3703
3704
|
onChange?.(val);
|
|
3704
3705
|
}
|
|
3705
3706
|
} }) }))] }));
|
|
3706
|
-
};
|
|
3707
|
+
});
|
|
3707
3708
|
TextField.displayName = 'TextField';
|
|
3708
3709
|
var TextField$1 = React__default.memo(TextField);
|
|
3709
3710
|
|
|
@@ -3799,7 +3800,7 @@ function validatePartialDate(value, locale = 'pt-br') {
|
|
|
3799
3800
|
return 'incomplete';
|
|
3800
3801
|
}
|
|
3801
3802
|
|
|
3802
|
-
const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign = 'start', helperText, required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, 'data-testid': testId, scale = 1, className, style, ...rest }) => {
|
|
3803
|
+
const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign = 'start', helperText, required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, 'data-testid': testId, scale = 1, id, className, style, ...rest }) => {
|
|
3803
3804
|
const fieldId = useId();
|
|
3804
3805
|
const calendarId = `${fieldId}-calendar`;
|
|
3805
3806
|
const containerStyle = { '--giro-scale': scale };
|
|
@@ -3929,7 +3930,7 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
|
|
|
3929
3930
|
}
|
|
3930
3931
|
}
|
|
3931
3932
|
};
|
|
3932
|
-
return (jsx("div", { ref: wrapperRef, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsx(TextField$1, { className: styles$h.textfieldContainer, type: "tel", icon: jsx(Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
|
|
3933
|
+
return (jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsx(TextField$1, { className: styles$h.textfieldContainer, type: "tel", icon: jsx(Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
|
|
3933
3934
|
handleTextFieldChange(String(e));
|
|
3934
3935
|
}, onKeyDown: handleKeyDown, onFocus: handleFocus, persistIcon: true, autoComplete: "off", value: displayValue, helperText: !externalError ? (helperText || undefined) : undefined, errorMessage: externalError ? combinedHelperText : undefined, error: hasValidationError ? true : undefined, maxLength: 10, required: required, label: label, disabled: disabled, scale: scale, id: fieldId, "data-testid": testId, placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": calendarId, "aria-invalid": hasValidationError, "aria-describedby": externalError ? undefined : (helperText ? `${fieldId}-help` : undefined) }), content: jsx(Calendar, { selected: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy', minDate: minDate, maxDate: maxDate, scale: scale, id: calendarId, onClear: () => {
|
|
3935
3936
|
handleDateChange(null);
|
|
@@ -4033,7 +4034,7 @@ const matchesAccept = (file, accept) => {
|
|
|
4033
4034
|
return fileType === type;
|
|
4034
4035
|
});
|
|
4035
4036
|
};
|
|
4036
|
-
const FileUpload = ({
|
|
4037
|
+
const FileUpload = forwardRef(({ value, onChange, helperText, error = false, errorMessage, maxFileSize, maxFilesQuantity, disabled = false, className, id, accept, multiple = true, description = 'Clique ou arraste os arquivos aqui', descriptionErrorMessage = 'Falha ao subir um ou mais arquivos.', ...rest }, ref) => {
|
|
4037
4038
|
const generatedId = useId();
|
|
4038
4039
|
const componentId = id || generatedId;
|
|
4039
4040
|
const helperId = `${componentId}-helper`;
|
|
@@ -4168,7 +4169,7 @@ const FileUpload = ({ ref, value, onChange, helperText, error = false, errorMess
|
|
|
4168
4169
|
}
|
|
4169
4170
|
}, children: jsx(Dismiss16Regular, { "aria-hidden": "true" }) })] }, `${file.name}-${index}`));
|
|
4170
4171
|
}) }))] }), displayedHelper && (jsx("span", { id: helperId, role: isError ? 'alert' : undefined, className: clsx(styles$e.helperText, isError && styles$e.errorText), children: displayedHelper }))] }));
|
|
4171
|
-
};
|
|
4172
|
+
});
|
|
4172
4173
|
FileUpload.displayName = 'FileUpload';
|
|
4173
4174
|
|
|
4174
4175
|
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"};
|
|
@@ -4195,7 +4196,7 @@ const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled
|
|
|
4195
4196
|
|
|
4196
4197
|
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"};
|
|
4197
4198
|
|
|
4198
|
-
const Search = ({
|
|
4199
|
+
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, scale = 1, className, style, virtualKeyboard, 'data-testid': testId, ...rest }, ref) => {
|
|
4199
4200
|
const [internalValue, setInternalValue] = useState('');
|
|
4200
4201
|
const { internalRef: inputRef, setRefs: setInputRefs } = useInputKeyboardValue(ref);
|
|
4201
4202
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
@@ -4267,7 +4268,7 @@ const Search = ({ ref, placeholder = 'Dica do que deve ser buscado', disabled =
|
|
|
4267
4268
|
setInternalValue(val);
|
|
4268
4269
|
}
|
|
4269
4270
|
} }) }))] }));
|
|
4270
|
-
};
|
|
4271
|
+
});
|
|
4271
4272
|
Search.displayName = 'Search';
|
|
4272
4273
|
|
|
4273
4274
|
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 }) => {
|
|
@@ -4386,42 +4387,38 @@ const Filter = ({ mode = 'simple', ...props }) => {
|
|
|
4386
4387
|
return jsx(Simple, { ...props });
|
|
4387
4388
|
};
|
|
4388
4389
|
|
|
4389
|
-
var styles$b = {"
|
|
4390
|
+
var styles$b = {"listItem":"ListItem-module__listItem___ljWE5","listItemRow":"ListItem-module__listItemRow___Ur5aJ","listItem-checkbox":"ListItem-module__listItem-checkbox___-cn1b","listItem-icon":"ListItem-module__listItem-icon___B-LXx","listItem-text":"ListItem-module__listItem-text___pLRU7","listItemDisabled":"ListItem-module__listItemDisabled___8gsyb","listItemWrapperText":"ListItem-module__listItemWrapperText___tT-Yj","listItemWrapperIcon":"ListItem-module__listItemWrapperIcon___qK4Ct","listItemTitle":"ListItem-module__listItemTitle___lpf-A","listItemSubtext":"ListItem-module__listItemSubtext___WDxHE","listItemChevron":"ListItem-module__listItemChevron___fCuqf","listItemChevronExpanded":"ListItem-module__listItemChevronExpanded___HYTON","listItemChildren":"ListItem-module__listItemChildren___H3Vur"};
|
|
4390
4391
|
|
|
4391
|
-
|
|
4392
|
-
|
|
4393
|
-
const Radio = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', scale = 1, className, style, ...rest }) => {
|
|
4394
|
-
const generatedId = useId();
|
|
4395
|
-
const componentId = id || generatedId;
|
|
4396
|
-
return (jsx(RadioGroup.Root, { id: componentId, className: clsx(styles$a.root, className), style: { '--giro-scale': scale, ...style }, defaultValue: defaultValue, onValueChange: onValueChange, name: name, "aria-label": ariaLabel, "data-orientation": orientation, orientation: orientation, ...rest, children: items.map(({ id, value, disabled, label }) => {
|
|
4397
|
-
const itemKey = id ?? value;
|
|
4398
|
-
const uniqueId = `${componentId}-item-${value}`;
|
|
4399
|
-
return (jsx("div", { className: clsx(styles$a.wrapper, { [styles$a.disabled]: disabled }), children: jsxs("label", { className: styles$a.labelWrapper, htmlFor: uniqueId, children: [jsx("div", { className: styles$a.itemWrapper, children: jsx(RadioGroup.Item, { disabled: disabled, className: styles$a.item, value: value, id: uniqueId, "data-disabled": disabled, children: jsx(RadioGroup.Indicator, { className: styles$a.indicator }) }) }), jsx("span", { className: styles$a.labelText, children: label })] }) }, itemKey));
|
|
4400
|
-
}) }));
|
|
4401
|
-
};
|
|
4402
|
-
|
|
4403
|
-
const ListItem = ({ id, className, variant = 'text', text, name, subText, disabled = false, checked = false, selected = false, onClick, onChange, icon, value, showSubText = false, hovered = false, ...rest }) => {
|
|
4392
|
+
const ListItem = ({ id, className, variant = 'text', text, subText, disabled = false, checked = false, selected = false, onClick, onChange, icon, customWidth, scale = 1, children, defaultExpanded = false, expanded, onExpandedChange, ...rest }) => {
|
|
4404
4393
|
const componentId = useId();
|
|
4405
4394
|
const itemId = id || componentId;
|
|
4406
4395
|
const [internalChecked, setInternalChecked] = useState(checked);
|
|
4407
4396
|
const [internalSelected, setInternalSelected] = useState(selected);
|
|
4397
|
+
const [internalExpanded, setInternalExpanded] = useState(expanded ?? defaultExpanded);
|
|
4398
|
+
const [childrenCheckedMap, setChildrenCheckedMap] = useState({});
|
|
4399
|
+
const childrenCount = variant === 'checkbox'
|
|
4400
|
+
? React__default.Children.toArray(children).filter(child => React__default.isValidElement(child) && !child.props.disabled).length
|
|
4401
|
+
: 0;
|
|
4402
|
+
const checkedCount = Object.values(childrenCheckedMap).filter(Boolean).length;
|
|
4403
|
+
const isIndeterminate = childrenCount > 0 && checkedCount > 0 && checkedCount < childrenCount;
|
|
4404
|
+
const hasChildren = React__default.Children.count(children) > 0;
|
|
4408
4405
|
const handleCheckboxClick = useCallback((e) => {
|
|
4409
4406
|
if (disabled)
|
|
4410
4407
|
return;
|
|
4411
|
-
const newChecked = !internalChecked;
|
|
4408
|
+
const newChecked = isIndeterminate ? true : !internalChecked;
|
|
4412
4409
|
setInternalChecked(newChecked);
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4421
|
-
onChange?.(true);
|
|
4410
|
+
if (childrenCount > 0) {
|
|
4411
|
+
const newMap = {};
|
|
4412
|
+
React__default.Children.forEach(children, (child, index) => {
|
|
4413
|
+
if (React__default.isValidElement(child) && !child.props.disabled) {
|
|
4414
|
+
newMap[index] = newChecked;
|
|
4415
|
+
}
|
|
4416
|
+
});
|
|
4417
|
+
setChildrenCheckedMap(newMap);
|
|
4422
4418
|
}
|
|
4419
|
+
onChange?.(newChecked);
|
|
4423
4420
|
onClick?.(e);
|
|
4424
|
-
}, [disabled, internalChecked, onChange, onClick]);
|
|
4421
|
+
}, [disabled, internalChecked, isIndeterminate, childrenCount, onChange, onClick, children]);
|
|
4425
4422
|
const handleTextOrIconClick = useCallback((e) => {
|
|
4426
4423
|
if (disabled)
|
|
4427
4424
|
return;
|
|
@@ -4429,16 +4426,55 @@ const ListItem = ({ id, className, variant = 'text', text, name, subText, disabl
|
|
|
4429
4426
|
setInternalSelected(newSelected);
|
|
4430
4427
|
onClick?.(e);
|
|
4431
4428
|
}, [disabled, internalSelected, onClick]);
|
|
4429
|
+
const handleChildChange = useCallback((index, childChecked) => {
|
|
4430
|
+
setChildrenCheckedMap(prev => {
|
|
4431
|
+
const next = { ...prev, [index]: childChecked };
|
|
4432
|
+
const total = childrenCount;
|
|
4433
|
+
const checked = Object.values(next).filter(Boolean).length;
|
|
4434
|
+
if (checked === 0) {
|
|
4435
|
+
setInternalChecked(false);
|
|
4436
|
+
onChange?.(false);
|
|
4437
|
+
}
|
|
4438
|
+
else if (checked === total) {
|
|
4439
|
+
setInternalChecked(true);
|
|
4440
|
+
onChange?.(true);
|
|
4441
|
+
}
|
|
4442
|
+
return next;
|
|
4443
|
+
});
|
|
4444
|
+
}, [childrenCount, onChange]);
|
|
4445
|
+
const handleClick = useCallback((e) => {
|
|
4446
|
+
if (hasChildren) {
|
|
4447
|
+
if (disabled)
|
|
4448
|
+
return;
|
|
4449
|
+
const newExpanded = !internalExpanded;
|
|
4450
|
+
setInternalExpanded(newExpanded);
|
|
4451
|
+
onExpandedChange?.(newExpanded);
|
|
4452
|
+
return;
|
|
4453
|
+
}
|
|
4454
|
+
switch (variant) {
|
|
4455
|
+
case 'checkbox':
|
|
4456
|
+
handleCheckboxClick(e);
|
|
4457
|
+
break;
|
|
4458
|
+
case 'text':
|
|
4459
|
+
case 'icon':
|
|
4460
|
+
default:
|
|
4461
|
+
handleTextOrIconClick(e);
|
|
4462
|
+
break;
|
|
4463
|
+
}
|
|
4464
|
+
}, [hasChildren, disabled, internalExpanded, onExpandedChange, variant, handleCheckboxClick, handleTextOrIconClick]);
|
|
4432
4465
|
const handleKeyDown = useCallback((e) => {
|
|
4433
4466
|
if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
|
|
4434
4467
|
e.preventDefault();
|
|
4468
|
+
if (hasChildren) {
|
|
4469
|
+
const newExpanded = !internalExpanded;
|
|
4470
|
+
setInternalExpanded(newExpanded);
|
|
4471
|
+
onExpandedChange?.(newExpanded);
|
|
4472
|
+
return;
|
|
4473
|
+
}
|
|
4435
4474
|
switch (variant) {
|
|
4436
4475
|
case 'checkbox':
|
|
4437
4476
|
handleCheckboxClick(e);
|
|
4438
4477
|
break;
|
|
4439
|
-
case 'radio':
|
|
4440
|
-
handleRadioClick(e);
|
|
4441
|
-
break;
|
|
4442
4478
|
case 'text':
|
|
4443
4479
|
case 'icon':
|
|
4444
4480
|
default:
|
|
@@ -4446,54 +4482,80 @@ const ListItem = ({ id, className, variant = 'text', text, name, subText, disabl
|
|
|
4446
4482
|
break;
|
|
4447
4483
|
}
|
|
4448
4484
|
}
|
|
4449
|
-
}, [disabled, variant, handleCheckboxClick,
|
|
4485
|
+
}, [disabled, hasChildren, internalExpanded, onExpandedChange, variant, handleCheckboxClick, handleTextOrIconClick]);
|
|
4450
4486
|
useEffect(() => {
|
|
4451
4487
|
setInternalChecked(checked);
|
|
4452
4488
|
}, [checked]);
|
|
4453
4489
|
useEffect(() => {
|
|
4454
4490
|
setInternalSelected(selected);
|
|
4455
4491
|
}, [selected]);
|
|
4492
|
+
useEffect(() => {
|
|
4493
|
+
if (expanded !== undefined)
|
|
4494
|
+
setInternalExpanded(expanded);
|
|
4495
|
+
}, [expanded]);
|
|
4496
|
+
useEffect(() => {
|
|
4497
|
+
if (!internalExpanded || variant !== 'checkbox' || childrenCount === 0)
|
|
4498
|
+
return;
|
|
4499
|
+
setChildrenCheckedMap(prev => {
|
|
4500
|
+
let changed = false;
|
|
4501
|
+
const next = { ...prev };
|
|
4502
|
+
React__default.Children.forEach(children, (child, index) => {
|
|
4503
|
+
if (React__default.isValidElement(child) && !child.props.disabled && !(index in next)) {
|
|
4504
|
+
next[index] = internalChecked;
|
|
4505
|
+
changed = true;
|
|
4506
|
+
}
|
|
4507
|
+
});
|
|
4508
|
+
return changed ? next : prev;
|
|
4509
|
+
});
|
|
4510
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4511
|
+
}, [internalExpanded, childrenCount, variant]);
|
|
4456
4512
|
const renderVariantContent = useCallback(() => {
|
|
4457
|
-
const validVariants = ['text', 'checkbox', '
|
|
4513
|
+
const validVariants = ['text', 'checkbox', 'icon'];
|
|
4458
4514
|
const currentVariant = validVariants.includes(variant) ? variant : 'text';
|
|
4459
4515
|
switch (currentVariant) {
|
|
4460
4516
|
case 'checkbox':
|
|
4461
|
-
return (jsxs(Fragment, { children: [jsx(Checkbox, { checked: internalChecked, disabled: disabled, onCheckedChange: () => handleCheckboxClick({}) }), jsxs("div", { className: styles$b
|
|
4462
|
-
case 'radio':
|
|
4463
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$b['zds-list-item__wrapper-radio'], children: jsx("span", { className: styles$b['zds-list-item__radio'], "aria-hidden": "true", children: jsx(Radio, { name: name, onValueChange: () => handleRadioClick({}), items: [{
|
|
4464
|
-
value: value || '',
|
|
4465
|
-
label: '',
|
|
4466
|
-
disabled: disabled
|
|
4467
|
-
}], "aria-labelledby": `${itemId}-text` }) }) }), jsxs("div", { className: styles$b['zds-list-item__wrapper-text'], children: [jsx("span", { id: `${itemId}-text`, className: styles$b['zds-list-item__title'], onClick: handleRadioClick, children: text }), showSubText && subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$b['zds-list-item__subtext'], children: subText }))] })] }));
|
|
4517
|
+
return (jsxs(Fragment, { children: [jsx("span", { "aria-hidden": "true", onClick: hasChildren ? (e) => e.stopPropagation() : undefined, children: jsx(Checkbox, { checked: internalChecked, indeterminate: isIndeterminate, disabled: disabled, scale: scale, onCheckedChange: () => handleCheckboxClick({}) }) }), jsxs("div", { className: styles$b.listItemWrapperText, children: [jsx("span", { id: `${itemId}-text`, className: styles$b.listItemTitle, onClick: hasChildren ? (e) => { e.stopPropagation(); handleCheckboxClick(e); } : undefined, children: text }), subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$b.listItemSubtext, children: subText }))] })] }));
|
|
4468
4518
|
case 'icon':
|
|
4469
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$b
|
|
4519
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$b.listItemWrapperIcon, children: icon }), jsxs("div", { className: styles$b.listItemWrapperText, children: [jsx("span", { id: `${itemId}-text`, className: styles$b.listItemTitle, children: text }), subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$b.listItemSubtext, children: subText }))] })] }));
|
|
4470
4520
|
case 'text':
|
|
4471
4521
|
default:
|
|
4472
|
-
return (jsxs("div", { className: styles$b
|
|
4522
|
+
return (jsxs("div", { className: styles$b.listItemWrapperText, children: [jsx("span", { id: `${itemId}-text`, className: styles$b.listItemTitle, children: text }), subText && (jsx("span", { id: `${itemId}-subtext`, className: styles$b.listItemSubtext, children: subText }))] }));
|
|
4473
4523
|
}
|
|
4474
|
-
}, [variant, itemId, internalChecked, disabled, handleCheckboxClick,
|
|
4475
|
-
const listItemClass = clsx(styles$b
|
|
4476
|
-
[styles$b[`
|
|
4477
|
-
[styles$b
|
|
4478
|
-
[styles$b['zds-list-item--hovered']]: hovered,
|
|
4524
|
+
}, [variant, itemId, internalChecked, isIndeterminate, disabled, handleCheckboxClick, text, subText, icon, scale, hasChildren]);
|
|
4525
|
+
const listItemClass = clsx(styles$b.listItem, {
|
|
4526
|
+
[styles$b[`listItem-${variant}`]]: variant,
|
|
4527
|
+
[styles$b.listItemDisabled]: disabled,
|
|
4479
4528
|
[className || '']: className
|
|
4480
4529
|
});
|
|
4481
|
-
const
|
|
4482
|
-
|
|
4483
|
-
|
|
4484
|
-
|
|
4485
|
-
|
|
4486
|
-
|
|
4487
|
-
|
|
4530
|
+
const ariaChecked = variant === 'checkbox' ? internalChecked : undefined;
|
|
4531
|
+
const ariaRole = variant === 'checkbox' ? 'checkbox' : 'option';
|
|
4532
|
+
return (jsxs("li", { id: itemId, className: listItemClass, "data-testid": "list-item", style: {
|
|
4533
|
+
'--giro-scale': scale,
|
|
4534
|
+
...(customWidth != null ? { width: customWidth } : {}),
|
|
4535
|
+
}, ...rest, children: [jsxs("div", { role: ariaRole, className: styles$b.listItemRow, tabIndex: disabled ? -1 : 0, onClick: handleClick, onKeyDown: handleKeyDown, "aria-selected": variant === 'text' || variant === 'icon' ? internalSelected : undefined, "aria-disabled": disabled, "aria-checked": ariaChecked, "aria-expanded": hasChildren ? internalExpanded : undefined, "aria-labelledby": `${itemId}-text`, "aria-describedby": subText ? `${itemId}-subtext` : undefined, children: [renderVariantContent(), hasChildren && (jsx("span", { "data-testid": "list-item-chevron", "aria-hidden": "true", className: clsx(styles$b.listItemChevron, {
|
|
4536
|
+
[styles$b.listItemChevronExpanded]: internalExpanded,
|
|
4537
|
+
}), children: jsx(ChevronDown16Regular, {}) }))] }), hasChildren && internalExpanded && (jsx("ul", { className: styles$b.listItemChildren, role: "group", children: variant === 'checkbox'
|
|
4538
|
+
? React__default.Children.map(children, (child, index) => React__default.isValidElement(child)
|
|
4539
|
+
? React__default.cloneElement(child, {
|
|
4540
|
+
checked: child.props.disabled
|
|
4541
|
+
? child.props.checked
|
|
4542
|
+
: (childrenCheckedMap[index] ?? internalChecked),
|
|
4543
|
+
onChange: (childChecked) => {
|
|
4544
|
+
child.props.onChange?.(childChecked);
|
|
4545
|
+
handleChildChange(index, childChecked);
|
|
4546
|
+
},
|
|
4547
|
+
})
|
|
4548
|
+
: child)
|
|
4549
|
+
: children }))] }));
|
|
4488
4550
|
};
|
|
4489
4551
|
|
|
4490
|
-
var styles$
|
|
4552
|
+
var styles$a = {"content":"Menu-module__content___pnDF6","subContent":"Menu-module__subContent___O9T-y","itemsWrapper":"Menu-module__itemsWrapper___Fcg71","item":"Menu-module__item___S3HKY","subTrigger":"Menu-module__subTrigger___CdnJE","itemSubText":"Menu-module__itemSubText___U1HFP","itemIcon":"Menu-module__itemIcon___iyxmZ","wrapperText":"Menu-module__wrapperText___PomUe","itemText":"Menu-module__itemText___2fd2B","chevronIcon":"Menu-module__chevronIcon___Gda-U","searchWrapper":"Menu-module__searchWrapper___e0knQ","emptyState":"Menu-module__emptyState___3wh-S","loadingMore":"Menu-module__loadingMore___fUCvH"};
|
|
4491
4553
|
|
|
4492
4554
|
const MenuItem = memo(({ item, isSelected, onSelect }) => {
|
|
4493
4555
|
const handleSelect = () => {
|
|
4494
4556
|
onSelect(item);
|
|
4495
4557
|
};
|
|
4496
|
-
return (jsxs(DropdownMenu.Item, { className: clsx(styles$
|
|
4558
|
+
return (jsxs(DropdownMenu.Item, { className: clsx(styles$a.item), "data-selected": isSelected || undefined, onSelect: handleSelect, disabled: item.disabled, children: [item.icon && jsx("span", { className: styles$a.itemIcon, children: item.icon }), jsxs("div", { className: styles$a.wrapperText, children: [jsx("span", { className: styles$a.itemText, children: item.text }), item.subText && (jsx("span", { className: styles$a.itemSubText, children: item.subText }))] })] }));
|
|
4497
4559
|
});
|
|
4498
4560
|
MenuItem.displayName = 'MenuItem';
|
|
4499
4561
|
|
|
@@ -4721,7 +4783,7 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4721
4783
|
const renderMenuItem = useCallback((item, key) => {
|
|
4722
4784
|
const hasChildren = item.children && item.children.length > 0;
|
|
4723
4785
|
if (hasChildren) {
|
|
4724
|
-
return (jsxs(DropdownMenu.Sub, { children: [jsxs(DropdownMenu.SubTrigger, { className: styles$
|
|
4786
|
+
return (jsxs(DropdownMenu.Sub, { children: [jsxs(DropdownMenu.SubTrigger, { className: styles$a.subTrigger, disabled: item.disabled, children: [item.icon && (jsx("span", { className: styles$a.itemIcon, children: item.icon })), jsxs("div", { className: styles$a.wrapperText, children: [jsx("span", { className: styles$a.itemText, children: item.text }), item.subText && (jsx("span", { className: styles$a.itemSubText, children: item.subText }))] }), jsx(ChevronRight16Filled, { className: styles$a.chevronIcon })] }), jsx(DropdownMenu.Portal, { children: jsx(DropdownMenu.SubContent, { className: styles$a.subContent, sideOffset: 16, collisionPadding: 20, children: item.children.map((childItem, childIndex) => renderMenuItem(childItem, `${key}-${childIndex}`)) }) })] }, key));
|
|
4725
4787
|
}
|
|
4726
4788
|
return (jsx(MenuItem, { item: item, isSelected: isItemSelected(item), onSelect: handleItemSelect }, key));
|
|
4727
4789
|
}, [handleItemSelect, isItemSelected]);
|
|
@@ -4732,7 +4794,7 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4732
4794
|
hasReachedEndRef.current = false;
|
|
4733
4795
|
}
|
|
4734
4796
|
};
|
|
4735
|
-
return (jsxs(DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsx(DropdownMenu.Trigger, { asChild: true, children: triggerWithScale }), jsx(DropdownMenu.Portal, { children: jsxs(DropdownMenu.Content, { className: clsx(styles$
|
|
4797
|
+
return (jsxs(DropdownMenu.Root, { open: open, onOpenChange: handleOpenChange, children: [jsx(DropdownMenu.Trigger, { asChild: true, children: triggerWithScale }), jsx(DropdownMenu.Portal, { children: jsxs(DropdownMenu.Content, { className: clsx(styles$a.content, className), style: { ...containerStyle, ...style }, sideOffset: 8, align: align, onPointerDown: () => { closedByPointerRef.current = true; }, onInteractOutside: () => { closedByPointerRef.current = true; }, onCloseAutoFocus: (e) => {
|
|
4736
4798
|
if (closedByPointerRef.current) {
|
|
4737
4799
|
e.preventDefault();
|
|
4738
4800
|
closedByPointerRef.current = false;
|
|
@@ -4741,10 +4803,10 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4741
4803
|
if (search) {
|
|
4742
4804
|
e.stopPropagation();
|
|
4743
4805
|
}
|
|
4744
|
-
}, ...rest, children: [search && (jsx("div", { className: styles$
|
|
4806
|
+
}, ...rest, children: [search && (jsx("div", { className: styles$a.searchWrapper, children: jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), jsxs("div", { className: styles$a.itemsWrapper, ref: itemsWrapperRef, style: { maxHeight: maxHeightStyle }, children: [filteredItems.length > 0 ? (filteredItems.map((item, index) => renderMenuItem(item, item.value || item.text || `item-${index}`))) : (jsx("div", { className: styles$a.emptyState, children: "Nenhum item encontrado" })), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$a.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
|
|
4745
4807
|
};
|
|
4746
4808
|
|
|
4747
|
-
var styles$
|
|
4809
|
+
var styles$9 = {"modalOverlay":"Modal-module__modalOverlay___rI8Wz","modalContent":"Modal-module__modalContent___6Cgb1","modalContent--fullscreen":"Modal-module__modalContent--fullscreen___QeBlG","modalHeader":"Modal-module__modalHeader___IuHIg","modalTitle":"Modal-module__modalTitle___9VDmr","modalBody":"Modal-module__modalBody___ohjQm","modalFooter":"Modal-module__modalFooter___TEqdK"};
|
|
4748
4810
|
|
|
4749
4811
|
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, customHeight, fullscreen = false, ...rest }) => {
|
|
4750
4812
|
const contentRef = React.useRef(null);
|
|
@@ -4757,13 +4819,13 @@ const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeO
|
|
|
4757
4819
|
e.preventDefault();
|
|
4758
4820
|
contentRef.current?.focus();
|
|
4759
4821
|
};
|
|
4760
|
-
return (jsx(Dialog$1.Root, { open: isOpen, onOpenChange: handleOpenChange, ...rest, children: jsxs(Dialog$1.Portal, { children: [jsx(Dialog$1.Overlay, { className: styles$
|
|
4822
|
+
return (jsx(Dialog$1.Root, { open: isOpen, onOpenChange: handleOpenChange, ...rest, children: jsxs(Dialog$1.Portal, { children: [jsx(Dialog$1.Overlay, { className: styles$9.modalOverlay }), jsxs(Dialog$1.Content, { ref: contentRef, className: clsx(styles$9.modalContent, fullscreen && styles$9['modalContent--fullscreen'], className), id: id, style: {
|
|
4761
4823
|
'--modal-custom-width': customWidth,
|
|
4762
4824
|
'--modal-custom-height': customHeight,
|
|
4763
|
-
}, onInteractOutside: !closeOnOverlayClick ? (e) => e.preventDefault() : undefined, onOpenAutoFocus: handleOpenAutoFocus, "aria-labelledby": id ? `${id}-title` : 'modal-title', tabIndex: -1, children: [jsxs("header", { className: styles$
|
|
4825
|
+
}, onInteractOutside: !closeOnOverlayClick ? (e) => e.preventDefault() : undefined, onOpenAutoFocus: handleOpenAutoFocus, "aria-labelledby": id ? `${id}-title` : 'modal-title', tabIndex: -1, children: [jsxs("header", { className: styles$9.modalHeader, children: [title && (jsx(Dialog$1.Title, { className: styles$9.modalTitle, id: id ? `${id}-title` : 'modal-title', children: title })), headerContent && (jsx("div", { children: headerContent })), jsx(Dialog$1.Close, { asChild: true, children: jsx(Button, { variant: "outlined", iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: "lg", tooltipText: 'Fechar' }) })] }), jsx("section", { className: styles$9.modalBody, children: children }), footer && (jsx("footer", { className: styles$9.modalFooter, children: footer }))] })] }) }));
|
|
4764
4826
|
};
|
|
4765
4827
|
|
|
4766
|
-
var styles$
|
|
4828
|
+
var styles$8 = {"quantity":"Quantity-module__quantity___-vndR","quantityInput":"Quantity-module__quantityInput___xZG-v","disabled":"Quantity-module__disabled___X6p5l"};
|
|
4767
4829
|
|
|
4768
4830
|
const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, decimalPlaces = 2, size = 'lg', id, valueIncrement = 1, scale = 1, className, style, inputSize, minValue = 0, maxValue = 9999, decrementAriaLabel = 'Decrease quantity', incrementAriaLabel = 'Increase quantity', inputAriaLabel = 'Quantity', ...rest }) => {
|
|
4769
4831
|
const initialValue = Math.min(Math.max(value, minValue), maxValue);
|
|
@@ -4944,11 +5006,23 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
|
|
|
4944
5006
|
const inputSizeValue = inputSize !== undefined ? inputSize : Math.max(1, inputValue.length);
|
|
4945
5007
|
const uniqueId = useId();
|
|
4946
5008
|
const inputId = id || uniqueId;
|
|
4947
|
-
return (jsxs("div", { className: clsx(styles$
|
|
5009
|
+
return (jsxs("div", { className: clsx(styles$8.quantity, { [styles$8.disabled]: disabled }, className), style: { '--giro-scale': scale, ...style }, ...rest, children: [jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, icon: jsx(Subtract16Regular, {}), onClick: decrement, disabled: disabled || isMinValue, "aria-label": decrementAriaLabel, tooltipText: 'Diminuir', scale: scale }), jsx("input", { ref: inputRef, className: clsx(styles$8.quantityInput, { [styles$8.disabled]: disabled }), type: 'text', value: inputValue, onChange: handleInputChange, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: inputId, step: stepValue, "aria-label": inputAriaLabel, role: 'spinbutton', "aria-valuenow": internalValue, "aria-valuemin": minValue, "aria-valuemax": maxValue, disabled: disabled, inputMode: decimal ? 'decimal' : 'numeric', size: inputSizeValue }), jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, onClick: increment, disabled: disabled || isMaxValue, "aria-label": incrementAriaLabel, icon: jsx(Add16Regular, {}), tooltipText: 'Aumentar', scale: scale })] }));
|
|
4948
5010
|
};
|
|
4949
5011
|
const memorizedQuantity = React__default.memo(Quantity);
|
|
4950
5012
|
memorizedQuantity.displayName = 'Quantity';
|
|
4951
5013
|
|
|
5014
|
+
var styles$7 = {"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"};
|
|
5015
|
+
|
|
5016
|
+
const Radio = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', scale = 1, className, style, ...rest }) => {
|
|
5017
|
+
const generatedId = useId();
|
|
5018
|
+
const componentId = id || generatedId;
|
|
5019
|
+
return (jsx(RadioGroup.Root, { id: componentId, className: clsx(styles$7.root, className), style: { '--giro-scale': scale, ...style }, defaultValue: defaultValue, onValueChange: onValueChange, name: name, "aria-label": ariaLabel, "data-orientation": orientation, orientation: orientation, ...rest, children: items.map(({ id, value, disabled, label }) => {
|
|
5020
|
+
const itemKey = id ?? value;
|
|
5021
|
+
const uniqueId = `${componentId}-item-${value}`;
|
|
5022
|
+
return (jsx("div", { className: clsx(styles$7.wrapper, { [styles$7.disabled]: disabled }), children: jsxs("label", { className: styles$7.labelWrapper, htmlFor: uniqueId, children: [jsx("div", { className: styles$7.itemWrapper, children: jsx(RadioGroup.Item, { disabled: disabled, className: styles$7.item, value: value, id: uniqueId, "data-disabled": disabled, children: jsx(RadioGroup.Indicator, { className: styles$7.indicator }) }) }), jsx("span", { className: styles$7.labelText, children: label })] }) }, itemKey));
|
|
5023
|
+
}) }));
|
|
5024
|
+
};
|
|
5025
|
+
|
|
4952
5026
|
var styles$6 = {"fieldContainer":"Select-module__fieldContainer___zkWSZ","trigger":"Select-module__trigger___xZVUG","disabled":"Select-module__disabled___kkzG-","open":"Select-module__open___bTuTy","error":"Select-module__error___yikGO","hasValue":"Select-module__hasValue___56T9r","triggerText":"Select-module__triggerText___tfXlq","triggerIcon":"Select-module__triggerIcon___Smobj","content":"Select-module__content___Eftze","viewport":"Select-module__viewport___mMGOo","group":"Select-module__group___wErLt","container":"Select-module__container___U1UI1","containerLabel":"Select-module__containerLabel___-5qpN","searchWrapper":"Select-module__searchWrapper___H01Wp","item":"Select-module__item___72Rnu","subTitle":"Select-module__subTitle___FdYBH","checkboxItem":"Select-module__checkboxItem___Ehw-a","checkboxContent":"Select-module__checkboxContent___7eKLC","itemWrapper":"Select-module__itemWrapper___nPovg","title":"Select-module__title___bqW3p","icon":"Select-module__icon___RH27W","itemIndicator":"Select-module__itemIndicator___4DBU-","textContent":"Select-module__textContent___k1SLX","helper":"Select-module__helper___pTp7X","errorMessage":"Select-module__errorMessage___--vrn","noResults":"Select-module__noResults___IxsAN","loadingMore":"Select-module__loadingMore___DjAUE","expandableItemContainer":"Select-module__expandableItemContainer___w4ZIb","chevron":"Select-module__chevron___Kgee3","childrenWrapper":"Select-module__childrenWrapper___2NnS-"};
|
|
4953
5027
|
|
|
4954
5028
|
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange, value, ...restProps }) => {
|
|
@@ -5024,13 +5098,13 @@ const ExpandableSelectItem = ({ item, variant, onSelect, selectedValues, level =
|
|
|
5024
5098
|
}, role: "button", tabIndex: item.disabled ? -1 : 0, "data-disabled": item.disabled || undefined, "data-selected": isSelected && !hasChildren ? 'true' : undefined, "data-testid": `select-item-${item.value}`, children: [variant === 'icon' && item.icon && (jsx("span", { className: styles$6.icon, children: item.icon })), jsxs("div", { className: styles$6.textContent, children: [jsx("div", { className: styles$6.title, children: item.text }), item.subTitle && jsx("div", { className: styles$6.subTitle, children: item.subTitle })] }), hasChildren && (jsx("span", { className: styles$6.chevron, children: isExpanded ? jsx(ChevronDown16Regular, {}) : jsx(ChevronRight16Regular, {}) }))] }) }), hasChildren && isExpanded && (jsx("div", { className: styles$6.childrenWrapper, children: item.children.map((child) => (jsx(ExpandableSelectItem, { item: child, variant: variant, onSelect: onSelect, selectedValues: selectedValues, level: level + 1 }, child.id || child.value))) }))] }));
|
|
5025
5099
|
};
|
|
5026
5100
|
|
|
5027
|
-
const SelectItem = ({
|
|
5101
|
+
const SelectItem = React__default.forwardRef(({ text, subTitle, icon, disabled, value, variant, disableFocusOnHover, ...restProps }, ref) => {
|
|
5028
5102
|
return (jsxs("div", { className: clsx(styles$6.itemWrapper, {
|
|
5029
5103
|
[styles$6.disabled]: disabled,
|
|
5030
5104
|
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$6.icon, children: icon })), jsxs(Select$1.Item, { className: clsx(styles$6.item, {
|
|
5031
5105
|
[styles$6.disabled]: disabled,
|
|
5032
5106
|
}), value: value, disabled: disabled, onPointerMove: disableFocusOnHover ? (e) => e.preventDefault() : undefined, ...restProps, children: [jsx(Select$1.ItemText, { className: styles$6.title, children: text }), subTitle && jsx("div", { className: styles$6.subTitle, children: subTitle }), jsx(Select$1.ItemIndicator, { className: styles$6.itemIndicator })] })] }));
|
|
5033
|
-
};
|
|
5107
|
+
});
|
|
5034
5108
|
SelectItem.displayName = 'SelectItem';
|
|
5035
5109
|
|
|
5036
5110
|
const initialState = {
|
|
@@ -5373,272 +5447,55 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
5373
5447
|
};
|
|
5374
5448
|
Select.displayName = 'Select';
|
|
5375
5449
|
|
|
5376
|
-
var styles$5 = {"tableContainer":"Table-
|
|
5450
|
+
var styles$5 = {"wrapper":"Table-module__wrapper___KMc04","tableContainer":"Table-module__tableContainer___byysv","tableHeader":"Table-module__tableHeader___urbxZ","bulkActionsBar":"Table-module__bulkActionsBar___Irfnt","bulkActionsInfo":"Table-module__bulkActionsInfo___pLTb6","bulkActionsClearButton":"Table-module__bulkActionsClearButton___jjQTq","bulkActionsLabel":"Table-module__bulkActionsLabel___QB3N9","bulkActionsButtons":"Table-module__bulkActionsButtons___1anDO","tablePagination":"Table-module__tablePagination___MbqJy","table":"Table-module__table___9xCJC","tableHead":"Table-module__tableHead___oVEa6","tableTh":"Table-module__tableTh___U02-Y","tableThContent":"Table-module__tableThContent___61AqT","tableSortButton":"Table-module__tableSortButton___ZgLkx","tableBody":"Table-module__tableBody___fq4Aa","tableTd":"Table-module__tableTd___OfW9v","tableRow":"Table-module__tableRow___COJNu","checkboxCell":"Table-module__checkboxCell___B9vHM","tableSortIconNeutral":"Table-module__tableSortIconNeutral___uvnHs","tableSortIcon":"Table-module__tableSortIcon___YVa2Q","tableHeaderLeft":"Table-module__tableHeaderLeft___gtnru","tableHeaderSearchContainer":"Table-module__tableHeaderSearchContainer___Yy8-s","tableHeaderSearch":"Table-module__tableHeaderSearch___swewU","tableHeaderFilters":"Table-module__tableHeaderFilters___ncatO","tableHeaderFilterLabel":"Table-module__tableHeaderFilterLabel___r3DI-","tableHeaderFilterItems":"Table-module__tableHeaderFilterItems___kQDsY","tablePaginationSelect":"Table-module__tablePaginationSelect___l2aYm","tablePaginationLabel":"Table-module__tablePaginationLabel___S9VOr","tablePaginationSelectInput":"Table-module__tablePaginationSelectInput___wdhOQ","tablePaginationInfo":"Table-module__tablePaginationInfo___r1v8R","tablePaginationControls":"Table-module__tablePaginationControls___IL8rm","tablePaginationButton":"Table-module__tablePaginationButton___SNDQq","tableScrollWrapper":"Table-module__tableScrollWrapper___SvEOw","tableEmptyCell":"Table-module__tableEmptyCell___N5a9t","tableEmpty":"Table-module__tableEmpty___0yPZ0","tableEmptyContent":"Table-module__tableEmptyContent___uNWpN","tableEmptyText":"Table-module__tableEmptyText___7kY7Q","tableEmptyTitle":"Table-module__tableEmptyTitle___Y-7z8","tableEmptyCaption":"Table-module__tableEmptyCaption___4PZ14","tableCellMaxHeight":"Table-module__tableCellMaxHeight___-tcyU"};
|
|
5377
5451
|
|
|
5378
|
-
|
|
5379
|
-
* Componente de ícone SVG para estado vazio da tabela
|
|
5380
|
-
* Exibe um ícone de lupa com design personalizado do Zanthus Design System
|
|
5381
|
-
* @returns Elemento SVG para estado vazio
|
|
5382
|
-
*/
|
|
5383
|
-
const EmptyRows150Color = () => (jsxs("svg", { width: '150', height: '150', viewBox: '0 0 150 150', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [jsx("circle", { cx: '75', cy: '75', r: '75', fill: '#E8E8EE' }), jsx("path", { d: 'M67.6111 63.3889C69.36 63.3889 70.7778 64.8067 70.7778 66.5556V81.3333C70.7778 83.0822 69.36 84.5 67.6111 84.5C65.8622 84.5 64.4444 83.0822 64.4444 81.3333V66.5556C64.4444 64.8067 65.8622 63.3889 67.6111 63.3889ZM67.6111 59.1667C69.943 59.1667 71.8333 57.2763 71.8333 54.9444C71.8333 52.6126 69.943 50.7222 67.6111 50.7222C65.2792 50.7222 63.3889 52.6126 63.3889 54.9444C63.3889 57.2763 65.2792 59.1667 67.6111 59.1667ZM67.6111 37C84.5172 37 98.2222 50.7051 98.2222 67.6111C98.2222 74.9235 95.6583 81.637 91.3803 86.9017L112.073 107.594C113.309 108.831 113.309 110.836 112.073 112.073C110.948 113.197 109.189 113.299 107.949 112.379L107.594 112.073L86.9017 91.3803C81.637 95.6583 74.9235 98.2222 67.6111 98.2222C50.7051 98.2222 37 84.5172 37 67.6111C37 50.7051 50.7051 37 67.6111 37ZM67.6111 43.3333C54.2029 43.3333 43.3333 54.2029 43.3333 67.6111C43.3333 81.0194 54.2029 91.8889 67.6111 91.8889C81.0194 91.8889 91.8889 81.0194 91.8889 67.6111C91.8889 54.2029 81.0194 43.3333 67.6111 43.3333Z', fill: '#3B45F2' })] }));
|
|
5384
|
-
|
|
5385
|
-
/*! *****************************************************************************
|
|
5386
|
-
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
5387
|
-
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
5388
|
-
this file except in compliance with the License. You may obtain a copy of the
|
|
5389
|
-
License at http://www.apache.org/licenses/LICENSE-2.0
|
|
5390
|
-
|
|
5391
|
-
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
5392
|
-
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
|
5393
|
-
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
|
5394
|
-
MERCHANTABLITY OR NON-INFRINGEMENT.
|
|
5395
|
-
|
|
5396
|
-
See the Apache Version 2.0 License for specific language governing permissions
|
|
5397
|
-
and limitations under the License.
|
|
5398
|
-
***************************************************************************** */
|
|
5399
|
-
|
|
5400
|
-
var __assign = function() {
|
|
5401
|
-
__assign = Object.assign || function __assign(t) {
|
|
5402
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5403
|
-
s = arguments[i];
|
|
5404
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
5405
|
-
}
|
|
5406
|
-
return t;
|
|
5407
|
-
};
|
|
5408
|
-
return __assign.apply(this, arguments);
|
|
5409
|
-
};
|
|
5410
|
-
|
|
5411
|
-
function __rest(s, e) {
|
|
5412
|
-
var t = {};
|
|
5413
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5414
|
-
t[p] = s[p];
|
|
5415
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
5416
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
5417
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
5418
|
-
t[p[i]] = s[p[i]];
|
|
5419
|
-
}
|
|
5420
|
-
return t;
|
|
5421
|
-
}
|
|
5452
|
+
const EmptyState = ({ emptyIcon, emptyTitle, emptyText }) => (jsxs("div", { className: styles$5.tableEmpty, children: [jsx("div", { className: styles$5.tableEmptyContent, children: emptyIcon ?? jsx(SearchInfo20Regular, {}) }), jsxs("div", { className: styles$5.tableEmptyText, children: [jsx("h3", { className: styles$5.tableEmptyTitle, children: emptyTitle ?? 'Nenhum dado encontrado' }), jsx("p", { className: styles$5.tableEmptyCaption, children: emptyText ?? 'Nenhum registro encontrado' })] })] }));
|
|
5422
5453
|
|
|
5423
|
-
var
|
|
5424
|
-
var _b = _a.animate, animate = _b === void 0 ? true : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#f5f6f7' : _c, _d = _a.backgroundOpacity, backgroundOpacity = _d === void 0 ? 1 : _d, _e = _a.baseUrl, baseUrl = _e === void 0 ? '' : _e, children = _a.children, _f = _a.foregroundColor, foregroundColor = _f === void 0 ? '#eee' : _f, _g = _a.foregroundOpacity, foregroundOpacity = _g === void 0 ? 1 : _g, _h = _a.gradientRatio, gradientRatio = _h === void 0 ? 2 : _h, uniqueKey = _a.uniqueKey, _j = _a.rtl, rtl = _j === void 0 ? false : _j, _k = _a.speed, speed = _k === void 0 ? 1.2 : _k, _l = _a.style, style = _l === void 0 ? {} : _l, _m = _a.title, title = _m === void 0 ? 'Loading...' : _m, _o = _a.beforeMask, beforeMask = _o === void 0 ? null : _o, props = __rest(_a, ["animate", "backgroundColor", "backgroundOpacity", "baseUrl", "children", "foregroundColor", "foregroundOpacity", "gradientRatio", "uniqueKey", "rtl", "speed", "style", "title", "beforeMask"]);
|
|
5425
|
-
var fixedId = useId();
|
|
5426
|
-
if (uniqueKey)
|
|
5427
|
-
fixedId = uniqueKey;
|
|
5428
|
-
var idClip = "".concat(fixedId, "-diff");
|
|
5429
|
-
var idGradient = "".concat(fixedId, "-animated-diff");
|
|
5430
|
-
var idAria = "".concat(fixedId, "-aria");
|
|
5431
|
-
var rtlStyle = rtl ? { transform: 'scaleX(-1)' } : null;
|
|
5432
|
-
var dur = "".concat(speed, "s");
|
|
5433
|
-
var from = "".concat(gradientRatio * -1, " 0");
|
|
5434
|
-
var to = "".concat(gradientRatio, " 0");
|
|
5435
|
-
return (createElement("svg", __assign({ "aria-labelledby": idAria, role: "img", style: __assign(__assign({}, style), rtlStyle) }, props),
|
|
5436
|
-
title ? createElement("title", { id: idAria }, title) : null,
|
|
5437
|
-
beforeMask && isValidElement(beforeMask) ? beforeMask : null,
|
|
5438
|
-
createElement("rect", { role: "presentation", x: "0", y: "0", width: "100%", height: "100%", clipPath: "url(".concat(baseUrl, "#").concat(idClip, ")"), style: { fill: "url(".concat(baseUrl, "#").concat(idGradient, ")") } }),
|
|
5439
|
-
createElement("defs", null,
|
|
5440
|
-
createElement("clipPath", { id: idClip }, children),
|
|
5441
|
-
createElement("linearGradient", { id: idGradient, gradientTransform: "translate(".concat(from, ")") },
|
|
5442
|
-
createElement("stop", { offset: "0%", stopColor: backgroundColor, stopOpacity: backgroundOpacity }),
|
|
5443
|
-
createElement("stop", { offset: "50%", stopColor: foregroundColor, stopOpacity: foregroundOpacity }),
|
|
5444
|
-
createElement("stop", { offset: "100%", stopColor: backgroundColor, stopOpacity: backgroundOpacity }),
|
|
5445
|
-
animate && (createElement("animateTransform", { attributeName: "gradientTransform", type: "translate", values: "".concat(from, "; 0 0; ").concat(to), dur: dur, repeatCount: "indefinite" }))))));
|
|
5446
|
-
};
|
|
5454
|
+
var styles$4 = {"toggle":"ToggleButton-module__toggle___c1Ym-","item":"ToggleButton-module__item___2Qll-","toggle-lg":"ToggleButton-module__toggle-lg___8f3lo","item-lg":"ToggleButton-module__item-lg___479w-","toggle-sm":"ToggleButton-module__toggle-sm___SAGGb","item-sm":"ToggleButton-module__item-sm___4ju--","toggleIconLeft":"ToggleButton-module__toggleIconLeft___VwgKk","toggleWithIcon":"ToggleButton-module__toggleWithIcon___WbCr7","toggleIconOnly":"ToggleButton-module__toggleIconOnly___4iMEp","group":"ToggleButton-module__group___BoR-e"};
|
|
5447
5455
|
|
|
5448
|
-
|
|
5449
|
-
|
|
5450
|
-
|
|
5451
|
-
|
|
5452
|
-
|
|
5453
|
-
|
|
5454
|
-
|
|
5455
|
-
createElement("rect", { x: "0", y: "56", width: "410", height: "6", rx: "3" }),
|
|
5456
|
-
createElement("rect", { x: "0", y: "72", width: "380", height: "6", rx: "3" }),
|
|
5457
|
-
createElement("rect", { x: "0", y: "88", width: "178", height: "6", rx: "3" }),
|
|
5458
|
-
createElement("circle", { cx: "20", cy: "20", r: "20" }))); };
|
|
5459
|
-
|
|
5460
|
-
/**
|
|
5461
|
-
* Componente de loading para lista de tabela
|
|
5462
|
-
* Simula o carregamento de dados em formato de tabela usando ContentLoader
|
|
5463
|
-
* @param props - Propriedades adicionais para o ContentLoader
|
|
5464
|
-
* @returns Elemento de loading animado
|
|
5465
|
-
*/
|
|
5466
|
-
const LoaderList = (props) => (jsxs(ContentLoader, { speed: 1, width: "100%", viewBox: "0 0 1272 652", backgroundColor: "#F5F5F7", foregroundColor: "#FFFFFF", ...props, children: [jsx("rect", { x: "0", y: "0", rx: "8", ry: "8", width: "1272", height: "44" }), jsx("rect", { x: "0", y: "76", rx: "12", ry: "12", width: "402", height: "24" }), jsx("rect", { x: "0", y: "116", rx: "8", ry: "8", width: "280", height: "16" }), jsx("rect", { x: "426", y: "76", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "426", y: "116", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "694", y: "76", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "694", y: "116", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "962", y: "76", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "962", y: "116", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "1129", y: "76", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "1129", y: "116", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "0", y: "164", rx: "12", ry: "12", width: "402", height: "24" }), jsx("rect", { x: "0", y: "204", rx: "8", ry: "8", width: "280", height: "16" }), jsx("rect", { x: "426", y: "164", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "426", y: "204", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "694", y: "164", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "694", y: "204", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "962", y: "164", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "962", y: "204", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "1129", y: "164", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "1129", y: "204", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "0", y: "252", rx: "12", ry: "12", width: "402", height: "24" }), jsx("rect", { x: "0", y: "292", rx: "8", ry: "8", width: "280", height: "16" }), jsx("rect", { x: "426", y: "252", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "426", y: "292", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "694", y: "252", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "694", y: "292", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "962", y: "252", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "962", y: "292", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "1129", y: "252", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "1129", y: "292", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "0", y: "340", rx: "12", ry: "12", width: "402", height: "24" }), jsx("rect", { x: "0", y: "380", rx: "8", ry: "8", width: "280", height: "16" }), jsx("rect", { x: "426", y: "340", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "426", y: "380", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "694", y: "340", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "694", y: "380", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "962", y: "340", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "962", y: "380", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "1129", y: "340", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "1129", y: "380", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "0", y: "428", rx: "12", ry: "12", width: "402", height: "24" }), jsx("rect", { x: "0", y: "468", rx: "8", ry: "8", width: "280", height: "16" }), jsx("rect", { x: "426", y: "428", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "426", y: "468", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "694", y: "428", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "694", y: "468", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "962", y: "428", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "962", y: "468", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "1129", y: "428", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "1129", y: "468", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "0", y: "516", rx: "12", ry: "12", width: "402", height: "24" }), jsx("rect", { x: "0", y: "556", rx: "8", ry: "8", width: "280", height: "16" }), jsx("rect", { x: "426", y: "516", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "426", y: "556", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "694", y: "516", rx: "12", ry: "12", width: "244", height: "24" }), jsx("rect", { x: "694", y: "556", rx: "8", ry: "8", width: "178", height: "16" }), jsx("rect", { x: "962", y: "516", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "962", y: "556", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "1129", y: "516", rx: "12", ry: "12", width: "143", height: "24" }), jsx("rect", { x: "1129", y: "556", rx: "8", ry: "8", width: "90", height: "16" }), jsx("rect", { x: "0", y: "604", rx: "8", ry: "8", width: "1272", height: "48" })] }));
|
|
5467
|
-
|
|
5468
|
-
const useSelection = (dataSource, rowSelection) => {
|
|
5469
|
-
const [internalKeys, setInternalKeys] = useState([]);
|
|
5470
|
-
const selectedKeys = rowSelection?.selectedRowKeys ?? internalKeys;
|
|
5471
|
-
const selectedSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
|
|
5472
|
-
const handleChange = useCallback((newKeys) => {
|
|
5473
|
-
const newRows = dataSource.filter((_, index) => newKeys.includes(index));
|
|
5474
|
-
if (rowSelection?.selectedRowKeys !== undefined) {
|
|
5475
|
-
rowSelection.onChange?.(newKeys, newRows);
|
|
5476
|
-
}
|
|
5477
|
-
else {
|
|
5478
|
-
setInternalKeys(newKeys);
|
|
5479
|
-
rowSelection?.onChange?.(newKeys, newRows);
|
|
5480
|
-
}
|
|
5481
|
-
}, [dataSource, rowSelection]);
|
|
5482
|
-
const toggleRow = useCallback((key) => {
|
|
5483
|
-
const newKeys = selectedSet.has(key)
|
|
5484
|
-
? selectedKeys.filter(k => k !== key)
|
|
5485
|
-
: [...selectedKeys, key];
|
|
5486
|
-
handleChange(newKeys);
|
|
5487
|
-
}, [selectedKeys, selectedSet, handleChange]);
|
|
5488
|
-
const selectableKeys = useMemo(() => (dataSource
|
|
5489
|
-
.map((row, index) => ({ index, disabled: rowSelection?.getCheckboxProps?.(row, index)?.disabled }))
|
|
5490
|
-
.filter(({ disabled }) => !disabled)
|
|
5491
|
-
.map(({ index }) => index)), [dataSource, rowSelection]);
|
|
5492
|
-
const toggleAll = useCallback(() => {
|
|
5493
|
-
const isAllSelectableSelected = selectableKeys.every(k => selectedSet.has(k));
|
|
5494
|
-
const newKeys = isAllSelectableSelected
|
|
5495
|
-
? selectedKeys.filter(k => !selectableKeys.includes(k))
|
|
5496
|
-
: [...new Set([...selectedKeys, ...selectableKeys])];
|
|
5497
|
-
handleChange(newKeys);
|
|
5498
|
-
}, [selectableKeys, selectedKeys, selectedSet, handleChange]);
|
|
5499
|
-
const isAllSelected = selectableKeys.length > 0 && selectableKeys.every(k => selectedSet.has(k));
|
|
5500
|
-
const isIndeterminate = selectableKeys.some(k => selectedSet.has(k)) && !isAllSelected;
|
|
5501
|
-
return {
|
|
5502
|
-
selectedSet,
|
|
5503
|
-
selectedKeys,
|
|
5504
|
-
toggleRow,
|
|
5505
|
-
toggleAll,
|
|
5506
|
-
isAllSelected,
|
|
5507
|
-
isIndeterminate,
|
|
5508
|
-
};
|
|
5509
|
-
};
|
|
5510
|
-
const renderCell = (column, row, index) => {
|
|
5511
|
-
if (column.render) {
|
|
5512
|
-
return column.render(row, index);
|
|
5513
|
-
}
|
|
5514
|
-
const value = row[column.key];
|
|
5515
|
-
switch (column.type) {
|
|
5516
|
-
case 'datetime':
|
|
5517
|
-
if (!value)
|
|
5518
|
-
return '';
|
|
5519
|
-
try {
|
|
5520
|
-
const date = new Date(value);
|
|
5521
|
-
return format(date, column.format || 'dd/MM/yyyy', { locale: ptBR$1 });
|
|
5522
|
-
}
|
|
5523
|
-
catch {
|
|
5524
|
-
return value;
|
|
5525
|
-
}
|
|
5526
|
-
default:
|
|
5527
|
-
return value;
|
|
5456
|
+
const Toggle = ({ pressed, defaultPressed, onPressedChange, disabled = false, className, children, id, size = 'lg', scale = 1, style, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', icon, iconOnly = false, mode: _mode, selectionType: _type, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, orientation: _orientation, items: _items, ...rest }) => {
|
|
5457
|
+
const toggle = (jsx(Toggle$1.Root, { pressed: pressed, defaultPressed: defaultPressed, onPressedChange: onPressedChange, disabled: disabled, className: clsx(styles$4.toggle, styles$4[`toggle-${size}`], {
|
|
5458
|
+
[styles$4.toggleIconOnly]: iconOnly,
|
|
5459
|
+
[styles$4.toggleWithIcon]: !!icon && !iconOnly,
|
|
5460
|
+
}, className), id: id, style: { '--giro-scale': scale, ...style }, ...rest, children: iconOnly ? (jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: icon })) : (jsxs(Fragment, { children: [icon && jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: icon }), children] })) }));
|
|
5461
|
+
if (tooltipText) {
|
|
5462
|
+
return (jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: toggle }));
|
|
5528
5463
|
}
|
|
5464
|
+
return toggle;
|
|
5529
5465
|
};
|
|
5530
|
-
|
|
5531
|
-
|
|
5532
|
-
|
|
5533
|
-
|
|
5534
|
-
|
|
5535
|
-
|
|
5536
|
-
|
|
5537
|
-
|
|
5538
|
-
|
|
5539
|
-
|
|
5540
|
-
|
|
5541
|
-
|
|
5542
|
-
|
|
5543
|
-
|
|
5544
|
-
return (jsx(Checkbox, { checked: selectedSet.has(index), onCheckedChange: () => toggleRow(index), disabled: props.disabled }));
|
|
5545
|
-
},
|
|
5546
|
-
align: 'center',
|
|
5466
|
+
|
|
5467
|
+
const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueChange, orientation = 'horizontal', disabled = false, items = [], children, className, id, size = 'lg', scale = 1, style, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', mode: _mode, icon: _icon, iconOnly: _iconOnly, pressed: _pressed, defaultPressed: _defaultPressed, onPressedChange: _onPressedChange, ...rest }) => {
|
|
5468
|
+
const rootProps = selectionType === 'multiple'
|
|
5469
|
+
? {
|
|
5470
|
+
type: 'multiple',
|
|
5471
|
+
value: value,
|
|
5472
|
+
defaultValue: defaultValue,
|
|
5473
|
+
onValueChange: onValueChange,
|
|
5474
|
+
}
|
|
5475
|
+
: {
|
|
5476
|
+
type: 'single',
|
|
5477
|
+
value: value,
|
|
5478
|
+
defaultValue: defaultValue,
|
|
5479
|
+
onValueChange: onValueChange,
|
|
5547
5480
|
};
|
|
5548
|
-
|
|
5549
|
-
|
|
5550
|
-
|
|
5551
|
-
|
|
5552
|
-
|
|
5481
|
+
const group = (jsx(ToggleGroup$1.Root, { ...rootProps, orientation: orientation, disabled: disabled, className: clsx(styles$4.group, className), id: id, style: { '--giro-scale': scale, ...style }, ...rest, children: children ??
|
|
5482
|
+
items.map((item) => (jsx(ToggleGroup$1.Item, { value: item.value, disabled: item.disabled, className: clsx(styles$4.item, styles$4[`item-${size}`], {
|
|
5483
|
+
[styles$4.toggleIconOnly]: item.iconOnly,
|
|
5484
|
+
[styles$4.toggleWithIcon]: !!item.icon && !item.iconOnly,
|
|
5485
|
+
}), style: { '--giro-scale': scale }, children: item.iconOnly ? (jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon })) : (jsxs(Fragment, { children: [item.icon && jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon }), item.label] })) }, item.value))) }));
|
|
5486
|
+
if (tooltipText) {
|
|
5487
|
+
return (jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: group }));
|
|
5553
5488
|
}
|
|
5554
|
-
|
|
5555
|
-
return (jsx("div", { className: clsx(styles$5.tableContainer, className), ...rest, children: jsx("div", { className: styles$5.tableScrollWrapper, children: jsxs("table", { className: styles$5.table, role: "table", "aria-label": "Tabela de dados", "aria-describedby": loading ? `${tableId}-loading` : undefined, "aria-rowcount": dataSource.length + 1, children: [jsx("thead", { className: styles$5.tableHead, children: jsx("tr", { children: finalColumns.map((column) => (jsx("th", { className: clsx(styles$5.tableTh, column.align && `text-${column.align}`), style: column.style, children: jsx("div", { className: styles$5.tableThContent, children: column.label }) }, column.key))) }) }), jsx("tbody", { className: styles$5.tableBody, children: dataSource.length > 0 ? (dataSource.map((row, index) => {
|
|
5556
|
-
const rowProps = onRow?.(row, index) || {};
|
|
5557
|
-
return (jsx("tr", { className: clsx(styles$5.tableRow, rowProps.className), onClick: rowProps.onClick, onDoubleClick: rowProps.onDoubleClick, children: finalColumns.map((column) => (jsx("td", { className: clsx(styles$5.tableTd, column.align && `text-${column.align}`), children: renderCell(column, row, index) }, column.key))) }, index));
|
|
5558
|
-
})) : (jsx("tr", { children: jsx("td", { colSpan: finalColumns.length, className: styles$5.tableEmptyCell, children: emptyText }) })) })] }) }) }));
|
|
5559
|
-
};
|
|
5560
|
-
|
|
5561
|
-
const isCalendarFilter = (filter) => {
|
|
5562
|
-
return filter.type === 'calendar';
|
|
5563
|
-
};
|
|
5564
|
-
const isCheckboxFilter = (filter) => {
|
|
5565
|
-
return filter.type === 'multiple' || filter.type === 'single';
|
|
5566
|
-
};
|
|
5567
|
-
const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceholder = 'Pesquisar...', showSearch = true, showFilters = false, filters, filterItems = [], className = '', ...rest }) => {
|
|
5568
|
-
const [internalSearchValue, setInternalSearchValue] = useState(searchValue);
|
|
5569
|
-
React__default.useEffect(() => {
|
|
5570
|
-
setInternalSearchValue(searchValue);
|
|
5571
|
-
}, [searchValue]);
|
|
5572
|
-
const handleInputChange = (e) => {
|
|
5573
|
-
const value = e.target.value;
|
|
5574
|
-
setInternalSearchValue(value);
|
|
5575
|
-
if (value === '' && onSearchChange) {
|
|
5576
|
-
onSearchChange('');
|
|
5577
|
-
}
|
|
5578
|
-
};
|
|
5579
|
-
const handleKeyDown = (e) => {
|
|
5580
|
-
if (e.key === 'Enter') {
|
|
5581
|
-
e.preventDefault();
|
|
5582
|
-
if (onSearch) {
|
|
5583
|
-
onSearch(internalSearchValue);
|
|
5584
|
-
}
|
|
5585
|
-
else if (onSearchChange) {
|
|
5586
|
-
onSearchChange(internalSearchValue);
|
|
5587
|
-
}
|
|
5588
|
-
}
|
|
5589
|
-
};
|
|
5590
|
-
const hasFilters = filters || (filterItems && filterItems.length > 0);
|
|
5591
|
-
return (jsxs("div", { className: `${styles$5.tableHeader} ${className}`.trim(), ...rest, children: [showSearch && (onSearchChange || onSearch) && (jsx("div", { className: styles$5.tableHeaderSearchContainer, children: jsx(Search, { value: internalSearchValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: styles$5.tableHeaderSearch }) })), showFilters && (jsx("div", { className: styles$5.tableHeaderFilters, children: hasFilters ? (jsxs("div", { className: styles$5.tableHeaderFiltersContent, children: [filters && (jsx("div", { className: styles$5.tableHeaderCustomFilters, children: filters })), jsxs("div", { className: styles$5.tableHeaderFiltersWrapper, children: [jsx("span", { className: styles$5.tableHeaderFilterLabel, children: "Filtros" }), jsx("div", { className: styles$5.tableHeaderFilterItems, children: filterItems && filterItems.map((filterItem, index) => {
|
|
5592
|
-
const commonProps = {
|
|
5593
|
-
buttonText: filterItem.buttonText,
|
|
5594
|
-
icon: filterItem.icon,
|
|
5595
|
-
side: filterItem.side,
|
|
5596
|
-
align: filterItem.align,
|
|
5597
|
-
disabled: filterItem.disabled,
|
|
5598
|
-
variant: 'outlined',
|
|
5599
|
-
onOpen: () => filterItem.onToggle?.(true),
|
|
5600
|
-
onClose: () => filterItem.onToggle?.(false),
|
|
5601
|
-
};
|
|
5602
|
-
if (isCalendarFilter(filterItem)) {
|
|
5603
|
-
return (jsx(Filter, { ...commonProps, type: "calendar", selectedDate: filterItem.selectedDate, onDateSelect: filterItem.onDateSelect, onClearDate: filterItem.onClear, minDate: filterItem.minDate, maxDate: filterItem.maxDate, placeholder: filterItem.placeholder }, filterItem.id || index));
|
|
5604
|
-
}
|
|
5605
|
-
if (isCheckboxFilter(filterItem)) {
|
|
5606
|
-
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));
|
|
5607
|
-
}
|
|
5608
|
-
console.warn('TableHeader: Tipo de filtro não reconhecido:', filterItem);
|
|
5609
|
-
return null;
|
|
5610
|
-
}) })] })] })) : (jsx("div", { className: styles$5.tableHeaderFiltersPlaceholder, children: jsx("span", { children: "Nenhum filtro dispon\u00EDvel" }) })) }))] }));
|
|
5489
|
+
return group;
|
|
5611
5490
|
};
|
|
5612
5491
|
|
|
5613
|
-
const
|
|
5614
|
-
|
|
5615
|
-
|
|
5616
|
-
|
|
5617
|
-
|
|
5618
|
-
const canGoNext = currentPage < totalPages && !disabled;
|
|
5619
|
-
const handlePrevious = () => {
|
|
5620
|
-
if (canGoPrev) {
|
|
5621
|
-
onPageChange(currentPage - 1);
|
|
5622
|
-
}
|
|
5623
|
-
};
|
|
5624
|
-
const handleNext = () => {
|
|
5625
|
-
if (canGoNext) {
|
|
5626
|
-
onPageChange(currentPage + 1);
|
|
5627
|
-
}
|
|
5628
|
-
};
|
|
5629
|
-
const handleItemsPerPageChange = (event) => {
|
|
5630
|
-
const newItemsPerPage = Number(event.target.value);
|
|
5631
|
-
onItemsPerPageChange(newItemsPerPage);
|
|
5632
|
-
};
|
|
5633
|
-
return (jsxs("div", { className: `${styles$5.tablePagination} ${className}`.trim(), ...rest, children: [jsxs("div", { className: styles$5.tablePaginationSelect, children: [jsx("label", { htmlFor: "items-per-page", className: styles$5.tablePaginationLabel, children: "Itens por p\u00E1gina" }), jsx("select", { id: "items-per-page", value: itemsPerPage, onChange: handleItemsPerPageChange, disabled: disabled, className: styles$5.tablePaginationSelectInput, children: pageSizeOptions.map((option) => (jsx("option", { value: option, children: option }, option))) })] }), jsx("div", { className: styles$5.tablePaginationInfo, children: jsx("span", { children: totalItems > 0
|
|
5634
|
-
? `${startItem}–${endItem} de ${totalItems}`
|
|
5635
|
-
: '0 itens' }) }), jsxs("div", { className: styles$5.tablePaginationControls, children: [jsx("button", { className: styles$5.tablePaginationButton, onClick: handlePrevious, disabled: !canGoPrev, "aria-label": "P\u00E1gina anterior", children: jsx(ChevronLeft16Regular, {}) }), jsx("button", { className: styles$5.tablePaginationButton, onClick: handleNext, disabled: !canGoNext, "aria-label": "Pr\u00F3xima p\u00E1gina", children: jsx(ChevronRight16Regular, {}) })] })] }));
|
|
5492
|
+
const ToggleButton = ({ mode = 'simple', ...props }) => {
|
|
5493
|
+
if (mode === 'combined') {
|
|
5494
|
+
return jsx(ToggleGroup, { ...props });
|
|
5495
|
+
}
|
|
5496
|
+
return jsx(Toggle, { ...props });
|
|
5636
5497
|
};
|
|
5637
5498
|
|
|
5638
|
-
var styles$4 = {"wrapper":"Table-module__wrapper___KMc04","tableContainer":"Table-module__tableContainer___byysv","tableHeader":"Table-module__tableHeader___urbxZ","bulkActionsBar":"Table-module__bulkActionsBar___Irfnt","bulkActionsInfo":"Table-module__bulkActionsInfo___pLTb6","bulkActionsClearButton":"Table-module__bulkActionsClearButton___jjQTq","bulkActionsLabel":"Table-module__bulkActionsLabel___QB3N9","bulkActionsButtons":"Table-module__bulkActionsButtons___1anDO","tablePagination":"Table-module__tablePagination___MbqJy","table":"Table-module__table___9xCJC","tableHead":"Table-module__tableHead___oVEa6","tableTh":"Table-module__tableTh___U02-Y","tableThContent":"Table-module__tableThContent___61AqT","tableSortButton":"Table-module__tableSortButton___ZgLkx","tableBody":"Table-module__tableBody___fq4Aa","tableTd":"Table-module__tableTd___OfW9v","tableRow":"Table-module__tableRow___COJNu","checkboxCell":"Table-module__checkboxCell___B9vHM","tableSortIconNeutral":"Table-module__tableSortIconNeutral___uvnHs","tableSortIcon":"Table-module__tableSortIcon___YVa2Q","tableHeaderSearchContainer":"Table-module__tableHeaderSearchContainer___Yy8-s","tableHeaderSearch":"Table-module__tableHeaderSearch___swewU","tableHeaderFilters":"Table-module__tableHeaderFilters___ncatO","tableHeaderFilterLabel":"Table-module__tableHeaderFilterLabel___r3DI-","tableHeaderFilterItems":"Table-module__tableHeaderFilterItems___kQDsY","tablePaginationSelect":"Table-module__tablePaginationSelect___l2aYm","tablePaginationLabel":"Table-module__tablePaginationLabel___S9VOr","tablePaginationSelectInput":"Table-module__tablePaginationSelectInput___wdhOQ","tablePaginationInfo":"Table-module__tablePaginationInfo___r1v8R","tablePaginationControls":"Table-module__tablePaginationControls___IL8rm","tablePaginationButton":"Table-module__tablePaginationButton___SNDQq","tableScrollWrapper":"Table-module__tableScrollWrapper___SvEOw","tableEmptyCell":"Table-module__tableEmptyCell___N5a9t","tableEmpty":"Table-module__tableEmpty___0yPZ0","tableEmptyContent":"Table-module__tableEmptyContent___uNWpN","tableEmptyText":"Table-module__tableEmptyText___7kY7Q","tableEmptyTitle":"Table-module__tableEmptyTitle___Y-7z8","tableEmptyCaption":"Table-module__tableEmptyCaption___4PZ14","tableCellMaxHeight":"Table-module__tableCellMaxHeight___-tcyU"};
|
|
5639
|
-
|
|
5640
|
-
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' })] })] }));
|
|
5641
|
-
|
|
5642
5499
|
const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSorting = true, bulkActions, header, footer, loading = false, emptyIcon, emptyTitle, emptyText, onRow, className, }) => {
|
|
5643
5500
|
const isRowSelectionEnabled = !!rowSelectionConfig;
|
|
5644
5501
|
const isControlled = rowSelectionConfig?.selectedRowKeys !== undefined;
|
|
@@ -5648,6 +5505,19 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5648
5505
|
setPendingSearch(header.searchValue);
|
|
5649
5506
|
}
|
|
5650
5507
|
}, [header?.searchValue]);
|
|
5508
|
+
const [activeView, setActiveView] = useState(header?.viewToggle?.value ??
|
|
5509
|
+
header?.viewToggle?.defaultValue ??
|
|
5510
|
+
header?.viewToggle?.items?.[0]?.value ??
|
|
5511
|
+
'');
|
|
5512
|
+
useEffect(() => {
|
|
5513
|
+
if (header?.viewToggle?.value !== undefined) {
|
|
5514
|
+
setActiveView(header.viewToggle.value);
|
|
5515
|
+
}
|
|
5516
|
+
}, [header?.viewToggle?.value]);
|
|
5517
|
+
const currentViewData = header?.viewToggle?.views?.[activeView];
|
|
5518
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5519
|
+
const effectiveColumns = (currentViewData?.columns ?? columns);
|
|
5520
|
+
const effectiveData = currentViewData?.data ?? data;
|
|
5651
5521
|
const [rowSelectionState, setRowSelectionState] = useState({});
|
|
5652
5522
|
const rowSelectionRef = useRef({});
|
|
5653
5523
|
const externalSelectionState = useMemo(() => {
|
|
@@ -5669,13 +5539,13 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5669
5539
|
size: 48,
|
|
5670
5540
|
enableSorting: false,
|
|
5671
5541
|
enableColumnFilter: false,
|
|
5672
|
-
header: ({ table: t }) => (jsx("div", { className: styles$
|
|
5673
|
-
cell: ({ row }) => (jsx("div", { className: styles$
|
|
5542
|
+
header: ({ table: t }) => (jsx("div", { className: styles$5.checkboxCell, children: jsx(Checkbox, { checked: t.getIsAllPageRowsSelected(), indeterminate: t.getIsSomePageRowsSelected(), disabled: rowSelectionConfig?.disableSelectAll, onCheckedChange: (checked) => t.toggleAllPageRowsSelected(checked) }) })),
|
|
5543
|
+
cell: ({ row }) => (jsx("div", { className: styles$5.checkboxCell, children: jsx(Checkbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (checked) => row.toggleSelected(checked) }) })),
|
|
5674
5544
|
}), [rowSelectionConfig?.disableSelectAll]);
|
|
5675
|
-
const resolvedColumns = useMemo(() => (isRowSelectionEnabled ? [selectionColumn, ...
|
|
5545
|
+
const resolvedColumns = useMemo(() => (isRowSelectionEnabled ? [selectionColumn, ...effectiveColumns] : effectiveColumns), [isRowSelectionEnabled, selectionColumn, effectiveColumns]);
|
|
5676
5546
|
const showSearch = !!(header?.onSearchChange);
|
|
5677
5547
|
const table = useReactTable({
|
|
5678
|
-
data,
|
|
5548
|
+
data: effectiveData,
|
|
5679
5549
|
columns: resolvedColumns,
|
|
5680
5550
|
defaultColumn: { minSize: 44, size: 0 },
|
|
5681
5551
|
state: {
|
|
@@ -5718,7 +5588,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5718
5588
|
const totalPages = footer ? Math.ceil(effectiveTotalItems / pageSize) : 0;
|
|
5719
5589
|
const canGoPrev = pageIndex > 0;
|
|
5720
5590
|
const canGoNext = pageIndex + 1 < totalPages;
|
|
5721
|
-
const skeletonRowCount = footer ? pageSize : (
|
|
5591
|
+
const skeletonRowCount = footer ? pageSize : (effectiveData.length > 0 ? effectiveData.length : pageSize);
|
|
5722
5592
|
const selectedRows = useMemo(() => table
|
|
5723
5593
|
.getCoreRowModel()
|
|
5724
5594
|
.rows.filter((r) => effectiveRowSelection[r.id])
|
|
@@ -5748,24 +5618,38 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5748
5618
|
setPagination({ pageIndex: 0, pageSize: size });
|
|
5749
5619
|
footer?.onPageSizeChange?.(size);
|
|
5750
5620
|
};
|
|
5751
|
-
return (jsxs("div", { className: clsx(styles$
|
|
5621
|
+
return (jsxs("div", { className: clsx(styles$5.wrapper, className), children: [showBulkActions && (jsxs("div", { className: styles$5.bulkActionsBar, children: [jsxs("div", { className: styles$5.bulkActionsInfo, children: [jsx(Button, { variant: "text", iconOnly: true, icon: jsx(Dismiss16Regular, {}), ariaLabel: "Limpar sele\u00E7\u00E3o", onClick: handleClearSelection, className: styles$5.bulkActionsClearButton }), jsx("span", { className: styles$5.bulkActionsLabel, children: bulkActions.label
|
|
5752
5622
|
? bulkActions.label(selectedCount, selectedRows)
|
|
5753
|
-
: `${selectedCount} ${selectedCount === 1 ? 'item selecionado' : 'itens selecionados'}` })] }), jsx("div", { className: styles$
|
|
5754
|
-
|
|
5755
|
-
|
|
5756
|
-
|
|
5757
|
-
|
|
5758
|
-
|
|
5759
|
-
|
|
5760
|
-
|
|
5761
|
-
|
|
5762
|
-
|
|
5763
|
-
|
|
5764
|
-
|
|
5765
|
-
|
|
5766
|
-
|
|
5767
|
-
|
|
5768
|
-
|
|
5623
|
+
: `${selectedCount} ${selectedCount === 1 ? 'item selecionado' : 'itens selecionados'}` })] }), jsx("div", { className: styles$5.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$5.tableHeader, children: [jsxs("div", { className: styles$5.tableHeaderLeft, children: [showSearch && (jsx("div", { className: styles$5.tableHeaderSearchContainer, children: jsx(Search, { value: pendingSearch, virtualKeyboard: header.virtualKeyboard, searchMode: header?.searchMode ?? "on-enter", onChange: (e) => {
|
|
5624
|
+
setPendingSearch(e.target.value);
|
|
5625
|
+
}, onSearch: (val) => {
|
|
5626
|
+
if (footer) {
|
|
5627
|
+
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
|
|
5628
|
+
footer?.onPageChange?.(1);
|
|
5629
|
+
}
|
|
5630
|
+
header?.onSearchChange?.(val);
|
|
5631
|
+
}, onClear: () => {
|
|
5632
|
+
setPendingSearch('');
|
|
5633
|
+
if (footer) {
|
|
5634
|
+
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
|
|
5635
|
+
footer?.onPageChange?.(1);
|
|
5636
|
+
}
|
|
5637
|
+
header?.onSearchChange?.('');
|
|
5638
|
+
}, placeholder: header.searchPlaceholder ?? 'Pesquisar...', className: styles$5.tableHeaderSearch }) })), header.viewToggle && (jsx(ToggleButton, { mode: "combined", selectionType: "single", value: activeView, onValueChange: (val) => {
|
|
5639
|
+
if (!val)
|
|
5640
|
+
return;
|
|
5641
|
+
setActiveView(val);
|
|
5642
|
+
if (footer) {
|
|
5643
|
+
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
|
|
5644
|
+
footer?.onPageChange?.(1);
|
|
5645
|
+
}
|
|
5646
|
+
header.viewToggle?.onValueChange?.(val);
|
|
5647
|
+
}, items: header.viewToggle.items.map((item) => ({
|
|
5648
|
+
value: item.value,
|
|
5649
|
+
icon: item.icon,
|
|
5650
|
+
iconOnly: true,
|
|
5651
|
+
tooltipText: item.tooltipText,
|
|
5652
|
+
})) }))] }), !!header.filterItems?.length && (jsxs("div", { className: styles$5.tableHeaderFilters, children: [header.filterItems.some((item) => item.type !== 'combined') && (jsx("span", { className: styles$5.tableHeaderFilterLabel, children: "Filtros" })), jsx("div", { className: styles$5.tableHeaderFilterItems, children: header.filterItems.map((filterItem, index) => {
|
|
5769
5653
|
const commonProps = {
|
|
5770
5654
|
buttonText: filterItem.buttonText,
|
|
5771
5655
|
icon: filterItem.icon,
|
|
@@ -5783,30 +5667,30 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5783
5667
|
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));
|
|
5784
5668
|
}
|
|
5785
5669
|
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));
|
|
5786
|
-
}) })] }))] })), jsx("div", { className: styles$
|
|
5670
|
+
}) })] }))] })), jsx("div", { className: styles$5.tableContainer, children: jsx("div", { className: styles$5.tableScrollWrapper, children: jsxs("table", { className: styles$5.table, "aria-label": "Tabela de dados", "aria-rowcount": data.length + 1, children: [jsx("thead", { className: styles$5.tableHead, children: table.getHeaderGroups().map((headerGroup) => (jsx("tr", { children: headerGroup.headers.map((col) => (jsx("th", { className: styles$5.tableTh, style: {
|
|
5787
5671
|
textAlign: col.column.columnDef.meta?.align,
|
|
5788
5672
|
width: col.column.columnDef.size || undefined,
|
|
5789
5673
|
minWidth: col.column.columnDef.minSize,
|
|
5790
5674
|
maxWidth: col.column.columnDef.maxSize !== Number.MAX_SAFE_INTEGER
|
|
5791
5675
|
? col.column.columnDef.maxSize
|
|
5792
5676
|
: undefined,
|
|
5793
|
-
}, children: jsx("div", { className: styles$
|
|
5677
|
+
}, children: jsx("div", { className: styles$5.tableThContent, children: col.isPlaceholder ? null : col.column.getCanSort() ? (jsxs("button", { type: "button", className: styles$5.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$5.tableSortIcon })) : col.column.getIsSorted() === 'desc' ? (jsx(ArrowSortDown16Regular, { className: styles$5.tableSortIcon })) : (jsx(ArrowSort16Regular, { className: styles$5.tableSortIconNeutral }))] })) : (flexRender(col.column.columnDef.header, col.getContext())) }) }, col.id))) }, headerGroup.id))) }), jsx("tbody", { className: styles$5.tableBody, children: loading ? (Array.from({ length: skeletonRowCount }).map((_, rowIdx) => (jsx("tr", { className: styles$5.tableRow, children: table.getVisibleLeafColumns().map((col) => (jsx("td", { className: styles$5.tableTd, children: jsx(Skeleton, {}) }, col.id))) }, `skeleton-row-${rowIdx}`)))) : table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map((row, index) => {
|
|
5794
5678
|
const rowProps = onRow?.(row.original, index) ?? {};
|
|
5795
|
-
return (jsx("tr", { className: clsx(styles$
|
|
5679
|
+
return (jsx("tr", { className: clsx(styles$5.tableRow, rowProps.className), onClick: rowProps.onClick, onDoubleClick: rowProps.onDoubleClick, children: row.getVisibleCells().map((cell) => (jsx("td", { className: styles$5.tableTd, style: {
|
|
5796
5680
|
textAlign: cell.column.columnDef.meta?.align,
|
|
5797
5681
|
width: cell.column.columnDef.size || undefined,
|
|
5798
5682
|
minWidth: cell.column.columnDef.minSize,
|
|
5799
5683
|
maxWidth: cell.column.columnDef.maxSize !== Number.MAX_SAFE_INTEGER
|
|
5800
5684
|
? cell.column.columnDef.maxSize
|
|
5801
5685
|
: undefined,
|
|
5802
|
-
}, children: jsx("div", { className: styles$
|
|
5803
|
-
})) : (jsx("tr", { children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: styles$
|
|
5686
|
+
}, children: jsx("div", { className: styles$5.tableCellMaxHeight, style: { maxHeight: cell.column.columnDef.meta?.maxHeight ?? '64px' }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id))) }, row.id));
|
|
5687
|
+
})) : (jsx("tr", { children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: styles$5.tableEmptyCell, children: jsx(EmptyState, { emptyIcon: emptyIcon, emptyTitle: emptyTitle, emptyText: emptyText }) }) })) })] }) }) }), footer && (jsxs("div", { className: styles$5.tablePagination, children: [jsxs("div", { className: styles$5.tablePaginationSelect, children: [jsx("label", { htmlFor: "tablev2-page-size", className: styles$5.tablePaginationLabel, children: "Itens por p\u00E1gina" }), jsx("select", { id: "tablev2-page-size", value: pageSize, onChange: handlePageSizeChange, className: styles$5.tablePaginationSelectInput, children: (footer.pageSizeOptions ?? [10, 25, 50, 100]).map((opt) => (jsx("option", { value: opt, children: opt }, opt))) })] }), jsx("div", { className: styles$5.tablePaginationInfo, children: jsx("span", { children: totalPages > 0
|
|
5804
5688
|
? `${pageIndex + 1} de ${totalPages}`
|
|
5805
|
-
: '0 páginas' }) }), jsxs("div", { className: styles$
|
|
5689
|
+
: '0 páginas' }) }), jsxs("div", { className: styles$5.tablePaginationControls, children: [jsx("button", { className: styles$5.tablePaginationButton, onClick: () => {
|
|
5806
5690
|
const newPage = pageIndex - 1;
|
|
5807
5691
|
setPagination((prev) => ({ ...prev, pageIndex: newPage }));
|
|
5808
5692
|
footer?.onPageChange?.(newPage + 1);
|
|
5809
|
-
}, disabled: !canGoPrev, "aria-label": "P\u00E1gina anterior", children: jsx(ChevronLeft16Regular, {}) }), jsx("button", { className: styles$
|
|
5693
|
+
}, disabled: !canGoPrev, "aria-label": "P\u00E1gina anterior", children: jsx(ChevronLeft16Regular, {}) }), jsx("button", { className: styles$5.tablePaginationButton, onClick: () => {
|
|
5810
5694
|
const newPage = pageIndex + 1;
|
|
5811
5695
|
setPagination((prev) => ({ ...prev, pageIndex: newPage }));
|
|
5812
5696
|
footer?.onPageChange?.(newPage + 1);
|
|
@@ -5815,7 +5699,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5815
5699
|
|
|
5816
5700
|
var styles$3 = {"container":"TextArea-module__container___WEBC-","inputWrapper":"TextArea-module__inputWrapper___-omPx","inputContainer":"TextArea-module__inputContainer___0-jKY","footer":"TextArea-module__footer___7XMlj","helperText":"TextArea-module__helperText___709rD","charCount":"TextArea-module__charCount___zdbxM","error":"TextArea-module__error___DWDms","disabled":"TextArea-module__disabled___lHxCa"};
|
|
5817
5701
|
|
|
5818
|
-
const TextArea = ({
|
|
5702
|
+
const TextArea = forwardRef(({ className, value, label, placeholder, onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, onBlur, onFocus, name, resize = 'vertical', charCount = false, height, virtualKeyboard, ...rest }, ref) => {
|
|
5819
5703
|
const normalizeValue = (val) => {
|
|
5820
5704
|
return val === undefined || val === null ? '' : String(val);
|
|
5821
5705
|
};
|
|
@@ -5860,11 +5744,11 @@ const TextArea = ({ ref, className, value, label, placeholder, onChange, disable
|
|
|
5860
5744
|
onChange?.(val);
|
|
5861
5745
|
}
|
|
5862
5746
|
} }) }))] }));
|
|
5863
|
-
};
|
|
5747
|
+
});
|
|
5864
5748
|
TextArea.displayName = 'TextArea';
|
|
5865
5749
|
var TextArea_default = React__default.memo(TextArea);
|
|
5866
5750
|
|
|
5867
|
-
var styles$2 = {"toastViewport":"Toast-module__toastViewport___Ns71-","toastRoot":"Toast-module__toastRoot___ZtA3x","slideIn":"Toast-module__slideIn___QcXWP","toastTitle":"Toast-module__toastTitle___WbjNH","toastContent":"Toast-module__toastContent___IY5QB","toastClose":"Toast-module__toastClose___FqVsT","Icon":"Toast-module__Icon___ERU9c","iconInfo":"Toast-module__iconInfo___G-II3","iconSuccess":"Toast-module__iconSuccess___N8iF1","iconAlert":"Toast-module__iconAlert___SSf8u"};
|
|
5751
|
+
var styles$2 = {"toastViewport":"Toast-module__toastViewport___Ns71-","toastRoot":"Toast-module__toastRoot___ZtA3x","slideIn":"Toast-module__slideIn___QcXWP","fadeOut":"Toast-module__fadeOut___0WaGy","toastTitle":"Toast-module__toastTitle___WbjNH","toastContent":"Toast-module__toastContent___IY5QB","toastClose":"Toast-module__toastClose___FqVsT","Icon":"Toast-module__Icon___ERU9c","iconInfo":"Toast-module__iconInfo___G-II3","iconSuccess":"Toast-module__iconSuccess___N8iF1","iconAlert":"Toast-module__iconAlert___SSf8u"};
|
|
5868
5752
|
|
|
5869
5753
|
/**
|
|
5870
5754
|
* Contexto React que armazena o estado e as ações do sistema de Toast.
|
|
@@ -6378,5 +6262,5 @@ function useInfiniteScroll({ status, page, lastPage, onLoadMore, threshold = 0.1
|
|
|
6378
6262
|
};
|
|
6379
6263
|
}
|
|
6380
6264
|
|
|
6381
|
-
export { Avatar, Badge, Button, Calendar, Callout, Card, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, Dialog, Drawer, FileUpload, Filter, ListItem, Menu, Modal, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch,
|
|
6265
|
+
export { Avatar, Badge, Button, Calendar, Callout, Card, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, Dialog, Drawer, FileUpload, Filter, ListItem, Menu, Modal, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, TableV2, TextArea_default as TextArea, TextField$1 as TextField, Toast, ToastContainer, ToastProvider, ToggleButton, Tooltip, VerificationCode, VirtualKeyboard, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
6382
6266
|
//# sourceMappingURL=index.esm.js.map
|