@giro-ds/react 12.0.0 → 12.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +230 -349
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +195 -162
- package/dist/index.esm.js +232 -349
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +2 -2
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -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, 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';
|
|
@@ -4386,42 +4386,38 @@ const Filter = ({ mode = 'simple', ...props }) => {
|
|
|
4386
4386
|
return jsx(Simple, { ...props });
|
|
4387
4387
|
};
|
|
4388
4388
|
|
|
4389
|
-
var styles$b = {"
|
|
4389
|
+
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
4390
|
|
|
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 }) => {
|
|
4391
|
+
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
4392
|
const componentId = useId();
|
|
4405
4393
|
const itemId = id || componentId;
|
|
4406
4394
|
const [internalChecked, setInternalChecked] = useState(checked);
|
|
4407
4395
|
const [internalSelected, setInternalSelected] = useState(selected);
|
|
4396
|
+
const [internalExpanded, setInternalExpanded] = useState(expanded ?? defaultExpanded);
|
|
4397
|
+
const [childrenCheckedMap, setChildrenCheckedMap] = useState({});
|
|
4398
|
+
const childrenCount = variant === 'checkbox'
|
|
4399
|
+
? React__default.Children.toArray(children).filter(child => React__default.isValidElement(child) && !child.props.disabled).length
|
|
4400
|
+
: 0;
|
|
4401
|
+
const checkedCount = Object.values(childrenCheckedMap).filter(Boolean).length;
|
|
4402
|
+
const isIndeterminate = childrenCount > 0 && checkedCount > 0 && checkedCount < childrenCount;
|
|
4403
|
+
const hasChildren = React__default.Children.count(children) > 0;
|
|
4408
4404
|
const handleCheckboxClick = useCallback((e) => {
|
|
4409
4405
|
if (disabled)
|
|
4410
4406
|
return;
|
|
4411
|
-
const newChecked = !internalChecked;
|
|
4407
|
+
const newChecked = isIndeterminate ? true : !internalChecked;
|
|
4412
4408
|
setInternalChecked(newChecked);
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4421
|
-
onChange?.(true);
|
|
4409
|
+
if (childrenCount > 0) {
|
|
4410
|
+
const newMap = {};
|
|
4411
|
+
React__default.Children.forEach(children, (child, index) => {
|
|
4412
|
+
if (React__default.isValidElement(child) && !child.props.disabled) {
|
|
4413
|
+
newMap[index] = newChecked;
|
|
4414
|
+
}
|
|
4415
|
+
});
|
|
4416
|
+
setChildrenCheckedMap(newMap);
|
|
4422
4417
|
}
|
|
4418
|
+
onChange?.(newChecked);
|
|
4423
4419
|
onClick?.(e);
|
|
4424
|
-
}, [disabled, internalChecked, onChange, onClick]);
|
|
4420
|
+
}, [disabled, internalChecked, isIndeterminate, childrenCount, onChange, onClick, children]);
|
|
4425
4421
|
const handleTextOrIconClick = useCallback((e) => {
|
|
4426
4422
|
if (disabled)
|
|
4427
4423
|
return;
|
|
@@ -4429,16 +4425,55 @@ const ListItem = ({ id, className, variant = 'text', text, name, subText, disabl
|
|
|
4429
4425
|
setInternalSelected(newSelected);
|
|
4430
4426
|
onClick?.(e);
|
|
4431
4427
|
}, [disabled, internalSelected, onClick]);
|
|
4428
|
+
const handleChildChange = useCallback((index, childChecked) => {
|
|
4429
|
+
setChildrenCheckedMap(prev => {
|
|
4430
|
+
const next = { ...prev, [index]: childChecked };
|
|
4431
|
+
const total = childrenCount;
|
|
4432
|
+
const checked = Object.values(next).filter(Boolean).length;
|
|
4433
|
+
if (checked === 0) {
|
|
4434
|
+
setInternalChecked(false);
|
|
4435
|
+
onChange?.(false);
|
|
4436
|
+
}
|
|
4437
|
+
else if (checked === total) {
|
|
4438
|
+
setInternalChecked(true);
|
|
4439
|
+
onChange?.(true);
|
|
4440
|
+
}
|
|
4441
|
+
return next;
|
|
4442
|
+
});
|
|
4443
|
+
}, [childrenCount, onChange]);
|
|
4444
|
+
const handleClick = useCallback((e) => {
|
|
4445
|
+
if (hasChildren) {
|
|
4446
|
+
if (disabled)
|
|
4447
|
+
return;
|
|
4448
|
+
const newExpanded = !internalExpanded;
|
|
4449
|
+
setInternalExpanded(newExpanded);
|
|
4450
|
+
onExpandedChange?.(newExpanded);
|
|
4451
|
+
return;
|
|
4452
|
+
}
|
|
4453
|
+
switch (variant) {
|
|
4454
|
+
case 'checkbox':
|
|
4455
|
+
handleCheckboxClick(e);
|
|
4456
|
+
break;
|
|
4457
|
+
case 'text':
|
|
4458
|
+
case 'icon':
|
|
4459
|
+
default:
|
|
4460
|
+
handleTextOrIconClick(e);
|
|
4461
|
+
break;
|
|
4462
|
+
}
|
|
4463
|
+
}, [hasChildren, disabled, internalExpanded, onExpandedChange, variant, handleCheckboxClick, handleTextOrIconClick]);
|
|
4432
4464
|
const handleKeyDown = useCallback((e) => {
|
|
4433
4465
|
if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
|
|
4434
4466
|
e.preventDefault();
|
|
4467
|
+
if (hasChildren) {
|
|
4468
|
+
const newExpanded = !internalExpanded;
|
|
4469
|
+
setInternalExpanded(newExpanded);
|
|
4470
|
+
onExpandedChange?.(newExpanded);
|
|
4471
|
+
return;
|
|
4472
|
+
}
|
|
4435
4473
|
switch (variant) {
|
|
4436
4474
|
case 'checkbox':
|
|
4437
4475
|
handleCheckboxClick(e);
|
|
4438
4476
|
break;
|
|
4439
|
-
case 'radio':
|
|
4440
|
-
handleRadioClick(e);
|
|
4441
|
-
break;
|
|
4442
4477
|
case 'text':
|
|
4443
4478
|
case 'icon':
|
|
4444
4479
|
default:
|
|
@@ -4446,54 +4481,80 @@ const ListItem = ({ id, className, variant = 'text', text, name, subText, disabl
|
|
|
4446
4481
|
break;
|
|
4447
4482
|
}
|
|
4448
4483
|
}
|
|
4449
|
-
}, [disabled, variant, handleCheckboxClick,
|
|
4484
|
+
}, [disabled, hasChildren, internalExpanded, onExpandedChange, variant, handleCheckboxClick, handleTextOrIconClick]);
|
|
4450
4485
|
useEffect(() => {
|
|
4451
4486
|
setInternalChecked(checked);
|
|
4452
4487
|
}, [checked]);
|
|
4453
4488
|
useEffect(() => {
|
|
4454
4489
|
setInternalSelected(selected);
|
|
4455
4490
|
}, [selected]);
|
|
4491
|
+
useEffect(() => {
|
|
4492
|
+
if (expanded !== undefined)
|
|
4493
|
+
setInternalExpanded(expanded);
|
|
4494
|
+
}, [expanded]);
|
|
4495
|
+
useEffect(() => {
|
|
4496
|
+
if (!internalExpanded || variant !== 'checkbox' || childrenCount === 0)
|
|
4497
|
+
return;
|
|
4498
|
+
setChildrenCheckedMap(prev => {
|
|
4499
|
+
let changed = false;
|
|
4500
|
+
const next = { ...prev };
|
|
4501
|
+
React__default.Children.forEach(children, (child, index) => {
|
|
4502
|
+
if (React__default.isValidElement(child) && !child.props.disabled && !(index in next)) {
|
|
4503
|
+
next[index] = internalChecked;
|
|
4504
|
+
changed = true;
|
|
4505
|
+
}
|
|
4506
|
+
});
|
|
4507
|
+
return changed ? next : prev;
|
|
4508
|
+
});
|
|
4509
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4510
|
+
}, [internalExpanded, childrenCount, variant]);
|
|
4456
4511
|
const renderVariantContent = useCallback(() => {
|
|
4457
|
-
const validVariants = ['text', 'checkbox', '
|
|
4512
|
+
const validVariants = ['text', 'checkbox', 'icon'];
|
|
4458
4513
|
const currentVariant = validVariants.includes(variant) ? variant : 'text';
|
|
4459
4514
|
switch (currentVariant) {
|
|
4460
4515
|
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 }))] })] }));
|
|
4516
|
+
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
4517
|
case 'icon':
|
|
4469
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$b
|
|
4518
|
+
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
4519
|
case 'text':
|
|
4471
4520
|
default:
|
|
4472
|
-
return (jsxs("div", { className: styles$b
|
|
4521
|
+
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
4522
|
}
|
|
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,
|
|
4523
|
+
}, [variant, itemId, internalChecked, isIndeterminate, disabled, handleCheckboxClick, text, subText, icon, scale, hasChildren]);
|
|
4524
|
+
const listItemClass = clsx(styles$b.listItem, {
|
|
4525
|
+
[styles$b[`listItem-${variant}`]]: variant,
|
|
4526
|
+
[styles$b.listItemDisabled]: disabled,
|
|
4479
4527
|
[className || '']: className
|
|
4480
4528
|
});
|
|
4481
|
-
const
|
|
4482
|
-
|
|
4483
|
-
|
|
4484
|
-
|
|
4485
|
-
|
|
4486
|
-
|
|
4487
|
-
|
|
4529
|
+
const ariaChecked = variant === 'checkbox' ? internalChecked : undefined;
|
|
4530
|
+
const ariaRole = variant === 'checkbox' ? 'checkbox' : 'option';
|
|
4531
|
+
return (jsxs("li", { id: itemId, className: listItemClass, "data-testid": "list-item", style: {
|
|
4532
|
+
'--giro-scale': scale,
|
|
4533
|
+
...(customWidth != null ? { width: customWidth } : {}),
|
|
4534
|
+
}, ...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, {
|
|
4535
|
+
[styles$b.listItemChevronExpanded]: internalExpanded,
|
|
4536
|
+
}), children: jsx(ChevronDown16Regular, {}) }))] }), hasChildren && internalExpanded && (jsx("ul", { className: styles$b.listItemChildren, role: "group", children: variant === 'checkbox'
|
|
4537
|
+
? React__default.Children.map(children, (child, index) => React__default.isValidElement(child)
|
|
4538
|
+
? React__default.cloneElement(child, {
|
|
4539
|
+
checked: child.props.disabled
|
|
4540
|
+
? child.props.checked
|
|
4541
|
+
: (childrenCheckedMap[index] ?? internalChecked),
|
|
4542
|
+
onChange: (childChecked) => {
|
|
4543
|
+
child.props.onChange?.(childChecked);
|
|
4544
|
+
handleChildChange(index, childChecked);
|
|
4545
|
+
},
|
|
4546
|
+
})
|
|
4547
|
+
: child)
|
|
4548
|
+
: children }))] }));
|
|
4488
4549
|
};
|
|
4489
4550
|
|
|
4490
|
-
var styles$
|
|
4551
|
+
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
4552
|
|
|
4492
4553
|
const MenuItem = memo(({ item, isSelected, onSelect }) => {
|
|
4493
4554
|
const handleSelect = () => {
|
|
4494
4555
|
onSelect(item);
|
|
4495
4556
|
};
|
|
4496
|
-
return (jsxs(DropdownMenu.Item, { className: clsx(styles$
|
|
4557
|
+
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
4558
|
});
|
|
4498
4559
|
MenuItem.displayName = 'MenuItem';
|
|
4499
4560
|
|
|
@@ -4721,7 +4782,7 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4721
4782
|
const renderMenuItem = useCallback((item, key) => {
|
|
4722
4783
|
const hasChildren = item.children && item.children.length > 0;
|
|
4723
4784
|
if (hasChildren) {
|
|
4724
|
-
return (jsxs(DropdownMenu.Sub, { children: [jsxs(DropdownMenu.SubTrigger, { className: styles$
|
|
4785
|
+
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
4786
|
}
|
|
4726
4787
|
return (jsx(MenuItem, { item: item, isSelected: isItemSelected(item), onSelect: handleItemSelect }, key));
|
|
4727
4788
|
}, [handleItemSelect, isItemSelected]);
|
|
@@ -4732,7 +4793,7 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4732
4793
|
hasReachedEndRef.current = false;
|
|
4733
4794
|
}
|
|
4734
4795
|
};
|
|
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$
|
|
4796
|
+
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
4797
|
if (closedByPointerRef.current) {
|
|
4737
4798
|
e.preventDefault();
|
|
4738
4799
|
closedByPointerRef.current = false;
|
|
@@ -4741,10 +4802,10 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4741
4802
|
if (search) {
|
|
4742
4803
|
e.stopPropagation();
|
|
4743
4804
|
}
|
|
4744
|
-
}, ...rest, children: [search && (jsx("div", { className: styles$
|
|
4805
|
+
}, ...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
4806
|
};
|
|
4746
4807
|
|
|
4747
|
-
var styles$
|
|
4808
|
+
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
4809
|
|
|
4749
4810
|
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, customHeight, fullscreen = false, ...rest }) => {
|
|
4750
4811
|
const contentRef = React.useRef(null);
|
|
@@ -4757,13 +4818,13 @@ const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeO
|
|
|
4757
4818
|
e.preventDefault();
|
|
4758
4819
|
contentRef.current?.focus();
|
|
4759
4820
|
};
|
|
4760
|
-
return (jsx(Dialog$1.Root, { open: isOpen, onOpenChange: handleOpenChange, ...rest, children: jsxs(Dialog$1.Portal, { children: [jsx(Dialog$1.Overlay, { className: styles$
|
|
4821
|
+
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
4822
|
'--modal-custom-width': customWidth,
|
|
4762
4823
|
'--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$
|
|
4824
|
+
}, 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
4825
|
};
|
|
4765
4826
|
|
|
4766
|
-
var styles$
|
|
4827
|
+
var styles$8 = {"quantity":"Quantity-module__quantity___-vndR","quantityInput":"Quantity-module__quantityInput___xZG-v","disabled":"Quantity-module__disabled___X6p5l"};
|
|
4767
4828
|
|
|
4768
4829
|
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
4830
|
const initialValue = Math.min(Math.max(value, minValue), maxValue);
|
|
@@ -4944,11 +5005,23 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
|
|
|
4944
5005
|
const inputSizeValue = inputSize !== undefined ? inputSize : Math.max(1, inputValue.length);
|
|
4945
5006
|
const uniqueId = useId();
|
|
4946
5007
|
const inputId = id || uniqueId;
|
|
4947
|
-
return (jsxs("div", { className: clsx(styles$
|
|
5008
|
+
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
5009
|
};
|
|
4949
5010
|
const memorizedQuantity = React__default.memo(Quantity);
|
|
4950
5011
|
memorizedQuantity.displayName = 'Quantity';
|
|
4951
5012
|
|
|
5013
|
+
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"};
|
|
5014
|
+
|
|
5015
|
+
const Radio = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', scale = 1, className, style, ...rest }) => {
|
|
5016
|
+
const generatedId = useId();
|
|
5017
|
+
const componentId = id || generatedId;
|
|
5018
|
+
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 }) => {
|
|
5019
|
+
const itemKey = id ?? value;
|
|
5020
|
+
const uniqueId = `${componentId}-item-${value}`;
|
|
5021
|
+
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));
|
|
5022
|
+
}) }));
|
|
5023
|
+
};
|
|
5024
|
+
|
|
4952
5025
|
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
5026
|
|
|
4954
5027
|
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange, value, ...restProps }) => {
|
|
@@ -5373,272 +5446,55 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
5373
5446
|
};
|
|
5374
5447
|
Select.displayName = 'Select';
|
|
5375
5448
|
|
|
5376
|
-
var styles$5 = {"tableContainer":"Table-
|
|
5449
|
+
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
5450
|
|
|
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
|
-
}
|
|
5422
|
-
|
|
5423
|
-
var SVG = function (_a) {
|
|
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
|
-
};
|
|
5447
|
-
|
|
5448
|
-
var ContentLoader = function (props) {
|
|
5449
|
-
return props.children ? createElement(SVG, __assign({}, props)) : createElement(ReactContentLoaderFacebook, __assign({}, props));
|
|
5450
|
-
};
|
|
5451
|
-
|
|
5452
|
-
var ReactContentLoaderFacebook = function (props) { return (createElement(ContentLoader, __assign({ viewBox: "0 0 476 124" }, props),
|
|
5453
|
-
createElement("rect", { x: "48", y: "8", width: "88", height: "6", rx: "3" }),
|
|
5454
|
-
createElement("rect", { x: "48", y: "26", width: "52", height: "6", rx: "3" }),
|
|
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" }))); };
|
|
5451
|
+
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' })] })] }));
|
|
5459
5452
|
|
|
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" })] }));
|
|
5453
|
+
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"};
|
|
5467
5454
|
|
|
5468
|
-
const
|
|
5469
|
-
const
|
|
5470
|
-
|
|
5471
|
-
|
|
5472
|
-
|
|
5473
|
-
|
|
5474
|
-
|
|
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;
|
|
5455
|
+
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 }) => {
|
|
5456
|
+
const toggle = (jsx(Toggle$1.Root, { pressed: pressed, defaultPressed: defaultPressed, onPressedChange: onPressedChange, disabled: disabled, className: clsx(styles$4.toggle, styles$4[`toggle-${size}`], {
|
|
5457
|
+
[styles$4.toggleIconOnly]: iconOnly,
|
|
5458
|
+
[styles$4.toggleWithIcon]: !!icon && !iconOnly,
|
|
5459
|
+
}, 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] })) }));
|
|
5460
|
+
if (tooltipText) {
|
|
5461
|
+
return (jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: toggle }));
|
|
5528
5462
|
}
|
|
5463
|
+
return toggle;
|
|
5529
5464
|
};
|
|
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',
|
|
5465
|
+
|
|
5466
|
+
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 }) => {
|
|
5467
|
+
const rootProps = selectionType === 'multiple'
|
|
5468
|
+
? {
|
|
5469
|
+
type: 'multiple',
|
|
5470
|
+
value: value,
|
|
5471
|
+
defaultValue: defaultValue,
|
|
5472
|
+
onValueChange: onValueChange,
|
|
5473
|
+
}
|
|
5474
|
+
: {
|
|
5475
|
+
type: 'single',
|
|
5476
|
+
value: value,
|
|
5477
|
+
defaultValue: defaultValue,
|
|
5478
|
+
onValueChange: onValueChange,
|
|
5547
5479
|
};
|
|
5548
|
-
|
|
5549
|
-
|
|
5550
|
-
|
|
5551
|
-
|
|
5552
|
-
|
|
5480
|
+
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 ??
|
|
5481
|
+
items.map((item) => (jsx(ToggleGroup$1.Item, { value: item.value, disabled: item.disabled, className: clsx(styles$4.item, styles$4[`item-${size}`], {
|
|
5482
|
+
[styles$4.toggleIconOnly]: item.iconOnly,
|
|
5483
|
+
[styles$4.toggleWithIcon]: !!item.icon && !item.iconOnly,
|
|
5484
|
+
}), 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))) }));
|
|
5485
|
+
if (tooltipText) {
|
|
5486
|
+
return (jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: group }));
|
|
5553
5487
|
}
|
|
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 }) })) })] }) }) }));
|
|
5488
|
+
return group;
|
|
5559
5489
|
};
|
|
5560
5490
|
|
|
5561
|
-
const
|
|
5562
|
-
|
|
5563
|
-
};
|
|
5564
|
-
|
|
5565
|
-
return
|
|
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" }) })) }))] }));
|
|
5611
|
-
};
|
|
5612
|
-
|
|
5613
|
-
const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange, onItemsPerPageChange, pageSizeOptions = [10, 25, 50, 100], disabled = false, className, ...rest }) => {
|
|
5614
|
-
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
|
5615
|
-
const startItem = totalItems > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0;
|
|
5616
|
-
const endItem = Math.min(currentPage * itemsPerPage, totalItems);
|
|
5617
|
-
const canGoPrev = currentPage > 1 && !disabled;
|
|
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, {}) })] })] }));
|
|
5491
|
+
const ToggleButton = ({ mode = 'simple', ...props }) => {
|
|
5492
|
+
if (mode === 'combined') {
|
|
5493
|
+
return jsx(ToggleGroup, { ...props });
|
|
5494
|
+
}
|
|
5495
|
+
return jsx(Toggle, { ...props });
|
|
5636
5496
|
};
|
|
5637
5497
|
|
|
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
5498
|
const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSorting = true, bulkActions, header, footer, loading = false, emptyIcon, emptyTitle, emptyText, onRow, className, }) => {
|
|
5643
5499
|
const isRowSelectionEnabled = !!rowSelectionConfig;
|
|
5644
5500
|
const isControlled = rowSelectionConfig?.selectedRowKeys !== undefined;
|
|
@@ -5648,6 +5504,19 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5648
5504
|
setPendingSearch(header.searchValue);
|
|
5649
5505
|
}
|
|
5650
5506
|
}, [header?.searchValue]);
|
|
5507
|
+
const [activeView, setActiveView] = useState(header?.viewToggle?.value ??
|
|
5508
|
+
header?.viewToggle?.defaultValue ??
|
|
5509
|
+
header?.viewToggle?.items?.[0]?.value ??
|
|
5510
|
+
'');
|
|
5511
|
+
useEffect(() => {
|
|
5512
|
+
if (header?.viewToggle?.value !== undefined) {
|
|
5513
|
+
setActiveView(header.viewToggle.value);
|
|
5514
|
+
}
|
|
5515
|
+
}, [header?.viewToggle?.value]);
|
|
5516
|
+
const currentViewData = header?.viewToggle?.views?.[activeView];
|
|
5517
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5518
|
+
const effectiveColumns = (currentViewData?.columns ?? columns);
|
|
5519
|
+
const effectiveData = currentViewData?.data ?? data;
|
|
5651
5520
|
const [rowSelectionState, setRowSelectionState] = useState({});
|
|
5652
5521
|
const rowSelectionRef = useRef({});
|
|
5653
5522
|
const externalSelectionState = useMemo(() => {
|
|
@@ -5669,13 +5538,13 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5669
5538
|
size: 48,
|
|
5670
5539
|
enableSorting: false,
|
|
5671
5540
|
enableColumnFilter: false,
|
|
5672
|
-
header: ({ table: t }) => (jsx("div", { className: styles$
|
|
5673
|
-
cell: ({ row }) => (jsx("div", { className: styles$
|
|
5541
|
+
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) }) })),
|
|
5542
|
+
cell: ({ row }) => (jsx("div", { className: styles$5.checkboxCell, children: jsx(Checkbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (checked) => row.toggleSelected(checked) }) })),
|
|
5674
5543
|
}), [rowSelectionConfig?.disableSelectAll]);
|
|
5675
|
-
const resolvedColumns = useMemo(() => (isRowSelectionEnabled ? [selectionColumn, ...
|
|
5544
|
+
const resolvedColumns = useMemo(() => (isRowSelectionEnabled ? [selectionColumn, ...effectiveColumns] : effectiveColumns), [isRowSelectionEnabled, selectionColumn, effectiveColumns]);
|
|
5676
5545
|
const showSearch = !!(header?.onSearchChange);
|
|
5677
5546
|
const table = useReactTable({
|
|
5678
|
-
data,
|
|
5547
|
+
data: effectiveData,
|
|
5679
5548
|
columns: resolvedColumns,
|
|
5680
5549
|
defaultColumn: { minSize: 44, size: 0 },
|
|
5681
5550
|
state: {
|
|
@@ -5718,7 +5587,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5718
5587
|
const totalPages = footer ? Math.ceil(effectiveTotalItems / pageSize) : 0;
|
|
5719
5588
|
const canGoPrev = pageIndex > 0;
|
|
5720
5589
|
const canGoNext = pageIndex + 1 < totalPages;
|
|
5721
|
-
const skeletonRowCount = footer ? pageSize : (
|
|
5590
|
+
const skeletonRowCount = footer ? pageSize : (effectiveData.length > 0 ? effectiveData.length : pageSize);
|
|
5722
5591
|
const selectedRows = useMemo(() => table
|
|
5723
5592
|
.getCoreRowModel()
|
|
5724
5593
|
.rows.filter((r) => effectiveRowSelection[r.id])
|
|
@@ -5748,24 +5617,38 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5748
5617
|
setPagination({ pageIndex: 0, pageSize: size });
|
|
5749
5618
|
footer?.onPageSizeChange?.(size);
|
|
5750
5619
|
};
|
|
5751
|
-
return (jsxs("div", { className: clsx(styles$
|
|
5620
|
+
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
5621
|
? 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
|
-
|
|
5622
|
+
: `${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) => {
|
|
5623
|
+
setPendingSearch(e.target.value);
|
|
5624
|
+
}, onSearch: (val) => {
|
|
5625
|
+
if (footer) {
|
|
5626
|
+
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
|
|
5627
|
+
footer?.onPageChange?.(1);
|
|
5628
|
+
}
|
|
5629
|
+
header?.onSearchChange?.(val);
|
|
5630
|
+
}, onClear: () => {
|
|
5631
|
+
setPendingSearch('');
|
|
5632
|
+
if (footer) {
|
|
5633
|
+
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
|
|
5634
|
+
footer?.onPageChange?.(1);
|
|
5635
|
+
}
|
|
5636
|
+
header?.onSearchChange?.('');
|
|
5637
|
+
}, placeholder: header.searchPlaceholder ?? 'Pesquisar...', className: styles$5.tableHeaderSearch }) })), header.viewToggle && (jsx(ToggleButton, { mode: "combined", selectionType: "single", value: activeView, onValueChange: (val) => {
|
|
5638
|
+
if (!val)
|
|
5639
|
+
return;
|
|
5640
|
+
setActiveView(val);
|
|
5641
|
+
if (footer) {
|
|
5642
|
+
setPagination((prev) => ({ ...prev, pageIndex: 0 }));
|
|
5643
|
+
footer?.onPageChange?.(1);
|
|
5644
|
+
}
|
|
5645
|
+
header.viewToggle?.onValueChange?.(val);
|
|
5646
|
+
}, items: header.viewToggle.items.map((item) => ({
|
|
5647
|
+
value: item.value,
|
|
5648
|
+
icon: item.icon,
|
|
5649
|
+
iconOnly: true,
|
|
5650
|
+
tooltipText: item.tooltipText,
|
|
5651
|
+
})) }))] }), !!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
5652
|
const commonProps = {
|
|
5770
5653
|
buttonText: filterItem.buttonText,
|
|
5771
5654
|
icon: filterItem.icon,
|
|
@@ -5783,30 +5666,30 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5783
5666
|
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
5667
|
}
|
|
5785
5668
|
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$
|
|
5669
|
+
}) })] }))] })), 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
5670
|
textAlign: col.column.columnDef.meta?.align,
|
|
5788
5671
|
width: col.column.columnDef.size || undefined,
|
|
5789
5672
|
minWidth: col.column.columnDef.minSize,
|
|
5790
5673
|
maxWidth: col.column.columnDef.maxSize !== Number.MAX_SAFE_INTEGER
|
|
5791
5674
|
? col.column.columnDef.maxSize
|
|
5792
5675
|
: undefined,
|
|
5793
|
-
}, children: jsx("div", { className: styles$
|
|
5676
|
+
}, 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: clsx(styles$5.tableSortIcon, 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
5677
|
const rowProps = onRow?.(row.original, index) ?? {};
|
|
5795
|
-
return (jsx("tr", { className: clsx(styles$
|
|
5678
|
+
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
5679
|
textAlign: cell.column.columnDef.meta?.align,
|
|
5797
5680
|
width: cell.column.columnDef.size || undefined,
|
|
5798
5681
|
minWidth: cell.column.columnDef.minSize,
|
|
5799
5682
|
maxWidth: cell.column.columnDef.maxSize !== Number.MAX_SAFE_INTEGER
|
|
5800
5683
|
? cell.column.columnDef.maxSize
|
|
5801
5684
|
: undefined,
|
|
5802
|
-
}, children: jsx("div", { className: styles$
|
|
5803
|
-
})) : (jsx("tr", { children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: styles$
|
|
5685
|
+
}, 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));
|
|
5686
|
+
})) : (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
5687
|
? `${pageIndex + 1} de ${totalPages}`
|
|
5805
|
-
: '0 páginas' }) }), jsxs("div", { className: styles$
|
|
5688
|
+
: '0 páginas' }) }), jsxs("div", { className: styles$5.tablePaginationControls, children: [jsx("button", { className: styles$5.tablePaginationButton, onClick: () => {
|
|
5806
5689
|
const newPage = pageIndex - 1;
|
|
5807
5690
|
setPagination((prev) => ({ ...prev, pageIndex: newPage }));
|
|
5808
5691
|
footer?.onPageChange?.(newPage + 1);
|
|
5809
|
-
}, disabled: !canGoPrev, "aria-label": "P\u00E1gina anterior", children: jsx(ChevronLeft16Regular, {}) }), jsx("button", { className: styles$
|
|
5692
|
+
}, disabled: !canGoPrev, "aria-label": "P\u00E1gina anterior", children: jsx(ChevronLeft16Regular, {}) }), jsx("button", { className: styles$5.tablePaginationButton, onClick: () => {
|
|
5810
5693
|
const newPage = pageIndex + 1;
|
|
5811
5694
|
setPagination((prev) => ({ ...prev, pageIndex: newPage }));
|
|
5812
5695
|
footer?.onPageChange?.(newPage + 1);
|
|
@@ -5864,7 +5747,7 @@ const TextArea = ({ ref, className, value, label, placeholder, onChange, disable
|
|
|
5864
5747
|
TextArea.displayName = 'TextArea';
|
|
5865
5748
|
var TextArea_default = React__default.memo(TextArea);
|
|
5866
5749
|
|
|
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"};
|
|
5750
|
+
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
5751
|
|
|
5869
5752
|
/**
|
|
5870
5753
|
* Contexto React que armazena o estado e as ações do sistema de Toast.
|
|
@@ -6378,5 +6261,5 @@ function useInfiniteScroll({ status, page, lastPage, onLoadMore, threshold = 0.1
|
|
|
6378
6261
|
};
|
|
6379
6262
|
}
|
|
6380
6263
|
|
|
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,
|
|
6264
|
+
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
6265
|
//# sourceMappingURL=index.esm.js.map
|