@giro-ds/react 3.0.4 → 3.0.6
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/components/Avatar/Avatar.d.ts +1 -1
- package/dist/components/Avatar/Avatar.types.d.ts +21 -5
- package/dist/components/Badge/Badge.types.d.ts +25 -7
- package/dist/components/Button/Button.types.d.ts +41 -8
- package/dist/components/Calendar/Calendar.d.ts +2 -1
- package/dist/components/Calendar/Calendar.types.d.ts +56 -12
- package/dist/components/Callout/Callout.types.d.ts +28 -11
- package/dist/components/Checkbox/Checkbox.types.d.ts +28 -4
- package/dist/components/Chips/Chips.types.d.ts +28 -11
- package/dist/components/Container/Container.types.d.ts +11 -0
- package/dist/components/DatePicker/DatePicker.types.d.ts +36 -18
- package/dist/components/DatePicker/DateUtils.d.ts +1 -1
- package/dist/components/DatePicker/index.d.ts +1 -1
- package/dist/components/Dialog/Dialog.types.d.ts +35 -11
- package/dist/components/Drawer/Drawer.types.d.ts +58 -27
- package/dist/components/Dropdown/Dropdown.types.d.ts +47 -20
- package/dist/components/Filter/Filter.types.d.ts +47 -28
- package/dist/components/ListItem/ListItem.d.ts +0 -5
- package/dist/components/ListItem/ListItem.types.d.ts +35 -17
- package/dist/components/Menu/Menu.d.ts +1 -1
- package/dist/components/Menu/Menu.types.d.ts +60 -2
- package/dist/components/Quantity/Quantity.types.d.ts +31 -13
- package/dist/components/Radio/Radio.types.d.ts +39 -2
- package/dist/components/Search/Search.types.d.ts +34 -5
- package/dist/components/Select/Select.types.d.ts +117 -8
- package/dist/components/Switch/Switch.types.d.ts +26 -2
- package/dist/components/Table/Table.d.ts +1 -1
- package/dist/components/Table/Table.types.d.ts +2 -3
- package/dist/components/Table/TableHeader.d.ts +1 -1
- package/dist/components/Table/TablePagination.d.ts +1 -9
- package/dist/components/TextField/TextField.types.d.ts +49 -11
- package/dist/components/Toast/Toast.types.d.ts +37 -0
- package/dist/components/Tooltip/Tooltip.types.d.ts +32 -4
- package/dist/components/VerificationCode/VerificationCode.types.d.ts +29 -9
- package/dist/components/index.d.ts +1 -1
- package/dist/index.cjs +142 -170
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +860 -250
- package/dist/index.esm.js +135 -181
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types/common.types.d.ts +12 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,27 +1,46 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var React = require('react');
|
|
5
4
|
var clsx = require('clsx');
|
|
5
|
+
var React = require('react');
|
|
6
6
|
var reactIcons = require('@fluentui/react-icons');
|
|
7
7
|
var reactI18next = require('react-i18next');
|
|
8
8
|
var i18n = require('i18next');
|
|
9
9
|
var radixUi = require('radix-ui');
|
|
10
10
|
|
|
11
|
+
function _interopNamespaceDefault(e) {
|
|
12
|
+
var n = Object.create(null);
|
|
13
|
+
if (e) {
|
|
14
|
+
Object.keys(e).forEach(function (k) {
|
|
15
|
+
if (k !== 'default') {
|
|
16
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
17
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () { return e[k]; }
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
n.default = e;
|
|
25
|
+
return Object.freeze(n);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
29
|
+
|
|
11
30
|
var styles$p = {"zds-avatar__circle":"Avatar-module__zds-avatar__circle___DXcGa","zds-avatar__large":"Avatar-module__zds-avatar__large___G6qoo","zds-avatar__circle__icon":"Avatar-module__zds-avatar__circle__icon___u14vV","zds-avatar__small":"Avatar-module__zds-avatar__small___d-Pj5"};
|
|
12
31
|
|
|
13
|
-
let Avatar = ({ id = '', icon, size = '
|
|
32
|
+
let Avatar = ({ id = '', icon, size = 'sm', className = '', ...rest }) => {
|
|
14
33
|
const componentId = id || React.useId();
|
|
15
34
|
const AvatarClass = clsx(styles$p['zds-avatar__circle'], {
|
|
16
|
-
[styles$p['zds-avatar__large']]: size === '
|
|
17
|
-
[styles$p['zds-avatar__small']]: size === '
|
|
35
|
+
[styles$p['zds-avatar__large']]: size === 'lg',
|
|
36
|
+
[styles$p['zds-avatar__small']]: size === 'sm',
|
|
18
37
|
}, className);
|
|
19
|
-
return (jsxRuntime.jsx("div", { className: AvatarClass, id: componentId, role: "img", "aria-label": `Avatar ${size}`, children: jsxRuntime.jsx("div", { className: styles$p['zds-avatar__circle__icon'], children: icon }) }));
|
|
38
|
+
return (jsxRuntime.jsx("div", { className: AvatarClass, id: componentId, role: "img", "aria-label": `Avatar ${size}`, ...rest, children: jsxRuntime.jsx("div", { className: styles$p['zds-avatar__circle__icon'], children: icon }) }));
|
|
20
39
|
};
|
|
21
40
|
|
|
22
41
|
var styles$o = {"zds-badge__container":"Badge-module__zds-badge__container___NMAZD","zds-badge":"Badge-module__zds-badge___TeF7g","zds-badge__status":"Badge-module__zds-badge__status___3rFKE","zds-badge__small":"Badge-module__zds-badge__small___lVA0I","zds-badge__large":"Badge-module__zds-badge__large___yxb6z","zds-badge__status__empty":"Badge-module__zds-badge__status__empty___zWu8n"};
|
|
23
42
|
|
|
24
|
-
const Badge = ({ children, badgeValue = null, type = 'notification', className
|
|
43
|
+
const Badge = ({ children, badgeValue = null, type = 'notification', className, id, 'aria-label': ariaLabel, }) => {
|
|
25
44
|
const isEmpty = badgeValue === null || badgeValue === undefined || badgeValue === '';
|
|
26
45
|
const componentId = id || React.useId();
|
|
27
46
|
const getDisplayValue = (inputValue) => {
|
|
@@ -54,7 +73,7 @@ const Badge = ({ children, badgeValue = null, type = 'notification', className =
|
|
|
54
73
|
|
|
55
74
|
var styles$n = {"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","spin":"Button-module__spin___kQKH9"};
|
|
56
75
|
|
|
57
|
-
const Button = React.forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel, disabled = false, onClick, size = 'lg', className
|
|
76
|
+
const Button = React.forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel, disabled = false, onClick, size = 'lg', className, type = 'button', id, icon, fullWidth = false, ariaLabel, iconOnly = false, loading = false, ...restProps }, ref) => {
|
|
58
77
|
const generatedId = React.useId();
|
|
59
78
|
const componentId = id || generatedId;
|
|
60
79
|
const getComponent = () => {
|
|
@@ -268,7 +287,7 @@ i18n
|
|
|
268
287
|
/**
|
|
269
288
|
* Calendar component with keyboard navigation support and full TypeScript implementation.
|
|
270
289
|
*/
|
|
271
|
-
const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, onDaySelect, onClear, locale = 'pt-br', format = 'dd/mm/yyyy', id
|
|
290
|
+
const Calendar = ({ currentDate, className, selectedDate = null, onDateChange, onDaySelect, onClear, locale = 'pt-br', format = 'dd/mm/yyyy', id, minDate, maxDate, }) => {
|
|
272
291
|
const { t, i18n } = reactI18next.useTranslation();
|
|
273
292
|
const componentId = id || React.useId();
|
|
274
293
|
const calendarRef = React.useRef(null);
|
|
@@ -601,7 +620,7 @@ MemoizedCalendar.displayName = 'Calendar';
|
|
|
601
620
|
|
|
602
621
|
var styles$l = {"zds-callout__container":"Callout-module__zds-callout__container___EoOQd","zds-callout__container__with-title":"Callout-module__zds-callout__container__with-title___NUq2k","zds-callout__neutral":"Callout-module__zds-callout__neutral___ib9gW","zds-callout__brand":"Callout-module__zds-callout__brand___UYVny","zds-callout__color":"Callout-module__zds-callout__color___6ojEV","zds-callout__alert":"Callout-module__zds-callout__alert___gSOsh","zds-callout__success":"Callout-module__zds-callout__success___6W096","zds-callout__title":"Callout-module__zds-callout__title___jmmqj","zds-callout__text":"Callout-module__zds-callout__text___MTO5R","zds-callout__icon":"Callout-module__zds-callout__icon___-CaUD","zds-callout__content":"Callout-module__zds-callout__content___hh0Mj","zds-callout__subcontent":"Callout-module__zds-callout__subcontent___olIpt"};
|
|
603
622
|
|
|
604
|
-
const Callout = ({ type = 'neutral', title
|
|
623
|
+
const Callout = ({ type = 'neutral', title, text, icon, className, id, ...rest }) => {
|
|
605
624
|
const generatedId = React.useId();
|
|
606
625
|
const titleId = id || `callout-title-${generatedId}`;
|
|
607
626
|
const componentId = id || generatedId;
|
|
@@ -609,11 +628,9 @@ const Callout = ({ type = 'neutral', title = null, text = '', icon = null, class
|
|
|
609
628
|
[styles$l['zds-callout__container__with-title']]: title,
|
|
610
629
|
[styles$l['zds-callout__no-icon']]: !icon,
|
|
611
630
|
}, className);
|
|
612
|
-
return (jsxRuntime.jsx("div", { id: componentId, className: calloutClass, "aria-live": "polite", role: "alert", "aria-labelledby": title ? titleId : undefined, children: jsxRuntime.jsxs("div", { className: styles$l['zds-callout__content'], children: [icon && jsxRuntime.jsx("span", { className: styles$l['zds-callout__icon'], children: icon }), jsxRuntime.jsxs("div", { className: styles$l['zds-callout__subcontent'], children: [title && (jsxRuntime.jsx("span", { id: titleId, className: styles$l['zds-callout__title'], children: title })), text && jsxRuntime.jsx("span", { className: styles$l['zds-callout__text'], children: text })] })] }) }));
|
|
631
|
+
return (jsxRuntime.jsx("div", { id: componentId, className: calloutClass, "aria-live": "polite", role: "alert", "aria-labelledby": title ? titleId : undefined, ...rest, children: jsxRuntime.jsxs("div", { className: styles$l['zds-callout__content'], children: [icon && jsxRuntime.jsx("span", { className: styles$l['zds-callout__icon'], children: icon }), jsxRuntime.jsxs("div", { className: styles$l['zds-callout__subcontent'], children: [title && (jsxRuntime.jsx("span", { id: titleId, className: styles$l['zds-callout__title'], children: title })), text && jsxRuntime.jsx("span", { className: styles$l['zds-callout__text'], children: text })] })] }) }));
|
|
613
632
|
};
|
|
614
633
|
|
|
615
|
-
var styles$k = {"container":"Checkbox-module__container___pUY-s","root":"Checkbox-module__root___BS5dT","disabled":"Checkbox-module__disabled___WagIC","label":"Checkbox-module__label___JBaRm","indicator":"Checkbox-module__indicator___HXLHH","wrapperCheckbox":"Checkbox-module__wrapperCheckbox___m2qIW"};
|
|
616
|
-
|
|
617
634
|
const CheckSmall = ({ className = '', width = 12, height = 10, fill = 'white', ...restProps }) => {
|
|
618
635
|
return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": "true", ...restProps, children: jsxRuntime.jsx("path", { d: "M4 9.4L0 5.4L1.4 4L4 6.6L10.6 0L12 1.4L4 9.4Z", fill: fill }) }));
|
|
619
636
|
};
|
|
@@ -622,8 +639,10 @@ const CheckHalf = ({ className = '', width = 16, height = 16, fill = 'white', ..
|
|
|
622
639
|
return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": "true", ...restProps, children: jsxRuntime.jsx("g", { id: "Icons/check_indeterminate_small", children: jsxRuntime.jsx("path", { id: "icon", d: "M3 9V7H13V9H3Z", fill: fill }) }) }));
|
|
623
640
|
};
|
|
624
641
|
|
|
625
|
-
|
|
626
|
-
|
|
642
|
+
var styles$k = {"container":"Checkbox-module__container___pUY-s","root":"Checkbox-module__root___BS5dT","disabled":"Checkbox-module__disabled___WagIC","label":"Checkbox-module__label___JBaRm","indicator":"Checkbox-module__indicator___HXLHH","wrapperCheckbox":"Checkbox-module__wrapperCheckbox___m2qIW"};
|
|
643
|
+
|
|
644
|
+
const Checkbox = ({ id, label, onCheckedChange, checked, disabled, className, indeterminate = false, ...rest }) => {
|
|
645
|
+
const componentId = id || React__namespace.useId();
|
|
627
646
|
return (jsxRuntime.jsxs("div", { className: clsx(styles$k.container, className), children: [jsxRuntime.jsx("div", { className: clsx(styles$k.wrapperCheckbox, {
|
|
628
647
|
[styles$k.disabled]: disabled,
|
|
629
648
|
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsxRuntime.jsx(radixUi.Checkbox.Root, { className: styles$k.root, checked: checked, id: componentId, onCheckedChange: onCheckedChange, disabled: disabled, "data-disabled": disabled, "data-indeterminate": indeterminate, "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false', ...rest, children: jsxRuntime.jsx(radixUi.Checkbox.Indicator, { className: styles$k.indicator, children: indeterminate ? jsxRuntime.jsx(CheckHalf, {}) : jsxRuntime.jsx(CheckSmall, {}) }) }) }), jsxRuntime.jsx("label", { className: clsx(styles$k.label, { [styles$k.disabled]: disabled }), htmlFor: componentId, children: label })] }));
|
|
@@ -631,10 +650,7 @@ const Checkbox = ({ id, label = '', onCheckedChange, checked, disabled, classNam
|
|
|
631
650
|
|
|
632
651
|
var styles$j = {"zds-chips":"Chips-module__zds-chips___LEq0v","zds-chips__title":"Chips-module__zds-chips__title___JexH8","zds-chips__icon__left":"Chips-module__zds-chips__icon__left___frGxl","zds-chips__icon__right":"Chips-module__zds-chips__icon__right___3EmZr","has-left-icon":"Chips-module__has-left-icon___BNIkr","has-right-icon":"Chips-module__has-right-icon___jhoos","zds-chips--neutral":"Chips-module__zds-chips--neutral___FyRQq","zds-chips--brand":"Chips-module__zds-chips--brand___GbmJv","zds-chips--color":"Chips-module__zds-chips--color___JpMwI","zds-chips--alert":"Chips-module__zds-chips--alert___MHi5a","zds-chips--success":"Chips-module__zds-chips--success___jg4-F","zds-chips--disabled":"Chips-module__zds-chips--disabled___HkRDl"};
|
|
633
652
|
|
|
634
|
-
|
|
635
|
-
* Componente Chips para exibir tags/etiquetas com ícones opcionais
|
|
636
|
-
*/
|
|
637
|
-
const Chips = ({ title, leftIcon = null, rightIcon = null, type = 'neutral', disabled = false, className = '', }) => {
|
|
653
|
+
const Chips = ({ title, leftIcon, rightIcon, type = 'neutral', disabled = false, className, ...rest }) => {
|
|
638
654
|
if (!title || title.trim() === '') {
|
|
639
655
|
console.warn('Chips: title prop is required and cannot be empty');
|
|
640
656
|
return null;
|
|
@@ -644,7 +660,7 @@ const Chips = ({ title, leftIcon = null, rightIcon = null, type = 'neutral', dis
|
|
|
644
660
|
[styles$j['has-left-icon']]: leftIcon,
|
|
645
661
|
[styles$j['has-right-icon']]: rightIcon,
|
|
646
662
|
}, className);
|
|
647
|
-
return (jsxRuntime.jsxs("div", { className: chipsClass, "aria-label": `Chip: ${title}`, "aria-disabled": disabled, children: [leftIcon && (jsxRuntime.jsx("span", { className: styles$j['zds-chips__icon__left'], "aria-hidden": "true", children: leftIcon })), jsxRuntime.jsx("span", { className: styles$j['zds-chips__title'], children: title }), rightIcon && (jsxRuntime.jsx("span", { className: styles$j['zds-chips__icon__right'], children: rightIcon }))] }));
|
|
663
|
+
return (jsxRuntime.jsxs("div", { className: chipsClass, "aria-label": `Chip: ${title}`, "aria-disabled": disabled, ...rest, children: [leftIcon && (jsxRuntime.jsx("span", { className: styles$j['zds-chips__icon__left'], "aria-hidden": "true", children: leftIcon })), jsxRuntime.jsx("span", { className: styles$j['zds-chips__title'], children: title }), rightIcon && (jsxRuntime.jsx("span", { className: styles$j['zds-chips__icon__right'], children: rightIcon }))] }));
|
|
648
664
|
};
|
|
649
665
|
const MemoizedChips = React.memo(Chips);
|
|
650
666
|
MemoizedChips.displayName = 'Chips';
|
|
@@ -655,15 +671,15 @@ function Container({ children }) {
|
|
|
655
671
|
return (jsxRuntime.jsx("main", { className: `${styles$i['container']} mx-auto`, children: children }));
|
|
656
672
|
}
|
|
657
673
|
|
|
658
|
-
var styles$h = {"wrapperLabel":"index-module__wrapperLabel___XJzZO","requiredLabel":"index-module__requiredLabel___7oZkh","infoIcon":"index-module__infoIcon___lClx4","errorLabel":"index-module__errorLabel___qa6h6","disabledLabel":"index-module__disabledLabel___U9vL8"};
|
|
674
|
+
var styles$h = {"labelContainer":"index-module__labelContainer___WGyDF","wrapperLabel":"index-module__wrapperLabel___XJzZO","requiredLabel":"index-module__requiredLabel___7oZkh","infoIcon":"index-module__infoIcon___lClx4","errorLabel":"index-module__errorLabel___qa6h6","disabledLabel":"index-module__disabledLabel___U9vL8"};
|
|
659
675
|
|
|
660
676
|
var styles$g = {"tooltipContent":"Tooltip-module__tooltipContent___xycUg","triggerWrapper":"Tooltip-module__triggerWrapper___x83XR"};
|
|
661
677
|
|
|
662
|
-
const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, sideOffset = 10 }) => {
|
|
663
|
-
return (jsxRuntime.jsx(radixUi.Tooltip.Provider, { children: jsxRuntime.jsxs(radixUi.Tooltip.Root, { children: [jsxRuntime.jsx(radixUi.Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("span", { className: styles$g.triggerWrapper, children: children }) }), jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: jsxRuntime.jsx(radixUi.Tooltip.Content, { className: styles$g.tooltipContent, side: side, align: align, sideOffset: sideOffset, style: { maxWidth: maxWidth ? `${maxWidth}px` : 'auto' }, children: text }) })] }) }));
|
|
678
|
+
const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, sideOffset = 10, ...rest }) => {
|
|
679
|
+
return (jsxRuntime.jsx(radixUi.Tooltip.Provider, { children: jsxRuntime.jsxs(radixUi.Tooltip.Root, { children: [jsxRuntime.jsx(radixUi.Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("span", { className: styles$g.triggerWrapper, children: children }) }), jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: jsxRuntime.jsx(radixUi.Tooltip.Content, { className: styles$g.tooltipContent, side: side, align: align, sideOffset: sideOffset, style: { maxWidth: maxWidth ? `${maxWidth}px` : 'auto' }, ...rest, children: text }) })] }) }));
|
|
664
680
|
};
|
|
665
681
|
|
|
666
|
-
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip ? (jsxRuntime.
|
|
682
|
+
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip ? (jsxRuntime.jsxs("div", { className: styles$h.labelContainer, children: [jsxRuntime.jsxs(radixUi.Label.Root, { className: clsx(styles$h.wrapperLabel, error && styles$h.errorLabel, className), htmlFor: htmlFor, children: [children, required && jsxRuntime.jsx("span", { className: styles$h.requiredLabel, children: "*" })] }), jsxRuntime.jsx(Tooltip, { side: side, align: align, text: tooltipText || '', children: jsxRuntime.jsx(reactIcons.Info12Regular, { className: styles$h.infoIcon }) })] })) : (jsxRuntime.jsxs(radixUi.Label.Root, { className: clsx(styles$h.wrapperLabel, error && !disabled && styles$h.errorLabel, disabled && styles$h.disabledLabel, className), htmlFor: htmlFor, children: [children, required && jsxRuntime.jsx("span", { className: styles$h.requiredLabel, children: "*" })] })) }));
|
|
667
683
|
|
|
668
684
|
var styles$f = {"container":"TextField-module__container___WJHFR","inputWrapper":"TextField-module__inputWrapper___INjfd","inputContainer":"TextField-module__inputContainer___3EsFJ","icon":"TextField-module__icon___p1vwi","clearButton":"TextField-module__clearButton___kgOot","helperText":"TextField-module__helperText___d5QGC","error":"TextField-module__error___IGQzp","disabled":"TextField-module__disabled___roIKP"};
|
|
669
685
|
|
|
@@ -677,7 +693,7 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
|
677
693
|
return '';
|
|
678
694
|
};
|
|
679
695
|
|
|
680
|
-
const TextField$1 = React.forwardRef(({ className, value
|
|
696
|
+
const TextField$1 = React.forwardRef(({ className, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength = 30, required = false, helperText, tooltip = false, tooltipText, side = 'bottom', align = 'start', errorMessage, id, icon, onBlur, onFocus, name, ...inputProps }, ref) => {
|
|
681
697
|
const normalizeValue = (val) => {
|
|
682
698
|
return val === undefined || val === null ? '' : String(val);
|
|
683
699
|
};
|
|
@@ -738,8 +754,8 @@ const TextField$1 = React.forwardRef(({ className, value = '', label, placeholde
|
|
|
738
754
|
? `${componentId}-helper`
|
|
739
755
|
: undefined;
|
|
740
756
|
const containerClass = clsx(styles$f.container, {
|
|
741
|
-
[styles$f.error]: hasError,
|
|
742
757
|
[styles$f.disabled]: disabled,
|
|
758
|
+
[styles$f.error]: hasError && !disabled,
|
|
743
759
|
[className]: className,
|
|
744
760
|
});
|
|
745
761
|
return (jsxRuntime.jsxs("div", { className: containerClass, children: [label && (jsxRuntime.jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxRuntime.jsxs("div", { className: styles$f.inputWrapper, children: [jsxRuntime.jsxs("div", { className: styles$f.inputContainer, children: [jsxRuntime.jsx("input", { ...inputProps, ref: ref, 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 }), showCustomIcon && jsxRuntime.jsx("span", { className: styles$f.icon, children: icon }), showClearIcon && (jsxRuntime.jsx("button", { type: "button", className: styles$f.clearButton, onMouseDown: (e) => {
|
|
@@ -845,7 +861,7 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
845
861
|
|
|
846
862
|
var styles$e = {"zds-date-picker":"DatePicker-module__zds-date-picker___FjFTb","zds-date-picker__calendar-popup":"DatePicker-module__zds-date-picker__calendar-popup___hEkq7","zds-calendar--left":"DatePicker-module__zds-calendar--left___5z2UM","zds-calendar--right":"DatePicker-module__zds-calendar--right___NCJtd","zds-date-picker__icon":"DatePicker-module__zds-date-picker__icon___nYEnv","zds-date-picker__icon--disabled":"DatePicker-module__zds-date-picker__icon--disabled___p4Rr2"};
|
|
847
863
|
|
|
848
|
-
const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText
|
|
864
|
+
const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText, required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, className, 'data-testid': testId, }) => {
|
|
849
865
|
// ✅ IDs únicos para acessibilidade
|
|
850
866
|
const fieldId = React.useId();
|
|
851
867
|
const calendarId = `${fieldId}-calendar`;
|
|
@@ -1133,7 +1149,7 @@ var styles$c = {"zds-custom__drawer-shadow":"Drawer-module__zds-custom__drawer-s
|
|
|
1133
1149
|
* Segue padrões WCAG 2.1 AA para acessibilidade
|
|
1134
1150
|
*/
|
|
1135
1151
|
const Drawer = ({ children, customWidth = '400px', // ✅ Valor padrão útil
|
|
1136
|
-
onClose, title = 'Título', isOpen = false, onOpen, className
|
|
1152
|
+
onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = false, onOverlayClick, closeOnOverlayClick = true, closeOnEscape = true, }) => {
|
|
1137
1153
|
const internalClose = React.useCallback(() => {
|
|
1138
1154
|
if (disabled)
|
|
1139
1155
|
return;
|
|
@@ -1220,7 +1236,7 @@ onClose, title = 'Título', isOpen = false, onOpen, className = '', id, disabled
|
|
|
1220
1236
|
|
|
1221
1237
|
var styles$b = {"zds-search":"Search-module__zds-search___DRIVl","zds-search__leftIcon":"Search-module__zds-search__leftIcon___gBvTI","zds-search__clearIcon":"Search-module__zds-search__clearIcon___wsOBs"};
|
|
1222
1238
|
|
|
1223
|
-
const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, id
|
|
1239
|
+
const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, id, className, 'data-testid': testId, ...rest }, ref) => {
|
|
1224
1240
|
const [internalValue, setInternalValue] = React.useState('');
|
|
1225
1241
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
1226
1242
|
const currentValue = isControlled ? value : internalValue;
|
|
@@ -1265,11 +1281,8 @@ const Search = React.forwardRef(({ placeholder = 'Dica do que deve ser buscado',
|
|
|
1265
1281
|
return;
|
|
1266
1282
|
onKeyDown?.(e);
|
|
1267
1283
|
};
|
|
1268
|
-
const searchClass = clsx(styles$b['zds-search'], {
|
|
1269
|
-
|
|
1270
|
-
[className]: className,
|
|
1271
|
-
});
|
|
1272
|
-
return (jsxRuntime.jsxs("div", { className: searchClass, onClick: onClick, onMouseDown: onMouseDown, children: [jsxRuntime.jsx("span", { className: clsx(styles$b['zds-search__leftIcon'], { disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsxRuntime.jsx(reactIcons.Search16Regular, {}) }), jsxRuntime.jsx("input", { ref: ref, id: inputId, type: "text", placeholder: placeholder, "aria-label": placeholder, value: currentValue || '', onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, "data-testid": testId }), currentValue && currentValue.length > 0 && (jsxRuntime.jsx("span", { className: styles$b['zds-search__clearIcon'], "aria-hidden": "true", onClick: clearInputSearch, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}) }))] }));
|
|
1284
|
+
const searchClass = clsx(styles$b['zds-search'], { disabled }, className);
|
|
1285
|
+
return (jsxRuntime.jsxs("div", { className: searchClass, onClick: onClick, onMouseDown: onMouseDown, children: [jsxRuntime.jsx("span", { className: clsx(styles$b['zds-search__leftIcon'], { disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsxRuntime.jsx(reactIcons.Search16Regular, {}) }), jsxRuntime.jsx("input", { ref: ref, id: inputId, type: "text", placeholder: placeholder, "aria-label": placeholder, value: currentValue || '', onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, "data-testid": testId, ...rest }), currentValue && currentValue.length > 0 && (jsxRuntime.jsx("span", { className: styles$b['zds-search__clearIcon'], "aria-hidden": "true", onClick: clearInputSearch, children: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}) }))] }));
|
|
1273
1286
|
});
|
|
1274
1287
|
Search.displayName = 'ZdsSearch';
|
|
1275
1288
|
|
|
@@ -1405,7 +1418,7 @@ function useInfiniteScroll({ status, page, lastPage, onLoadMore, threshold = 0.1
|
|
|
1405
1418
|
};
|
|
1406
1419
|
}
|
|
1407
1420
|
|
|
1408
|
-
const Dropdown = ({ className, items
|
|
1421
|
+
const Dropdown = ({ className, items, id, type = 'text', applySearch = false, placeholder, onSelectionChange, showSubText = false, defaultSelectedIds, initialItemsSelected, maxWidth, minWidth, width, maxHeight, filter = false, position, infiniteScroll, }) => {
|
|
1409
1422
|
const [selectedItems, setSelectedItems] = React.useState(() => {
|
|
1410
1423
|
if (initialItemsSelected && Object.keys(initialItemsSelected).length > 0) {
|
|
1411
1424
|
return initialItemsSelected;
|
|
@@ -1693,8 +1706,7 @@ MemoizedDropdown.displayName = 'Dropdown';
|
|
|
1693
1706
|
|
|
1694
1707
|
var styles$9 = {"zds-filter__container":"Filter-module__zds-filter__container___0E-nC","zds-filter__button":"Filter-module__zds-filter__button___gT9yM","zds-filter__icon":"Filter-module__zds-filter__icon___ypiCu","zds-filter__text":"Filter-module__zds-filter__text___1iywL","zds-filter__arrow":"Filter-module__zds-filter__arrow___xflU2","zds-filter__arrow--up":"Filter-module__zds-filter__arrow--up___R0HR-","zds-filter__arrow--down":"Filter-module__zds-filter__arrow--down___4YMmg","zds-filter__button--open":"Filter-module__zds-filter__button--open___OA6EF","zds-filter__dropdown":"Filter-module__zds-filter__dropdown___-67MJ","zds-filter__dropdown--left":"Filter-module__zds-filter__dropdown--left___GgonW","zds-filter__dropdown--right":"Filter-module__zds-filter__dropdown--right___7GS9L","zds-filter-button__content":"Filter-module__zds-filter-button__content___eNIIz","zds-filter-button__arrow":"Filter-module__zds-filter-button__arrow___ZhymS","zds-filter-button__icon":"Filter-module__zds-filter-button__icon___-42Ey"};
|
|
1695
1708
|
|
|
1696
|
-
|
|
1697
|
-
const Filter = ({ items = [], type = 'checkbox', selectedIds = [], onApplyFilter, placeholder = 'Selecionar...', enableSearch = false, buttonText = 'Filter', icon, variant = 'outlined', onOpen, onClose, position = 'left', disabled = false, className = '', selectedDate, onDateSelect, onClearDate, minDate, maxDate, locale = 'pt-br', }) => {
|
|
1709
|
+
const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placeholder = 'Selecionar...', enableSearch = false, buttonText = 'Filter', icon, variant = 'outlined', onOpen, onClose, position = 'left', disabled = false, className, selectedDate, onDateSelect, onClearDate, minDate, maxDate, locale = 'pt-br', ...rest }) => {
|
|
1698
1710
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
1699
1711
|
const [currentCalendarDate, setCurrentCalendarDate] = React.useState(() => selectedDate || new Date());
|
|
1700
1712
|
const filterRef = React.useRef(null);
|
|
@@ -1780,36 +1792,27 @@ const Filter = ({ items = [], type = 'checkbox', selectedIds = [], onApplyFilter
|
|
|
1780
1792
|
const dropdownClass = clsx(styles$9['zds-filter__dropdown'], {
|
|
1781
1793
|
[styles$9[`zds-filter__dropdown--${position}`]]: position,
|
|
1782
1794
|
});
|
|
1783
|
-
return (jsxRuntime.jsxs("div", { ref: filterRef, className: filterClass, children: [jsxRuntime.jsx(Button, { variant: variant, onClick: handleToggle, disabled: disabled, icon: type === 'calendar' ? jsxRuntime.jsx(reactIcons.Calendar16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxRuntime.jsxs("div", { className: styles$9['zds-filter-button__content'], children: [icon && jsxRuntime.jsx("span", { className: styles$9['zds-filter-button__icon'], children: icon }), jsxRuntime.jsx("span", { className: styles$9['zds-filter-button__text'], children: buttonDisplayText }), jsxRuntime.jsx("span", { className: `${styles$9['zds-filter-button__arrow']} ${isOpen ? styles$9['zds-filter-button__arrow--open'] : ''}`, children: getBadgeValue() && (jsxRuntime.jsx(Badge, { badgeValue: `+${getBadgeValue()}`, type: "status" })) })] }) }), isOpen && (jsxRuntime.jsx("div", { className: dropdownClass, children: type === 'calendar' ? (jsxRuntime.jsx(MemoizedCalendar, { currentDate: currentCalendarDate, selectedDate: selectedDate, onDaySelect: handleDateSelection, onDateChange: handleCalendarNavigation, minDate: minDate, maxDate: maxDate, locale: locale, onClear: handleClear, id: `filter-calendar-${filterRef.current?.id || ''}`, "aria-label": "Selecionar data para filtro" })) : (jsxRuntime.jsx(MemoizedDropdown, { items: items, type: type, defaultSelectedIds: selectedIds, placeholder: placeholder, applySearch: enableSearch, filter: true, onSelectionChange: handleApplyFilter })) }))] }));
|
|
1795
|
+
return (jsxRuntime.jsxs("div", { ref: filterRef, className: filterClass, ...rest, children: [jsxRuntime.jsx(Button, { variant: variant, onClick: handleToggle, disabled: disabled, icon: type === 'calendar' ? jsxRuntime.jsx(reactIcons.Calendar16Regular, {}) : jsxRuntime.jsx(reactIcons.ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxRuntime.jsxs("div", { className: styles$9['zds-filter-button__content'], children: [icon && jsxRuntime.jsx("span", { className: styles$9['zds-filter-button__icon'], children: icon }), jsxRuntime.jsx("span", { className: styles$9['zds-filter-button__text'], children: buttonDisplayText }), jsxRuntime.jsx("span", { className: `${styles$9['zds-filter-button__arrow']} ${isOpen ? styles$9['zds-filter-button__arrow--open'] : ''}`, children: getBadgeValue() && (jsxRuntime.jsx(Badge, { badgeValue: `+${getBadgeValue()}`, type: "status" })) })] }) }), isOpen && (jsxRuntime.jsx("div", { className: dropdownClass, children: type === 'calendar' ? (jsxRuntime.jsx(MemoizedCalendar, { currentDate: currentCalendarDate, selectedDate: selectedDate, onDaySelect: handleDateSelection, onDateChange: handleCalendarNavigation, minDate: minDate, maxDate: maxDate, locale: locale, onClear: handleClear, id: `filter-calendar-${filterRef.current?.id || ''}`, "aria-label": "Selecionar data para filtro" })) : (jsxRuntime.jsx(MemoizedDropdown, { items: items || [], type: type, defaultSelectedIds: selectedIds, placeholder: placeholder, applySearch: enableSearch, filter: true, onSelectionChange: handleApplyFilter })) }))] }));
|
|
1784
1796
|
};
|
|
1785
1797
|
|
|
1786
|
-
var styles$8 = {"
|
|
1798
|
+
var styles$8 = {"zds-list-item__container":"ListItem-module__zds-list-item__container___mEIUK","zds-list-item--checkbox":"ListItem-module__zds-list-item--checkbox___wfi9-","zds-list-item--icon":"ListItem-module__zds-list-item--icon___h3Ijt","zds-list-item--radio":"ListItem-module__zds-list-item--radio___2l7mK","zds-list-item--text":"ListItem-module__zds-list-item--text___F0PDx","zds-list-item--hovered":"ListItem-module__zds-list-item--hovered___XrDWn","zds-list-item--disabled":"ListItem-module__zds-list-item--disabled___p1xZF","zds-list-item__wrapper-text":"ListItem-module__zds-list-item__wrapper-text___5-TX2","zds-list-item__wrapper-icon":"ListItem-module__zds-list-item__wrapper-icon___S6Fr1","zds-list-item__title":"ListItem-module__zds-list-item__title___AV7nz","zds-list-item__subtext":"ListItem-module__zds-list-item__subtext___nfXky","zds-list-item__text":"ListItem-module__zds-list-item__text___3y0sB"};
|
|
1799
|
+
|
|
1800
|
+
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"};
|
|
1787
1801
|
|
|
1788
1802
|
const Radio = ({ items, onValueChange, defaultValue, name, id, ariaLabel, orientation = 'vertical', ...rest }) => {
|
|
1789
1803
|
const componentId = id || React.useId();
|
|
1790
|
-
return (jsxRuntime.jsx(radixUi.RadioGroup.Root, { id: componentId, className: styles$
|
|
1804
|
+
return (jsxRuntime.jsx(radixUi.RadioGroup.Root, { id: componentId, className: styles$7.root, defaultValue: defaultValue, onValueChange: onValueChange, name: name, "aria-label": ariaLabel, "data-orientation": orientation, orientation: orientation, ...rest, children: items.map(({ id, value, disabled, label }) => {
|
|
1791
1805
|
const itemKey = id ?? value;
|
|
1792
1806
|
const uniqueId = `${componentId}-item-${value}`;
|
|
1793
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$
|
|
1807
|
+
return (jsxRuntime.jsx("div", { className: clsx(styles$7.wrapper, { [styles$7.disabled]: disabled }), children: jsxRuntime.jsxs("label", { className: styles$7.labelWrapper, htmlFor: uniqueId, children: [jsxRuntime.jsx("div", { className: styles$7.itemWrapper, children: jsxRuntime.jsx(radixUi.RadioGroup.Item, { disabled: disabled, className: styles$7.item, value: value, id: uniqueId, "data-disabled": disabled, children: jsxRuntime.jsx(radixUi.RadioGroup.Indicator, { className: styles$7.indicator }) }) }), jsxRuntime.jsx("span", { className: styles$7.labelText, children: label })] }) }, itemKey));
|
|
1794
1808
|
}) }));
|
|
1795
1809
|
};
|
|
1796
1810
|
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
/**
|
|
1800
|
-
* Componente ListItem do Zanthus Design System
|
|
1801
|
-
* Implementa item de lista unificado com variações text, checkbox, radio e icon
|
|
1802
|
-
* Segue padrões WCAG 2.1 AA para acessibilidade
|
|
1803
|
-
*/
|
|
1804
|
-
const ListItem = ({ id, className, variant = 'text', text = '', name = '', subText, disabled = false, checked = false, selected = false, onClick, onChange, icon, value = '', showSubText = false, hovered = false }) => {
|
|
1811
|
+
const ListItem = ({ id, className, variant = 'text', text, name, subText, disabled = false, checked = false, selected = false, onClick, onChange, icon, value, showSubText = false, hovered = false, ...rest }) => {
|
|
1805
1812
|
const componentId = React.useId();
|
|
1806
1813
|
const itemId = id || componentId;
|
|
1807
1814
|
const [internalChecked, setInternalChecked] = React.useState(checked);
|
|
1808
1815
|
const [internalSelected, setInternalSelected] = React.useState(selected);
|
|
1809
|
-
/**
|
|
1810
|
-
* Handler para clique em checkbox.
|
|
1811
|
-
* Alterna o estado e dispara o callback onChange.
|
|
1812
|
-
*/
|
|
1813
1816
|
const handleCheckboxClick = React.useCallback((e) => {
|
|
1814
1817
|
if (disabled)
|
|
1815
1818
|
return;
|
|
@@ -1818,10 +1821,6 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1818
1821
|
onChange?.(newChecked);
|
|
1819
1822
|
onClick?.(e);
|
|
1820
1823
|
}, [disabled, internalChecked, onChange, onClick]);
|
|
1821
|
-
/**
|
|
1822
|
-
* Handler para clique em radio.
|
|
1823
|
-
* Marca como selecionado se ainda não estiver e dispara o callback onChange.
|
|
1824
|
-
*/
|
|
1825
1824
|
const handleRadioClick = React.useCallback((e) => {
|
|
1826
1825
|
if (disabled)
|
|
1827
1826
|
return;
|
|
@@ -1831,10 +1830,6 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1831
1830
|
}
|
|
1832
1831
|
onClick?.(e);
|
|
1833
1832
|
}, [disabled, internalChecked, onChange, onClick]);
|
|
1834
|
-
/**
|
|
1835
|
-
* Handler para clique em variantes text e icon.
|
|
1836
|
-
* Alterna o estado de seleção interno.
|
|
1837
|
-
*/
|
|
1838
1833
|
const handleTextOrIconClick = React.useCallback((e) => {
|
|
1839
1834
|
if (disabled)
|
|
1840
1835
|
return;
|
|
@@ -1842,10 +1837,6 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1842
1837
|
setInternalSelected(newSelected);
|
|
1843
1838
|
onClick?.(e);
|
|
1844
1839
|
}, [disabled, internalSelected, onClick]);
|
|
1845
|
-
/**
|
|
1846
|
-
* Handler para eventos de teclado (Enter ou Espaço).
|
|
1847
|
-
* Direciona para o handler correto conforme o variant.
|
|
1848
|
-
*/
|
|
1849
1840
|
const handleKeyDown = React.useCallback((e) => {
|
|
1850
1841
|
if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
|
|
1851
1842
|
e.preventDefault();
|
|
@@ -1864,39 +1855,35 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1864
1855
|
}
|
|
1865
1856
|
}
|
|
1866
1857
|
}, [disabled, variant, handleCheckboxClick, handleRadioClick, handleTextOrIconClick]);
|
|
1867
|
-
// ✅ Sincronização com props externas
|
|
1868
1858
|
React.useEffect(() => {
|
|
1869
1859
|
setInternalChecked(checked);
|
|
1870
1860
|
}, [checked]);
|
|
1871
1861
|
React.useEffect(() => {
|
|
1872
1862
|
setInternalSelected(selected);
|
|
1873
1863
|
}, [selected]);
|
|
1874
|
-
/**
|
|
1875
|
-
* Renderiza o conteúdo do item conforme o variant.
|
|
1876
|
-
*/
|
|
1877
1864
|
const renderVariantContent = React.useCallback(() => {
|
|
1878
1865
|
const validVariants = ['text', 'checkbox', 'radio', 'icon'];
|
|
1879
1866
|
const currentVariant = validVariants.includes(variant) ? variant : 'text';
|
|
1880
1867
|
switch (currentVariant) {
|
|
1881
1868
|
case 'checkbox':
|
|
1882
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Checkbox, { checked: internalChecked, disabled: disabled, onCheckedChange: () => handleCheckboxClick({}) }), jsxRuntime.jsxs("div", { className: styles$
|
|
1869
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Checkbox, { checked: internalChecked, disabled: disabled, onCheckedChange: () => handleCheckboxClick({}) }), jsxRuntime.jsxs("div", { className: styles$8['zds-list-item__wrapper-text'], children: [jsxRuntime.jsx("span", { id: `${itemId}-text`, className: styles$8['zds-list-item__text'], onClick: handleCheckboxClick, children: text }), showSubText && subText && (jsxRuntime.jsx("span", { id: `${itemId}-subtext`, className: styles$8['zds-list-item__subtext'], onClick: handleCheckboxClick, children: subText }))] })] }));
|
|
1883
1870
|
case 'radio':
|
|
1884
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$
|
|
1885
|
-
value: value,
|
|
1871
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$8['zds-list-item__wrapper-radio'], children: jsxRuntime.jsx("span", { className: styles$8['zds-list-item__radio'], "aria-hidden": "true", children: jsxRuntime.jsx(Radio, { name: name, onValueChange: () => handleRadioClick({}), items: [{
|
|
1872
|
+
value: value || '',
|
|
1886
1873
|
label: '',
|
|
1887
1874
|
disabled: disabled
|
|
1888
|
-
}], "aria-labelledby": `${itemId}-text` }) }) }), jsxRuntime.jsxs("div", { className: styles$
|
|
1875
|
+
}], "aria-labelledby": `${itemId}-text` }) }) }), jsxRuntime.jsxs("div", { className: styles$8['zds-list-item__wrapper-text'], children: [jsxRuntime.jsx("span", { id: `${itemId}-text`, className: styles$8['zds-list-item__title'], onClick: handleRadioClick, children: text }), showSubText && subText && (jsxRuntime.jsx("span", { id: `${itemId}-subtext`, className: styles$8['zds-list-item__subtext'], children: subText }))] })] }));
|
|
1889
1876
|
case 'icon':
|
|
1890
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$
|
|
1877
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$8['zds-list-item__wrapper-icon'], children: icon }), jsxRuntime.jsxs("div", { className: styles$8['zds-list-item__wrapper-text'], children: [jsxRuntime.jsx("span", { id: `${itemId}-text`, className: styles$8['zds-list-item__title'], onClick: handleTextOrIconClick, children: text }), showSubText && subText && (jsxRuntime.jsx("span", { id: `${itemId}-subtext`, className: styles$8['zds-list-item__subtext'], children: subText }))] })] }));
|
|
1891
1878
|
case 'text':
|
|
1892
1879
|
default:
|
|
1893
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
1880
|
+
return (jsxRuntime.jsxs("div", { className: styles$8['zds-list-item__wrapper-text'], children: [jsxRuntime.jsx("span", { id: `${itemId}-text`, className: styles$8['zds-list-item__title'], onClick: handleTextOrIconClick, children: text }), showSubText && subText && (jsxRuntime.jsx("span", { id: `${itemId}-subtext`, className: styles$8['zds-list-item__subtext'], children: subText }))] }));
|
|
1894
1881
|
}
|
|
1895
1882
|
}, [variant, itemId, internalChecked, disabled, handleCheckboxClick, handleRadioClick, handleTextOrIconClick, value, text, showSubText, subText, icon, name]);
|
|
1896
|
-
const listItemClass = clsx(styles$
|
|
1897
|
-
[styles$
|
|
1898
|
-
[styles$
|
|
1899
|
-
[styles$
|
|
1883
|
+
const listItemClass = clsx(styles$8['zds-list-item__container'], {
|
|
1884
|
+
[styles$8[`zds-list-item--${variant}`]]: variant,
|
|
1885
|
+
[styles$8['zds-list-item--disabled']]: disabled,
|
|
1886
|
+
[styles$8['zds-list-item--hovered']]: hovered,
|
|
1900
1887
|
[className || '']: className
|
|
1901
1888
|
});
|
|
1902
1889
|
const getAriaChecked = React.useCallback(() => {
|
|
@@ -1905,11 +1892,64 @@ const ListItem = ({ id, className, variant = 'text', text = '', name = '', subTe
|
|
|
1905
1892
|
}
|
|
1906
1893
|
return undefined;
|
|
1907
1894
|
}, [variant, internalChecked]);
|
|
1908
|
-
return (jsxRuntime.jsx("li", { className: listItemClass, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, "aria-selected": variant === 'text' || variant === 'icon' ? internalSelected : undefined, "aria-disabled": disabled, "aria-checked": getAriaChecked(), "aria-labelledby": `${itemId}-text`, "aria-describedby": showSubText && subText ? `${itemId}-subtext` : undefined, "data-testid": "list-item", children: renderVariantContent() }));
|
|
1895
|
+
return (jsxRuntime.jsx("li", { className: listItemClass, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, "aria-selected": variant === 'text' || variant === 'icon' ? internalSelected : undefined, "aria-disabled": disabled, "aria-checked": getAriaChecked(), "aria-labelledby": `${itemId}-text`, "aria-describedby": showSubText && subText ? `${itemId}-subtext` : undefined, "data-testid": "list-item", ...rest, children: renderVariantContent() }));
|
|
1909
1896
|
};
|
|
1910
1897
|
|
|
1911
1898
|
var styles$6 = {"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","itemSelected":"Menu-module__itemSelected___O5Ebi","itemText":"Menu-module__itemText___2fd2B","wrapperText":"Menu-module__wrapperText___PomUe","chevronIcon":"Menu-module__chevronIcon___Gda-U","searchWrapper":"Menu-module__searchWrapper___e0knQ","emptyState":"Menu-module__emptyState___3wh-S","loadingMore":"Menu-module__loadingMore___fUCvH"};
|
|
1912
1899
|
|
|
1900
|
+
const MenuItem = React.memo(({ item, isSelected, onSelect }) => {
|
|
1901
|
+
const handleSelect = () => {
|
|
1902
|
+
onSelect(item);
|
|
1903
|
+
};
|
|
1904
|
+
return (jsxRuntime.jsxs(radixUi.DropdownMenu.Item, { className: clsx(styles$6.item, { [styles$6.itemSelected]: isSelected }), onSelect: handleSelect, disabled: item.disabled, children: [item.icon && jsxRuntime.jsx("span", { className: styles$6.itemIcon, children: item.icon }), jsxRuntime.jsxs("div", { className: styles$6.wrapperText, children: [jsxRuntime.jsx("span", { className: styles$6.itemText, children: item.text }), item.subText && (jsxRuntime.jsx("span", { className: styles$6.itemSubText, children: item.subText }))] })] }));
|
|
1905
|
+
});
|
|
1906
|
+
MenuItem.displayName = 'MenuItem';
|
|
1907
|
+
|
|
1908
|
+
function useMenuLogic({ selectedItems = [], onItemSelect, onOpenChange, }) {
|
|
1909
|
+
const isControlledRef = React.useRef(selectedItems !== undefined);
|
|
1910
|
+
const prevSelectedItemsRef = React.useRef(selectedItems);
|
|
1911
|
+
const [open, setOpenState] = React.useState(false);
|
|
1912
|
+
const [internalSelectedItems, setInternalSelectedItems] = React.useState(selectedItems || []);
|
|
1913
|
+
const getItemKey = React.useCallback((item) => {
|
|
1914
|
+
return item.value ?? item.id ?? item.text ?? '';
|
|
1915
|
+
}, []);
|
|
1916
|
+
React.useEffect(() => {
|
|
1917
|
+
if (!isControlledRef.current || !selectedItems)
|
|
1918
|
+
return;
|
|
1919
|
+
const prevKeys = prevSelectedItemsRef.current.map(getItemKey).sort().join(',');
|
|
1920
|
+
const currentKeys = selectedItems.map(getItemKey).sort().join(',');
|
|
1921
|
+
if (prevKeys !== currentKeys) {
|
|
1922
|
+
setInternalSelectedItems(selectedItems);
|
|
1923
|
+
prevSelectedItemsRef.current = selectedItems;
|
|
1924
|
+
}
|
|
1925
|
+
}, [selectedItems, getItemKey]);
|
|
1926
|
+
const setOpen = React.useCallback((newOpen) => {
|
|
1927
|
+
setOpenState(newOpen);
|
|
1928
|
+
onOpenChange?.(newOpen);
|
|
1929
|
+
}, [onOpenChange]);
|
|
1930
|
+
const isItemSelected = React.useCallback((item) => {
|
|
1931
|
+
const itemKey = getItemKey(item);
|
|
1932
|
+
if (!itemKey)
|
|
1933
|
+
return false;
|
|
1934
|
+
return internalSelectedItems.some((selected) => getItemKey(selected) === itemKey);
|
|
1935
|
+
}, [internalSelectedItems, getItemKey]);
|
|
1936
|
+
const handleItemSelect = React.useCallback((item) => {
|
|
1937
|
+
const newSelection = [item];
|
|
1938
|
+
setInternalSelectedItems(newSelection);
|
|
1939
|
+
if (onItemSelect) {
|
|
1940
|
+
onItemSelect(item);
|
|
1941
|
+
}
|
|
1942
|
+
setOpen(false);
|
|
1943
|
+
}, [onItemSelect, setOpen]);
|
|
1944
|
+
return {
|
|
1945
|
+
open,
|
|
1946
|
+
internalSelectedItems,
|
|
1947
|
+
setOpen,
|
|
1948
|
+
handleItemSelect,
|
|
1949
|
+
isItemSelected,
|
|
1950
|
+
};
|
|
1951
|
+
}
|
|
1952
|
+
|
|
1913
1953
|
const normalizeText = (text) => {
|
|
1914
1954
|
if (typeof text === 'string')
|
|
1915
1955
|
return text.toLowerCase();
|
|
@@ -1982,60 +2022,7 @@ const useSearchLogic = ({ items, searchValue, searchTerm, enableApiSearch, onApi
|
|
|
1982
2022
|
return { filteredItems: filteredItems() };
|
|
1983
2023
|
};
|
|
1984
2024
|
|
|
1985
|
-
|
|
1986
|
-
const isControlledRef = React.useRef(selectedItems !== undefined);
|
|
1987
|
-
const prevSelectedItemsRef = React.useRef(selectedItems);
|
|
1988
|
-
const [open, setOpenState] = React.useState(false);
|
|
1989
|
-
const [internalSelectedItems, setInternalSelectedItems] = React.useState(selectedItems || []);
|
|
1990
|
-
const getItemKey = React.useCallback((item) => {
|
|
1991
|
-
return item.value ?? item.id ?? item.text ?? '';
|
|
1992
|
-
}, []);
|
|
1993
|
-
React.useEffect(() => {
|
|
1994
|
-
if (!isControlledRef.current || !selectedItems)
|
|
1995
|
-
return;
|
|
1996
|
-
const prevKeys = prevSelectedItemsRef.current.map(getItemKey).sort().join(',');
|
|
1997
|
-
const currentKeys = selectedItems.map(getItemKey).sort().join(',');
|
|
1998
|
-
if (prevKeys !== currentKeys) {
|
|
1999
|
-
setInternalSelectedItems(selectedItems);
|
|
2000
|
-
prevSelectedItemsRef.current = selectedItems;
|
|
2001
|
-
}
|
|
2002
|
-
}, [selectedItems, getItemKey]);
|
|
2003
|
-
const setOpen = React.useCallback((newOpen) => {
|
|
2004
|
-
setOpenState(newOpen);
|
|
2005
|
-
onOpenChange?.(newOpen);
|
|
2006
|
-
}, [onOpenChange]);
|
|
2007
|
-
const isItemSelected = React.useCallback((item) => {
|
|
2008
|
-
const itemKey = getItemKey(item);
|
|
2009
|
-
if (!itemKey)
|
|
2010
|
-
return false;
|
|
2011
|
-
return internalSelectedItems.some((selected) => getItemKey(selected) === itemKey);
|
|
2012
|
-
}, [internalSelectedItems, getItemKey]);
|
|
2013
|
-
const handleItemSelect = React.useCallback((item) => {
|
|
2014
|
-
const newSelection = [item];
|
|
2015
|
-
setInternalSelectedItems(newSelection);
|
|
2016
|
-
if (onItemSelect) {
|
|
2017
|
-
onItemSelect(item);
|
|
2018
|
-
}
|
|
2019
|
-
setOpen(false);
|
|
2020
|
-
}, [onItemSelect, setOpen]);
|
|
2021
|
-
return {
|
|
2022
|
-
open,
|
|
2023
|
-
internalSelectedItems,
|
|
2024
|
-
setOpen,
|
|
2025
|
-
handleItemSelect,
|
|
2026
|
-
isItemSelected,
|
|
2027
|
-
};
|
|
2028
|
-
}
|
|
2029
|
-
|
|
2030
|
-
const MenuItem = React.memo(({ item, isSelected, onSelect }) => {
|
|
2031
|
-
const handleSelect = () => {
|
|
2032
|
-
onSelect(item);
|
|
2033
|
-
};
|
|
2034
|
-
return (jsxRuntime.jsxs(radixUi.DropdownMenu.Item, { className: clsx(styles$6.item, { [styles$6.itemSelected]: isSelected }), onSelect: handleSelect, disabled: item.disabled, children: [item.icon && jsxRuntime.jsx("span", { className: styles$6.itemIcon, children: item.icon }), jsxRuntime.jsxs("div", { className: styles$6.wrapperText, children: [jsxRuntime.jsx("span", { className: styles$6.itemText, children: item.text }), item.subText && (jsxRuntime.jsx("span", { className: styles$6.itemSubText, children: item.subText }))] })] }));
|
|
2035
|
-
});
|
|
2036
|
-
MenuItem.displayName = 'MenuItem';
|
|
2037
|
-
|
|
2038
|
-
const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onScrollEnd, isLoadingMore, onApiSearch, enableApiSearch, selectedItems = [], onOpenChange, align = 'start', className, maxHeight = 400, ...rest }) => {
|
|
2025
|
+
const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onScrollEnd, isLoadingMore, onApiSearch, enableApiSearch, selectedItems, onOpenChange, align = 'start', className, maxHeight = 400, ...rest }) => {
|
|
2039
2026
|
const itemsWrapperRef = React.useRef(null);
|
|
2040
2027
|
const hasReachedEndRef = React.useRef(false);
|
|
2041
2028
|
const observerRef = React.useRef(null);
|
|
@@ -2155,14 +2142,8 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
2155
2142
|
|
|
2156
2143
|
var styles$5 = {"zds-quantity":"Quantity-module__zds-quantity___AymLj","zds-quantity__input":"Quantity-module__zds-quantity__input___Wlhmo"};
|
|
2157
2144
|
|
|
2158
|
-
|
|
2159
|
-
* Componente Quantity - permite incrementar/decrementar valores numéricos
|
|
2160
|
-
* Suporta modo controlado e não controlado, valores decimais e inteiros
|
|
2161
|
-
*/
|
|
2162
|
-
const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled = false, decimal = false, decimalPlaces = 2, size = 'lg', id, step, className }) => {
|
|
2163
|
-
// Determina se o componente é controlado externamente
|
|
2145
|
+
const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled = false, decimal = false, decimalPlaces = 2, size = 'lg', id, step, className, ...rest }) => {
|
|
2164
2146
|
const isControlled = controlledValue !== undefined;
|
|
2165
|
-
// Estados internos para valor e input
|
|
2166
2147
|
const [value, setValue] = React.useState(isControlled ? controlledValue : defaultValue);
|
|
2167
2148
|
const [inputValue, setInputValue] = React.useState(decimal
|
|
2168
2149
|
? (isControlled ? controlledValue : defaultValue).toFixed(decimalPlaces)
|
|
@@ -2232,11 +2213,8 @@ const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled
|
|
|
2232
2213
|
if (disabled)
|
|
2233
2214
|
return;
|
|
2234
2215
|
const rawValue = event.target.value;
|
|
2235
|
-
// ✅ APLICAR: Filtro em tempo real
|
|
2236
2216
|
const filteredValue = filterInput(rawValue);
|
|
2237
|
-
// ✅ SEMPRE: Atualizar input com valor filtrado
|
|
2238
2217
|
setInputValue(filteredValue);
|
|
2239
|
-
// ✅ PROCESSAR: Apenas valores válidos
|
|
2240
2218
|
if (filteredValue === '' || filteredValue === '.') {
|
|
2241
2219
|
if (!isControlled) {
|
|
2242
2220
|
setValue(0);
|
|
@@ -2245,9 +2223,8 @@ const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled
|
|
|
2245
2223
|
return;
|
|
2246
2224
|
}
|
|
2247
2225
|
if (decimal) {
|
|
2248
|
-
// Estados intermediários permitidos
|
|
2249
2226
|
if (filteredValue.endsWith('.')) {
|
|
2250
|
-
return;
|
|
2227
|
+
return;
|
|
2251
2228
|
}
|
|
2252
2229
|
const parsedValue = parseFloat(filteredValue);
|
|
2253
2230
|
if (!isNaN(parsedValue)) {
|
|
@@ -2372,7 +2349,7 @@ const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled
|
|
|
2372
2349
|
}, [disabled, increment, decrement, decimal, decimalPlaces, isControlled, onChange, computedValue]);
|
|
2373
2350
|
const uniqueId = React.useId();
|
|
2374
2351
|
const inputId = id || uniqueId;
|
|
2375
|
-
return (jsxRuntime.jsxs("div", { className: clsx(styles$5['zds-quantity'], { disabled }, className), children: [jsxRuntime.jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Subtract16Regular, {}), onClick: decrement, disabled: disabled || isMinValue, "aria-label": 'Diminuir quantidade' }), jsxRuntime.jsx("input", { ref: inputRef, className: clsx(styles$5['zds-quantity__input'], { disabled }), type: 'text', value: inputValue, onChange: handleInputChange, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: inputId, min: '0', step: stepValue, "aria-label": 'Quantidade', role: 'spinbutton', "aria-valuenow": computedValue, "aria-valuemin": 0, "aria-valuemax": decimal ? undefined : 9999, disabled: disabled, inputMode: decimal ? 'decimal' : 'numeric' }), jsxRuntime.jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, onClick: increment, disabled: disabled, "aria-label": 'Aumentar quantidade', icon: jsxRuntime.jsx(reactIcons.Add16Regular, {}) })] }));
|
|
2352
|
+
return (jsxRuntime.jsxs("div", { className: clsx(styles$5['zds-quantity'], { disabled }, className), ...rest, children: [jsxRuntime.jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Subtract16Regular, {}), onClick: decrement, disabled: disabled || isMinValue, "aria-label": 'Diminuir quantidade' }), jsxRuntime.jsx("input", { ref: inputRef, className: clsx(styles$5['zds-quantity__input'], { disabled }), type: 'text', value: inputValue, onChange: handleInputChange, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: inputId, min: '0', step: stepValue, "aria-label": 'Quantidade', role: 'spinbutton', "aria-valuenow": computedValue, "aria-valuemin": 0, "aria-valuemax": decimal ? undefined : 9999, disabled: disabled, inputMode: decimal ? 'decimal' : 'numeric' }), jsxRuntime.jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, onClick: increment, disabled: disabled, "aria-label": 'Aumentar quantidade', icon: jsxRuntime.jsx(reactIcons.Add16Regular, {}) })] }));
|
|
2376
2353
|
};
|
|
2377
2354
|
const memorizedQuantity = React.memo(Quantity);
|
|
2378
2355
|
memorizedQuantity.displayName = 'Quantity';
|
|
@@ -2791,8 +2768,6 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
2791
2768
|
};
|
|
2792
2769
|
Select.displayName = 'Select';
|
|
2793
2770
|
|
|
2794
|
-
var styles$3 = {"zds-table__container":"Table-module__zds-table__container___9xeVY","zds-table-header":"Table-module__zds-table-header___uPRjd","zds-table__scroll-wrapper":"Table-module__zds-table__scroll-wrapper___xQZPq","zds-table":"Table-module__zds-table___bPvaS","zds-table__head":"Table-module__zds-table__head___FvQuS","zds-table__th":"Table-module__zds-table__th___R03sj","zds-table__th-content":"Table-module__zds-table__th-content___duR3c","zds-table__td":"Table-module__zds-table__td___aY-Nt","zds-table-header__filters-placeholder":"Table-module__zds-table-header__filters-placeholder___GhVwi","zds-table__body":"Table-module__zds-table__body___kuKXb","zds-table__empty":"Table-module__zds-table__empty___ZM4iu","zds-table__empty__content":"Table-module__zds-table__empty__content___8xl-u","zds-table__empty__title":"Table-module__zds-table__empty__title___7Y9Pj","zds-table__empty__caption":"Table-module__zds-table__empty__caption___toS00","zds-table__row":"Table-module__zds-table__row___8cEjq","zds-table__empty-cell":"Table-module__zds-table__empty-cell___Ldb6Z","zds-table-header__search":"Table-module__zds-table-header__search___yzLxw","zds-table__pagination":"Table-module__zds-table__pagination___FR5GH","zds-table-header__search-container":"Table-module__zds-table-header__search-container___-Fzz1","zds-table-header__filters":"Table-module__zds-table-header__filters___ViH07","zds-table-header__filter-label":"Table-module__zds-table-header__filter-label___c3BWI","zds-table-header__custom-filters":"Table-module__zds-table-header__custom-filters___oTuoM","zds-table-header__filters-content":"Table-module__zds-table-header__filters-content___nKlgL","zds-table-header__filters-wrapper":"Table-module__zds-table-header__filters-wrapper___BrZ9A","zds-table-header__filter-items":"Table-module__zds-table-header__filter-items___Tn8Yv","zds-table__pagination-select":"Table-module__zds-table__pagination-select___TZK-y","zds-table__pagination-info":"Table-module__zds-table__pagination-info___3k-B2","zds-table__pagination-controls":"Table-module__zds-table__pagination-controls___S-zs7","zds-table__pagination-button":"Table-module__zds-table__pagination-button___Wvq9W"};
|
|
2795
|
-
|
|
2796
2771
|
/**
|
|
2797
2772
|
* @module constants
|
|
2798
2773
|
* @summary Useful constants
|
|
@@ -6066,6 +6041,15 @@ const ptBR = {
|
|
|
6066
6041
|
},
|
|
6067
6042
|
};
|
|
6068
6043
|
|
|
6044
|
+
var styles$3 = {"zds-table__container":"Table-module__zds-table__container___9xeVY","zds-table-header":"Table-module__zds-table-header___uPRjd","zds-table__scroll-wrapper":"Table-module__zds-table__scroll-wrapper___xQZPq","zds-table":"Table-module__zds-table___bPvaS","zds-table__head":"Table-module__zds-table__head___FvQuS","zds-table__th":"Table-module__zds-table__th___R03sj","zds-table__th-content":"Table-module__zds-table__th-content___duR3c","zds-table__td":"Table-module__zds-table__td___aY-Nt","zds-table-header__filters-placeholder":"Table-module__zds-table-header__filters-placeholder___GhVwi","zds-table__body":"Table-module__zds-table__body___kuKXb","zds-table__empty":"Table-module__zds-table__empty___ZM4iu","zds-table__empty__content":"Table-module__zds-table__empty__content___8xl-u","zds-table__empty__title":"Table-module__zds-table__empty__title___7Y9Pj","zds-table__empty__caption":"Table-module__zds-table__empty__caption___toS00","zds-table__row":"Table-module__zds-table__row___8cEjq","zds-table__empty-cell":"Table-module__zds-table__empty-cell___Ldb6Z","zds-table-header__search":"Table-module__zds-table-header__search___yzLxw","zds-table__pagination":"Table-module__zds-table__pagination___FR5GH","zds-table-header__search-container":"Table-module__zds-table-header__search-container___-Fzz1","zds-table-header__filters":"Table-module__zds-table-header__filters___ViH07","zds-table-header__filter-label":"Table-module__zds-table-header__filter-label___c3BWI","zds-table-header__custom-filters":"Table-module__zds-table-header__custom-filters___oTuoM","zds-table-header__filters-content":"Table-module__zds-table-header__filters-content___nKlgL","zds-table-header__filters-wrapper":"Table-module__zds-table-header__filters-wrapper___BrZ9A","zds-table-header__filter-items":"Table-module__zds-table-header__filter-items___Tn8Yv","zds-table__pagination-select":"Table-module__zds-table__pagination-select___TZK-y","zds-table__pagination-info":"Table-module__zds-table__pagination-info___3k-B2","zds-table__pagination-controls":"Table-module__zds-table__pagination-controls___S-zs7","zds-table__pagination-button":"Table-module__zds-table__pagination-button___Wvq9W"};
|
|
6045
|
+
|
|
6046
|
+
/**
|
|
6047
|
+
* Componente de ícone SVG para estado vazio da tabela
|
|
6048
|
+
* Exibe um ícone de lupa com design personalizado do Zanthus Design System
|
|
6049
|
+
* @returns Elemento SVG para estado vazio
|
|
6050
|
+
*/
|
|
6051
|
+
const EmptyRows150Color = () => (jsxRuntime.jsxs("svg", { width: '150', height: '150', viewBox: '0 0 150 150', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [jsxRuntime.jsx("circle", { cx: '75', cy: '75', r: '75', fill: '#E8E8EE' }), jsxRuntime.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' })] }));
|
|
6052
|
+
|
|
6069
6053
|
/*! *****************************************************************************
|
|
6070
6054
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
6071
6055
|
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
@@ -6153,13 +6137,6 @@ var ReactContentLoaderFacebook = function (props) { return (React.createElement(
|
|
|
6153
6137
|
*/
|
|
6154
6138
|
const LoaderList = (props) => (jsxRuntime.jsxs(ContentLoader, { speed: 1, width: "100%", viewBox: "0 0 1272 652", backgroundColor: "#F5F5F7", foregroundColor: "#FFFFFF", ...props, children: [jsxRuntime.jsx("rect", { x: "0", y: "0", rx: "8", ry: "8", width: "1272", height: "44" }), jsxRuntime.jsx("rect", { x: "0", y: "76", rx: "12", ry: "12", width: "402", height: "24" }), jsxRuntime.jsx("rect", { x: "0", y: "116", rx: "8", ry: "8", width: "280", height: "16" }), jsxRuntime.jsx("rect", { x: "426", y: "76", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "426", y: "116", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "694", y: "76", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "694", y: "116", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "962", y: "76", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "962", y: "116", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "1129", y: "76", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "1129", y: "116", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "0", y: "164", rx: "12", ry: "12", width: "402", height: "24" }), jsxRuntime.jsx("rect", { x: "0", y: "204", rx: "8", ry: "8", width: "280", height: "16" }), jsxRuntime.jsx("rect", { x: "426", y: "164", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "426", y: "204", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "694", y: "164", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "694", y: "204", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "962", y: "164", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "962", y: "204", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "1129", y: "164", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "1129", y: "204", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "0", y: "252", rx: "12", ry: "12", width: "402", height: "24" }), jsxRuntime.jsx("rect", { x: "0", y: "292", rx: "8", ry: "8", width: "280", height: "16" }), jsxRuntime.jsx("rect", { x: "426", y: "252", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "426", y: "292", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "694", y: "252", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "694", y: "292", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "962", y: "252", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "962", y: "292", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "1129", y: "252", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "1129", y: "292", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "0", y: "340", rx: "12", ry: "12", width: "402", height: "24" }), jsxRuntime.jsx("rect", { x: "0", y: "380", rx: "8", ry: "8", width: "280", height: "16" }), jsxRuntime.jsx("rect", { x: "426", y: "340", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "426", y: "380", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "694", y: "340", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "694", y: "380", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "962", y: "340", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "962", y: "380", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "1129", y: "340", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "1129", y: "380", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "0", y: "428", rx: "12", ry: "12", width: "402", height: "24" }), jsxRuntime.jsx("rect", { x: "0", y: "468", rx: "8", ry: "8", width: "280", height: "16" }), jsxRuntime.jsx("rect", { x: "426", y: "428", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "426", y: "468", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "694", y: "428", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "694", y: "468", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "962", y: "428", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "962", y: "468", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "1129", y: "428", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "1129", y: "468", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "0", y: "516", rx: "12", ry: "12", width: "402", height: "24" }), jsxRuntime.jsx("rect", { x: "0", y: "556", rx: "8", ry: "8", width: "280", height: "16" }), jsxRuntime.jsx("rect", { x: "426", y: "516", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "426", y: "556", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "694", y: "516", rx: "12", ry: "12", width: "244", height: "24" }), jsxRuntime.jsx("rect", { x: "694", y: "556", rx: "8", ry: "8", width: "178", height: "16" }), jsxRuntime.jsx("rect", { x: "962", y: "516", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "962", y: "556", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "1129", y: "516", rx: "12", ry: "12", width: "143", height: "24" }), jsxRuntime.jsx("rect", { x: "1129", y: "556", rx: "8", ry: "8", width: "90", height: "16" }), jsxRuntime.jsx("rect", { x: "0", y: "604", rx: "8", ry: "8", width: "1272", height: "48" })] }));
|
|
6155
6139
|
|
|
6156
|
-
/**
|
|
6157
|
-
* Componente de ícone SVG para estado vazio da tabela
|
|
6158
|
-
* Exibe um ícone de lupa com design personalizado do Zanthus Design System
|
|
6159
|
-
* @returns Elemento SVG para estado vazio
|
|
6160
|
-
*/
|
|
6161
|
-
const EmptyRows150Color = () => (jsxRuntime.jsxs("svg", { width: '150', height: '150', viewBox: '0 0 150 150', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [jsxRuntime.jsx("circle", { cx: '75', cy: '75', r: '75', fill: '#E8E8EE' }), jsxRuntime.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' })] }));
|
|
6162
|
-
|
|
6163
6140
|
const useSelection = (dataSource, rowSelection) => {
|
|
6164
6141
|
const [internalKeys, setInternalKeys] = React.useState([]);
|
|
6165
6142
|
const selectedKeys = rowSelection?.selectedRowKeys ?? internalKeys;
|
|
@@ -6167,11 +6144,9 @@ const useSelection = (dataSource, rowSelection) => {
|
|
|
6167
6144
|
const handleChange = React.useCallback((newKeys) => {
|
|
6168
6145
|
const newRows = dataSource.filter((_, index) => newKeys.includes(index));
|
|
6169
6146
|
if (rowSelection?.selectedRowKeys !== undefined) {
|
|
6170
|
-
// Controlled
|
|
6171
6147
|
rowSelection.onChange?.(newKeys, newRows);
|
|
6172
6148
|
}
|
|
6173
6149
|
else {
|
|
6174
|
-
// Uncontrolled
|
|
6175
6150
|
setInternalKeys(newKeys);
|
|
6176
6151
|
rowSelection?.onChange?.(newKeys, newRows);
|
|
6177
6152
|
}
|
|
@@ -6218,7 +6193,7 @@ const renderCell = (column, row, index) => {
|
|
|
6218
6193
|
return value;
|
|
6219
6194
|
}
|
|
6220
6195
|
};
|
|
6221
|
-
const Table = ({ columns
|
|
6196
|
+
const Table = ({ columns, dataSource, className, loading = false, rowSelection, locale, onRow, ...rest }) => {
|
|
6222
6197
|
if (!Array.isArray(columns) || !Array.isArray(dataSource)) {
|
|
6223
6198
|
console.warn('Table: columns e dataSource devem ser arrays');
|
|
6224
6199
|
return null;
|
|
@@ -6242,8 +6217,8 @@ const Table = ({ columns = [], dataSource = [], className, loading = false, rowS
|
|
|
6242
6217
|
if (loading) {
|
|
6243
6218
|
return (jsxRuntime.jsx("div", { className: clsx(styles$3['zds-table__container'], className), children: jsxRuntime.jsx("div", { className: styles$3['zds-table__loader'], children: jsxRuntime.jsx(LoaderList, {}) }) }));
|
|
6244
6219
|
}
|
|
6245
|
-
const emptyText = locale
|
|
6246
|
-
return (jsxRuntime.jsx("div", { className: clsx(styles$3['zds-table__container'], className), children: jsxRuntime.jsx("div", { className: styles$3['zds-table__scroll-wrapper'], children: jsxRuntime.jsxs("table", { className: styles$3['zds-table'], role: "table", "aria-label": "Tabela de dados", "aria-describedby": loading ? `${tableId}-loading` : undefined, "aria-rowcount": dataSource.length + 1, children: [jsxRuntime.jsx("thead", { className: styles$3['zds-table__head'], children: jsxRuntime.jsx("tr", { children: finalColumns.map((column) => (jsxRuntime.jsx("th", { className: clsx(styles$3['zds-table__th'], column.align && `text-${column.align}`), style: column.style, children: jsxRuntime.jsx("div", { className: styles$3['zds-table__th-content'], children: column.label }) }, column.key))) }) }), jsxRuntime.jsx("tbody", { className: styles$3['zds-table__body'], children: dataSource.length > 0 ? (dataSource.map((row, index) => {
|
|
6220
|
+
const emptyText = locale?.emptyText || (jsxRuntime.jsxs("div", { className: styles$3['zds-table__empty'], children: [jsxRuntime.jsx("div", { className: styles$3['zds-table__empty__content'], children: jsxRuntime.jsx(EmptyRows150Color, {}) }), jsxRuntime.jsxs("div", { className: styles$3['zds-table__empty__text'], children: [jsxRuntime.jsx("h3", { className: styles$3['zds-table__empty__title'], children: "Nenhum dado encontrado" }), jsxRuntime.jsx("p", { className: styles$3['zds-table__empty__caption'], children: "Nenhum registro encontrado" })] })] }));
|
|
6221
|
+
return (jsxRuntime.jsx("div", { className: clsx(styles$3['zds-table__container'], className), ...rest, children: jsxRuntime.jsx("div", { className: styles$3['zds-table__scroll-wrapper'], children: jsxRuntime.jsxs("table", { className: styles$3['zds-table'], role: "table", "aria-label": "Tabela de dados", "aria-describedby": loading ? `${tableId}-loading` : undefined, "aria-rowcount": dataSource.length + 1, children: [jsxRuntime.jsx("thead", { className: styles$3['zds-table__head'], children: jsxRuntime.jsx("tr", { children: finalColumns.map((column) => (jsxRuntime.jsx("th", { className: clsx(styles$3['zds-table__th'], column.align && `text-${column.align}`), style: column.style, children: jsxRuntime.jsx("div", { className: styles$3['zds-table__th-content'], children: column.label }) }, column.key))) }) }), jsxRuntime.jsx("tbody", { className: styles$3['zds-table__body'], children: dataSource.length > 0 ? (dataSource.map((row, index) => {
|
|
6247
6222
|
const rowProps = onRow?.(row, index) || {};
|
|
6248
6223
|
return (jsxRuntime.jsx("tr", { className: clsx(styles$3['zds-table__row'], rowProps.className), onClick: rowProps.onClick, onDoubleClick: rowProps.onDoubleClick, children: finalColumns.map((column) => (jsxRuntime.jsx("td", { className: clsx(styles$3['zds-table__td'], column.align && `text-${column.align}`), children: renderCell(column, row, index) }, column.key))) }, index));
|
|
6249
6224
|
})) : (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: finalColumns.length, className: styles$3['zds-table__empty-cell'], children: emptyText }) })) })] }) }) }));
|
|
@@ -6255,7 +6230,7 @@ const isCalendarFilter = (filter) => {
|
|
|
6255
6230
|
const isCheckboxFilter = (filter) => {
|
|
6256
6231
|
return filter.type === 'checkbox' || filter.type === 'text' || filter.type === 'icon';
|
|
6257
6232
|
};
|
|
6258
|
-
const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceholder = 'Pesquisar...', showSearch = true, showFilters = false, filters, filterItems = [], className = '', }) => {
|
|
6233
|
+
const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceholder = 'Pesquisar...', showSearch = true, showFilters = false, filters, filterItems = [], className = '', ...rest }) => {
|
|
6259
6234
|
const [internalSearchValue, setInternalSearchValue] = React.useState(searchValue);
|
|
6260
6235
|
React.useEffect(() => {
|
|
6261
6236
|
setInternalSearchValue(searchValue);
|
|
@@ -6279,7 +6254,7 @@ const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceho
|
|
|
6279
6254
|
}
|
|
6280
6255
|
};
|
|
6281
6256
|
const hasFilters = filters || (filterItems && filterItems.length > 0);
|
|
6282
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$3['zds-table-header']} ${className}`.trim(), children: [showSearch && (onSearchChange || onSearch) && (jsxRuntime.jsx("div", { className: styles$3['zds-table-header__search-container'], children: jsxRuntime.jsx(Search, { value: internalSearchValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: styles$3['zds-table-header__search'] }) })), showFilters && (jsxRuntime.jsx("div", { className: styles$3['zds-table-header__filters'], children: hasFilters ? (jsxRuntime.jsxs("div", { className: styles$3['zds-table-header__filters-content'], children: [filters && (jsxRuntime.jsx("div", { className: styles$3['zds-table-header__custom-filters'], children: filters })), jsxRuntime.jsxs("div", { className: styles$3['zds-table-header__filters-wrapper'], children: [jsxRuntime.jsx("span", { className: styles$3['zds-table-header__filter-label'], children: "Filtros" }), jsxRuntime.jsx("div", { className: styles$3['zds-table-header__filter-items'], children: filterItems && filterItems.map((filterItem, index) => {
|
|
6257
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$3['zds-table-header']} ${className}`.trim(), ...rest, children: [showSearch && (onSearchChange || onSearch) && (jsxRuntime.jsx("div", { className: styles$3['zds-table-header__search-container'], children: jsxRuntime.jsx(Search, { value: internalSearchValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: styles$3['zds-table-header__search'] }) })), showFilters && (jsxRuntime.jsx("div", { className: styles$3['zds-table-header__filters'], children: hasFilters ? (jsxRuntime.jsxs("div", { className: styles$3['zds-table-header__filters-content'], children: [filters && (jsxRuntime.jsx("div", { className: styles$3['zds-table-header__custom-filters'], children: filters })), jsxRuntime.jsxs("div", { className: styles$3['zds-table-header__filters-wrapper'], children: [jsxRuntime.jsx("span", { className: styles$3['zds-table-header__filter-label'], children: "Filtros" }), jsxRuntime.jsx("div", { className: styles$3['zds-table-header__filter-items'], children: filterItems && filterItems.map((filterItem, index) => {
|
|
6283
6258
|
const commonProps = {
|
|
6284
6259
|
key: filterItem.id || index,
|
|
6285
6260
|
buttonText: filterItem.buttonText,
|
|
@@ -6301,15 +6276,12 @@ const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceho
|
|
|
6301
6276
|
}) })] })] })) : (jsxRuntime.jsx("div", { className: styles$3['zds-table-header__filters-placeholder'], children: jsxRuntime.jsx("span", { children: "Nenhum filtro dispon\u00EDvel" }) })) }))] }));
|
|
6302
6277
|
};
|
|
6303
6278
|
|
|
6304
|
-
const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange, onItemsPerPageChange, pageSizeOptions = [10, 25, 50, 100], disabled = false, className
|
|
6305
|
-
// Cálculos
|
|
6279
|
+
const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange, onItemsPerPageChange, pageSizeOptions = [10, 25, 50, 100], disabled = false, className, ...rest }) => {
|
|
6306
6280
|
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
|
6307
6281
|
const startItem = totalItems > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0;
|
|
6308
6282
|
const endItem = Math.min(currentPage * itemsPerPage, totalItems);
|
|
6309
|
-
// Lógica para habilitar/desabilitar botões
|
|
6310
6283
|
const canGoPrev = currentPage > 1 && !disabled;
|
|
6311
6284
|
const canGoNext = currentPage < totalPages && !disabled;
|
|
6312
|
-
// Handlers
|
|
6313
6285
|
const handlePrevious = () => {
|
|
6314
6286
|
if (canGoPrev) {
|
|
6315
6287
|
onPageChange(currentPage - 1);
|
|
@@ -6324,7 +6296,7 @@ const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange,
|
|
|
6324
6296
|
const newItemsPerPage = Number(event.target.value);
|
|
6325
6297
|
onItemsPerPageChange(newItemsPerPage);
|
|
6326
6298
|
};
|
|
6327
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$3['zds-table__pagination']} ${className}`.trim(), children: [jsxRuntime.jsxs("div", { className: styles$3['zds-table__pagination-select'], children: [jsxRuntime.jsx("label", { htmlFor: "items-per-page", className: styles$3['zds-table__pagination-label'], children: "Itens por p\u00E1gina" }), jsxRuntime.jsx("select", { id: "items-per-page", value: itemsPerPage, onChange: handleItemsPerPageChange, disabled: disabled, className: styles$3['zds-table__pagination-select-input'], children: pageSizeOptions.map((option) => (jsxRuntime.jsx("option", { value: option, children: option }, option))) })] }), jsxRuntime.jsx("div", { className: styles$3['zds-table__pagination-info'], children: jsxRuntime.jsx("span", { children: totalItems > 0
|
|
6299
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$3['zds-table__pagination']} ${className}`.trim(), ...rest, children: [jsxRuntime.jsxs("div", { className: styles$3['zds-table__pagination-select'], children: [jsxRuntime.jsx("label", { htmlFor: "items-per-page", className: styles$3['zds-table__pagination-label'], children: "Itens por p\u00E1gina" }), jsxRuntime.jsx("select", { id: "items-per-page", value: itemsPerPage, onChange: handleItemsPerPageChange, disabled: disabled, className: styles$3['zds-table__pagination-select-input'], children: pageSizeOptions.map((option) => (jsxRuntime.jsx("option", { value: option, children: option }, option))) })] }), jsxRuntime.jsx("div", { className: styles$3['zds-table__pagination-info'], children: jsxRuntime.jsx("span", { children: totalItems > 0
|
|
6328
6300
|
? `${startItem}–${endItem} de ${totalItems}`
|
|
6329
6301
|
: '0 itens' }) }), jsxRuntime.jsxs("div", { className: styles$3['zds-table__pagination-controls'], children: [jsxRuntime.jsx("button", { className: styles$3['zds-table__pagination-button'], onClick: handlePrevious, disabled: !canGoPrev, "aria-label": "P\u00E1gina anterior", children: jsxRuntime.jsx(reactIcons.ChevronLeft16Regular, {}) }), jsxRuntime.jsx("button", { className: styles$3['zds-table__pagination-button'], onClick: handleNext, disabled: !canGoNext, "aria-label": "Pr\u00F3xima p\u00E1gina", children: jsxRuntime.jsx(reactIcons.ChevronRight16Regular, {}) })] })] }));
|
|
6330
6302
|
};
|
|
@@ -6464,7 +6436,7 @@ const useToast = () => {
|
|
|
6464
6436
|
|
|
6465
6437
|
var styles$1 = {"container":"Switch-module__container___BR1OB","switchRoot":"Switch-module__switchRoot___jz2HD","switchThumb":"Switch-module__switchThumb___X3RL7"};
|
|
6466
6438
|
|
|
6467
|
-
const Switch = ({ disabled = false, defaultChecked = false, checked, onCheckedChange,
|
|
6439
|
+
const Switch = ({ disabled = false, defaultChecked = false, checked, onCheckedChange, ...rest }) => (jsxRuntime.jsx("div", { className: clsx(styles$1.container), children: jsxRuntime.jsx(radixUi.Switch.Root, { className: styles$1.switchRoot, disabled: disabled, defaultChecked: defaultChecked, checked: checked, onCheckedChange: onCheckedChange, ...rest, children: jsxRuntime.jsx(radixUi.Switch.Thumb, { className: styles$1.switchThumb }) }) }));
|
|
6468
6440
|
|
|
6469
6441
|
var styles = {"zds-verification-code__container":"VerificationCode-module__zds-verification-code__container___tUNuJ","zds-verification-code__input":"VerificationCode-module__zds-verification-code__input___wDIQ6","zds-verification-code__filled":"VerificationCode-module__zds-verification-code__filled___-2VVb","zds-verification-code__has-error":"VerificationCode-module__zds-verification-code__has-error___eqKAp","zds-verification-code__error":"VerificationCode-module__zds-verification-code__error___T53i5"};
|
|
6470
6442
|
|
|
@@ -6492,7 +6464,7 @@ const REGEX_MAP = {
|
|
|
6492
6464
|
* />
|
|
6493
6465
|
* ```
|
|
6494
6466
|
*/
|
|
6495
|
-
const VerificationCode = ({ length = 6, inputType = 'numeric', onComplete, hasError = false, errorMessage
|
|
6467
|
+
const VerificationCode = ({ length = 6, inputType = 'numeric', onComplete, hasError = false, errorMessage, disabled = false, className, ...rest }) => {
|
|
6496
6468
|
const validLength = Math.min(Math.max(length, 1), 100);
|
|
6497
6469
|
const [values, setValues] = React.useState(Array(validLength).fill(''));
|
|
6498
6470
|
const inputsRef = React.useRef([]);
|
|
@@ -6577,7 +6549,7 @@ const VerificationCode = ({ length = 6, inputType = 'numeric', onComplete, hasEr
|
|
|
6577
6549
|
const handleFocus = React.useCallback((e) => {
|
|
6578
6550
|
e.target.select();
|
|
6579
6551
|
}, []);
|
|
6580
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx(styles['zds-verification-code__container'], className), children: values.map((val, i) => (jsxRuntime.jsx("input", { id: `zds-verification-code__element-${i}`, ref: (el) => {
|
|
6552
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx(styles['zds-verification-code__container'], className), ...rest, children: values.map((val, i) => (jsxRuntime.jsx("input", { id: `zds-verification-code__element-${i}`, ref: (el) => {
|
|
6581
6553
|
inputsRef.current[i] = el;
|
|
6582
6554
|
}, type: "text", inputMode: inputType === 'numeric' ? 'numeric' : 'text', maxLength: 1, value: val, onChange: (e) => handleChange(i, e.target.value), onKeyDown: (e) => handleKeyDown(i, e), onKeyUp: (e) => handleKeyUp(i, e), onPaste: i === 0 ? handlePaste : undefined, onFocus: handleFocus, disabled: disabled, className: clsx(styles['zds-verification-code__input'], {
|
|
6583
6555
|
[styles['zds-verification-code__has-error']]: hasError,
|