@giro-ds/react 11.1.0 → 12.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +664 -317
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +290 -111
- package/dist/index.esm.js +667 -321
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +5 -5
- package/package.json +5 -5
package/dist/index.esm.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
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, RadioGroup, DropdownMenu, Dialog as Dialog$1, Select as Select$1, Toast as Toast$1, Switch as Switch$1 } from 'radix-ui';
|
|
3
|
+
import { Avatar as Avatar$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, Popover as Popover$1, Label, AlertDialog, RadioGroup, DropdownMenu, Dialog as Dialog$1, Select as Select$1, Toast as Toast$1, Switch as Switch$1, 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,
|
|
6
|
-
import { SpinnerIos16Regular, ChevronUp16Regular, ChevronLeft16Regular, ChevronRight16Regular, ChevronDown16Regular, Dismiss24Regular, Emoji20Regular, ChevronDown20Regular, KeyboardShiftUppercase20Regular, KeyboardShift20Filled, KeyboardShift20Regular, Backspace20Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, FilterRegular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, SearchInfo20Regular, ArrowSortUp16Regular, ArrowSortDown16Regular, ArrowSort16Regular, Info20Filled, CheckmarkCircle20Filled, Warning20Filled, Dismiss16Filled } from '@fluentui/react-icons';
|
|
5
|
+
import React__default, { useId, useMemo, createContext, useState, useContext, useRef, useCallback, useEffect, useLayoutEffect, createElement, memo, useReducer, isValidElement } from 'react';
|
|
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';
|
|
9
9
|
import { createPortal } from 'react-dom';
|
|
@@ -12,17 +12,18 @@ import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@
|
|
|
12
12
|
export { createColumnHelper as createTableColumnHelper } from '@tanstack/react-table';
|
|
13
13
|
import Skeleton from 'react-loading-skeleton';
|
|
14
14
|
|
|
15
|
-
var styles$
|
|
15
|
+
var styles$v = {"AvatarRoot":"Avatar-module__AvatarRoot___7eNx7","AvatarRoot--sm":"Avatar-module__AvatarRoot--sm___LVHoe","AvatarRoot--lg":"Avatar-module__AvatarRoot--lg___QWux5","AvatarImage":"Avatar-module__AvatarImage___-H6iH","AvatarFallback":"Avatar-module__AvatarFallback___RDyNV"};
|
|
16
16
|
|
|
17
|
-
const Avatar = ({ icon, size = 'lg', src, className,
|
|
18
|
-
const AvatarClass = clsx(styles$
|
|
19
|
-
[styles$
|
|
20
|
-
[styles$
|
|
17
|
+
const Avatar = ({ icon, size = 'lg', src, className, text, ...rest }) => {
|
|
18
|
+
const AvatarClass = clsx(styles$v.AvatarRoot, {
|
|
19
|
+
[styles$v['AvatarRoot--lg']]: size === 'lg',
|
|
20
|
+
[styles$v['AvatarRoot--sm']]: size === 'sm',
|
|
21
21
|
}, className);
|
|
22
|
-
|
|
22
|
+
const truncatedText = text ? text.slice(0, 2) : undefined;
|
|
23
|
+
return (jsxs(Avatar$1.Root, { className: AvatarClass, ...rest, children: [src && (jsx(Avatar$1.Image, { className: styles$v.AvatarImage, src: src, alt: "Avatar" })), jsx(Avatar$1.Fallback, { className: styles$v.AvatarFallback, children: icon || truncatedText })] }));
|
|
23
24
|
};
|
|
24
25
|
|
|
25
|
-
var styles$
|
|
26
|
+
var styles$u = {"badge__status":"Badge-module__badge__status___-u3xv","badge":"Badge-module__badge___ZbEBU","badgeContainer":"Badge-module__badgeContainer___Guw9Z","badge__empty":"Badge-module__badge__empty___u8ccy","badge__flex":"Badge-module__badge__flex___DSJHW","badge__status__empty":"Badge-module__badge__status__empty___h8L4e","badge__status__flex":"Badge-module__badge__status__flex___703Q6","badge__status__filterBadge":"Badge-module__badge__status__filterBadge___DhjGU"};
|
|
26
27
|
|
|
27
28
|
const getDisplayValue = (value) => {
|
|
28
29
|
if (value === null || value === undefined)
|
|
@@ -44,27 +45,27 @@ const Badge = ({ children, badgeValue = null, className, id, filterVariant = fal
|
|
|
44
45
|
const displayValue = getDisplayValue(badgeValue);
|
|
45
46
|
const isEmpty = displayValue === '';
|
|
46
47
|
if (children) {
|
|
47
|
-
return (jsxs("div", { className: styles$
|
|
48
|
-
[styles$
|
|
49
|
-
[styles$
|
|
48
|
+
return (jsxs("div", { className: styles$u.badgeContainer, ...rest, children: [jsx("div", { "data-testid": "badge-content", children: children }), jsx("div", { id: componentId, className: clsx(styles$u.badge, {
|
|
49
|
+
[styles$u['badge__empty']]: isEmpty,
|
|
50
|
+
[styles$u['badge__flex']]: displayValue.length >= 2,
|
|
50
51
|
}, className), "data-testid": "badge", children: !isEmpty && jsx("span", { "aria-hidden": !!ariaLabel, children: displayValue }) })] }));
|
|
51
52
|
}
|
|
52
|
-
return (jsx("div", { className: styles$
|
|
53
|
-
[styles$
|
|
54
|
-
[styles$
|
|
55
|
-
[styles$
|
|
53
|
+
return (jsx("div", { className: styles$u.badgeContainer, children: jsx("div", { className: clsx(styles$u['badge__status'], {
|
|
54
|
+
[styles$u['badge__status__empty']]: isEmpty,
|
|
55
|
+
[styles$u['badge__status__flex']]: displayValue.length >= 2,
|
|
56
|
+
[styles$u['badge__status__filterBadge']]: filterVariant,
|
|
56
57
|
}, className), "data-testid": "badge", children: !isEmpty && (jsx("span", { "aria-hidden": !!ariaLabel, children: displayValue })) }) }));
|
|
57
58
|
};
|
|
58
59
|
|
|
59
|
-
var styles$
|
|
60
|
+
var styles$t = {"tooltipContent":"Tooltip-module__tooltipContent___xycUg","triggerWrapper":"Tooltip-module__triggerWrapper___x83XR"};
|
|
60
61
|
|
|
61
62
|
const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, sideOffset = 10, className, ...rest }) => {
|
|
62
|
-
return (jsx(Tooltip$1.Provider, { children: jsxs(Tooltip$1.Root, { children: [jsx(Tooltip$1.Trigger, { asChild: true, children: jsx("span", { className: styles$
|
|
63
|
+
return (jsx(Tooltip$1.Provider, { children: jsxs(Tooltip$1.Root, { children: [jsx(Tooltip$1.Trigger, { asChild: true, children: jsx("span", { className: styles$t.triggerWrapper, children: children }) }), jsx(Tooltip$1.Portal, { children: jsx(Tooltip$1.Content, { className: clsx(styles$t.tooltipContent, className), side: side, align: align, sideOffset: sideOffset, style: { maxWidth: maxWidth ? `${maxWidth}px` : 'auto' }, ...rest, children: text }) })] }) }));
|
|
63
64
|
};
|
|
64
65
|
|
|
65
|
-
var styles$
|
|
66
|
+
var styles$s = {"button":"Button-module__button___18Bed","button-lg":"Button-module__button-lg___-A8B9","button-sm":"Button-module__button-sm___L7aT7","button-filled":"Button-module__button-filled___IQx1z","button-outlined":"Button-module__button-outlined___hLkLN","button-text":"Button-module__button-text___8GFeA","buttonWithIcon":"Button-module__buttonWithIcon___8ehK1","buttonIconPosition-left":"Button-module__buttonIconPosition-left___uOY6b","buttonIconPosition-right":"Button-module__buttonIconPosition-right___eswRS","buttonIconPosition-both":"Button-module__buttonIconPosition-both___1Lith","buttonNoContent":"Button-module__buttonNoContent___Tc9jk","buttonIconOnly":"Button-module__buttonIconOnly___aifk4","buttonIconLeft":"Button-module__buttonIconLeft___RICR3","buttonIconRight":"Button-module__buttonIconRight___71lu2","buttonFullWidth":"Button-module__buttonFullWidth___tXuVE","disabled":"Button-module__disabled___UzdWL","buttonLoading":"Button-module__buttonLoading___RGdNw","buttonContentHidden":"Button-module__buttonContentHidden___CoCiN","buttonLoadingSpinner":"Button-module__buttonLoadingSpinner___oZxEU","spin":"Button-module__spin___kQKH9"};
|
|
66
67
|
|
|
67
|
-
const Button =
|
|
68
|
+
const Button = ({ ref, as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel, disabled = false, onClick, size = 'lg', scale = 1, className, type = 'button', id, icon, fullWidth = false, ariaLabel, iconOnly = false, loading = false, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', ...rest }) => {
|
|
68
69
|
const generatedId = useId();
|
|
69
70
|
const componentId = id || generatedId;
|
|
70
71
|
const getComponent = () => {
|
|
@@ -91,14 +92,14 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
91
92
|
'Forneça um ícone via `icon={<MeuIcone />}`.');
|
|
92
93
|
}
|
|
93
94
|
const resolvedIcon = icon;
|
|
94
|
-
const buttonClasses = clsx(styles$
|
|
95
|
-
[styles$
|
|
96
|
-
[styles$
|
|
97
|
-
[styles$
|
|
98
|
-
[styles$
|
|
99
|
-
[styles$
|
|
100
|
-
[styles$
|
|
101
|
-
[styles$
|
|
95
|
+
const buttonClasses = clsx(styles$s.button, styles$s[`button-${variant}`], styles$s[`button-${size}`], {
|
|
96
|
+
[styles$s['disabled']]: disabled,
|
|
97
|
+
[styles$s['buttonLoading']]: loading,
|
|
98
|
+
[styles$s['buttonWithIcon']]: resolvedIcon && !iconOnly,
|
|
99
|
+
[styles$s[`buttonIconPosition-${iconPosition}`]]: resolvedIcon && !iconOnly,
|
|
100
|
+
[styles$s['buttonNoContent']]: resolvedIcon && !hasContent && !iconOnly,
|
|
101
|
+
[styles$s['buttonFullWidth']]: fullWidth,
|
|
102
|
+
[styles$s['buttonIconOnly']]: iconOnly,
|
|
102
103
|
}, className);
|
|
103
104
|
const getAriaLabel = () => {
|
|
104
105
|
if (ariaLabel)
|
|
@@ -124,12 +125,12 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
124
125
|
};
|
|
125
126
|
const renderContent = () => {
|
|
126
127
|
if (iconOnly && !loading) {
|
|
127
|
-
return (jsx("span", { className: styles$
|
|
128
|
+
return (jsx("span", { className: styles$s.buttonIconOnly, "aria-hidden": "true", children: resolvedIcon }));
|
|
128
129
|
}
|
|
129
130
|
if (loading) {
|
|
130
|
-
return (jsxs(Fragment, { children: [!iconOnly && (jsxs("span", { className: styles$
|
|
131
|
+
return (jsxs(Fragment, { children: [!iconOnly && (jsxs("span", { className: styles$s.buttonContentHidden, "aria-hidden": "true", children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsx("span", { className: styles$s.buttonIconLeft, children: resolvedIcon })), children, resolvedIcon && (iconPosition === 'right' || iconPosition === 'both') && (jsx("span", { className: styles$s.buttonIconRight, children: resolvedIcon }))] })), jsx("span", { className: styles$s.buttonLoadingSpinner, "aria-hidden": "true", children: jsx(SpinnerIos16Regular, { "aria-hidden": "true" }) })] }));
|
|
131
132
|
}
|
|
132
|
-
return (jsxs(Fragment, { children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsx("span", { className: styles$
|
|
133
|
+
return (jsxs(Fragment, { children: [resolvedIcon && (iconPosition === 'left' || iconPosition === 'both') && (jsx("span", { className: styles$s.buttonIconLeft, "aria-hidden": "true", children: resolvedIcon })), children, resolvedIcon && (iconPosition === 'right' || iconPosition === 'both') && (jsx("span", { className: styles$s.buttonIconRight, "aria-hidden": "true", children: resolvedIcon }))] }));
|
|
133
134
|
};
|
|
134
135
|
const { style: externalStyle, ...otherRest } = rest;
|
|
135
136
|
const baseProps = {
|
|
@@ -180,7 +181,7 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
180
181
|
return (jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: jsx(Component, { ...baseProps, ...getNavigationProps(), children: renderContent() }) }));
|
|
181
182
|
}
|
|
182
183
|
return (jsx(Component, { ...baseProps, ...getNavigationProps(), children: renderContent() }));
|
|
183
|
-
}
|
|
184
|
+
};
|
|
184
185
|
Button.displayName = 'Button';
|
|
185
186
|
|
|
186
187
|
function buildFormatLongFn(args) {
|
|
@@ -1357,30 +1358,42 @@ const offsetFormatCache = {};
|
|
|
1357
1358
|
const offsetCache = {};
|
|
1358
1359
|
|
|
1359
1360
|
/**
|
|
1360
|
-
* The function
|
|
1361
|
+
* The function returns UTC offset in minutes for the given date in specified
|
|
1361
1362
|
* time zone.
|
|
1362
1363
|
*
|
|
1363
1364
|
* Unlike `Date.prototype.getTimezoneOffset`, this function returns the value
|
|
1364
1365
|
* mirrored to the sign of the offset in the time zone. For Asia/Singapore
|
|
1365
|
-
* (UTC+8), `tzOffset` returns 480
|
|
1366
|
+
* (UTC+8), `tzOffset` returns `480`, while `getTimezoneOffset` returns `-480`.
|
|
1366
1367
|
*
|
|
1367
|
-
*
|
|
1368
|
-
*
|
|
1368
|
+
* It uses `Intl.DateTimeFormat` internally to access otherwise unavailable
|
|
1369
|
+
* runtime's time zone data, and falls back to basic manual parsing if Intl API
|
|
1370
|
+
* is not supported (e.g., older Node.js versions, React Native's Hermes, etc.).
|
|
1369
1371
|
*
|
|
1370
|
-
* @
|
|
1372
|
+
* @param timeZone - Time zone name (IANA or UTC offset).
|
|
1373
|
+
* @param date - Date to check the offset for.
|
|
1374
|
+
*
|
|
1375
|
+
* @returns UTC offset in minutes (e.g., `480` for date in UTC+8).
|
|
1371
1376
|
*/
|
|
1372
1377
|
function tzOffset(timeZone, date) {
|
|
1373
1378
|
try {
|
|
1379
|
+
// Create `Intl.DateTimeFormat` with `"longOffset"` that gives us consistent
|
|
1380
|
+
// date strings like `"5/19/2026, GMT-08:00"`.
|
|
1374
1381
|
const format = offsetFormatCache[timeZone] ||= new Intl.DateTimeFormat("en-US", {
|
|
1375
1382
|
timeZone,
|
|
1376
1383
|
timeZoneName: "longOffset"
|
|
1377
1384
|
}).format;
|
|
1385
|
+
|
|
1386
|
+
// Get `"-08:00"`.
|
|
1378
1387
|
const offsetStr = format(date).split("GMT")[1];
|
|
1388
|
+
|
|
1389
|
+
// Avoid parsing the same offset string.
|
|
1379
1390
|
if (offsetStr in offsetCache) return offsetCache[offsetStr];
|
|
1391
|
+
|
|
1392
|
+
// Calculate offset from `["-08", "00"]` and cache it.
|
|
1380
1393
|
return calcOffset(offsetStr, offsetStr.split(":"));
|
|
1381
1394
|
} catch {
|
|
1382
|
-
// Fallback to manual parsing if the runtime doesn't support
|
|
1383
|
-
// See: https://github.com/nodejs/node/issues/53419
|
|
1395
|
+
// Fallback to manual parsing if the runtime doesn't support
|
|
1396
|
+
// `±HH:MM/±HHMM/±HH`. See: https://github.com/nodejs/node/issues/53419.
|
|
1384
1397
|
if (timeZone in offsetCache) return offsetCache[timeZone];
|
|
1385
1398
|
const captures = timeZone?.match(offsetRe);
|
|
1386
1399
|
if (captures) return calcOffset(timeZone, captures.slice(1));
|
|
@@ -1396,30 +1409,69 @@ function calcOffset(cacheStr, values) {
|
|
|
1396
1409
|
return offsetCache[cacheStr] = hours * 60 + minutes > 0 ? hours * 60 + minutes + seconds : hours * 60 - minutes - seconds;
|
|
1397
1410
|
}
|
|
1398
1411
|
|
|
1412
|
+
// TZDate stores time in two `Date` objects because native `Date` can only
|
|
1413
|
+
// expose local fields in the system time zone.
|
|
1414
|
+
//
|
|
1415
|
+
// The external date (`this`) stores the real timestamp. It is the value used by
|
|
1416
|
+
// `getTime()`, `valueOf()`, UTC getters/setters, comparisons, and arithmetic.
|
|
1417
|
+
// Its local getters are not used for target-zone fields because they would read
|
|
1418
|
+
// the timestamp through the system time zone.
|
|
1419
|
+
//
|
|
1420
|
+
// The internal date (`this.internal`) stores the target-zone wall-clock fields.
|
|
1421
|
+
// We read and write those fields through UTC getters/setters so the host system
|
|
1422
|
+
// time zone cannot reinterpret them. For example, `getHours()` returns
|
|
1423
|
+
// `internal.getUTCHours()`, and `setHours()` writes `internal.setUTCHours(...)`.
|
|
1424
|
+
//
|
|
1425
|
+
// Syncing moves data between the two representations:
|
|
1426
|
+
//
|
|
1427
|
+
// - `syncToInternal` starts from the external timestamp and rebuilds internal
|
|
1428
|
+
// wall-clock fields using `this.timeZone` offset.
|
|
1429
|
+
//
|
|
1430
|
+
// - `syncFromInternal` starts from internal wall-clock fields, writes them into
|
|
1431
|
+
// the external date, then adjusts that timestamp for the system/target offset
|
|
1432
|
+
// difference and DST edge cases.
|
|
1433
|
+
//
|
|
1434
|
+
// The public TZDate value is the combination of both: external is the instant,
|
|
1435
|
+
// internal is the wall-clock view of that instant in `this.timeZone`.
|
|
1436
|
+
|
|
1399
1437
|
class TZDateMini extends Date {
|
|
1400
1438
|
//#region static
|
|
1401
1439
|
|
|
1402
1440
|
constructor(...args) {
|
|
1403
1441
|
super();
|
|
1442
|
+
|
|
1443
|
+
// Time zone string is always the last string argument unless date string
|
|
1444
|
+
// is passed (as a single argument).
|
|
1404
1445
|
if (args.length > 1 && typeof args[args.length - 1] === "string") {
|
|
1405
1446
|
this.timeZone = args.pop();
|
|
1406
1447
|
}
|
|
1407
1448
|
this.internal = new Date();
|
|
1449
|
+
|
|
1450
|
+
// Validate the time zone by checking its offset.
|
|
1408
1451
|
if (isNaN(tzOffset(this.timeZone, this))) {
|
|
1409
1452
|
this.setTime(NaN);
|
|
1410
1453
|
} else {
|
|
1411
1454
|
if (!args.length) {
|
|
1455
|
+
// No arguments passed: use current time
|
|
1412
1456
|
this.setTime(Date.now());
|
|
1413
1457
|
} else if (typeof args[0] === "number" && (args.length === 1 || args.length === 2 && typeof args[1] !== "number")) {
|
|
1458
|
+
// Timestamp passed: use it as is
|
|
1414
1459
|
this.setTime(args[0]);
|
|
1415
1460
|
} else if (typeof args[0] === "string") {
|
|
1461
|
+
// `Date` string passed: parse it as external date
|
|
1416
1462
|
this.setTime(+new Date(args[0]));
|
|
1417
1463
|
} else if (args[0] instanceof Date) {
|
|
1464
|
+
// `Date` passed: use its timestamp
|
|
1418
1465
|
this.setTime(+args[0]);
|
|
1419
1466
|
} else {
|
|
1467
|
+
// `Date` values passed:
|
|
1468
|
+
|
|
1469
|
+
// Set it as external date.
|
|
1420
1470
|
this.setTime(+new Date(...args));
|
|
1421
|
-
|
|
1422
|
-
|
|
1471
|
+
|
|
1472
|
+
// Adjust internal and external dates considering that we might have
|
|
1473
|
+
// landed on the DST hour.
|
|
1474
|
+
adjustToSystemTZ(this, args);
|
|
1423
1475
|
}
|
|
1424
1476
|
}
|
|
1425
1477
|
}
|
|
@@ -1436,8 +1488,8 @@ class TZDateMini extends Date {
|
|
|
1436
1488
|
}
|
|
1437
1489
|
getTimezoneOffset() {
|
|
1438
1490
|
const offset = -tzOffset(this.timeZone, this);
|
|
1439
|
-
// Remove the seconds offset
|
|
1440
|
-
//
|
|
1491
|
+
// Remove the seconds offset using `Math.floor` for negative UTC time zones
|
|
1492
|
+
// and `Math.ceil` for positive UTC time zones.
|
|
1441
1493
|
return offset > 0 ? Math.floor(offset) : Math.ceil(offset);
|
|
1442
1494
|
}
|
|
1443
1495
|
|
|
@@ -1445,8 +1497,11 @@ class TZDateMini extends Date {
|
|
|
1445
1497
|
|
|
1446
1498
|
//#region time
|
|
1447
1499
|
|
|
1448
|
-
setTime(
|
|
1500
|
+
setTime(_time) {
|
|
1501
|
+
// Use the native `setTime` to the external date time.
|
|
1449
1502
|
Date.prototype.setTime.apply(this, arguments);
|
|
1503
|
+
|
|
1504
|
+
// Then apply it to the internal date adjusting to the timezone offset.
|
|
1450
1505
|
syncToInternal(this);
|
|
1451
1506
|
return +this;
|
|
1452
1507
|
}
|
|
@@ -1492,23 +1547,40 @@ Object.getOwnPropertyNames(Date.prototype).forEach(method => {
|
|
|
1492
1547
|
});
|
|
1493
1548
|
|
|
1494
1549
|
/**
|
|
1495
|
-
*
|
|
1550
|
+
* @internal
|
|
1551
|
+
* Function syncs time to internal date, applying the current time zone offset.
|
|
1496
1552
|
*
|
|
1497
|
-
* @param {Date} date - Date to sync
|
|
1553
|
+
* @param {Date} date - `Date` to sync
|
|
1498
1554
|
*/
|
|
1499
1555
|
function syncToInternal(date) {
|
|
1556
|
+
// Start internal from the same real timestamp as external.
|
|
1500
1557
|
date.internal.setTime(+date);
|
|
1501
|
-
|
|
1558
|
+
|
|
1559
|
+
// Shift internal by the target offset so its UTC fields become the target-zone
|
|
1560
|
+
// wall-clock fields for the external timestamp.
|
|
1561
|
+
//
|
|
1562
|
+
// o internal UTC fields: 2024-02-11 00:00
|
|
1563
|
+
// |
|
|
1564
|
+
// | + Asia/Singapore offset (+08:00)
|
|
1565
|
+
// v
|
|
1566
|
+
// x internal UTC fields: 2024-02-11 08:00
|
|
1567
|
+
//
|
|
1568
|
+
date.internal.setUTCSeconds(date.internal.getUTCSeconds() -
|
|
1569
|
+
// Round after converting minutes to seconds to avoid fractional offset
|
|
1570
|
+
// precision errors from historical offsets.
|
|
1571
|
+
Math.round(-tzOffset(date.timeZone, date) * 60));
|
|
1502
1572
|
}
|
|
1503
1573
|
|
|
1504
1574
|
/**
|
|
1505
|
-
*
|
|
1506
|
-
*
|
|
1575
|
+
* @internal
|
|
1576
|
+
* Function syncs internal wall-clock fields into the external date.
|
|
1507
1577
|
*
|
|
1508
1578
|
* @param {Date} date - The date to sync
|
|
1509
1579
|
*/
|
|
1510
1580
|
function syncFromInternal(date) {
|
|
1511
|
-
//
|
|
1581
|
+
// Copy target-zone wall-clock fields from internal into external using native
|
|
1582
|
+
// local setters. At this point external holds the right field values but they
|
|
1583
|
+
// are interpreted in the system time zone; `adjustToSystemTZ` fixes that.
|
|
1512
1584
|
Date.prototype.setFullYear.call(date, date.internal.getUTCFullYear(), date.internal.getUTCMonth(), date.internal.getUTCDate());
|
|
1513
1585
|
Date.prototype.setHours.call(date, date.internal.getUTCHours(), date.internal.getUTCMinutes(), date.internal.getUTCSeconds(), date.internal.getUTCMilliseconds());
|
|
1514
1586
|
|
|
@@ -1517,115 +1589,271 @@ function syncFromInternal(date) {
|
|
|
1517
1589
|
}
|
|
1518
1590
|
|
|
1519
1591
|
/**
|
|
1592
|
+
* @internal
|
|
1520
1593
|
* Function adjusts the date to the system time zone. It uses the time zone
|
|
1521
1594
|
* differences to calculate the offset and adjust the date.
|
|
1522
1595
|
*
|
|
1523
|
-
*
|
|
1596
|
+
* We use it when constructing `TZDate` and syncing the external date from
|
|
1597
|
+
* the internal one.
|
|
1598
|
+
*
|
|
1599
|
+
* @param {TZDate} date - `TZDate` to adjust.
|
|
1524
1600
|
*/
|
|
1525
|
-
function adjustToSystemTZ(date) {
|
|
1526
|
-
//
|
|
1527
|
-
|
|
1528
|
-
//
|
|
1529
|
-
|
|
1530
|
-
|
|
1601
|
+
function adjustToSystemTZ(date, constructorArgs) {
|
|
1602
|
+
// Keep the intended target-zone wall-clock value before native Date/system
|
|
1603
|
+
// time zone normalization can move it. Later corrections compare against this
|
|
1604
|
+
// value to distinguish intended DST normalization from accidental drift.
|
|
1605
|
+
const expectedInternalTime = Array.isArray(constructorArgs) ? constructorArgsToInternalTime(constructorArgs) : +date.internal;
|
|
1606
|
+
//#region Initial offset calculation
|
|
1607
|
+
|
|
1608
|
+
// Current target time zone offset at the native timestamp. It may include
|
|
1609
|
+
// historical offset seconds, which we preserve for the seconds adjustment.
|
|
1610
|
+
const offsetWithSeconds = tzOffset(date.timeZone, date);
|
|
1611
|
+
|
|
1612
|
+
// Minute-precision target offset used by minute-based timestamp adjustments.
|
|
1613
|
+
// Historical offsets can contain seconds, so we strip the fractional minute
|
|
1614
|
+
// here and handle remaining seconds in the seconds adjustment below.
|
|
1615
|
+
const offset = offsetWithSeconds > 0 ? Math.floor(offsetWithSeconds) : Math.ceil(offsetWithSeconds);
|
|
1616
|
+
|
|
1617
|
+
//#endregion
|
|
1618
|
+
|
|
1531
1619
|
//#region System DST adjustment
|
|
1532
1620
|
|
|
1533
|
-
//
|
|
1534
|
-
//
|
|
1535
|
-
// up on the DST hour:
|
|
1536
|
-
//
|
|
1537
|
-
// $ TZ=America/New_York node
|
|
1538
|
-
// > new Date(2020, 2, 8, 1).toString()
|
|
1539
|
-
// 'Sun Mar 08 2020 01:00:00 GMT-0500 (Eastern Standard Time)'
|
|
1540
|
-
// > new Date(2020, 2, 8, 2).toString()
|
|
1541
|
-
// 'Sun Mar 08 2020 03:00:00 GMT-0400 (Eastern Daylight Time)'
|
|
1542
|
-
// > new Date(2020, 2, 8, 3).toString()
|
|
1543
|
-
// 'Sun Mar 08 2020 03:00:00 GMT-0400 (Eastern Daylight Time)'
|
|
1544
|
-
// > new Date(2020, 2, 8, 4).toString()
|
|
1545
|
-
// 'Sun Mar 08 2020 04:00:00 GMT-0400 (Eastern Daylight Time)'
|
|
1621
|
+
// Native `Date` may normalize the requested wall time when the system time
|
|
1622
|
+
// zone skips that hour for DST.
|
|
1546
1623
|
//
|
|
1547
|
-
//
|
|
1548
|
-
//
|
|
1549
|
-
//
|
|
1550
|
-
//
|
|
1551
|
-
// However we want to adjust only if that's the DST hour the change happenes,
|
|
1552
|
-
// not the hour where DST moves to.
|
|
1624
|
+
// We compare the system wall-clock hour represented by the external date with
|
|
1625
|
+
// the wall-clock hour stored in the internal date. If they differ, the next
|
|
1626
|
+
// offset-diff calculation may need the previous system offset, because the
|
|
1627
|
+
// current external timestamp is already after the system DST jump.
|
|
1553
1628
|
|
|
1554
|
-
//
|
|
1555
|
-
//
|
|
1629
|
+
// Previous-hour reference used to detect whether the system offset changed
|
|
1630
|
+
// immediately before the current native timestamp.
|
|
1556
1631
|
const prevHour = new Date(+date);
|
|
1557
|
-
|
|
1558
|
-
//
|
|
1632
|
+
|
|
1633
|
+
// Use UTC math so subtracting one hour cannot be normalized back into the
|
|
1634
|
+
// same missing local DST hour.
|
|
1559
1635
|
prevHour.setUTCHours(prevHour.getUTCHours() - 1);
|
|
1560
1636
|
|
|
1561
|
-
//
|
|
1637
|
+
// Current system offset at the native timestamp.
|
|
1562
1638
|
const systemOffset = -new Date(+date).getTimezoneOffset();
|
|
1639
|
+
|
|
1640
|
+
// System offset one real hour before the native timestamp.
|
|
1563
1641
|
const prevHourSystemOffset = -new Date(+prevHour).getTimezoneOffset();
|
|
1642
|
+
|
|
1643
|
+
// Non-zero when the system offset changed between `prevHour` and `date`.
|
|
1564
1644
|
const systemDSTChange = systemOffset - prevHourSystemOffset;
|
|
1565
|
-
// Detect the DST shift. System DST change will occur both on
|
|
1566
|
-
const dstShift = Date.prototype.getHours.apply(date) !== date.internal.getUTCHours();
|
|
1567
1645
|
|
|
1568
|
-
//
|
|
1569
|
-
|
|
1646
|
+
// System offset to use in the later system-target offset difference.
|
|
1647
|
+
// Defaults to the current system offset and switches to the previous offset
|
|
1648
|
+
// only when native `Date` normalized a missing system wall time.
|
|
1649
|
+
let systemOffsetForDiff = systemOffset;
|
|
1650
|
+
if (systemDSTChange && systemOffset !== offset) {
|
|
1651
|
+
// System wall-clock hour represented by the current external timestamp.
|
|
1652
|
+
const systemHour = Date.prototype.getHours.apply(date);
|
|
1653
|
+
|
|
1654
|
+
// Target wall-clock hour currently stored in internal fields. Constructors
|
|
1655
|
+
// get it from arguments because internal may have already been synced from
|
|
1656
|
+
// the normalized external timestamp; setters get it directly from internal.
|
|
1657
|
+
const expectedHour = Array.isArray(constructorArgs) ? constructorArgs[3] || 0 : date.internal.getUTCHours();
|
|
1658
|
+
if (systemHour !== expectedHour) {
|
|
1659
|
+
// Check whether using the current system offset would keep the target
|
|
1660
|
+
// offset unchanged. If so, the only DST jump we crossed is the system
|
|
1661
|
+
// one, so the diff should use the pre-DST system offset.
|
|
1662
|
+
const testDate = new Date(+date);
|
|
1663
|
+
|
|
1664
|
+
// Difference that the later offset-diff step would apply with the
|
|
1665
|
+
// current system offset.
|
|
1666
|
+
const testOffsetDiff = systemOffset - offset;
|
|
1667
|
+
if (testOffsetDiff) testDate.setUTCMinutes(testDate.getUTCMinutes() + testOffsetDiff);
|
|
1668
|
+
|
|
1669
|
+
// Target offset after applying the current system offset difference.
|
|
1670
|
+
const testOffsetWithSeconds = tzOffset(date.timeZone, testDate);
|
|
1671
|
+
|
|
1672
|
+
// Target offset without historical seconds, matching `offset`.
|
|
1673
|
+
const testOffset = testOffsetWithSeconds > 0 ? Math.floor(testOffsetWithSeconds) : Math.ceil(testOffsetWithSeconds);
|
|
1674
|
+
if (testOffset === offset) systemOffsetForDiff = prevHourSystemOffset;
|
|
1675
|
+
}
|
|
1676
|
+
}
|
|
1570
1677
|
|
|
1571
1678
|
//#endregion
|
|
1572
1679
|
|
|
1573
1680
|
//#region System diff adjustment
|
|
1574
1681
|
|
|
1575
|
-
//
|
|
1576
|
-
//
|
|
1577
|
-
//
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1682
|
+
// Move external from the system-zone interpretation of internal fields toward
|
|
1683
|
+
// the timestamp that represents those fields in the target time zone.
|
|
1684
|
+
//
|
|
1685
|
+
// At this point native `Date` has treated the internal wall-clock fields as if
|
|
1686
|
+
// they belonged to the system zone. The system-target offset difference moves
|
|
1687
|
+
// external by the distance between that system interpretation and the target
|
|
1688
|
+
// interpretation.
|
|
1689
|
+
|
|
1690
|
+
// Difference between the system offset selected above and the minute-precision
|
|
1691
|
+
// target offset. Positive values move external forward; negative values move
|
|
1692
|
+
// it backward.
|
|
1693
|
+
const offsetDiff = systemOffsetForDiff - offset;
|
|
1694
|
+
if (offsetDiff)
|
|
1695
|
+
// Apply the system-target minute difference to external. Internal is
|
|
1696
|
+
// rebuilt from the final external timestamp after all adjustments are
|
|
1697
|
+
// complete.
|
|
1698
|
+
//
|
|
1699
|
+
// o external as target: 2023-01-31 23:00
|
|
1700
|
+
// |
|
|
1701
|
+
// | add `offsetDiff`
|
|
1702
|
+
// v
|
|
1703
|
+
// x external as target: 2023-02-01 12:00
|
|
1704
|
+
//
|
|
1705
|
+
Date.prototype.setUTCMinutes.call(date, Date.prototype.getUTCMinutes.call(date) + offsetDiff);
|
|
1581
1706
|
|
|
1582
1707
|
//#endregion
|
|
1583
1708
|
|
|
1584
|
-
//#region Seconds
|
|
1709
|
+
//#region Seconds system diff adjustment
|
|
1585
1710
|
|
|
1711
|
+
// Historical time zone offsets can include seconds, but the minute-based
|
|
1712
|
+
// offset adjustment above intentionally used minute precision.
|
|
1713
|
+
//
|
|
1714
|
+
// This adjustment applies the remaining seconds difference to external. For
|
|
1715
|
+
// example, historical Singapore used UTC+06:55:25, while ISO formatting shows
|
|
1716
|
+
// only `+06:55`; without the seconds correction, setter paths keep the wrong
|
|
1717
|
+
// wall-clock seconds.
|
|
1718
|
+
|
|
1719
|
+
// Clone external as a native `Date` so we can inspect how the system time zone
|
|
1720
|
+
// represents the same timestamp.
|
|
1586
1721
|
const systemDate = new Date(+date);
|
|
1587
|
-
|
|
1722
|
+
|
|
1723
|
+
// Zero UTC seconds before reading system seconds. Any remaining local seconds
|
|
1724
|
+
// then come from the system time zone offset rather than from the timestamp's
|
|
1725
|
+
// own seconds value.
|
|
1588
1726
|
systemDate.setUTCSeconds(0);
|
|
1589
|
-
|
|
1727
|
+
|
|
1728
|
+
// Seconds part contributed by the system time zone offset. Negative offsets
|
|
1729
|
+
// need wrapping because `Date#getSeconds()` returns values in the 0..59 range.
|
|
1590
1730
|
const systemSecondsOffset = systemOffset > 0 ? systemDate.getSeconds() : (systemDate.getSeconds() - 60) % 60;
|
|
1591
1731
|
|
|
1592
|
-
//
|
|
1732
|
+
// Seconds part contributed by the target time zone offset.
|
|
1593
1733
|
const secondsOffset = Math.round(-(tzOffset(date.timeZone, date) * 60)) % 60;
|
|
1594
|
-
if (secondsOffset || systemSecondsOffset)
|
|
1595
|
-
|
|
1734
|
+
if (secondsOffset || systemSecondsOffset)
|
|
1735
|
+
// Apply the remaining second-level system-target difference to external.
|
|
1736
|
+
//
|
|
1737
|
+
// o external as Asia/Singapore: 1900-01-01 00:00:56
|
|
1738
|
+
// |
|
|
1739
|
+
// | + `secondsOffset`
|
|
1740
|
+
// | + `systemSecondsOffset`
|
|
1741
|
+
// v
|
|
1742
|
+
// x external as Asia/Singapore: 1900-01-01 00:00:31
|
|
1743
|
+
//
|
|
1596
1744
|
Date.prototype.setUTCSeconds.call(date, Date.prototype.getUTCSeconds.call(date) + secondsOffset + systemSecondsOffset);
|
|
1597
|
-
}
|
|
1598
1745
|
|
|
1599
1746
|
//#endregion
|
|
1600
1747
|
|
|
1601
1748
|
//#region Post-adjustment DST fix
|
|
1602
1749
|
|
|
1603
|
-
|
|
1604
|
-
//
|
|
1605
|
-
//
|
|
1606
|
-
|
|
1750
|
+
// The first system-target offset move can cross a target-zone DST boundary.
|
|
1751
|
+
//
|
|
1752
|
+
// When that happens, the target offset at the new external timestamp differs
|
|
1753
|
+
// from the target offset used for `offsetDiff`. We compare the original move
|
|
1754
|
+
// with the move that would be calculated at the new timestamp, then apply the
|
|
1755
|
+
// difference to external.
|
|
1756
|
+
|
|
1757
|
+
// Target offset at the current external timestamp, including historical
|
|
1758
|
+
// seconds for the later seconds adjustment.
|
|
1759
|
+
const postOffsetWithSeconds = tzOffset(date.timeZone, date);
|
|
1760
|
+
|
|
1761
|
+
// Minute-precision target offset at the current external timestamp.
|
|
1762
|
+
const postOffset = postOffsetWithSeconds > 0 ? Math.floor(postOffsetWithSeconds) : Math.ceil(postOffsetWithSeconds);
|
|
1763
|
+
|
|
1764
|
+
// System offset at the current external timestamp.
|
|
1607
1765
|
const postSystemOffset = -new Date(+date).getTimezoneOffset();
|
|
1766
|
+
|
|
1767
|
+
// System-target offset difference at the current external timestamp.
|
|
1608
1768
|
const postOffsetDiff = postSystemOffset - postOffset;
|
|
1769
|
+
|
|
1770
|
+
// Whether the target offset changed after the first offset move.
|
|
1609
1771
|
const offsetChanged = postOffset !== offset;
|
|
1772
|
+
|
|
1773
|
+
// Difference between the current offset move and the move already applied.
|
|
1610
1774
|
const postDiff = postOffsetDiff - offsetDiff;
|
|
1611
|
-
|
|
1775
|
+
|
|
1776
|
+
// If the first offset move already normalized a target DST gap forward, the
|
|
1777
|
+
// generic post-DST correction below would undo that valid normalization. This
|
|
1778
|
+
// happens, for example, with America/New_York 02:00 during spring-forward when
|
|
1779
|
+
// the system zone also changes offset around the same instant.
|
|
1780
|
+
const targetDSTShift = postOffset - offset;
|
|
1781
|
+
|
|
1782
|
+
// Candidate timestamp that would represent the requested wall-clock time with
|
|
1783
|
+
// the post-transition target offset. If it still does not round-trip to the
|
|
1784
|
+
// requested wall-clock fields, the requested time is inside a target DST gap.
|
|
1785
|
+
const postOffsetCandidate = expectedInternalTime - postOffset * 60 * 1000;
|
|
1786
|
+
|
|
1787
|
+
// Only positive target offset shifts are spring-forward gaps. Negative shifts
|
|
1788
|
+
// are fall-back overlaps and still need the regular post-adjustment path.
|
|
1789
|
+
const normalizedTargetDSTGap = targetDSTShift > 0 && targetInternalTime(date) - expectedInternalTime === targetDSTShift * 60 * 1000 && targetInternalTime(date, postOffsetCandidate) !== expectedInternalTime;
|
|
1790
|
+
if (offsetChanged && postDiff && !normalizedTargetDSTGap) {
|
|
1791
|
+
// Apply the target-DST correction to external. In the backward-crossing case
|
|
1792
|
+
// shown here, this lands on an intermediate value that needs `offsetChange`
|
|
1793
|
+
// below.
|
|
1794
|
+
//
|
|
1795
|
+
// o external as America/New_York: 2023-03-12 03:00 EDT
|
|
1796
|
+
// |
|
|
1797
|
+
// | + `postDiff`
|
|
1798
|
+
// v
|
|
1799
|
+
// x external as America/New_York: 2023-03-12 01:00 EST
|
|
1800
|
+
//
|
|
1612
1801
|
Date.prototype.setUTCMinutes.call(date, Date.prototype.getUTCMinutes.call(date) + postDiff);
|
|
1613
1802
|
|
|
1614
|
-
//
|
|
1615
|
-
//
|
|
1803
|
+
// Target offset after applying `postDiff`. It may change again if the
|
|
1804
|
+
// correction itself crosses a target-zone DST boundary.
|
|
1805
|
+
const newOffsetWithSeconds = tzOffset(date.timeZone, date);
|
|
1806
|
+
|
|
1807
|
+
// Minute-precision target offset after applying `postDiff`.
|
|
1808
|
+
const newOffset = newOffsetWithSeconds > 0 ? Math.floor(newOffsetWithSeconds) : Math.ceil(newOffsetWithSeconds);
|
|
1616
1809
|
|
|
1617
|
-
|
|
1618
|
-
// Remove the seconds offset
|
|
1619
|
-
// use Math.floor for negative GMT timezones and Math.ceil for positive GMT timezones.
|
|
1620
|
-
const newOffset = newBaseOffset > 0 ? Math.floor(newBaseOffset) : Math.ceil(newBaseOffset);
|
|
1810
|
+
// Offset change caused by the `postDiff` move itself.
|
|
1621
1811
|
const offsetChange = postOffset - newOffset;
|
|
1622
|
-
|
|
1623
|
-
|
|
1812
|
+
|
|
1813
|
+
// If the correction moved external backward across the target DST boundary,
|
|
1814
|
+
// apply the boundary change so external lands on the valid target-zone
|
|
1815
|
+
// timestamp. Forward crossings are already normalized by native Date, and
|
|
1816
|
+
// applying this correction there would undo the valid post-DST result.
|
|
1817
|
+
if (offsetChange && postDiff < 0) {
|
|
1818
|
+
// Apply the second target-DST correction to external.
|
|
1819
|
+
//
|
|
1820
|
+
// o external as America/New_York: 2023-03-12 01:00 EST
|
|
1821
|
+
// |
|
|
1822
|
+
// | + `offsetChange`
|
|
1823
|
+
// v
|
|
1824
|
+
// x external as America/New_York: 2023-03-12 03:00 EDT
|
|
1825
|
+
//
|
|
1624
1826
|
Date.prototype.setUTCMinutes.call(date, Date.prototype.getUTCMinutes.call(date) + offsetChange);
|
|
1625
1827
|
}
|
|
1626
1828
|
}
|
|
1627
1829
|
|
|
1628
1830
|
//#endregion
|
|
1831
|
+
|
|
1832
|
+
// Rebuild internal wall-clock fields from the final external timestamp.
|
|
1833
|
+
syncToInternal(date);
|
|
1834
|
+
|
|
1835
|
+
// Native Date can normalize historical system offsets with minute and second
|
|
1836
|
+
// precision before we adjust to the target time zone. Correct only small
|
|
1837
|
+
// historical drift so DST gap normalization (usually one hour) remains intact.
|
|
1838
|
+
const expectedTime = constructorArgs ? expectedInternalTime : expectedInternalTime + secondsOffset * 1000;
|
|
1839
|
+
const drift = expectedTime - +date.internal;
|
|
1840
|
+
if (drift && Math.abs(drift) < 30 * 60 * 1000) {
|
|
1841
|
+
Date.prototype.setTime.call(date, +date + drift);
|
|
1842
|
+
syncToInternal(date);
|
|
1843
|
+
}
|
|
1844
|
+
}
|
|
1845
|
+
function constructorArgsToInternalTime(args) {
|
|
1846
|
+
// Mirror Date's date-value constructor defaults while preserving explicit
|
|
1847
|
+
// `undefined` behavior. Missing month/day default, but passed `undefined`
|
|
1848
|
+
// should remain invalid just like `Date.UTC(year, undefined, ...)`.
|
|
1849
|
+
return Date.UTC(args[0], args.length > 1 ? args[1] : 0, args.length > 2 ? args[2] : 1, ...args.slice(3));
|
|
1850
|
+
}
|
|
1851
|
+
function targetInternalTime(date, time) {
|
|
1852
|
+
// Compute the target-zone wall-clock representation for a timestamp without
|
|
1853
|
+
// mutating the TZDate. This mirrors syncToInternal for temporary checks.
|
|
1854
|
+
const internal = new Date(time ?? +date);
|
|
1855
|
+
internal.setUTCSeconds(internal.getUTCSeconds() - Math.round(-tzOffset(date.timeZone, internal) * 60));
|
|
1856
|
+
return +internal;
|
|
1629
1857
|
}
|
|
1630
1858
|
|
|
1631
1859
|
class TZDate extends TZDateMini {
|
|
@@ -2439,7 +2667,7 @@ const ptBR = {
|
|
|
2439
2667
|
},
|
|
2440
2668
|
};
|
|
2441
2669
|
|
|
2442
|
-
var styles$
|
|
2670
|
+
var styles$r = {"root":"Calendar-module__root___vQEhz","day":"Calendar-module__day___dseUA","day_button":"Calendar-module__day_button___r3WNU","caption_label":"Calendar-module__caption_label___Dhkie","button_next":"Calendar-module__button_next___iRaNz","button_previous":"Calendar-module__button_previous___r7JBs","chevron":"Calendar-module__chevron___NPDg-","nav":"Calendar-module__nav___MT3Dm","dropdowns":"Calendar-module__dropdowns___xBVtv","dropdown":"Calendar-module__dropdown___D7OlW","dropdown_root":"Calendar-module__dropdown_root___v4DlK","month_caption":"Calendar-module__month_caption___P3Hlu","month":"Calendar-module__month___0RA-L","months":"Calendar-module__months___rmJdy","month_grid":"Calendar-module__month_grid___f6YkX","weekday":"Calendar-module__weekday___Spb2f","week_number":"Calendar-module__week_number___EXJD9","today":"Calendar-module__today___U36wP","outside":"Calendar-module__outside___UeJFZ","selected":"Calendar-module__selected___5Nryr","disabled":"Calendar-module__disabled___T3658","hidden":"Calendar-module__hidden___uL3uc","range_middle":"Calendar-module__range_middle___Uv4gt","range_start":"Calendar-module__range_start___c1eNH","range_end":"Calendar-module__range_end___4qDh5","focusable":"Calendar-module__focusable___V7w-Q","weeks_before_enter":"Calendar-module__weeks_before_enter___O1ytQ","slide_in_left":"Calendar-module__slide_in_left___hfrfr","weeks_before_exit":"Calendar-module__weeks_before_exit___v7nDr","slide_out_left":"Calendar-module__slide_out_left___kib4j","weeks_after_enter":"Calendar-module__weeks_after_enter___CEtsD","slide_in_right":"Calendar-module__slide_in_right___ldL0M","weeks_after_exit":"Calendar-module__weeks_after_exit___F8Edz","slide_out_right":"Calendar-module__slide_out_right___X2hxE","caption_after_enter":"Calendar-module__caption_after_enter___0ek1H","fade_in":"Calendar-module__fade_in___YyYoZ","caption_after_exit":"Calendar-module__caption_after_exit___RA1iK","fade_out":"Calendar-module__fade_out___lNcmB","caption_before_enter":"Calendar-module__caption_before_enter___j6sMK","caption_before_exit":"Calendar-module__caption_before_exit___rntl-","calendar_grid_wrapper":"Calendar-module__calendar_grid_wrapper___OX0TR","caption_grid_btn":"Calendar-module__caption_grid_btn___qD0-E","caption_year_chevron":"Calendar-module__caption_year_chevron___4ghQV","caption_grid_label":"Calendar-module__caption_grid_label___93Wx4","gridOverlay":"Calendar-module__gridOverlay___Za-y0","gridOverlayCaption":"Calendar-module__gridOverlayCaption___p4OUO","gridOverlayYearsNav":"Calendar-module__gridOverlayYearsNav___U6S-V","gridCells":"Calendar-module__gridCells___Y8DaG","gridCellsYears":"Calendar-module__gridCellsYears___jEV52","gridCell":"Calendar-module__gridCell___RV1co","gridCellActive":"Calendar-module__gridCellActive___UBi5y","gridNavBtn":"Calendar-module__gridNavBtn___Jligz","chevronNavBtnPrev":"Calendar-module__chevronNavBtnPrev___ifEps","chevronNavBtnNext":"Calendar-module__chevronNavBtnNext___qmghm","chevron_wrapper":"Calendar-module__chevron_wrapper___BfN9a"};
|
|
2443
2671
|
|
|
2444
2672
|
const FLUENT_CHEVRON_MAP = {
|
|
2445
2673
|
down: ChevronDown16Regular,
|
|
@@ -2449,7 +2677,7 @@ const FLUENT_CHEVRON_MAP = {
|
|
|
2449
2677
|
};
|
|
2450
2678
|
const CustomChevron = ({ orientation = "left", className, }) => {
|
|
2451
2679
|
const Icon = FLUENT_CHEVRON_MAP[orientation];
|
|
2452
|
-
return jsx("span", { className: styles$
|
|
2680
|
+
return jsx("span", { className: styles$r.chevron_wrapper, children: jsx(Icon, { className: className, "aria-hidden": true }) });
|
|
2453
2681
|
};
|
|
2454
2682
|
const GridCtx = createContext(null);
|
|
2455
2683
|
const GridMonthCaption = ({ calendarMonth, displayIndex: _displayIndex, ...divProps }) => {
|
|
@@ -2458,18 +2686,22 @@ const GridMonthCaption = ({ calendarMonth, displayIndex: _displayIndex, ...divPr
|
|
|
2458
2686
|
const date = calendarMonth.date;
|
|
2459
2687
|
const monthLabel = new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(date);
|
|
2460
2688
|
const yearLabel = String(date.getFullYear());
|
|
2461
|
-
return (jsxs("div", { ...divProps, children: [jsx("span", { className: styles$
|
|
2689
|
+
return (jsxs("div", { ...divProps, children: [jsx("span", { className: styles$r.caption_grid_label, children: monthLabel }), jsxs("button", { type: "button", className: styles$r.caption_grid_btn, "aria-pressed": view === "years", onClick: onYearLabelClick, children: [yearLabel, view !== "days" ? (jsx("span", { className: styles$r.chevron_wrapper, children: jsx(ChevronUp16Regular, { className: styles$r.caption_year_chevron, "aria-hidden": true }) })) : (jsx("span", { className: styles$r.chevron_wrapper, children: jsx(ChevronDown16Regular, { className: styles$r.caption_year_chevron, "aria-hidden": true }) }))] })] }));
|
|
2462
2690
|
};
|
|
2463
2691
|
const YEARS_PER_PAGE = 20;
|
|
2464
|
-
const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, onDaySelect, onDateChange, onClear
|
|
2692
|
+
const Calendar = ({ mode = "single", selected, selectedRange, currentDate, defaultMonth, startMonth, endMonth, onDaySelect, onRangeSelect, onDateChange, onClear, minDate, maxDate, disabled, format: _format, locale = "pt-br", autoFocus, numberOfMonths, className, style, scale = 1, id, "aria-label": ariaLabel, ...rest }) => {
|
|
2465
2693
|
const animate = true;
|
|
2466
2694
|
const [internalSelected, setInternalSelected] = useState(selected ?? undefined);
|
|
2695
|
+
const [internalRange, setInternalRange] = useState(selectedRange ?? undefined);
|
|
2467
2696
|
const [internalDisplayMonth, setInternalDisplayMonth] = useState(() => currentDate ?? defaultMonth ?? new Date());
|
|
2468
2697
|
const [gridView, setGridView] = useState("days");
|
|
2469
2698
|
const [yearPageStart, setYearPageStart] = useState(() => (currentDate ?? defaultMonth ?? new Date()).getFullYear() - 9);
|
|
2470
2699
|
const resolvedSelected = selected !== undefined
|
|
2471
2700
|
? (selected ?? undefined)
|
|
2472
2701
|
: internalSelected;
|
|
2702
|
+
const resolvedRange = selectedRange !== undefined
|
|
2703
|
+
? (selectedRange ?? undefined)
|
|
2704
|
+
: internalRange;
|
|
2473
2705
|
const resolvedLocale = locale === "pt-br" ? ptBR : enUS;
|
|
2474
2706
|
const intlLocale = locale === "pt-br" ? "pt-BR" : "en-US";
|
|
2475
2707
|
const disabledMatchers = [
|
|
@@ -2482,6 +2714,33 @@ const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, o
|
|
|
2482
2714
|
if (date) {
|
|
2483
2715
|
onDaySelect?.(date);
|
|
2484
2716
|
}
|
|
2717
|
+
else {
|
|
2718
|
+
onClear?.();
|
|
2719
|
+
}
|
|
2720
|
+
};
|
|
2721
|
+
const handleRangeSelect = (range, selectedDay) => {
|
|
2722
|
+
const current = resolvedRange;
|
|
2723
|
+
// Desselecionar: apenas um dia marcado (to ausente ou to = from) e o usuário clicou nele
|
|
2724
|
+
const isSingleDaySelected = current?.from != null &&
|
|
2725
|
+
(current.to == null || current.from.getTime() === current.to.getTime());
|
|
2726
|
+
if (isSingleDaySelected && current?.from?.getTime() === selectedDay.getTime()) {
|
|
2727
|
+
setInternalRange(undefined);
|
|
2728
|
+
onRangeSelect?.(undefined);
|
|
2729
|
+
onClear?.();
|
|
2730
|
+
return;
|
|
2731
|
+
}
|
|
2732
|
+
// Range completo (from ≠ to): reinicia a seleção com o dia clicado
|
|
2733
|
+
const isComplete = current?.from != null &&
|
|
2734
|
+
current?.to != null &&
|
|
2735
|
+
current.from.getTime() !== current.to.getTime();
|
|
2736
|
+
if (isComplete) {
|
|
2737
|
+
const fresh = { from: selectedDay, to: undefined };
|
|
2738
|
+
setInternalRange(fresh);
|
|
2739
|
+
onRangeSelect?.(fresh);
|
|
2740
|
+
return;
|
|
2741
|
+
}
|
|
2742
|
+
setInternalRange(range);
|
|
2743
|
+
onRangeSelect?.(range);
|
|
2485
2744
|
};
|
|
2486
2745
|
const handleMonthChange = (date) => {
|
|
2487
2746
|
setInternalDisplayMonth(date);
|
|
@@ -2526,23 +2785,25 @@ const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, o
|
|
|
2526
2785
|
onYearLabelClick: handleYearLabelClick,
|
|
2527
2786
|
};
|
|
2528
2787
|
const sharedDayPickerProps = {
|
|
2529
|
-
classNames: styles$
|
|
2788
|
+
classNames: styles$r,
|
|
2530
2789
|
animate,
|
|
2531
|
-
mode: "single",
|
|
2532
|
-
selected: resolvedSelected,
|
|
2533
|
-
onSelect: handleSelect,
|
|
2534
2790
|
startMonth,
|
|
2535
2791
|
endMonth,
|
|
2536
2792
|
disabled: disabledMatchers.length > 0 ? disabledMatchers : undefined,
|
|
2537
2793
|
locale: resolvedLocale,
|
|
2538
2794
|
autoFocus,
|
|
2539
2795
|
"aria-label": ariaLabel,
|
|
2796
|
+
captionLayout: "label",
|
|
2797
|
+
numberOfMonths,
|
|
2798
|
+
month: resolvedDisplayMonth,
|
|
2799
|
+
onMonthChange: handleMonthChange,
|
|
2800
|
+
components: { MonthCaption: GridMonthCaption, Chevron: CustomChevron },
|
|
2540
2801
|
};
|
|
2541
2802
|
const containerStyle = { '--giro-scale': scale };
|
|
2542
|
-
return (jsx(GridCtx.Provider, { value: gridCtxValue, children: jsxs("div", { className: clsx(styles$
|
|
2803
|
+
return (jsx(GridCtx.Provider, { value: gridCtxValue, children: jsxs("div", { className: clsx(styles$r.calendar_grid_wrapper, className), style: { ...containerStyle, ...style }, children: [mode === "range" ? (jsx(DayPicker, { id: id, ...sharedDayPickerProps, ...rest, mode: "range", selected: resolvedRange, onSelect: handleRangeSelect })) : (jsx(DayPicker, { id: id, ...sharedDayPickerProps, ...rest, mode: "single", selected: resolvedSelected, onSelect: handleSelect })), gridView !== "days" && (jsxs("div", { className: `${styles$r.gridOverlay}${gridView === "years" ? ` ${styles$r.gridOverlayYears}` : ""}`, role: "dialog", "aria-modal": "true", "aria-label": gridView === "months" ? "Selecione o mês" : "Selecione o ano", children: [gridView === "months" && (jsxs(Fragment, { children: [jsxs("div", { className: styles$r.gridOverlayCaption, children: [jsx("span", { className: styles$r.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxs("button", { type: "button", className: styles$r.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de m\u00EAs", children: [displayedYear, jsx("span", { className: styles$r.chevron_wrapper, children: jsx(ChevronUp16Regular, { className: styles$r.caption_year_chevron, "aria-hidden": true }) })] })] }), jsx("div", { className: styles$r.gridCells, children: monthsGrid.map(({ index, label, disabled: monthDisabled }) => (jsx("button", { type: "button", disabled: monthDisabled, className: `${styles$r.gridCell}${displayedMonthIndex === index ? ` ${styles$r.gridCellActive}` : ""}`, onClick: () => handleGridMonthSelect(index), children: label }, index))) })] })), gridView === "years" && (jsxs(Fragment, { children: [jsxs("div", { className: styles$r.gridOverlayCaption, children: [jsx("span", { className: styles$r.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxs("button", { type: "button", className: styles$r.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de ano", children: [displayedYear, jsx("span", { className: styles$r.chevron_wrapper, children: jsx(ChevronUp16Regular, { className: styles$r.caption_year_chevron, "aria-hidden": true }) })] }), jsxs("div", { className: styles$r.gridOverlayYearsNav, children: [jsx("button", { type: "button", className: styles$r.gridNavBtn, disabled: !canGoPrevYears, onClick: () => setYearPageStart((s) => s - YEARS_PER_PAGE), "aria-label": "Anos anteriores", children: jsx("span", { className: styles$r.chevron_wrapper, children: jsx(ChevronLeft16Regular, { className: styles$r.chevronNavBtnPrev, "aria-hidden": true }) }) }), jsx("button", { type: "button", className: styles$r.gridNavBtn, disabled: !canGoNextYears, onClick: () => setYearPageStart((s) => s + YEARS_PER_PAGE), "aria-label": "Pr\u00F3ximos anos", children: jsx("span", { className: styles$r.chevron_wrapper, children: jsx(ChevronRight16Regular, { className: styles$r.chevronNavBtnNext, "aria-hidden": true }) }) })] })] }), jsx("div", { className: `${styles$r.gridCells} ${styles$r.gridCellsYears}`, children: yearsInPage.map((year) => (jsx("button", { type: "button", className: `${styles$r.gridCell}${displayedYear === year ? ` ${styles$r.gridCellActive}` : ""}`, onClick: () => handleGridYearSelect(year), children: year }, year))) })] }))] }))] }) }));
|
|
2543
2804
|
};
|
|
2544
2805
|
|
|
2545
|
-
var styles$
|
|
2806
|
+
var styles$q = {"container":"Callout-module__container___dggFW","withTitle":"Callout-module__withTitle___e-HEg","brand":"Callout-module__brand___YHDPQ","success":"Callout-module__success___RPS0Q","alert":"Callout-module__alert___LVlJM","content":"Callout-module__content___g44Qz","icon":"Callout-module__icon___4CBkz","subcontent":"Callout-module__subcontent___5hz-f","title":"Callout-module__title___IPSdE","text":"Callout-module__text___0Ys48","dismiss":"Callout-module__dismiss___ZaycS"};
|
|
2546
2807
|
|
|
2547
2808
|
const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, backgroundColor, textColor, className, id, style, ...rest }) => {
|
|
2548
2809
|
if (process.env.NODE_ENV !== 'production' && (text === '' || (typeof text === 'string' && !text.trim()))) {
|
|
@@ -2552,19 +2813,19 @@ const Callout = ({ variant = 'neutral', title, text, icon, onDismiss, dismiss, b
|
|
|
2552
2813
|
const titleId = `callout-title-${id || generatedId}`;
|
|
2553
2814
|
const componentId = id || generatedId;
|
|
2554
2815
|
const isAlert = variant === 'alert';
|
|
2555
|
-
const containerClass = clsx(styles$
|
|
2816
|
+
const containerClass = clsx(styles$q.container, styles$q[variant], { [styles$q.withTitle]: title }, className);
|
|
2556
2817
|
const customStyle = {
|
|
2557
2818
|
...style,
|
|
2558
2819
|
...(backgroundColor && { '--callout-bg': `var(--${backgroundColor})` }),
|
|
2559
2820
|
...(textColor && { '--callout-text': `var(--${textColor})` }),
|
|
2560
2821
|
};
|
|
2561
|
-
return (jsx("div", { id: componentId, className: containerClass, role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite', "aria-labelledby": title ? titleId : undefined, style: customStyle, ...rest, children: jsxs("div", { className: styles$
|
|
2822
|
+
return (jsx("div", { id: componentId, className: containerClass, role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite', "aria-labelledby": title ? titleId : undefined, style: customStyle, ...rest, children: jsxs("div", { className: styles$q.content, children: [icon && jsx("span", { className: styles$q.icon, "aria-hidden": "true", children: icon }), jsxs("div", { className: styles$q.subcontent, children: [title && (jsx("span", { id: titleId, className: styles$q.title, children: title })), text && jsx("span", { className: styles$q.text, children: text })] }), dismiss && (jsx("button", { className: styles$q.dismiss, onClick: onDismiss, type: "button", "aria-label": "Fechar", children: jsx(Dismiss24Regular, { "aria-hidden": "true" }) }))] }) }));
|
|
2562
2823
|
};
|
|
2563
2824
|
|
|
2564
|
-
var styles$
|
|
2825
|
+
var styles$p = {"card":"Card-module__card___LzN-3","card--hoverable":"Card-module__card--hoverable___orpJZ"};
|
|
2565
2826
|
|
|
2566
2827
|
function Card({ children, className, hoverable }) {
|
|
2567
|
-
return (jsx("main", { className: clsx(styles$
|
|
2828
|
+
return (jsx("main", { className: clsx(styles$p['card'], hoverable && styles$p['card--hoverable'], className), children: children }));
|
|
2568
2829
|
}
|
|
2569
2830
|
|
|
2570
2831
|
const CheckSmall = ({ className = '', width = 12, height = 10, fill = 'white', ...restProps }) => {
|
|
@@ -2575,22 +2836,22 @@ const CheckHalf = ({ className = '', width = 16, height = 16, fill = 'white', ..
|
|
|
2575
2836
|
return (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: jsx("g", { id: "Icons/check_indeterminate_small", children: jsx("path", { id: "icon", d: "M3 9V7H13V9H3Z", fill: fill }) }) }));
|
|
2576
2837
|
};
|
|
2577
2838
|
|
|
2578
|
-
var styles$
|
|
2839
|
+
var styles$o = {"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"};
|
|
2579
2840
|
|
|
2580
2841
|
const Checkbox = ({ id, label, onCheckedChange, checked, disabled, className, style, scale = 1, indeterminate = false, ...rest }) => {
|
|
2581
2842
|
const componentId = id || React.useId();
|
|
2582
|
-
return (jsxs("div", { className: clsx(styles$
|
|
2583
|
-
[styles$
|
|
2584
|
-
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsx(Checkbox$1.Root, { className: styles$
|
|
2843
|
+
return (jsxs("div", { className: clsx(styles$o.container, className), style: { '--giro-scale': scale, ...style }, children: [jsx("div", { className: clsx(styles$o.wrapperCheckbox, {
|
|
2844
|
+
[styles$o.disabled]: disabled,
|
|
2845
|
+
}), role: "presentation", tabIndex: disabled ? -1 : 0, children: jsx(Checkbox$1.Root, { className: styles$o.root, checked: indeterminate ? 'indeterminate' : checked, id: componentId, onCheckedChange: onCheckedChange, disabled: disabled, "data-disabled": disabled, "data-indeterminate": indeterminate, "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false', ...rest, children: jsx(Checkbox$1.Indicator, { className: styles$o.indicator, children: indeterminate ? jsx(CheckHalf, {}) : jsx(CheckSmall, {}) }) }) }), jsx("label", { className: clsx(styles$o.label, { [styles$o.disabled]: disabled }), htmlFor: componentId, children: label })] }));
|
|
2585
2846
|
};
|
|
2586
2847
|
|
|
2587
|
-
var styles$
|
|
2848
|
+
var styles$n = {"chips":"Chips-module__chips___SOvBe","title":"Chips-module__title___ZhuQi","iconLeft":"Chips-module__iconLeft___tPhnw","iconRight":"Chips-module__iconRight___-HxL2","hasLeftIcon":"Chips-module__hasLeftIcon___D3quS","hasRightIcon":"Chips-module__hasRightIcon___ZMx2Y","brand":"Chips-module__brand___q1Gsm","success":"Chips-module__success___UhxQa","alert":"Chips-module__alert___nvPnr","disabled":"Chips-module__disabled___ElWLI"};
|
|
2588
2849
|
|
|
2589
2850
|
const Chips = ({ children, leftIcon, rightIcon, variant = 'neutral', disabled = false, backgroundColor, textColor, scale = 1, className, style, ...rest }) => {
|
|
2590
|
-
const chipsClass = clsx(styles$
|
|
2591
|
-
[styles$
|
|
2592
|
-
[styles$
|
|
2593
|
-
[styles$
|
|
2851
|
+
const chipsClass = clsx(styles$n.chips, styles$n[variant], {
|
|
2852
|
+
[styles$n.disabled]: disabled,
|
|
2853
|
+
[styles$n.hasLeftIcon]: leftIcon,
|
|
2854
|
+
[styles$n.hasRightIcon]: rightIcon,
|
|
2594
2855
|
}, className);
|
|
2595
2856
|
const colorStyle = {
|
|
2596
2857
|
'--giro-scale': scale,
|
|
@@ -2599,21 +2860,29 @@ const Chips = ({ children, leftIcon, rightIcon, variant = 'neutral', disabled =
|
|
|
2599
2860
|
...style,
|
|
2600
2861
|
};
|
|
2601
2862
|
const isInteractive = typeof rest.onClick === 'function';
|
|
2602
|
-
|
|
2863
|
+
const { onKeyDown: userOnKeyDown, ...otherRest } = rest;
|
|
2864
|
+
const handleKeyDown = (e) => {
|
|
2865
|
+
userOnKeyDown?.(e);
|
|
2866
|
+
if (!e.defaultPrevented && isInteractive && !disabled && (e.key === 'Enter' || e.key === ' ')) {
|
|
2867
|
+
e.preventDefault();
|
|
2868
|
+
rest.onClick?.(e);
|
|
2869
|
+
}
|
|
2870
|
+
};
|
|
2871
|
+
return (jsxs("div", { className: chipsClass, "aria-disabled": disabled, style: colorStyle, role: isInteractive ? 'button' : undefined, tabIndex: isInteractive ? (disabled ? -1 : 0) : undefined, onKeyDown: handleKeyDown, ...otherRest, children: [leftIcon && (jsx("span", { className: styles$n.iconLeft, "aria-hidden": "true", children: leftIcon })), jsx("span", { className: styles$n.title, children: children }), rightIcon && (jsx("span", { className: styles$n.iconRight, "aria-hidden": "true", children: rightIcon }))] }));
|
|
2603
2872
|
};
|
|
2604
2873
|
const MemoizedChips = React__default.memo(Chips);
|
|
2605
2874
|
MemoizedChips.displayName = 'Chips';
|
|
2606
2875
|
|
|
2607
|
-
var styles$
|
|
2876
|
+
var styles$m = {"container":"Container-module__container___exPuE"};
|
|
2608
2877
|
|
|
2609
2878
|
function Container({ children, className }) {
|
|
2610
|
-
return (jsx("main", { className: clsx(styles$
|
|
2879
|
+
return (jsx("main", { className: clsx(styles$m['container'], 'mx-auto', className), children: children }));
|
|
2611
2880
|
}
|
|
2612
2881
|
|
|
2613
|
-
var styles$
|
|
2882
|
+
var styles$l = {"Content":"Popover-module__Content___RIETg","Arrow":"Popover-module__Arrow___ue4Mg"};
|
|
2614
2883
|
|
|
2615
2884
|
const Popover = ({ trigger, content, side = "left", align = "start", sideOffset = 8, open, onOpenChange, asAnchor = false, onOpenAutoFocus, onCloseAutoFocus, showArrow = false, className, ...rest }) => {
|
|
2616
|
-
return (jsxs(Popover$1.Root, { open: open, onOpenChange: onOpenChange, ...rest, children: [asAnchor ? (jsx(Popover$1.Anchor, { asChild: true, children: trigger })) : (jsx(Popover$1.Trigger, { asChild: true, children: trigger })), jsx(Popover$1.Portal, { children: jsxs(Popover$1.Content, { className: clsx(styles$
|
|
2885
|
+
return (jsxs(Popover$1.Root, { open: open, onOpenChange: onOpenChange, ...rest, children: [asAnchor ? (jsx(Popover$1.Anchor, { asChild: true, children: trigger })) : (jsx(Popover$1.Trigger, { asChild: true, children: trigger })), jsx(Popover$1.Portal, { children: jsxs(Popover$1.Content, { className: clsx(styles$l.Content, className), sideOffset: sideOffset, side: side, align: align, onOpenAutoFocus: asAnchor ? (e) => e.preventDefault() : onOpenAutoFocus, onCloseAutoFocus: asAnchor ? (e) => e.preventDefault() : onCloseAutoFocus, onInteractOutside: asAnchor ? (e) => e.preventDefault() : undefined, children: [content, showArrow && jsx(Popover$1.Arrow, { className: styles$l.Arrow })] }) })] }));
|
|
2617
2886
|
};
|
|
2618
2887
|
|
|
2619
2888
|
function useInputKeyboardValue(externalRef) {
|
|
@@ -2668,6 +2937,10 @@ const removeKeyFromLayout = (layout, key) => Object.fromEntries(Object.entries(l
|
|
|
2668
2937
|
layoutName,
|
|
2669
2938
|
rows.map((row) => row.split(key).join(' ').replace(/\s+/g, ' ').trim()),
|
|
2670
2939
|
]));
|
|
2940
|
+
const replaceKeyWithBlank = (layout, key) => Object.fromEntries(Object.entries(layout).map(([layoutName, rows]) => [
|
|
2941
|
+
layoutName,
|
|
2942
|
+
rows.map((row) => row.split(key).join('{//}')),
|
|
2943
|
+
]));
|
|
2671
2944
|
const QWERTY_LOWERCASE = [
|
|
2672
2945
|
'1 2 3 4 5 6 7 8 9 0',
|
|
2673
2946
|
'q w e r t y u i o p',
|
|
@@ -2725,7 +2998,7 @@ const NATIVE_LAYOUTS = {
|
|
|
2725
2998
|
const NATIVE_LAYOUT_KEYS = new Set([
|
|
2726
2999
|
'default', 'numeric',
|
|
2727
3000
|
]);
|
|
2728
|
-
const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFixed = false, showEnterKey = true) => {
|
|
3001
|
+
const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFixed = false, showEnterKey = true, showTypeSwitchKey = true) => {
|
|
2729
3002
|
const layout = NATIVE_LAYOUTS[type] ?? NATIVE_LAYOUTS.default ?? null;
|
|
2730
3003
|
if (!layout)
|
|
2731
3004
|
return null;
|
|
@@ -2739,6 +3012,10 @@ const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFi
|
|
|
2739
3012
|
if (!showEnterKey) {
|
|
2740
3013
|
computedLayout = removeKeyFromLayout(computedLayout, ENTER_KEY);
|
|
2741
3014
|
}
|
|
3015
|
+
if (!showTypeSwitchKey) {
|
|
3016
|
+
computedLayout = removeKeyFromLayout(computedLayout, '{numbers}');
|
|
3017
|
+
computedLayout = replaceKeyWithBlank(computedLayout, '{abc}');
|
|
3018
|
+
}
|
|
2742
3019
|
if (isFixed) {
|
|
2743
3020
|
computedLayout = Object.fromEntries(Object.entries(computedLayout).map(([layoutName, rows]) => [
|
|
2744
3021
|
layoutName,
|
|
@@ -2764,7 +3041,7 @@ const SHIFT_TOGGLES = {
|
|
|
2764
3041
|
alt2: 'alt',
|
|
2765
3042
|
};
|
|
2766
3043
|
|
|
2767
|
-
var styles$
|
|
3044
|
+
var styles$k = {"container":"VirtualKeyboard-module__container___A-e0I","layout--numeric":"VirtualKeyboard-module__layout--numeric___zfd7G","mode--fixed":"VirtualKeyboard-module__mode--fixed___1eFY1","layout--default":"VirtualKeyboard-module__layout--default___qyY1b","textFieldContainer":"VirtualKeyboard-module__textFieldContainer___XxGen","keyboardWrapper":"VirtualKeyboard-module__keyboardWrapper___jryTf","keyboardNumpadActive":"VirtualKeyboard-module__keyboardNumpadActive___jPpJD","overlay":"VirtualKeyboard-module__overlay___a5y7i","overlayOpen":"VirtualKeyboard-module__overlayOpen___hREu-","textFieldWrapper":"VirtualKeyboard-module__textFieldWrapper___bmi-z","keyPreview":"VirtualKeyboard-module__keyPreview___oWaO1","accentMenu":"VirtualKeyboard-module__accentMenu___A6tTy","accentMenuRow":"VirtualKeyboard-module__accentMenuRow___3kbvT","accentOption":"VirtualKeyboard-module__accentOption___ao-Ta"};
|
|
2768
3045
|
|
|
2769
3046
|
const LONG_PRESS_DELAY_MS = 400;
|
|
2770
3047
|
const ACCENT_OPTIONS = {
|
|
@@ -2804,12 +3081,12 @@ const ACCENT_OPTIONS = {
|
|
|
2804
3081
|
* <VirtualKeyboard targetRef={inputRef} value={value} onChange={setValue} />
|
|
2805
3082
|
* ```
|
|
2806
3083
|
*/
|
|
2807
|
-
const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onChange, onKeyPress, maxLength, Emoji = false, className, id,
|
|
3084
|
+
const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onChange, onKeyPress, onTypeChange, maxLength, Emoji = false, className, id, placeholder = 'Digite aqui...', helperText, error, errorMessage, targetRef, textFieldScale = 1, showEnterKey = true, showTypeSwitchKey = true, }) => {
|
|
2808
3085
|
const [layoutName, setLayoutName] = useState('default');
|
|
2809
3086
|
const [capsLockOn, setCapsLockOn] = useState(false);
|
|
2810
3087
|
const [accentMenu, setAccentMenu] = useState(null);
|
|
2811
3088
|
const [accentMenuOffsetX, setAccentMenuOffsetX] = useState(0);
|
|
2812
|
-
const [activeLayout, setActiveLayout] = useState(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey));
|
|
3089
|
+
const [activeLayout, setActiveLayout] = useState(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey));
|
|
2813
3090
|
const visualType = NATIVE_LAYOUT_KEYS.has(type) ? type : 'default';
|
|
2814
3091
|
const [isOpen, setIsOpen] = useState(variant !== 'native');
|
|
2815
3092
|
const hideTimeoutRef = useRef(null);
|
|
@@ -2848,6 +3125,9 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2848
3125
|
useEffect(() => {
|
|
2849
3126
|
syncKeyboardInput(value);
|
|
2850
3127
|
}, [value, syncKeyboardInput]);
|
|
3128
|
+
useEffect(() => {
|
|
3129
|
+
onTypeChange?.(type);
|
|
3130
|
+
}, [type, onTypeChange]);
|
|
2851
3131
|
const scheduleHideIfBlurred = useCallback(() => {
|
|
2852
3132
|
if (variant !== 'native')
|
|
2853
3133
|
return;
|
|
@@ -2922,8 +3202,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
2922
3202
|
useEffect(() => {
|
|
2923
3203
|
setLayoutName('default');
|
|
2924
3204
|
setCapsLockOn(false);
|
|
2925
|
-
setActiveLayout(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey));
|
|
2926
|
-
}, [type, Emoji, variant, showEnterKey]);
|
|
3205
|
+
setActiveLayout(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey));
|
|
3206
|
+
}, [type, Emoji, variant, showEnterKey, showTypeSwitchKey]);
|
|
2927
3207
|
useEffect(() => {
|
|
2928
3208
|
if (!Emoji && layoutName === 'emoticon') {
|
|
2929
3209
|
setLayoutName(type === 'numeric' ? 'abc' : 'default');
|
|
@@ -3165,10 +3445,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3165
3445
|
}
|
|
3166
3446
|
if (button === '{numbers}') {
|
|
3167
3447
|
setLayoutName('numbers');
|
|
3448
|
+
onTypeChange?.('numeric');
|
|
3168
3449
|
return;
|
|
3169
3450
|
}
|
|
3170
3451
|
if (button === '{abc}') {
|
|
3171
3452
|
setLayoutName(baseLayout);
|
|
3453
|
+
onTypeChange?.('default');
|
|
3172
3454
|
return;
|
|
3173
3455
|
}
|
|
3174
3456
|
if (button === '{alt}' || button === '{altright}') {
|
|
@@ -3223,6 +3505,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3223
3505
|
layoutName,
|
|
3224
3506
|
capsLockOn,
|
|
3225
3507
|
onKeyPress,
|
|
3508
|
+
onTypeChange,
|
|
3226
3509
|
Emoji,
|
|
3227
3510
|
variant,
|
|
3228
3511
|
closeAccentMenu,
|
|
@@ -3273,7 +3556,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3273
3556
|
'{bksp}': (baseDisplay['{bksp}'] ?? '').replace(/\s*Apagar$/, ''),
|
|
3274
3557
|
};
|
|
3275
3558
|
}, [visualType, variant]);
|
|
3276
|
-
const keyboardEl = activeLayout ? (jsxs("div", { ref: keyboardWrapperRef, className: clsx(styles$
|
|
3559
|
+
const keyboardEl = activeLayout ? (jsxs("div", { ref: keyboardWrapperRef, className: clsx(styles$k.keyboardWrapper, ((type === 'numeric' && layoutName === 'default') || layoutName === 'numbers' || type === 'default') && styles$k.keyboardNumpadActive), onPointerDownCapture: handleLongPressStart, onPointerUpCapture: handleLongPressEnd, onPointerLeave: handleLongPressEnd, onPointerCancelCapture: handleLongPressEnd, children: [jsx(Keyboard, { keyboardRef: (instance) => {
|
|
3277
3560
|
keyboardInstanceRef.current = instance;
|
|
3278
3561
|
if (instance) {
|
|
3279
3562
|
instance.setInput(valueRef.current);
|
|
@@ -3292,17 +3575,17 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3292
3575
|
}
|
|
3293
3576
|
return createPortal(createElement(Icon), slot, `icon-${key}`);
|
|
3294
3577
|
});
|
|
3295
|
-
})(), keyPreview && typeof document !== 'undefined' && createPortal(jsx("div", { ref: keyPreviewRef, className: styles$
|
|
3578
|
+
})(), keyPreview && typeof document !== 'undefined' && createPortal(jsx("div", { ref: keyPreviewRef, className: styles$k.keyPreview, style: {
|
|
3296
3579
|
top: keyPreview.top,
|
|
3297
3580
|
left: keyPreview.left + keyPreviewOffsetX,
|
|
3298
3581
|
width: portalSizes.preview,
|
|
3299
3582
|
height: portalSizes.preview,
|
|
3300
3583
|
...(portalSizes.fontSize ? { fontSize: portalSizes.fontSize } : {}),
|
|
3301
3584
|
}, "aria-hidden": true, children: keyPreview.char }), document.body), accentMenu && (typeof document !== 'undefined' &&
|
|
3302
|
-
createPortal(jsx("div", { ref: accentMenuRef, className: styles$
|
|
3585
|
+
createPortal(jsx("div", { ref: accentMenuRef, className: styles$k.accentMenu, style: {
|
|
3303
3586
|
top: accentMenu.top,
|
|
3304
3587
|
left: accentMenu.left + accentMenuOffsetX,
|
|
3305
|
-
}, role: "listbox", "aria-label": `Opcoes de acento para ${accentMenu.sourceKey}`, children: Array.from({ length: Math.ceil(accentMenu.options.length / 5) }, (_, rowIndex) => accentMenu.options.slice(rowIndex * 5, rowIndex * 5 + 5)).map((rowOptions, rowIndex) => (jsx("div", { className: styles$
|
|
3588
|
+
}, role: "listbox", "aria-label": `Opcoes de acento para ${accentMenu.sourceKey}`, children: Array.from({ length: Math.ceil(accentMenu.options.length / 5) }, (_, rowIndex) => accentMenu.options.slice(rowIndex * 5, rowIndex * 5 + 5)).map((rowOptions, rowIndex) => (jsx("div", { className: styles$k.accentMenuRow, children: rowOptions.map((option) => (jsx("button", { type: "button", className: styles$k.accentOption, style: {
|
|
3306
3589
|
minWidth: portalSizes.option,
|
|
3307
3590
|
height: portalSizes.option,
|
|
3308
3591
|
...(portalSizes.fontSize ? { fontSize: portalSizes.fontSize } : {}),
|
|
@@ -3311,12 +3594,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
|
|
|
3311
3594
|
event.stopPropagation();
|
|
3312
3595
|
}, onClick: () => handleAccentSelect(option), children: option }, `${accentMenu.sourceKey}-${option}`))) }, rowIndex))) }), document.body))] })) : null;
|
|
3313
3596
|
if (variant === 'native' && typeof document !== 'undefined') {
|
|
3314
|
-
return createPortal(jsx("div", { id: id, className: clsx(styles$
|
|
3597
|
+
return createPortal(jsx("div", { id: id, className: clsx(styles$k.overlay, { [styles$k.overlayOpen]: isOpen }, styles$k[`layout--${visualType}`], className), children: keyboardEl }), document.body);
|
|
3315
3598
|
}
|
|
3316
|
-
return (jsxs("div", { id: id, className: clsx(styles$
|
|
3599
|
+
return (jsxs("div", { id: id, className: clsx(styles$k.container, styles$k[`mode--${variant}`], styles$k[`layout--${visualType}`], className), children: [variant === 'fixed' && (jsx("div", { className: styles$k.textFieldContainer, children: jsx(TextField$1, { placeholder: placeholder, value: value, onChange: onChange, helperText: helperText, error: error, errorMessage: errorMessage, readOnly: true, disableAutoComplete: true, maxLength: maxLength, attachedToVirtualKeyboard: true, className: styles$k.textFieldWrapper, scale: textFieldScale }) })), keyboardEl] }));
|
|
3317
3600
|
};
|
|
3318
3601
|
|
|
3319
|
-
var styles$
|
|
3602
|
+
var styles$j = {"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","inputWithIcon":"TextField-module__inputWithIcon___shqkL","helperText":"TextField-module__helperText___d5QGC","error":"TextField-module__error___IGQzp","disabled":"TextField-module__disabled___roIKP","attachedToVirtualKeyboard":"TextField-module__attachedToVirtualKeyboard___fuO2O","errorWithMessage":"TextField-module__errorWithMessage___m-5AA","clearButtonIcon":"TextField-module__clearButtonIcon___Z2iyc"};
|
|
3320
3603
|
|
|
3321
3604
|
const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
3322
3605
|
if (required && value.trim() === '') {
|
|
@@ -3328,21 +3611,21 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
|
3328
3611
|
return '';
|
|
3329
3612
|
};
|
|
3330
3613
|
|
|
3331
|
-
var styles$
|
|
3614
|
+
var styles$i = {"labelContainer":"index-module__labelContainer___WGyDF","wrapperLabel":"index-module__wrapperLabel___XJzZO","requiredLabel":"index-module__requiredLabel___7oZkh","infoIcon":"index-module__infoIcon___lClx4","errorIcon":"index-module__errorIcon___yN-lq","disabledIcon":"index-module__disabledIcon___89Os7","errorLabel":"index-module__errorLabel___qa6h6","disabledLabel":"index-module__disabledLabel___U9vL8","disabledContainer":"index-module__disabledContainer___MtOvy"};
|
|
3332
3615
|
|
|
3333
3616
|
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false, scale = 1, }) => {
|
|
3334
3617
|
const containerStyle = {
|
|
3335
3618
|
'--giro-scale': scale,
|
|
3336
3619
|
};
|
|
3337
|
-
const container = (jsxs("div", { className: clsx(styles$
|
|
3338
|
-
styles$
|
|
3620
|
+
const container = (jsxs("div", { className: clsx(styles$i.labelContainer, disabled && styles$i.disabledContainer), style: containerStyle, children: [jsxs(Label.Root, { className: clsx(styles$i.wrapperLabel, error && !disabled && styles$i.errorLabel, disabled && styles$i.disabledLabel, className), htmlFor: htmlFor, children: [children, required && jsx("span", { className: styles$i.requiredLabel, children: "*" })] }), tooltip && (jsx("span", { className: disabled ? styles$i.disabledIcon : error ?
|
|
3621
|
+
styles$i.errorIcon : styles$i.infoIcon, children: jsx(Info12Regular, {}) }))] }));
|
|
3339
3622
|
if (tooltip) {
|
|
3340
3623
|
return (jsx(Tooltip, { side: side, align: align, text: tooltipText || '', children: container }));
|
|
3341
3624
|
}
|
|
3342
3625
|
return container;
|
|
3343
3626
|
};
|
|
3344
3627
|
|
|
3345
|
-
const TextField =
|
|
3628
|
+
const TextField = ({ ref, className, style, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, icon, scale = 1, onBlur, onFocus, name, persistIcon = false, virtualKeyboard, attachedToVirtualKeyboard, disableAutoComplete = false, ...rest }) => {
|
|
3346
3629
|
const normalizeValue = (val) => {
|
|
3347
3630
|
return val === undefined || val === null ? '' : String(val);
|
|
3348
3631
|
};
|
|
@@ -3393,7 +3676,7 @@ const TextField = forwardRef(({ className, style, value, label, placeholder, typ
|
|
|
3393
3676
|
setIsFocused(true);
|
|
3394
3677
|
onFocus?.(e);
|
|
3395
3678
|
}, [onFocus]);
|
|
3396
|
-
const showCustomIcon = inputValue.trim().length === 0 && icon;
|
|
3679
|
+
const showCustomIcon = (inputValue.trim().length === 0 || persistIcon) && icon;
|
|
3397
3680
|
const showClearIcon = isFocused && inputValue.trim().length > 0;
|
|
3398
3681
|
const hasError = Boolean(inputError) || Boolean(error);
|
|
3399
3682
|
const displayHelperText = (error ? errorMessage : undefined) || inputError || helperText || '\u00A0';
|
|
@@ -3403,29 +3686,28 @@ const TextField = forwardRef(({ className, style, value, label, placeholder, typ
|
|
|
3403
3686
|
? `${componentId}-helper`
|
|
3404
3687
|
: undefined;
|
|
3405
3688
|
const containerStyle = { '--giro-scale': scale };
|
|
3406
|
-
const containerClass = clsx(styles$
|
|
3407
|
-
[styles$
|
|
3408
|
-
[styles$
|
|
3409
|
-
[styles$
|
|
3410
|
-
[styles$
|
|
3411
|
-
[className]: className,
|
|
3689
|
+
const containerClass = clsx(styles$j.container, className, {
|
|
3690
|
+
[styles$j.attachedToVirtualKeyboard]: attachedToVirtualKeyboard,
|
|
3691
|
+
[styles$j.disabled]: disabled,
|
|
3692
|
+
[styles$j.error]: error,
|
|
3693
|
+
[styles$j.errorWithMessage]: !!errorMessage,
|
|
3412
3694
|
});
|
|
3413
|
-
return (jsxs("div", { className: containerClass, style: { ...containerStyle, ...style }, children: [label && (jsx(LabelComponent, { scale: scale, htmlFor: componentId, required: required, tooltip:
|
|
3414
|
-
[styles$
|
|
3415
|
-
}) }), showCustomIcon && jsx("span", { className: styles$
|
|
3695
|
+
return (jsxs("div", { className: containerClass, style: { ...containerStyle, ...style }, children: [label && (jsx(LabelComponent, { scale: scale, htmlFor: componentId, required: required, tooltip: !!tooltipText, tooltipText: tooltipText, side: tooltipSide, align: tooltipAlign, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$j.inputWrapper, children: [jsxs("div", { className: styles$j.inputContainer, children: [jsx("input", { ...rest, ref: setInputRefs, id: componentId, name: name, type: type, value: inputValue, placeholder: placeholder, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": hasError, "aria-required": required, "aria-describedby": helperId, inputMode: (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') ? 'none' : rest.inputMode, autoComplete: (disableAutoComplete || virtualKeyboard === 'default' || virtualKeyboard === 'numeric') ? 'off' : rest.autoComplete, className: clsx({
|
|
3696
|
+
[styles$j.inputWithIcon]: showCustomIcon || showClearIcon,
|
|
3697
|
+
}) }), showCustomIcon && jsx("span", { className: styles$j.icon, children: icon }), showClearIcon && (jsx("button", { type: "button", className: styles$j.clearButton, onMouseDown: (e) => {
|
|
3416
3698
|
e.preventDefault();
|
|
3417
3699
|
handleClear();
|
|
3418
|
-
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx("span", { className: styles$
|
|
3700
|
+
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx("span", { className: styles$j.clearButtonIcon, children: jsx(Dismiss16Regular, {}) }) }))] }), ((error && errorMessage) || inputError || helperText) && (jsx("span", { id: helperId, className: styles$j.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText }))] }), (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') && (jsx("div", { className: "virtualKeyboardWrapper", children: jsx(VirtualKeyboard, { variant: "native", type: virtualKeyboard, value: inputValue, maxLength: maxLength, targetRef: inputRef, onChange: (val) => {
|
|
3419
3701
|
if (!disabled && (!maxLength || val.length <= maxLength)) {
|
|
3420
3702
|
setInputValue(val);
|
|
3421
3703
|
onChange?.(val);
|
|
3422
3704
|
}
|
|
3423
3705
|
} }) }))] }));
|
|
3424
|
-
}
|
|
3706
|
+
};
|
|
3425
3707
|
TextField.displayName = 'TextField';
|
|
3426
3708
|
var TextField$1 = React__default.memo(TextField);
|
|
3427
3709
|
|
|
3428
|
-
var styles$
|
|
3710
|
+
var styles$h = {"datePicker":"DatePicker-module__datePicker___raJYg","textfieldContainer":"DatePicker-module__textfieldContainer___yy8pT","datePickerIcon":"DatePicker-module__datePickerIcon___XCZsn","datePickerIconDisabled":"DatePicker-module__datePickerIconDisabled___BB-Gx"};
|
|
3429
3711
|
|
|
3430
3712
|
function formatDate(date, locale = 'pt-br') {
|
|
3431
3713
|
if (!date || !(date instanceof Date)) {
|
|
@@ -3647,7 +3929,7 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
|
|
|
3647
3929
|
}
|
|
3648
3930
|
}
|
|
3649
3931
|
};
|
|
3650
|
-
return (jsx("div", { ref: wrapperRef, className: clsx(styles$
|
|
3932
|
+
return (jsx("div", { ref: wrapperRef, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsx(TextField$1, { className: styles$h.textfieldContainer, type: "tel", icon: jsx(Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
|
|
3651
3933
|
handleTextFieldChange(String(e));
|
|
3652
3934
|
}, onKeyDown: handleKeyDown, onFocus: handleFocus, persistIcon: true, autoComplete: "off", value: displayValue, helperText: !externalError ? (helperText || undefined) : undefined, errorMessage: externalError ? combinedHelperText : undefined, error: hasValidationError ? true : undefined, maxLength: 10, required: required, label: label, disabled: disabled, scale: scale, id: fieldId, "data-testid": testId, placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": calendarId, "aria-invalid": hasValidationError, "aria-describedby": externalError ? undefined : (helperText ? `${fieldId}-help` : undefined) }), content: jsx(Calendar, { selected: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy', minDate: minDate, maxDate: maxDate, scale: scale, id: calendarId, onClear: () => {
|
|
3653
3935
|
handleDateChange(null);
|
|
@@ -3656,11 +3938,11 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
|
|
|
3656
3938
|
};
|
|
3657
3939
|
var DatePicker_default = React__default.memo(DatePicker);
|
|
3658
3940
|
|
|
3659
|
-
var styles$
|
|
3941
|
+
var styles$g = {"DialogOverlay":"Dialog-module__DialogOverlay___LEX2O","DialogContent":"Dialog-module__DialogContent___ziVXb","DialogTitle":"Dialog-module__DialogTitle___ay1tD","DialogDescription":"Dialog-module__DialogDescription___odslw","DivButtons":"Dialog-module__DivButtons___BiwX-"};
|
|
3660
3942
|
|
|
3661
|
-
const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsx(AlertDialog.Root, { open: show, ...rest, children: jsxs(AlertDialog.Portal, { children: [jsx(AlertDialog.Overlay, { className: styles$
|
|
3943
|
+
const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsx(AlertDialog.Root, { open: show, ...rest, children: jsxs(AlertDialog.Portal, { children: [jsx(AlertDialog.Overlay, { className: styles$g.DialogOverlay }), jsxs(AlertDialog.Content, { className: clsx(styles$g.DialogContent, className), children: [jsx(AlertDialog.Title, { className: styles$g.DialogTitle, children: title }), jsx(AlertDialog.Description, { className: styles$g.DialogDescription, children: bodyContent }), jsxs("div", { className: styles$g.DivButtons, children: [!!(textSecondaryAction && textSecondaryAction.trim()) && (jsx(AlertDialog.Cancel, { asChild: true, children: jsx(Button, { variant: "outlined", ...(onSecondaryAction && { onClick: onSecondaryAction }), children: textSecondaryAction }) })), jsx(AlertDialog.Action, { asChild: true, children: jsx(Button, { variant: "filled", ...(onPrimaryAction && { onClick: onPrimaryAction }), children: textPrimaryAction }) })] })] })] }) }));
|
|
3662
3944
|
|
|
3663
|
-
var styles$
|
|
3945
|
+
var styles$f = {"drawerShadow":"Drawer-module__drawerShadow___0Z6iL","drawerShadow--visible":"Drawer-module__drawerShadow--visible___FspoH","drawerSidebar":"Drawer-module__drawerSidebar___cdyyb","drawerSidebar--open":"Drawer-module__drawerSidebar--open___ee2-Y","drawerSidebar--disabled":"Drawer-module__drawerSidebar--disabled___MYrBI","drawerTitleClose":"Drawer-module__drawerTitleClose___QzqN-","drawerTitle":"Drawer-module__drawerTitle___naMX0","drawerChildren":"Drawer-module__drawerChildren___xGdg9","drawerHeaderContent":"Drawer-module__drawerHeaderContent___NLSwj"};
|
|
3664
3946
|
|
|
3665
3947
|
const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = false, onOverlayClick, closeOnOverlayClick = true, closeOnEscape = true, ...rest }) => {
|
|
3666
3948
|
const internalClose = useCallback(() => {
|
|
@@ -3709,19 +3991,189 @@ const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClos
|
|
|
3709
3991
|
event.stopPropagation();
|
|
3710
3992
|
internalClose();
|
|
3711
3993
|
};
|
|
3712
|
-
return createPortal(jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$
|
|
3713
|
-
[styles$
|
|
3714
|
-
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$
|
|
3715
|
-
[styles$
|
|
3716
|
-
[styles$
|
|
3994
|
+
return createPortal(jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$f['drawerShadow'], {
|
|
3995
|
+
[styles$f['drawerShadow--visible']]: isOpen,
|
|
3996
|
+
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$f['drawerSidebar'], {
|
|
3997
|
+
[styles$f['drawerSidebar--open']]: isOpen,
|
|
3998
|
+
[styles$f['drawerSidebar--disabled']]: disabled,
|
|
3717
3999
|
}, className), style: {
|
|
3718
4000
|
'--drawer-custom-width': customWidth,
|
|
3719
|
-
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, ...rest, children: [jsxs("div", { className: styles$
|
|
4001
|
+
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, ...rest, children: [jsxs("div", { className: styles$f.drawerTitleClose, children: [jsx("div", { className: styles$f.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsx("div", { className: styles$f.drawerHeaderContent, children: headerContent })), jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsx("div", { className: styles$f.drawerChildren, "data-testid": "drawer-content", children: children }), footer] })] }), document.body);
|
|
4002
|
+
};
|
|
4003
|
+
|
|
4004
|
+
var styles$e = {"container":"FileUpload-module__container___hFeKV","dropZone":"FileUpload-module__dropZone___716hF","disabled":"FileUpload-module__disabled___mwePo","alert":"FileUpload-module__alert___Dnzqc","dragging":"FileUpload-module__dragging___XZghy","emptyState":"FileUpload-module__emptyState___6Ll9D","uploadIcon":"FileUpload-module__uploadIcon___MkBLe","uploadText":"FileUpload-module__uploadText___VWc9g","alertIcon":"FileUpload-module__alertIcon___pTaMS","alertText":"FileUpload-module__alertText___sfV4z","fileList":"FileUpload-module__fileList___K6KQD","thumb":"FileUpload-module__thumb___eg59D","removeButton":"FileUpload-module__removeButton___jUFNv","thumbClip":"FileUpload-module__thumbClip___sP9wp","thumbImage":"FileUpload-module__thumbImage___Swxhd","thumbFile":"FileUpload-module__thumbFile___y7lg5","thumbFileName":"FileUpload-module__thumbFileName___LPSCX","helperText":"FileUpload-module__helperText___DzPqP","errorText":"FileUpload-module__errorText___cHd1Z"};
|
|
4005
|
+
|
|
4006
|
+
const truncateFileName = (fileName, maxChars = 18) => {
|
|
4007
|
+
if (fileName.length <= maxChars)
|
|
4008
|
+
return fileName;
|
|
4009
|
+
const lastDot = fileName.lastIndexOf('.');
|
|
4010
|
+
const hasExtension = lastDot > 0 && lastDot < fileName.length - 1;
|
|
4011
|
+
const baseName = hasExtension ? fileName.substring(0, lastDot) : fileName;
|
|
4012
|
+
const extension = hasExtension ? fileName.substring(lastDot) : '';
|
|
4013
|
+
const reserved = 3 + extension.length; // "..."
|
|
4014
|
+
const available = maxChars - reserved;
|
|
4015
|
+
if (available <= 1) {
|
|
4016
|
+
return fileName.substring(0, maxChars - 3) + '...';
|
|
4017
|
+
}
|
|
4018
|
+
return baseName.substring(0, available) + '...' + extension;
|
|
4019
|
+
};
|
|
4020
|
+
const matchesAccept = (file, accept) => {
|
|
4021
|
+
if (!accept)
|
|
4022
|
+
return true;
|
|
4023
|
+
const types = accept.split(',').map((t) => t.trim().toLowerCase());
|
|
4024
|
+
const fileName = file.name.toLowerCase();
|
|
4025
|
+
const fileType = file.type.toLowerCase();
|
|
4026
|
+
return types.some((type) => {
|
|
4027
|
+
if (type.startsWith('.')) {
|
|
4028
|
+
return fileName.endsWith(type);
|
|
4029
|
+
}
|
|
4030
|
+
if (type.endsWith('/*')) {
|
|
4031
|
+
return fileType.startsWith(type.slice(0, -1));
|
|
4032
|
+
}
|
|
4033
|
+
return fileType === type;
|
|
4034
|
+
});
|
|
3720
4035
|
};
|
|
4036
|
+
const FileUpload = ({ ref, value, onChange, helperText, error = false, errorMessage, maxFileSize, maxFilesQuantity, disabled = false, className, id, accept, multiple = true, description = 'Clique ou arraste os arquivos aqui', descriptionErrorMessage = 'Falha ao subir um ou mais arquivos.', ...rest }) => {
|
|
4037
|
+
const generatedId = useId();
|
|
4038
|
+
const componentId = id || generatedId;
|
|
4039
|
+
const helperId = `${componentId}-helper`;
|
|
4040
|
+
const listId = `${componentId}-list`;
|
|
4041
|
+
const inputRef = useRef(null);
|
|
4042
|
+
const [internalFiles, setInternalFiles] = useState([]);
|
|
4043
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
4044
|
+
const [objectUrls, setObjectUrls] = useState(new Map());
|
|
4045
|
+
const [internalError, setInternalError] = useState(null);
|
|
4046
|
+
const isControlled = value !== undefined;
|
|
4047
|
+
const files = isControlled ? value : internalFiles;
|
|
4048
|
+
useEffect(() => {
|
|
4049
|
+
return () => {
|
|
4050
|
+
objectUrls.forEach((url) => URL.revokeObjectURL(url));
|
|
4051
|
+
};
|
|
4052
|
+
}, [objectUrls]);
|
|
4053
|
+
const getObjectUrl = useCallback((file) => {
|
|
4054
|
+
const key = `${file.name}-${file.size}`;
|
|
4055
|
+
const existing = objectUrls.get(key);
|
|
4056
|
+
if (existing)
|
|
4057
|
+
return existing;
|
|
4058
|
+
const url = URL.createObjectURL(file);
|
|
4059
|
+
setObjectUrls((prev) => new Map(prev).set(key, url));
|
|
4060
|
+
return url;
|
|
4061
|
+
}, [objectUrls]);
|
|
4062
|
+
const revokeUrl = useCallback((file) => {
|
|
4063
|
+
const key = `${file.name}-${file.size}`;
|
|
4064
|
+
setObjectUrls((prev) => {
|
|
4065
|
+
const next = new Map(prev);
|
|
4066
|
+
const url = next.get(key);
|
|
4067
|
+
if (url)
|
|
4068
|
+
URL.revokeObjectURL(url);
|
|
4069
|
+
next.delete(key);
|
|
4070
|
+
return next;
|
|
4071
|
+
});
|
|
4072
|
+
}, []);
|
|
4073
|
+
const processFiles = useCallback((incoming) => {
|
|
4074
|
+
if (disabled)
|
|
4075
|
+
return;
|
|
4076
|
+
const all = Array.from(incoming);
|
|
4077
|
+
const validFiles = all.filter((file) => {
|
|
4078
|
+
if (maxFileSize && file.size > maxFileSize)
|
|
4079
|
+
return false;
|
|
4080
|
+
if (!matchesAccept(file, accept))
|
|
4081
|
+
return false;
|
|
4082
|
+
return true;
|
|
4083
|
+
});
|
|
4084
|
+
const merged = multiple
|
|
4085
|
+
? [...files, ...validFiles]
|
|
4086
|
+
: validFiles.slice(0, 1);
|
|
4087
|
+
const limited = maxFilesQuantity && multiple ? merged.slice(0, maxFilesQuantity) : merged;
|
|
4088
|
+
// Prioridade de erro: tipo > tamanho > quantidade
|
|
4089
|
+
const hasTypeError = all.some((file) => !matchesAccept(file, accept));
|
|
4090
|
+
const hasSizeError = all.some((file) => maxFileSize && file.size > maxFileSize);
|
|
4091
|
+
const hasQuantityError = maxFilesQuantity && multiple && merged.length > maxFilesQuantity;
|
|
4092
|
+
if (hasTypeError && hasSizeError) {
|
|
4093
|
+
setInternalError('Um ou mais arquivos possuem tipo ou tamanho inválido.');
|
|
4094
|
+
}
|
|
4095
|
+
else if (hasTypeError) {
|
|
4096
|
+
setInternalError('Um ou mais arquivos não são do tipo aceito.');
|
|
4097
|
+
}
|
|
4098
|
+
else if (hasSizeError) {
|
|
4099
|
+
setInternalError('Um ou mais arquivos excedem o tamanho máximo permitido.');
|
|
4100
|
+
}
|
|
4101
|
+
else if (hasQuantityError) {
|
|
4102
|
+
setInternalError(`Não é possível adicionar mais de ${maxFilesQuantity} arquivo(s).`);
|
|
4103
|
+
}
|
|
4104
|
+
else {
|
|
4105
|
+
setInternalError(null);
|
|
4106
|
+
}
|
|
4107
|
+
if (!isControlled)
|
|
4108
|
+
setInternalFiles(limited);
|
|
4109
|
+
onChange?.(limited);
|
|
4110
|
+
}, [disabled, files, isControlled, maxFilesQuantity, maxFileSize, multiple, onChange, accept]);
|
|
4111
|
+
const handleInputChange = useCallback((e) => {
|
|
4112
|
+
if (e.target.files) {
|
|
4113
|
+
processFiles(e.target.files);
|
|
4114
|
+
e.target.value = '';
|
|
4115
|
+
}
|
|
4116
|
+
}, [processFiles]);
|
|
4117
|
+
const handleClick = useCallback(() => {
|
|
4118
|
+
if (!disabled)
|
|
4119
|
+
inputRef.current?.click();
|
|
4120
|
+
}, [disabled]);
|
|
4121
|
+
const handleKeyDown = useCallback((e) => {
|
|
4122
|
+
if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
|
|
4123
|
+
e.preventDefault();
|
|
4124
|
+
inputRef.current?.click();
|
|
4125
|
+
}
|
|
4126
|
+
}, [disabled]);
|
|
4127
|
+
const handleDragOver = useCallback((e) => {
|
|
4128
|
+
e.preventDefault();
|
|
4129
|
+
if (!disabled)
|
|
4130
|
+
setIsDragging(true);
|
|
4131
|
+
}, [disabled]);
|
|
4132
|
+
const handleDragLeave = useCallback((e) => {
|
|
4133
|
+
e.preventDefault();
|
|
4134
|
+
setIsDragging(false);
|
|
4135
|
+
}, []);
|
|
4136
|
+
const handleDrop = useCallback((e) => {
|
|
4137
|
+
e.preventDefault();
|
|
4138
|
+
setIsDragging(false);
|
|
4139
|
+
if (!disabled && e.dataTransfer.files.length > 0) {
|
|
4140
|
+
processFiles(e.dataTransfer.files);
|
|
4141
|
+
}
|
|
4142
|
+
}, [disabled, processFiles]);
|
|
4143
|
+
const handleRemove = useCallback((e, index) => {
|
|
4144
|
+
e.stopPropagation();
|
|
4145
|
+
const removed = files[index];
|
|
4146
|
+
revokeUrl(removed);
|
|
4147
|
+
const updated = files.filter((_, i) => i !== index);
|
|
4148
|
+
if (!isControlled)
|
|
4149
|
+
setInternalFiles(updated);
|
|
4150
|
+
onChange?.(updated);
|
|
4151
|
+
}, [files, isControlled, onChange, revokeUrl]);
|
|
4152
|
+
const hasFiles = files.length > 0;
|
|
4153
|
+
const isError = error || !!errorMessage || !!internalError;
|
|
4154
|
+
const displayedHelper = isError ? errorMessage || internalError || helperText : helperText;
|
|
4155
|
+
const setRefs = useCallback((node) => {
|
|
4156
|
+
inputRef.current = node;
|
|
4157
|
+
if (typeof ref === 'function')
|
|
4158
|
+
ref(node);
|
|
4159
|
+
else if (ref)
|
|
4160
|
+
ref.current = node;
|
|
4161
|
+
}, [ref]);
|
|
4162
|
+
return (jsxs("div", { id: componentId, className: clsx(styles$e.container, className), children: [jsx("input", { ref: setRefs, type: "file", accept: accept, multiple: multiple, disabled: disabled, "aria-hidden": "true", tabIndex: -1, style: { display: 'none' }, onChange: handleInputChange, ...rest }), jsxs("div", { role: "button", tabIndex: disabled ? -1 : 0, "aria-label": description, "aria-disabled": disabled, "aria-describedby": displayedHelper ? helperId : undefined, "aria-controls": hasFiles ? listId : undefined, "data-invalid": isError || undefined, className: clsx(styles$e.dropZone, isDragging && styles$e.dragging, isError && styles$e.alert, disabled && styles$e.disabled), onClick: handleClick, onKeyDown: handleKeyDown, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [!hasFiles && !isError && (jsxs("div", { className: styles$e.emptyState, "aria-hidden": "true", children: [jsx("span", { className: styles$e.uploadIcon, children: jsx(DocumentAdd24Regular, {}) }), jsx("span", { className: styles$e.uploadText, children: description })] })), !hasFiles && isError && (jsxs("div", { className: styles$e.emptyState, "aria-hidden": "true", children: [jsx("span", { className: styles$e.alertIcon, children: jsx(Warning24Regular, {}) }), descriptionErrorMessage && (jsx("span", { className: styles$e.alertText, children: descriptionErrorMessage }))] })), hasFiles && (jsx("ul", { id: listId, className: styles$e.fileList, "aria-label": `${files.length} arquivo${files.length !== 1 ? 's' : ''} selecionado${files.length !== 1 ? 's' : ''}`, "aria-live": "polite", children: files.map((file, index) => {
|
|
4163
|
+
const isImage = file.type.startsWith('image/');
|
|
4164
|
+
return (jsxs("li", { className: styles$e.thumb, children: [jsx("div", { className: styles$e.thumbClip, children: isImage ? (jsx("img", { src: getObjectUrl(file), alt: file.name, title: file.name, className: styles$e.thumbImage })) : (jsxs("div", { className: styles$e.thumbFile, "aria-hidden": "true", title: file.name, children: [jsx(Document24Regular, {}), jsx("span", { className: styles$e.thumbFileName, children: truncateFileName(file.name) })] })) }), jsx("button", { type: "button", className: styles$e.removeButton, "aria-label": `Remover ${file.name}`, disabled: disabled, onClick: (e) => handleRemove(e, index), onKeyDown: (e) => {
|
|
4165
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
4166
|
+
e.preventDefault();
|
|
4167
|
+
handleRemove(e, index);
|
|
4168
|
+
}
|
|
4169
|
+
}, children: jsx(Dismiss16Regular, { "aria-hidden": "true" }) })] }, `${file.name}-${index}`));
|
|
4170
|
+
}) }))] }), displayedHelper && (jsx("span", { id: helperId, role: isError ? 'alert' : undefined, className: clsx(styles$e.helperText, isError && styles$e.errorText), children: displayedHelper }))] }));
|
|
4171
|
+
};
|
|
4172
|
+
FileUpload.displayName = 'FileUpload';
|
|
3721
4173
|
|
|
3722
4174
|
var styles$d = {"container":"Filter-module__container___cqntK","panel":"Filter-module__panel___19HqD","search":"Filter-module__search___f0gzj","list":"Filter-module__list___UpBk1","item":"Filter-module__item___oNdeY","itemSelected":"Filter-module__itemSelected___JIpJV","itemText":"Filter-module__itemText___RS--0","itemDisabled":"Filter-module__itemDisabled___X-ktg","itemIcon":"Filter-module__itemIcon___RjJSa","noResults":"Filter-module__noResults___3m6pn","footer":"Filter-module__footer___yYS5j","buttonContent":"Filter-module__buttonContent___28fKe","buttonArrow":"Filter-module__buttonArrow___VJlpc","buttonIcon":"Filter-module__buttonIcon___OOBpZ","triggerWrapper":"Filter-module__triggerWrapper___ptPRL","triggerContent":"Filter-module__triggerContent___LYo9j","body":"Filter-module__body___qsyhk","combinedFooter":"Filter-module__combinedFooter___kTnHP"};
|
|
3723
4175
|
|
|
3724
|
-
const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled = false, className, title = 'Filtrar', drawerWidth = "fit-content",
|
|
4176
|
+
const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled = false, className, title = 'Filtrar', drawerWidth = "fit-content", appliedFilterCount = 0, drawerHeaderContent, children, onApply, onClear, onOpen, onClose, id, ...rest }) => {
|
|
3725
4177
|
const [isOpen, setIsOpen] = useState(false);
|
|
3726
4178
|
const handleOpen = useCallback(() => {
|
|
3727
4179
|
setIsOpen(true);
|
|
@@ -3738,12 +4190,12 @@ const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled
|
|
|
3738
4190
|
const handleClear = useCallback(() => {
|
|
3739
4191
|
onClear?.();
|
|
3740
4192
|
}, [onClear]);
|
|
3741
|
-
return (jsxs("div", { className: clsx(styles$d.triggerWrapper, className), id: id, ...rest, children: [jsx(Button, { variant: variant, disabled: disabled, icon: icon ?? jsx(FilterRegular, {}), iconPosition: "left", onClick: handleOpen, children: jsxs("span", { className: styles$d.triggerContent, children: [buttonText,
|
|
4193
|
+
return (jsxs("div", { className: clsx(styles$d.triggerWrapper, className), id: id, ...rest, children: [jsx(Button, { variant: variant, disabled: disabled, icon: icon ?? jsx(FilterRegular, {}), iconPosition: "left", onClick: handleOpen, children: jsxs("span", { className: styles$d.triggerContent, children: [buttonText, appliedFilterCount > 0 && (jsx(Badge, { badgeValue: appliedFilterCount, filterVariant: true }))] }) }), jsx(Drawer, { isOpen: isOpen, onClose: handleClose, title: title, customWidth: drawerWidth, closeOnOverlayClick: true, closeOnEscape: true, headerContent: drawerHeaderContent, footer: jsxs("div", { className: styles$d.combinedFooter, children: [jsx(Button, { variant: "outlined", onClick: handleClear, children: "Limpar" }), jsx(Button, { onClick: handleApply, children: "Aplicar" })] }), children: jsx("div", { className: styles$d.body, children: children }) })] }));
|
|
3742
4194
|
};
|
|
3743
4195
|
|
|
3744
4196
|
var styles$c = {"search":"Search-module__search___u3QsV","searchLeftIcon":"Search-module__searchLeftIcon___OKOBq","disabled":"Search-module__disabled___adbxO","inputWithClearIcon":"Search-module__inputWithClearIcon___cqvkq","searchClearIcon":"Search-module__searchClearIcon___qX9-h"};
|
|
3745
4197
|
|
|
3746
|
-
const Search =
|
|
4198
|
+
const Search = ({ ref, placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, searchMode = 'instant', onSearch, id, scale = 1, className, style, virtualKeyboard, 'data-testid': testId, ...rest }) => {
|
|
3747
4199
|
const [internalValue, setInternalValue] = useState('');
|
|
3748
4200
|
const { internalRef: inputRef, setRefs: setInputRefs } = useInputKeyboardValue(ref);
|
|
3749
4201
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
@@ -3815,7 +4267,7 @@ const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser
|
|
|
3815
4267
|
setInternalValue(val);
|
|
3816
4268
|
}
|
|
3817
4269
|
} }) }))] }));
|
|
3818
|
-
}
|
|
4270
|
+
};
|
|
3819
4271
|
Search.displayName = 'Search';
|
|
3820
4272
|
|
|
3821
4273
|
const Simple = ({ items, type = 'multiple', selectedIds, onApplyFilter, placeholder = 'Selecionar...', enableSearch = false, buttonText = 'Filter', icon, variant = 'outlined', onOpen, onClose, side = 'bottom', align = 'start', disabled = false, className, selectedDate, onDateSelect, onClearDate, minDate, maxDate, locale = 'pt-br', id, ...rest }) => {
|
|
@@ -4292,9 +4744,9 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4292
4744
|
}, ...rest, children: [search && (jsx("div", { className: styles$9.searchWrapper, children: jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), jsxs("div", { className: styles$9.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$9.emptyState, children: "Nenhum item encontrado" })), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$9.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
|
|
4293
4745
|
};
|
|
4294
4746
|
|
|
4295
|
-
var styles$8 = {"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"};
|
|
4747
|
+
var styles$8 = {"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"};
|
|
4296
4748
|
|
|
4297
|
-
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, fullscreen = false, ...rest }) => {
|
|
4749
|
+
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, customHeight, fullscreen = false, ...rest }) => {
|
|
4298
4750
|
const contentRef = React.useRef(null);
|
|
4299
4751
|
const handleOpenChange = (open) => {
|
|
4300
4752
|
if (!open) {
|
|
@@ -4307,7 +4759,8 @@ const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeO
|
|
|
4307
4759
|
};
|
|
4308
4760
|
return (jsx(Dialog$1.Root, { open: isOpen, onOpenChange: handleOpenChange, ...rest, children: jsxs(Dialog$1.Portal, { children: [jsx(Dialog$1.Overlay, { className: styles$8.modalOverlay }), jsxs(Dialog$1.Content, { ref: contentRef, className: clsx(styles$8.modalContent, fullscreen && styles$8['modalContent--fullscreen'], className), id: id, style: {
|
|
4309
4761
|
'--modal-custom-width': customWidth,
|
|
4310
|
-
|
|
4762
|
+
'--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$8.modalHeader, children: [title && (jsx(Dialog$1.Title, { className: styles$8.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$8.modalBody, children: children }), footer && (jsx("footer", { className: styles$8.modalFooter, children: footer }))] })] }) }));
|
|
4311
4764
|
};
|
|
4312
4765
|
|
|
4313
4766
|
var styles$7 = {"quantity":"Quantity-module__quantity___-vndR","quantityInput":"Quantity-module__quantityInput___xZG-v","disabled":"Quantity-module__disabled___X6p5l"};
|
|
@@ -4571,13 +5024,13 @@ const ExpandableSelectItem = ({ item, variant, onSelect, selectedValues, level =
|
|
|
4571
5024
|
}, role: "button", tabIndex: item.disabled ? -1 : 0, "data-disabled": item.disabled || undefined, "data-selected": isSelected && !hasChildren ? 'true' : undefined, "data-testid": `select-item-${item.value}`, children: [variant === 'icon' && item.icon && (jsx("span", { className: styles$6.icon, children: item.icon })), jsxs("div", { className: styles$6.textContent, children: [jsx("div", { className: styles$6.title, children: item.text }), item.subTitle && jsx("div", { className: styles$6.subTitle, children: item.subTitle })] }), hasChildren && (jsx("span", { className: styles$6.chevron, children: isExpanded ? jsx(ChevronDown16Regular, {}) : jsx(ChevronRight16Regular, {}) }))] }) }), hasChildren && isExpanded && (jsx("div", { className: styles$6.childrenWrapper, children: item.children.map((child) => (jsx(ExpandableSelectItem, { item: child, variant: variant, onSelect: onSelect, selectedValues: selectedValues, level: level + 1 }, child.id || child.value))) }))] }));
|
|
4572
5025
|
};
|
|
4573
5026
|
|
|
4574
|
-
const SelectItem =
|
|
5027
|
+
const SelectItem = ({ ref, text, subTitle, icon, disabled, value, variant, disableFocusOnHover, ...restProps }) => {
|
|
4575
5028
|
return (jsxs("div", { className: clsx(styles$6.itemWrapper, {
|
|
4576
5029
|
[styles$6.disabled]: disabled,
|
|
4577
5030
|
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$6.icon, children: icon })), jsxs(Select$1.Item, { className: clsx(styles$6.item, {
|
|
4578
5031
|
[styles$6.disabled]: disabled,
|
|
4579
5032
|
}), value: value, disabled: disabled, onPointerMove: disableFocusOnHover ? (e) => e.preventDefault() : undefined, ...restProps, children: [jsx(Select$1.ItemText, { className: styles$6.title, children: text }), subTitle && jsx("div", { className: styles$6.subTitle, children: subTitle }), jsx(Select$1.ItemIndicator, { className: styles$6.itemIndicator })] })] }));
|
|
4580
|
-
}
|
|
5033
|
+
};
|
|
4581
5034
|
SelectItem.displayName = 'SelectItem';
|
|
4582
5035
|
|
|
4583
5036
|
const initialState = {
|
|
@@ -4612,7 +5065,7 @@ function selectReducer(state, action) {
|
|
|
4612
5065
|
return state;
|
|
4613
5066
|
}
|
|
4614
5067
|
}
|
|
4615
|
-
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange, enableApiSearch = false, onApiSearch, isSearching = false, }) {
|
|
5068
|
+
function useSelectLogic({ value, required = false, search = false, onValueChange, onOpenChange, enableApiSearch = false, onApiSearch, isSearching = false, error, }) {
|
|
4616
5069
|
const [state, dispatch] = useReducer(selectReducer, {
|
|
4617
5070
|
...initialState,
|
|
4618
5071
|
selectedValues: Array.isArray(value) ? value : value ? [value] : [],
|
|
@@ -4639,6 +5092,14 @@ function useSelectLogic({ value, required = false, search = false, onValueChange
|
|
|
4639
5092
|
const newValues = Array.isArray(value) ? value : value ? [value] : [];
|
|
4640
5093
|
dispatch({ type: 'SET_SELECTED_VALUES', payload: newValues });
|
|
4641
5094
|
}, [value]);
|
|
5095
|
+
useEffect(() => {
|
|
5096
|
+
if (error !== undefined) {
|
|
5097
|
+
dispatch({ type: 'SET_ERROR', payload: error });
|
|
5098
|
+
if (error) {
|
|
5099
|
+
dispatch({ type: 'SET_TOUCHED', payload: true });
|
|
5100
|
+
}
|
|
5101
|
+
}
|
|
5102
|
+
}, [error]);
|
|
4642
5103
|
useEffect(() => {
|
|
4643
5104
|
if (state.isOpen && search) {
|
|
4644
5105
|
setTimeout(() => {
|
|
@@ -4805,7 +5266,7 @@ function useSelectLogic({ value, required = false, search = false, onValueChange
|
|
|
4805
5266
|
};
|
|
4806
5267
|
}
|
|
4807
5268
|
|
|
4808
|
-
const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, errorMessage, disabled = false, className, style, 'aria-label': ariaLabel, 'data-testid': testId,
|
|
5269
|
+
const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, error, errorMessage, disabled = false, className, style, 'aria-label': ariaLabel, 'data-testid': testId, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false, enableApiSearch = false, onApiSearch, isSearching = false, scale = 1, ...rest }) => {
|
|
4809
5270
|
const componentId = useId();
|
|
4810
5271
|
const selectId = `select-${componentId}`;
|
|
4811
5272
|
const viewportRef = useRef(null);
|
|
@@ -4819,6 +5280,7 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
4819
5280
|
enableApiSearch,
|
|
4820
5281
|
onApiSearch,
|
|
4821
5282
|
isSearching,
|
|
5283
|
+
error,
|
|
4822
5284
|
});
|
|
4823
5285
|
useEffect(() => {
|
|
4824
5286
|
const viewport = viewportRef.current;
|
|
@@ -4886,7 +5348,7 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
4886
5348
|
onApiSearch('');
|
|
4887
5349
|
}
|
|
4888
5350
|
};
|
|
4889
|
-
return (jsx(Select$1.Root, { value: variant === 'checkbox' || (search && state.isOpen) ? '' : (state.selectedValues[0] || ''), onValueChange: variant === 'checkbox' ? undefined : actions.handleSingleSelect, required: required, open: state.isOpen, onOpenChange: actions.setOpen, disabled: disabled, ...rest, children: jsxs("div", { className: clsx(styles$6.container, className), style: { ...containerStyle, ...style }, "data-testid": testId, children: [jsx("div", { className: styles$6.fieldContainer, children: jsxs("div", { className: styles$6.containerLabel, children: [jsx(LabelComponent, { htmlFor: selectId, required: required, tooltipText: tooltipText, tooltip:
|
|
5351
|
+
return (jsx(Select$1.Root, { value: variant === 'checkbox' || (search && state.isOpen) ? '' : (state.selectedValues[0] || ''), onValueChange: variant === 'checkbox' ? undefined : actions.handleSingleSelect, required: required, open: state.isOpen, onOpenChange: actions.setOpen, disabled: disabled, ...rest, children: jsxs("div", { className: clsx(styles$6.container, className), style: { ...containerStyle, ...style }, "data-testid": testId, children: [jsx("div", { className: styles$6.fieldContainer, children: jsxs("div", { className: styles$6.containerLabel, children: [jsx(LabelComponent, { htmlFor: selectId, required: required, tooltipText: tooltipText, tooltip: !!tooltipText, side: tooltipSide, align: tooltipAlign, error: state.hasError && state.touched, disabled: disabled, scale: scale, children: label }), jsxs(Select$1.Trigger, { className: clsx(styles$6.trigger, {
|
|
4890
5352
|
[styles$6.error]: state.hasError && state.touched,
|
|
4891
5353
|
[styles$6.disabled]: disabled,
|
|
4892
5354
|
[styles$6.hasValue]: state.selectedValues.length > 0,
|
|
@@ -4958,15 +5420,11 @@ function __rest(s, e) {
|
|
|
4958
5420
|
return t;
|
|
4959
5421
|
}
|
|
4960
5422
|
|
|
4961
|
-
var uid = (function () {
|
|
4962
|
-
return Math.random()
|
|
4963
|
-
.toString(36)
|
|
4964
|
-
.substring(6);
|
|
4965
|
-
});
|
|
4966
|
-
|
|
4967
5423
|
var SVG = function (_a) {
|
|
4968
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"]);
|
|
4969
|
-
var fixedId =
|
|
5425
|
+
var fixedId = useId();
|
|
5426
|
+
if (uniqueKey)
|
|
5427
|
+
fixedId = uniqueKey;
|
|
4970
5428
|
var idClip = "".concat(fixedId, "-diff");
|
|
4971
5429
|
var idGradient = "".concat(fixedId, "-animated-diff");
|
|
4972
5430
|
var idAria = "".concat(fixedId, "-aria");
|
|
@@ -5319,7 +5777,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5319
5777
|
onClose: () => filterItem.onToggle?.(false),
|
|
5320
5778
|
};
|
|
5321
5779
|
if (filterItem.type === 'combined') {
|
|
5322
|
-
return (jsx(Filter, { mode: "combined", buttonText: filterItem.buttonText, icon: filterItem.icon, title: filterItem.title, drawerWidth: filterItem.drawerWidth,
|
|
5780
|
+
return (jsx(Filter, { mode: "combined", buttonText: filterItem.buttonText, icon: filterItem.icon, title: filterItem.title, drawerWidth: filterItem.drawerWidth, appliedFilterCount: filterItem.activeCount, drawerHeaderContent: filterItem.drawerHeaderContent, onApply: filterItem.onApply, onClear: filterItem.onClear, variant: filterItem.variant ?? 'outlined', disabled: filterItem.disabled, children: filterItem.children }, filterItem.id ?? index));
|
|
5323
5781
|
}
|
|
5324
5782
|
if (filterItem.type === 'calendar') {
|
|
5325
5783
|
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));
|
|
@@ -5341,7 +5799,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5341
5799
|
maxWidth: cell.column.columnDef.maxSize !== Number.MAX_SAFE_INTEGER
|
|
5342
5800
|
? cell.column.columnDef.maxSize
|
|
5343
5801
|
: undefined,
|
|
5344
|
-
}, children:
|
|
5802
|
+
}, children: jsx("div", { className: styles$4.tableCellMaxHeight, style: { maxHeight: cell.column.columnDef.meta?.maxHeight ?? '64px' }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id))) }, row.id));
|
|
5345
5803
|
})) : (jsx("tr", { children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: styles$4.tableEmptyCell, children: jsx(EmptyState, { emptyIcon: emptyIcon, emptyTitle: emptyTitle, emptyText: emptyText }) }) })) })] }) }) }), footer && (jsxs("div", { className: styles$4.tablePagination, children: [jsxs("div", { className: styles$4.tablePaginationSelect, children: [jsx("label", { htmlFor: "tablev2-page-size", className: styles$4.tablePaginationLabel, children: "Itens por p\u00E1gina" }), jsx("select", { id: "tablev2-page-size", value: pageSize, onChange: handlePageSizeChange, className: styles$4.tablePaginationSelectInput, children: (footer.pageSizeOptions ?? [10, 25, 50, 100]).map((opt) => (jsx("option", { value: opt, children: opt }, opt))) })] }), jsx("div", { className: styles$4.tablePaginationInfo, children: jsx("span", { children: totalPages > 0
|
|
5346
5804
|
? `${pageIndex + 1} de ${totalPages}`
|
|
5347
5805
|
: '0 páginas' }) }), jsxs("div", { className: styles$4.tablePaginationControls, children: [jsx("button", { className: styles$4.tablePaginationButton, onClick: () => {
|
|
@@ -5357,7 +5815,7 @@ const TableV2 = ({ columns, data, rowSelection: rowSelectionConfig, enableSortin
|
|
|
5357
5815
|
|
|
5358
5816
|
var styles$3 = {"container":"TextArea-module__container___WEBC-","inputWrapper":"TextArea-module__inputWrapper___-omPx","inputContainer":"TextArea-module__inputContainer___0-jKY","footer":"TextArea-module__footer___7XMlj","helperText":"TextArea-module__helperText___709rD","charCount":"TextArea-module__charCount___zdbxM","error":"TextArea-module__error___DWDms","disabled":"TextArea-module__disabled___lHxCa"};
|
|
5359
5817
|
|
|
5360
|
-
const TextArea =
|
|
5818
|
+
const TextArea = ({ ref, className, value, label, placeholder, onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, onBlur, onFocus, name, resize = 'vertical', charCount = false, height, virtualKeyboard, ...rest }) => {
|
|
5361
5819
|
const normalizeValue = (val) => {
|
|
5362
5820
|
return val === undefined || val === null ? '' : String(val);
|
|
5363
5821
|
};
|
|
@@ -5389,20 +5847,20 @@ const TextArea = forwardRef(({ className, value, label, placeholder, onChange, d
|
|
|
5389
5847
|
onFocus?.(e);
|
|
5390
5848
|
}, [onFocus]);
|
|
5391
5849
|
const hasError = Boolean(textareaError) || Boolean(error);
|
|
5392
|
-
const displayHelperText = (error ? errorMessage : undefined) || textareaError || helperText
|
|
5850
|
+
const displayHelperText = (error ? errorMessage : undefined) || textareaError || helperText;
|
|
5393
5851
|
const helperId = (textareaError || error)
|
|
5394
5852
|
? `${componentId}-error`
|
|
5395
5853
|
: helperText
|
|
5396
5854
|
? `${componentId}-helper`
|
|
5397
5855
|
: undefined;
|
|
5398
5856
|
const containerClass = clsx(styles$3.container, disabled && styles$3.disabled, hasError && !disabled && styles$3.error, className);
|
|
5399
|
-
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip:
|
|
5857
|
+
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: !!tooltipText, tooltipText: tooltipText, side: tooltipSide, align: tooltipAlign, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$3.inputWrapper, children: [jsx("div", { className: styles$3.inputContainer, children: jsx("textarea", { ...rest, ref: setTextareaRefs, id: componentId, name: name, value: textareaValue, placeholder: placeholder, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": hasError, "aria-required": required, "aria-describedby": helperId, style: { resize, height }, inputMode: (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') ? 'none' : rest.inputMode }) }), (((error && errorMessage) || textareaError || helperText) || (charCount && maxLength)) && (jsxs("div", { className: styles$3.footer, children: [((error && errorMessage) || textareaError || helperText) && (jsx("span", { id: helperId, className: styles$3.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText })), charCount && maxLength && (jsxs("span", { className: styles$3.charCount, children: [textareaValue.length, "/", maxLength] }))] }))] }), (virtualKeyboard === 'default' || virtualKeyboard === 'numeric') && (jsx("div", { className: "virtualKeyboardWrapper", children: jsx(VirtualKeyboard, { variant: "native", type: virtualKeyboard, maxLength: maxLength, value: textareaValue, targetRef: textareaRef, onChange: (val) => {
|
|
5400
5858
|
if (!disabled && (!maxLength || val.length <= maxLength)) {
|
|
5401
5859
|
setTextareaValue(val);
|
|
5402
5860
|
onChange?.(val);
|
|
5403
5861
|
}
|
|
5404
5862
|
} }) }))] }));
|
|
5405
|
-
}
|
|
5863
|
+
};
|
|
5406
5864
|
TextArea.displayName = 'TextArea';
|
|
5407
5865
|
var TextArea_default = React__default.memo(TextArea);
|
|
5408
5866
|
|
|
@@ -5618,123 +6076,11 @@ const Switch = ({ disabled = false, defaultChecked = false, checked, onCheckedCh
|
|
|
5618
6076
|
return (jsx("div", { className: clsx(styles$1.container, className), style: { '--giro-scale': scale, ...style }, children: jsx(Switch$1.Root, { className: styles$1.switchRoot, disabled: disabled, defaultChecked: defaultChecked, checked: checked, onCheckedChange: onCheckedChange, ...rest, children: jsx(Switch$1.Thumb, { className: styles$1.switchThumb }) }) }));
|
|
5619
6077
|
};
|
|
5620
6078
|
|
|
5621
|
-
var styles = {"
|
|
6079
|
+
var styles = {"container":"VerificationCode-module__container___5Kxo6","inputGroup":"VerificationCode-module__inputGroup___ose3E","input":"VerificationCode-module__input___Vu-jM","inputError":"VerificationCode-module__inputError___gI-Bl","inputDisabled":"VerificationCode-module__inputDisabled___wUj2Y","errorMessage":"VerificationCode-module__errorMessage___NnYtO"};
|
|
5622
6080
|
|
|
5623
|
-
|
|
5624
|
-
* Mapa de regex para validação dos tipos de entrada
|
|
5625
|
-
*/
|
|
5626
|
-
const REGEX_MAP = {
|
|
5627
|
-
numeric: /^[0-9]$/,
|
|
5628
|
-
alpha: /^[a-zA-Z]$/,
|
|
5629
|
-
alphanumeric: /^[a-zA-Z0-9]$/,
|
|
5630
|
-
};
|
|
5631
|
-
/**
|
|
5632
|
-
* Componente VerificationCode para entrada de códigos de verificação
|
|
5633
|
-
*
|
|
5634
|
-
* @description Permite entrada de códigos com múltiplos dígitos,
|
|
5635
|
-
* suportando diferentes tipos de caracteres e navegação por teclado.
|
|
5636
|
-
*
|
|
5637
|
-
* @example
|
|
5638
|
-
* ```tsx
|
|
5639
|
-
* <VerificationCode
|
|
5640
|
-
* length={6}
|
|
5641
|
-
* inputType="numeric"
|
|
5642
|
-
* onComplete={(code) => console.log('Código:', code)}
|
|
5643
|
-
* hasError={false}
|
|
5644
|
-
* />
|
|
5645
|
-
* ```
|
|
5646
|
-
*/
|
|
5647
|
-
const VerificationCode = ({ length = 6, inputType = 'numeric', onComplete, hasError = false, errorMessage, disabled = false, className, ...rest }) => {
|
|
6081
|
+
const VerificationCode = ({ length = 6, validationType = 'numeric', value, defaultValue, onValueChange, autoSubmit = false, onAutoSubmit, name, form, hasError = false, errorMessage, disabled = false, readOnly = false, className, id, }) => {
|
|
5648
6082
|
const validLength = Math.min(Math.max(length, 1), 100);
|
|
5649
|
-
|
|
5650
|
-
const inputsRef = useRef([]);
|
|
5651
|
-
const currentRegex = REGEX_MAP[inputType] || REGEX_MAP.numeric;
|
|
5652
|
-
useEffect(() => {
|
|
5653
|
-
setValues(Array(validLength).fill(''));
|
|
5654
|
-
}, [inputType, validLength]);
|
|
5655
|
-
const handleChange = useCallback((index, value) => {
|
|
5656
|
-
if (!currentRegex.test(value))
|
|
5657
|
-
return;
|
|
5658
|
-
const newValues = [...values];
|
|
5659
|
-
newValues[index] = value;
|
|
5660
|
-
setValues(newValues);
|
|
5661
|
-
if (value && index < validLength - 1) {
|
|
5662
|
-
inputsRef.current[index + 1]?.focus();
|
|
5663
|
-
}
|
|
5664
|
-
if (newValues.every(v => v !== '')) {
|
|
5665
|
-
onComplete?.(newValues.join(''));
|
|
5666
|
-
}
|
|
5667
|
-
}, [values, currentRegex, onComplete, validLength]);
|
|
5668
|
-
const handlePaste = useCallback((e) => {
|
|
5669
|
-
e.preventDefault();
|
|
5670
|
-
const pasteData = e.clipboardData.getData('Text');
|
|
5671
|
-
const valuesToPaste = pasteData.split('').slice(0, validLength);
|
|
5672
|
-
const newValues = [...values];
|
|
5673
|
-
valuesToPaste.forEach((value, index) => {
|
|
5674
|
-
if (currentRegex.test(value)) {
|
|
5675
|
-
newValues[index] = value;
|
|
5676
|
-
}
|
|
5677
|
-
});
|
|
5678
|
-
setValues(newValues);
|
|
5679
|
-
const firstEmptyIndex = newValues.findIndex(v => v === '');
|
|
5680
|
-
const focusIndex = firstEmptyIndex === -1 ? validLength - 1 : firstEmptyIndex;
|
|
5681
|
-
inputsRef.current[focusIndex]?.focus();
|
|
5682
|
-
if (newValues.every(v => v !== '')) {
|
|
5683
|
-
onComplete?.(newValues.join(''));
|
|
5684
|
-
}
|
|
5685
|
-
}, [values, currentRegex, onComplete, validLength]);
|
|
5686
|
-
const handleKeyDown = useCallback((index, e) => {
|
|
5687
|
-
if (e.key === 'Backspace') {
|
|
5688
|
-
e.preventDefault();
|
|
5689
|
-
const newValues = [...values];
|
|
5690
|
-
if (values[index]) {
|
|
5691
|
-
newValues[index] = '';
|
|
5692
|
-
setValues(newValues);
|
|
5693
|
-
}
|
|
5694
|
-
else if (index > 0) {
|
|
5695
|
-
inputsRef.current[index - 1]?.focus();
|
|
5696
|
-
newValues[index - 1] = '';
|
|
5697
|
-
setValues(newValues);
|
|
5698
|
-
}
|
|
5699
|
-
}
|
|
5700
|
-
if (e.key === 'Delete') {
|
|
5701
|
-
e.preventDefault();
|
|
5702
|
-
const newValues = [...values];
|
|
5703
|
-
newValues[index] = '';
|
|
5704
|
-
setValues(newValues);
|
|
5705
|
-
if (index < validLength - 1) {
|
|
5706
|
-
inputsRef.current[index + 1]?.focus();
|
|
5707
|
-
}
|
|
5708
|
-
}
|
|
5709
|
-
if (e.key === 'ArrowLeft' && index > 0) {
|
|
5710
|
-
e.preventDefault();
|
|
5711
|
-
inputsRef.current[index - 1]?.focus();
|
|
5712
|
-
}
|
|
5713
|
-
if (e.key === 'ArrowRight' && index < validLength - 1) {
|
|
5714
|
-
e.preventDefault();
|
|
5715
|
-
inputsRef.current[index + 1]?.focus();
|
|
5716
|
-
}
|
|
5717
|
-
}, [values, validLength]);
|
|
5718
|
-
const handleKeyUp = useCallback((index, e) => {
|
|
5719
|
-
if (e.key === 'Enter') {
|
|
5720
|
-
e.preventDefault();
|
|
5721
|
-
if (values[index] && index < validLength - 1) {
|
|
5722
|
-
inputsRef.current[index + 1]?.focus();
|
|
5723
|
-
}
|
|
5724
|
-
else if (values[index] && index === validLength - 1) {
|
|
5725
|
-
inputsRef.current[index]?.blur();
|
|
5726
|
-
}
|
|
5727
|
-
}
|
|
5728
|
-
}, [values, validLength]);
|
|
5729
|
-
const handleFocus = useCallback((e) => {
|
|
5730
|
-
e.target.select();
|
|
5731
|
-
}, []);
|
|
5732
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: clsx(styles['zds-verification-code__container'], className), ...rest, children: values.map((val, i) => (jsx("input", { id: `zds-verification-code__element-${i}`, ref: (el) => {
|
|
5733
|
-
inputsRef.current[i] = el;
|
|
5734
|
-
}, 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'], {
|
|
5735
|
-
[styles['zds-verification-code__has-error']]: hasError,
|
|
5736
|
-
[styles['zds-verification-code__filled']]: val,
|
|
5737
|
-
}), "aria-invalid": hasError, "aria-label": `Dígito ${i + 1} de ${validLength}`, "aria-describedby": hasError && errorMessage ? 'verification-code-error' : undefined, autoComplete: "one-time-code" }, i))) }), hasError && errorMessage && (jsx("div", { id: "verification-code-error", className: styles['zds-verification-code__error'], role: "alert", "aria-live": "assertive", children: errorMessage }))] }));
|
|
6083
|
+
return (jsxs("div", { id: id, className: clsx(styles.container, className), children: [jsxs(unstable_OneTimePasswordField.Root, { className: styles.inputGroup, validationType: validationType, value: value, defaultValue: defaultValue, onValueChange: onValueChange, autoSubmit: autoSubmit, onAutoSubmit: onAutoSubmit, name: name, form: form, disabled: disabled, readOnly: readOnly, "data-error": hasError || undefined, children: [Array.from({ length: validLength }, (_, i) => (jsx(unstable_OneTimePasswordField.Input, { className: clsx(styles.input, hasError && styles.inputError, disabled && styles.inputDisabled) }, i))), jsx(unstable_OneTimePasswordField.HiddenInput, {})] }), hasError && errorMessage && (jsx("span", { className: styles.errorMessage, children: errorMessage }))] }));
|
|
5738
6084
|
};
|
|
5739
6085
|
|
|
5740
6086
|
function useApiSimulation(config = {}) {
|
|
@@ -6032,5 +6378,5 @@ function useInfiniteScroll({ status, page, lastPage, onLoadMore, threshold = 0.1
|
|
|
6032
6378
|
};
|
|
6033
6379
|
}
|
|
6034
6380
|
|
|
6035
|
-
export { Avatar, Badge, Button, Calendar, Callout, Card, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, Dialog, Drawer, Filter, ListItem, Menu, Modal, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, Table, TableHeader, TablePagination, TableV2, TextArea_default as TextArea, TextField$1 as TextField, Toast, ToastContainer, ToastProvider, Tooltip, VerificationCode, VirtualKeyboard, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
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, Table, TableHeader, TablePagination, TableV2, TextArea_default as TextArea, TextField$1 as TextField, Toast, ToastContainer, ToastProvider, Tooltip, VerificationCode, VirtualKeyboard, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
6036
6382
|
//# sourceMappingURL=index.esm.js.map
|