@giro-ds/react 4.0.0 → 5.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/dts-temp/components/Calendar/Calendar.d.ts +3 -0
- package/dist/dts-temp/components/Calendar/Calendar.types.d.ts +55 -0
- package/dist/{components → dts-temp/components}/DatePicker/DatePicker.types.d.ts +5 -3
- package/dist/dts-temp/components/DatePicker/Utils/DateUtils.d.ts +6 -0
- package/dist/{components → dts-temp/components}/Dialog/Dialog.types.d.ts +3 -4
- package/dist/dts-temp/components/Drawer/Drawer.d.ts +4 -0
- package/dist/{components → dts-temp/components}/Drawer/Drawer.types.d.ts +2 -0
- package/dist/{components → dts-temp/components}/Filter/Filter.types.d.ts +15 -6
- package/dist/dts-temp/components/Filter/index.d.ts +2 -0
- package/dist/dts-temp/components/Popover/Popover.types.d.ts +25 -0
- package/dist/{components → dts-temp/components}/Table/TableHeader.d.ts +5 -3
- package/dist/dts-temp/components/TextArea/TextArea.d.ts +4 -0
- package/dist/dts-temp/components/TextArea/TextArea.types.d.ts +56 -0
- package/dist/dts-temp/components/TextArea/index.d.ts +2 -0
- package/dist/{components → dts-temp/components}/TextField/TextField.types.d.ts +9 -1
- package/dist/dts-temp/components/TextField/utils/__tests__/validation.test.d.ts +1 -0
- package/dist/dts-temp/components/Toast/__tests__/Toast.test.d.ts +1 -0
- package/dist/dts-temp/components/Tooltip/__tests__/Tooltip.test.d.ts +1 -0
- package/dist/{components → dts-temp/components}/index.d.ts +2 -2
- package/dist/dts-temp/index.d.ts +1 -0
- package/dist/index.cjs +429 -703
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +431 -705
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/components/Calendar/Calendar.d.ts +0 -3
- package/dist/components/Calendar/Calendar.types.d.ts +0 -109
- package/dist/components/DatePicker/DateUtils.d.ts +0 -23
- package/dist/components/Drawer/Drawer.d.ts +0 -9
- package/dist/components/Dropdown/Dropdown.d.ts +0 -4
- package/dist/components/Dropdown/Dropdown.types.d.ts +0 -91
- package/dist/components/Dropdown/DropdownUtils.d.ts +0 -8
- package/dist/components/Dropdown/index.d.ts +0 -2
- package/dist/components/Filter/index.d.ts +0 -2
- package/dist/components/Popover/Popover.types.d.ts +0 -8
- package/dist/index.d.ts +0 -1618
- /package/dist/{components → dts-temp/components}/Avatar/Avatar.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Avatar/Avatar.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Avatar/__tests__/Avatar.test.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Avatar/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Badge/Badge.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Badge/Badge.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Badge/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Button/Button.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Button/Button.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Button/__tests__/Button.test.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Button/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Calendar/__tests__/Calendar.test.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Calendar/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Callout/Callout.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Callout/Callout.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Callout/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Checkbox/Checkbox.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Checkbox/Checkbox.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Checkbox/__tests__/Checkbox.test.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Checkbox/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Chips/Chips.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Chips/Chips.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Chips/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Container/Container.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Container/Container.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Container/__tests__/Container.test.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/DatePicker/DatePicker.d.ts +0 -0
- /package/dist/{components/Dialog/__tests__/Dialog.test.d.ts → dts-temp/components/DatePicker/__test__/DatePicker.test.d.ts} +0 -0
- /package/dist/{components → dts-temp/components}/DatePicker/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Dialog/Dialog.d.ts +0 -0
- /package/dist/{components/Menu/__tests__/Menu.test.d.ts → dts-temp/components/Dialog/__tests__/Dialog.test.d.ts} +0 -0
- /package/dist/{components → dts-temp/components}/Dialog/index.d.ts +0 -0
- /package/dist/{components/Popover/__test__/Popover.test.d.ts → dts-temp/components/Drawer/__tests__/Drawer.test.d.ts} +0 -0
- /package/dist/{components → dts-temp/components}/Drawer/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Filter/Filter.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/ListItem/ListItem.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/ListItem/ListItem.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/ListItem/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Menu/Menu.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Menu/Menu.types.d.ts +0 -0
- /package/dist/{components/Radio/__tests__/Radio.test.d.ts → dts-temp/components/Menu/__tests__/Menu.test.d.ts} +0 -0
- /package/dist/{components → dts-temp/components}/Menu/components/MenuItem.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Menu/hooks/useMenuLogic.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Menu/hooks/useSearchLogic.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Menu/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Popover/Popover.d.ts +0 -0
- /package/dist/{components/Search/__tests__/Search.test.d.ts → dts-temp/components/Popover/__test__/Popover.test.d.ts} +0 -0
- /package/dist/{components → dts-temp/components}/Popover/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Quantity/Quantity.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Quantity/Quantity.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Quantity/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Radio/Radio.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Radio/Radio.types.d.ts +0 -0
- /package/dist/{components/Select/__tests__/SelectRadix.test.d.ts → dts-temp/components/Radio/__tests__/Radio.test.d.ts} +0 -0
- /package/dist/{components → dts-temp/components}/Radio/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Search/Search.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Search/Search.types.d.ts +0 -0
- /package/dist/{components/Switch/__tests__/Switch.test.d.ts → dts-temp/components/Search/__tests__/Search.test.d.ts} +0 -0
- /package/dist/{components → dts-temp/components}/Search/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Select/Select.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Select/Select.types.d.ts +0 -0
- /package/dist/{components/TextField/__tests__/Textfield.test.d.ts → dts-temp/components/Select/__tests__/SelectRadix.test.d.ts} +0 -0
- /package/dist/{components → dts-temp/components}/Select/components/CheckboxSelectItem.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Select/components/ExpandableSelectItem.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Select/components/SelectItem.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Select/hooks/useSelectLogic.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Select/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Switch/Switch.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Switch/Switch.types.d.ts +0 -0
- /package/dist/{components/TextField/utils/__tests__/validation.test.d.ts → dts-temp/components/Switch/__tests__/Switch.test.d.ts} +0 -0
- /package/dist/{components → dts-temp/components}/Switch/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Table/EmptyRows150Color.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Table/LoaderList.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Table/MultiLineText/MultiLineText.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Table/MultiLineText/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Table/Table.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Table/Table.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Table/TablePagination.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Table/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Table/utils/tableActions.d.ts +0 -0
- /package/dist/{components/Toast/__tests__/Toast.test.d.ts → dts-temp/components/TextArea/__tests__/TextArea.test.d.ts} +0 -0
- /package/dist/{components → dts-temp/components}/TextField/TextField.d.ts +0 -0
- /package/dist/{components/Tooltip/__tests__/Tooltip.test.d.ts → dts-temp/components/TextField/__tests__/Textfield.test.d.ts} +0 -0
- /package/dist/{components → dts-temp/components}/TextField/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/TextField/utils/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/TextField/utils/validation.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Toast/Toast.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Toast/Toast.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Toast/components/ToastContainer.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Toast/components/ToastProvider.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Toast/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Tooltip/Tooltip.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Tooltip/Tooltip.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/Tooltip/index.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/VerificationCode/VerificationCode.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/VerificationCode/VerificationCode.types.d.ts +0 -0
- /package/dist/{components → dts-temp/components}/VerificationCode/index.d.ts +0 -0
- /package/dist/{contexts → dts-temp/contexts}/ToastContext.d.ts +0 -0
- /package/dist/{hooks → dts-temp/hooks}/ApiSimulation.d.ts +0 -0
- /package/dist/{hooks → dts-temp/hooks}/InfiniteScroll.d.ts +0 -0
- /package/dist/{hooks → dts-temp/hooks}/NormalizeText.d.ts +0 -0
- /package/dist/{hooks → dts-temp/hooks}/useToast.d.ts +0 -0
- /package/dist/{shared → dts-temp/shared}/Label/index.d.ts +0 -0
- /package/dist/{shared → dts-temp/shared}/icons/CheckHalf.d.ts +0 -0
- /package/dist/{shared → dts-temp/shared}/icons/CheckSmall.d.ts +0 -0
- /package/dist/{shared → dts-temp/shared}/icons/index.d.ts +0 -0
- /package/dist/{types → dts-temp/types}/common.types.d.ts +0 -0
- /package/dist/{types → dts-temp/types}/index.d.ts +0 -0
package/dist/index.esm.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsx, jsxs, 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, Label, AlertDialog, RadioGroup, DropdownMenu,
|
|
3
|
+
import { Avatar as Avatar$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, Popover as Popover$1, Label, AlertDialog, RadioGroup, DropdownMenu, Select as Select$1, Toast as Toast$1, Switch as Switch$1 } from 'radix-ui';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import React__default, { useId, useMemo, useState, forwardRef, useEffect, useCallback, useRef, memo, useReducer, createElement, isValidElement } from 'react';
|
|
5
|
+
import React__default, { useId, useMemo, createContext, useState, useContext, forwardRef, useEffect, useCallback, useRef, memo, useReducer, createElement, isValidElement } from 'react';
|
|
6
6
|
import { Add16Regular, SpinnerIos16Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, ChevronDown16Regular, ChevronRight16Regular, ChevronUp16Regular, ChevronLeft16Regular, 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
|
+
import { createPortal } from 'react-dom';
|
|
9
10
|
|
|
10
11
|
var styles$q = {"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"};
|
|
11
12
|
|
|
@@ -2408,16 +2409,29 @@ const ptBR = {
|
|
|
2408
2409
|
},
|
|
2409
2410
|
};
|
|
2410
2411
|
|
|
2411
|
-
var styles$m = {"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_start":"Calendar-module__range_start___c1eNH","range_middle":"Calendar-module__range_middle___Uv4gt","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-"};
|
|
2412
|
+
var styles$m = {"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_start":"Calendar-module__range_start___c1eNH","range_middle":"Calendar-module__range_middle___Uv4gt","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","caption_year_chevron_open":"Calendar-module__caption_year_chevron_open___CNDPO","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"};
|
|
2412
2413
|
|
|
2413
|
-
const
|
|
2414
|
-
|
|
2414
|
+
const GridCtx = createContext(null);
|
|
2415
|
+
const GridMonthCaption = ({ calendarMonth, displayIndex: _displayIndex, ...divProps }) => {
|
|
2416
|
+
const ctx = useContext(GridCtx);
|
|
2417
|
+
const { view, intlLocale, onYearLabelClick } = ctx ?? {};
|
|
2418
|
+
const date = calendarMonth.date;
|
|
2419
|
+
const monthLabel = new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(date);
|
|
2420
|
+
const yearLabel = String(date.getFullYear());
|
|
2421
|
+
return (jsxs("div", { ...divProps, children: [jsx("span", { className: styles$m.caption_grid_label, children: monthLabel }), jsxs("button", { type: "button", className: styles$m.caption_grid_btn, "aria-pressed": view === "years", onClick: onYearLabelClick, children: [yearLabel, jsx("svg", { className: `${styles$m.caption_year_chevron}${view === "years" ? ` ${styles$m.caption_year_chevron_open}` : ""}`, width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M2 4L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] })] }));
|
|
2422
|
+
};
|
|
2423
|
+
const YEARS_PER_PAGE = 20;
|
|
2424
|
+
const Calendar = ({ selected, currentDate, defaultMonth, startMonth, endMonth, onDaySelect, onDateChange, onClear: _onClear, minDate, maxDate, disabled, format: _format, locale = "pt-br", autoFocus, id, "aria-label": ariaLabel, }) => {
|
|
2425
|
+
const animate = true;
|
|
2426
|
+
const [internalSelected, setInternalSelected] = useState(selected ?? undefined);
|
|
2427
|
+
const [internalDisplayMonth, setInternalDisplayMonth] = useState(() => currentDate ?? defaultMonth ?? new Date());
|
|
2428
|
+
const [gridView, setGridView] = useState("days");
|
|
2429
|
+
const [yearPageStart, setYearPageStart] = useState(() => (currentDate ?? defaultMonth ?? new Date()).getFullYear() - 9);
|
|
2415
2430
|
const resolvedSelected = selected !== undefined
|
|
2416
2431
|
? (selected ?? undefined)
|
|
2417
|
-
:
|
|
2418
|
-
? (selectedDate ?? undefined)
|
|
2419
|
-
: internalSelected;
|
|
2432
|
+
: internalSelected;
|
|
2420
2433
|
const resolvedLocale = locale === "pt-br" ? ptBR : enUS;
|
|
2434
|
+
const intlLocale = locale === "pt-br" ? "pt-BR" : "en-US";
|
|
2421
2435
|
const disabledMatchers = [
|
|
2422
2436
|
...(minDate ? [{ before: minDate }] : []),
|
|
2423
2437
|
...(maxDate ? [{ after: maxDate }] : []),
|
|
@@ -2429,7 +2443,62 @@ const Calendar = ({ selected, selectedDate, currentDate, defaultMonth, startMont
|
|
|
2429
2443
|
onDaySelect?.(date);
|
|
2430
2444
|
}
|
|
2431
2445
|
};
|
|
2432
|
-
|
|
2446
|
+
const handleMonthChange = (date) => {
|
|
2447
|
+
setInternalDisplayMonth(date);
|
|
2448
|
+
onDateChange?.(date);
|
|
2449
|
+
};
|
|
2450
|
+
const resolvedDisplayMonth = currentDate ?? internalDisplayMonth;
|
|
2451
|
+
const displayedMonthIndex = resolvedDisplayMonth.getMonth();
|
|
2452
|
+
const displayedYear = resolvedDisplayMonth.getFullYear();
|
|
2453
|
+
const startYear = startMonth?.getFullYear() ?? 1900;
|
|
2454
|
+
const endYear = endMonth?.getFullYear() ?? 2100;
|
|
2455
|
+
const handleGridMonthSelect = (monthIndex) => {
|
|
2456
|
+
const newDate = new Date(displayedYear, monthIndex, 1);
|
|
2457
|
+
setInternalDisplayMonth(newDate);
|
|
2458
|
+
onDateChange?.(newDate);
|
|
2459
|
+
setGridView("days");
|
|
2460
|
+
};
|
|
2461
|
+
const handleGridYearSelect = (year) => {
|
|
2462
|
+
const newDate = new Date(year, displayedMonthIndex, 1);
|
|
2463
|
+
setInternalDisplayMonth(newDate);
|
|
2464
|
+
onDateChange?.(newDate);
|
|
2465
|
+
setGridView("months");
|
|
2466
|
+
};
|
|
2467
|
+
const handleYearLabelClick = () => {
|
|
2468
|
+
setYearPageStart(displayedYear - 9);
|
|
2469
|
+
setGridView((v) => (v === "years" ? "days" : "years"));
|
|
2470
|
+
};
|
|
2471
|
+
const clampedYearPageStart = Math.max(startYear, yearPageStart);
|
|
2472
|
+
const yearsInPage = Array.from({ length: YEARS_PER_PAGE }, (_, i) => clampedYearPageStart + i).filter((y) => y <= endYear);
|
|
2473
|
+
const canGoPrevYears = clampedYearPageStart - YEARS_PER_PAGE >= startYear;
|
|
2474
|
+
const canGoNextYears = clampedYearPageStart + YEARS_PER_PAGE <= endYear;
|
|
2475
|
+
const monthsGrid = Array.from({ length: 12 }, (_, i) => ({
|
|
2476
|
+
index: i,
|
|
2477
|
+
label: new Intl.DateTimeFormat(intlLocale, { month: "short" }).format(new Date(2000, i, 1)),
|
|
2478
|
+
disabled: (startMonth != null &&
|
|
2479
|
+
new Date(displayedYear, i, 1) < new Date(startMonth.getFullYear(), startMonth.getMonth(), 1)) ||
|
|
2480
|
+
(endMonth != null &&
|
|
2481
|
+
new Date(displayedYear, i, 1) > new Date(endMonth.getFullYear(), endMonth.getMonth(), 1)),
|
|
2482
|
+
}));
|
|
2483
|
+
const gridCtxValue = {
|
|
2484
|
+
view: gridView,
|
|
2485
|
+
intlLocale,
|
|
2486
|
+
onYearLabelClick: handleYearLabelClick,
|
|
2487
|
+
};
|
|
2488
|
+
const sharedDayPickerProps = {
|
|
2489
|
+
classNames: styles$m,
|
|
2490
|
+
animate,
|
|
2491
|
+
mode: "single",
|
|
2492
|
+
selected: resolvedSelected,
|
|
2493
|
+
onSelect: handleSelect,
|
|
2494
|
+
startMonth,
|
|
2495
|
+
endMonth,
|
|
2496
|
+
disabled: disabledMatchers.length > 0 ? disabledMatchers : undefined,
|
|
2497
|
+
locale: resolvedLocale,
|
|
2498
|
+
autoFocus,
|
|
2499
|
+
"aria-label": ariaLabel,
|
|
2500
|
+
};
|
|
2501
|
+
return (jsx(GridCtx.Provider, { value: gridCtxValue, children: jsxs("div", { className: styles$m.calendar_grid_wrapper, children: [jsx(DayPicker, { id: id, ...sharedDayPickerProps, captionLayout: "label", month: resolvedDisplayMonth, onMonthChange: handleMonthChange, components: { MonthCaption: GridMonthCaption } }), gridView !== "days" && (jsxs("div", { className: `${styles$m.gridOverlay}${gridView === "years" ? ` ${styles$m.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$m.gridOverlayCaption, children: [jsx("span", { className: styles$m.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxs("button", { type: "button", className: styles$m.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de m\u00EAs", children: [displayedYear, jsx("svg", { className: `${styles$m.caption_year_chevron} ${styles$m.caption_year_chevron_open}`, width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M2 4L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] })] }), jsx("div", { className: styles$m.gridCells, children: monthsGrid.map(({ index, label, disabled: monthDisabled }) => (jsx("button", { type: "button", disabled: monthDisabled, className: `${styles$m.gridCell}${displayedMonthIndex === index ? ` ${styles$m.gridCellActive}` : ""}`, onClick: () => handleGridMonthSelect(index), children: label }, index))) })] })), gridView === "years" && (jsxs(Fragment, { children: [jsxs("div", { className: styles$m.gridOverlayCaption, children: [jsx("span", { className: styles$m.caption_grid_label, children: new Intl.DateTimeFormat(intlLocale, { month: "long" }).format(resolvedDisplayMonth) }), jsxs("button", { type: "button", className: styles$m.caption_grid_btn, onClick: () => setGridView("days"), "aria-label": "Fechar sele\u00E7\u00E3o de ano", children: [displayedYear, jsx("svg", { className: `${styles$m.caption_year_chevron} ${styles$m.caption_year_chevron_open}`, width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M2 4L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), jsxs("div", { className: styles$m.gridOverlayYearsNav, children: [jsx("button", { type: "button", className: styles$m.gridNavBtn, disabled: !canGoPrevYears, onClick: () => setYearPageStart((s) => s - YEARS_PER_PAGE), "aria-label": "Anos anteriores", children: jsx("svg", { viewBox: "0 0 12 12", "aria-hidden": "true", className: styles$m.chevronNavBtnPrev, children: jsx("path", { d: "M2 4L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), jsx("button", { type: "button", className: styles$m.gridNavBtn, disabled: !canGoNextYears, onClick: () => setYearPageStart((s) => s + YEARS_PER_PAGE), "aria-label": "Pr\u00F3ximos anos", children: jsx("svg", { viewBox: "0 0 12 12", "aria-hidden": "true", className: styles$m.chevronNavBtnNext, children: jsx("path", { d: "M2 4L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), jsx("div", { className: `${styles$m.gridCells} ${styles$m.gridCellsYears}`, children: yearsInPage.map((year) => (jsx("button", { type: "button", className: `${styles$m.gridCell}${displayedYear === year ? ` ${styles$m.gridCellActive}` : ""}`, onClick: () => handleGridYearSelect(year), children: year }, year))) })] }))] }))] }) }));
|
|
2433
2502
|
};
|
|
2434
2503
|
|
|
2435
2504
|
var styles$l = {"zds-callout__container":"Callout-module__zds-callout__container___EoOQd","zds-callout__container__with-title":"Callout-module__zds-callout__container__with-title___NUq2k","zds-callout__neutral":"Callout-module__zds-callout__neutral___ib9gW","zds-callout__brand":"Callout-module__zds-callout__brand___UYVny","zds-callout__color":"Callout-module__zds-callout__color___6ojEV","zds-callout__alert":"Callout-module__zds-callout__alert___gSOsh","zds-callout__success":"Callout-module__zds-callout__success___6W096","zds-callout__title":"Callout-module__zds-callout__title___jmmqj","zds-callout__text":"Callout-module__zds-callout__text___MTO5R","zds-callout__icon":"Callout-module__zds-callout__icon___-CaUD","zds-callout__content":"Callout-module__zds-callout__content___hh0Mj","zds-callout__subcontent":"Callout-module__zds-callout__subcontent___olIpt"};
|
|
@@ -2485,11 +2554,13 @@ function Container({ children }) {
|
|
|
2485
2554
|
return (jsx("main", { className: `${styles$i['container']} mx-auto`, children: children }));
|
|
2486
2555
|
}
|
|
2487
2556
|
|
|
2488
|
-
var styles$h = {"
|
|
2557
|
+
var styles$h = {"Content":"Popover-module__Content___RIETg"};
|
|
2489
2558
|
|
|
2490
|
-
const
|
|
2559
|
+
const Popover = ({ trigger, content, side = "left", align = "start", sideOffset = 8, open, onOpenChange, asAnchor = false, onOpenAutoFocus, onCloseAutoFocus, }) => {
|
|
2560
|
+
return (jsxs(Popover$1.Root, { open: open, onOpenChange: onOpenChange, children: [asAnchor ? (jsx(Popover$1.Anchor, { asChild: true, children: trigger })) : (jsx(Popover$1.Trigger, { asChild: true, children: trigger })), jsx(Popover$1.Portal, { children: jsx(Popover$1.Content, { className: styles$h.Content, 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 }) })] }));
|
|
2561
|
+
};
|
|
2491
2562
|
|
|
2492
|
-
var styles$g = {"container":"TextField-module__container___WJHFR","inputWrapper":"TextField-module__inputWrapper___INjfd","inputContainer":"TextField-module__inputContainer___3EsFJ","icon":"TextField-module__icon___p1vwi","clearButton":"TextField-module__clearButton___kgOot","helperText":"TextField-module__helperText___d5QGC","error":"TextField-module__error___IGQzp","disabled":"TextField-module__disabled___roIKP"};
|
|
2563
|
+
var styles$g = {"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"};
|
|
2493
2564
|
|
|
2494
2565
|
const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
2495
2566
|
if (required && value.trim() === '') {
|
|
@@ -2501,7 +2572,12 @@ const validateInput = ({ value, maxLength, errorMessage, required }) => {
|
|
|
2501
2572
|
return '';
|
|
2502
2573
|
};
|
|
2503
2574
|
|
|
2504
|
-
|
|
2575
|
+
var styles$f = {"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"};
|
|
2576
|
+
|
|
2577
|
+
const LabelComponent = ({ children, htmlFor, required = false, tooltip = false, tooltipText, side = 'bottom', align = 'start', className, error = false, disabled = false }) => (jsxs("div", { className: clsx(styles$f.labelContainer, disabled && styles$f.disabledContainer), children: [jsxs(Label.Root, { className: clsx(styles$f.wrapperLabel, error && !disabled && styles$f.errorLabel, disabled && styles$f.disabledLabel, className), htmlFor: htmlFor, children: [children, required && jsx("span", { className: styles$f.requiredLabel, children: "*" })] }), tooltip && (jsx(Tooltip, { side: side, align: align, text: tooltipText || '', children: jsx("span", { className: disabled ? styles$f.disabledIcon : error ?
|
|
2578
|
+
styles$f.errorIcon : styles$f.infoIcon, children: jsx(Info12Regular, {}) }) }))] }));
|
|
2579
|
+
|
|
2580
|
+
const TextField = forwardRef(({ className, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength = 30, required = false, helperText, tooltip = false, tooltipText, side = 'bottom', align = 'start', errorMessage, error, id, icon, onBlur, onFocus, name, persistIcon = false, ...inputProps }, ref) => {
|
|
2505
2581
|
const normalizeValue = (val) => {
|
|
2506
2582
|
return val === undefined || val === null ? '' : String(val);
|
|
2507
2583
|
};
|
|
@@ -2515,13 +2591,13 @@ const TextField = forwardRef(({ className, value, label, placeholder, type = 'te
|
|
|
2515
2591
|
setInputValue(newValue);
|
|
2516
2592
|
// Reavaliar erro quando valor muda externamente (ex: DatePicker atualiza o campo)
|
|
2517
2593
|
if (inputError) {
|
|
2518
|
-
const
|
|
2594
|
+
const validationError = validateInput({
|
|
2519
2595
|
value: newValue,
|
|
2520
2596
|
maxLength,
|
|
2521
2597
|
errorMessage,
|
|
2522
2598
|
required,
|
|
2523
2599
|
});
|
|
2524
|
-
setInputError(
|
|
2600
|
+
setInputError(validationError);
|
|
2525
2601
|
}
|
|
2526
2602
|
}, [value, inputError, type, maxLength, errorMessage, required]);
|
|
2527
2603
|
const handleChange = useCallback((e) => {
|
|
@@ -2554,9 +2630,9 @@ const TextField = forwardRef(({ className, value, label, placeholder, type = 'te
|
|
|
2554
2630
|
}, [onFocus]);
|
|
2555
2631
|
const showCustomIcon = inputValue.trim().length === 0 && icon;
|
|
2556
2632
|
const showClearIcon = isFocused && inputValue.trim().length > 0;
|
|
2557
|
-
const hasError = Boolean(inputError);
|
|
2558
|
-
const displayHelperText = inputError || helperText || '\u00A0';
|
|
2559
|
-
const helperId = inputError
|
|
2633
|
+
const hasError = Boolean(inputError) || Boolean(error);
|
|
2634
|
+
const displayHelperText = (error ? errorMessage : undefined) || inputError || helperText || '\u00A0';
|
|
2635
|
+
const helperId = (inputError || error)
|
|
2560
2636
|
? `${componentId}-error`
|
|
2561
2637
|
: helperText
|
|
2562
2638
|
? `${componentId}-helper`
|
|
@@ -2566,7 +2642,9 @@ const TextField = forwardRef(({ className, value, label, placeholder, type = 'te
|
|
|
2566
2642
|
[styles$g.error]: hasError && !disabled,
|
|
2567
2643
|
[className]: className,
|
|
2568
2644
|
});
|
|
2569
|
-
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$g.inputWrapper, children: [jsxs("div", { className: styles$g.inputContainer, children: [jsx("input", { ...inputProps, ref: ref, id: componentId, name: name, type: type, value: inputValue, placeholder: placeholder, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": hasError, "aria-required": required, "aria-describedby": helperId
|
|
2645
|
+
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$g.inputWrapper, children: [jsxs("div", { className: styles$g.inputContainer, children: [jsx("input", { ...inputProps, ref: ref, id: componentId, name: name, type: type, value: inputValue, placeholder: placeholder, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, maxLength: maxLength, disabled: disabled, "aria-invalid": hasError, "aria-required": required, "aria-describedby": helperId, className: clsx({
|
|
2646
|
+
[styles$g.inputWithIcon]: showCustomIcon || showClearIcon,
|
|
2647
|
+
}) }), showCustomIcon && jsx("span", { className: styles$g.icon, children: icon }), showClearIcon && (jsx("button", { type: "button", className: styles$g.clearButton, onMouseDown: (e) => {
|
|
2570
2648
|
e.preventDefault();
|
|
2571
2649
|
handleClear();
|
|
2572
2650
|
}, "aria-label": "Limpar campo", tabIndex: -1, children: jsx(Dismiss16Regular, {}) }))] }), jsx("span", { id: helperId, className: styles$g.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText })] })] }));
|
|
@@ -2574,12 +2652,8 @@ const TextField = forwardRef(({ className, value, label, placeholder, type = 'te
|
|
|
2574
2652
|
TextField.displayName = 'TextField';
|
|
2575
2653
|
var TextField$1 = React__default.memo(TextField);
|
|
2576
2654
|
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
* @param date - Data a ser formatada
|
|
2580
|
-
* @param locale - Locale para formatação ('pt-br' ou 'en-us')
|
|
2581
|
-
* @returns String formatada da data
|
|
2582
|
-
*/
|
|
2655
|
+
var styles$e = {"datePicker":"DatePicker-module__datePicker___raJYg","textfieldContainer":"DatePicker-module__textfieldContainer___yy8pT","datePickerIcon":"DatePicker-module__datePickerIcon___XCZsn","datePickerIconDisabled":"DatePicker-module__datePickerIconDisabled___BB-Gx"};
|
|
2656
|
+
|
|
2583
2657
|
function formatDate(date, locale = 'pt-br') {
|
|
2584
2658
|
if (!date || !(date instanceof Date)) {
|
|
2585
2659
|
return '';
|
|
@@ -2587,7 +2661,6 @@ function formatDate(date, locale = 'pt-br') {
|
|
|
2587
2661
|
const day = String(date.getDate()).padStart(2, '0');
|
|
2588
2662
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
2589
2663
|
const year = date.getFullYear();
|
|
2590
|
-
// Formatação baseada no locale
|
|
2591
2664
|
if (locale === 'en-us') {
|
|
2592
2665
|
return `${month}/${day}/${year}`;
|
|
2593
2666
|
}
|
|
@@ -2595,21 +2668,11 @@ function formatDate(date, locale = 'pt-br') {
|
|
|
2595
2668
|
return `${day}/${month}/${year}`;
|
|
2596
2669
|
}
|
|
2597
2670
|
}
|
|
2598
|
-
/**
|
|
2599
|
-
* Aplica máscara de data conforme o usuário digita.
|
|
2600
|
-
* @param value - Valor atual do input
|
|
2601
|
-
* @param locale - Locale para determinar o formato da máscara
|
|
2602
|
-
* @returns String com a máscara aplicada
|
|
2603
|
-
*/
|
|
2604
2671
|
function applyDateMask(value, locale = 'pt-br') {
|
|
2605
|
-
// Remove todos os caracteres que não são dígitos
|
|
2606
2672
|
const digitsOnly = value.replace(/\D/g, '');
|
|
2607
|
-
// Limita a 8 dígitos (DDMMAAAA ou MMDDAAAA)
|
|
2608
2673
|
const limitedDigits = digitsOnly.slice(0, 8);
|
|
2609
|
-
// Aplica a máscara baseada no locale
|
|
2610
2674
|
let masked = '';
|
|
2611
2675
|
for (let i = 0; i < limitedDigits.length; i++) {
|
|
2612
|
-
// Adiciona barras nas posições corretas
|
|
2613
2676
|
if (i === 2 || i === 4) {
|
|
2614
2677
|
masked += '/';
|
|
2615
2678
|
}
|
|
@@ -2617,12 +2680,6 @@ function applyDateMask(value, locale = 'pt-br') {
|
|
|
2617
2680
|
}
|
|
2618
2681
|
return masked;
|
|
2619
2682
|
}
|
|
2620
|
-
/**
|
|
2621
|
-
* Valida se uma string está no formato correto de data para o locale.
|
|
2622
|
-
* @param value - String a ser validada
|
|
2623
|
-
* @param locale - Locale para validação
|
|
2624
|
-
* @returns true se o formato está correto
|
|
2625
|
-
*/
|
|
2626
2683
|
function isValidDateFormat(value, locale = 'pt-br') {
|
|
2627
2684
|
const dateRegex = locale === 'en-us'
|
|
2628
2685
|
? /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/
|
|
@@ -2633,7 +2690,6 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
2633
2690
|
if (!dateString || typeof dateString !== 'string') {
|
|
2634
2691
|
return null;
|
|
2635
2692
|
}
|
|
2636
|
-
// Regex para validação básica dd/mm/yyyy ou mm/dd/yyyy
|
|
2637
2693
|
const dateRegex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
|
|
2638
2694
|
const match = dateString.trim().match(dateRegex);
|
|
2639
2695
|
if (!match) {
|
|
@@ -2643,7 +2699,6 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
2643
2699
|
let day;
|
|
2644
2700
|
let month;
|
|
2645
2701
|
const year = parseInt(yearStr, 10);
|
|
2646
|
-
// Interpretação baseada no locale
|
|
2647
2702
|
if (locale === 'en-us') {
|
|
2648
2703
|
month = parseInt(first, 10);
|
|
2649
2704
|
day = parseInt(second, 10);
|
|
@@ -2652,13 +2707,10 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
2652
2707
|
day = parseInt(first, 10);
|
|
2653
2708
|
month = parseInt(second, 10);
|
|
2654
2709
|
}
|
|
2655
|
-
// Validação básica de ranges
|
|
2656
2710
|
if (month < 1 || month > 12 || day < 1 || day > 31) {
|
|
2657
2711
|
return null;
|
|
2658
2712
|
}
|
|
2659
|
-
// Criar e validar a data
|
|
2660
2713
|
const date = new Date(year, month - 1, day);
|
|
2661
|
-
// Verificar se a data criada corresponde aos componentes originais
|
|
2662
2714
|
if (date.getFullYear() !== year ||
|
|
2663
2715
|
date.getMonth() !== month - 1 ||
|
|
2664
2716
|
date.getDate() !== day) {
|
|
@@ -2666,16 +2718,35 @@ function parseDate(dateString, locale = 'pt-br') {
|
|
|
2666
2718
|
}
|
|
2667
2719
|
return date;
|
|
2668
2720
|
}
|
|
2721
|
+
function validatePartialDate(value, locale = 'pt-br') {
|
|
2722
|
+
if (value.length === 0)
|
|
2723
|
+
return 'valid';
|
|
2724
|
+
if (value.length === 2) {
|
|
2725
|
+
const n = parseInt(value, 10);
|
|
2726
|
+
const isValid = locale === 'en-us' ? n >= 1 && n <= 12 : n >= 1 && n <= 31;
|
|
2727
|
+
return isValid ? 'valid' : 'invalid';
|
|
2728
|
+
}
|
|
2729
|
+
if (value.length === 5) {
|
|
2730
|
+
const parts = value.split('/');
|
|
2731
|
+
const a = parseInt(parts[0], 10);
|
|
2732
|
+
const b = parseInt(parts[1], 10);
|
|
2733
|
+
const isValid = locale === 'en-us'
|
|
2734
|
+
? a >= 1 && a <= 12 && b >= 1 && b <= 31
|
|
2735
|
+
: a >= 1 && a <= 31 && b >= 1 && b <= 12;
|
|
2736
|
+
return isValid ? 'valid' : 'invalid';
|
|
2737
|
+
}
|
|
2738
|
+
if (value.length === 10) {
|
|
2739
|
+
if (!isValidDateFormat(value, locale))
|
|
2740
|
+
return 'invalid';
|
|
2741
|
+
const parsed = parseDate(value, locale);
|
|
2742
|
+
return parsed ? 'valid' : 'invalid';
|
|
2743
|
+
}
|
|
2744
|
+
return 'incomplete';
|
|
2745
|
+
}
|
|
2669
2746
|
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText, required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, className, 'data-testid': testId, }) => {
|
|
2673
|
-
// ✅ IDs únicos para acessibilidade
|
|
2747
|
+
const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign = 'start', helperText, required = false, label = 'Data', value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, 'data-testid': testId, }) => {
|
|
2674
2748
|
const fieldId = useId();
|
|
2675
2749
|
const calendarId = `${fieldId}-calendar`;
|
|
2676
|
-
const errorId = `${fieldId}-error`;
|
|
2677
|
-
const helperTextId = `${fieldId}-help`;
|
|
2678
|
-
// ✅ Suporte controlled/uncontrolled adequado
|
|
2679
2750
|
const isControlled = value !== undefined;
|
|
2680
2751
|
const [internalDate, setInternalDate] = useState(defaultValue || null);
|
|
2681
2752
|
const [tempInputValue, setTempInputValue] = useState('');
|
|
@@ -2684,25 +2755,18 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText, r
|
|
|
2684
2755
|
const [showCalendar, setShowCalendar] = useState(false);
|
|
2685
2756
|
const [currentDate, setCurrentDate] = useState(new Date());
|
|
2686
2757
|
const wrapperRef = useRef(null);
|
|
2687
|
-
// ✅ Estados derivados - uma única fonte de verdade
|
|
2688
2758
|
const currentSelectedDate = isControlled ? value : internalDate;
|
|
2689
|
-
const
|
|
2759
|
+
const hasValidationError = !!(externalError || internalError);
|
|
2690
2760
|
const displayValue = isEditing ? tempInputValue : (currentSelectedDate ? formatDate(currentSelectedDate, locale) : '');
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
if (helperText) {
|
|
2695
|
-
texts.push(helperText);
|
|
2696
|
-
}
|
|
2697
|
-
if (currentError) {
|
|
2698
|
-
texts.push(currentError);
|
|
2699
|
-
}
|
|
2700
|
-
return texts.join(' • ');
|
|
2701
|
-
}, [helperText, currentError]);
|
|
2702
|
-
// ✅ Click outside handler
|
|
2761
|
+
const combinedHelperText = externalError && helperText
|
|
2762
|
+
? `${helperText} • ${externalError}`
|
|
2763
|
+
: externalError || helperText || '';
|
|
2703
2764
|
useEffect(() => {
|
|
2704
2765
|
function handleClickOutside(event) {
|
|
2705
|
-
|
|
2766
|
+
const target = event.target;
|
|
2767
|
+
const isInsideWrapper = wrapperRef.current?.contains(target);
|
|
2768
|
+
const isInsideCalendar = !!target.closest?.('[data-radix-popper-content-wrapper]');
|
|
2769
|
+
if (!isInsideWrapper && !isInsideCalendar) {
|
|
2706
2770
|
setShowCalendar(false);
|
|
2707
2771
|
}
|
|
2708
2772
|
}
|
|
@@ -2713,7 +2777,6 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText, r
|
|
|
2713
2777
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
2714
2778
|
};
|
|
2715
2779
|
}, [showCalendar]);
|
|
2716
|
-
// ✅ Handler unificado para mudança de data - SEMPRE chama onChange
|
|
2717
2780
|
const handleDateChange = useCallback((newDate) => {
|
|
2718
2781
|
if (!isControlled) {
|
|
2719
2782
|
setInternalDate(newDate);
|
|
@@ -2729,34 +2792,15 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText, r
|
|
|
2729
2792
|
const handleIconClick = () => {
|
|
2730
2793
|
setShowCalendar((prev) => !prev);
|
|
2731
2794
|
};
|
|
2732
|
-
const handleFieldClick = () => {
|
|
2733
|
-
if (!disabled) {
|
|
2734
|
-
setShowCalendar(true);
|
|
2735
|
-
}
|
|
2736
|
-
};
|
|
2737
|
-
const handleFieldFocus = () => {
|
|
2738
|
-
if (!disabled) {
|
|
2739
|
-
setShowCalendar(true);
|
|
2740
|
-
}
|
|
2741
|
-
};
|
|
2742
|
-
// ✅ FUNÇÃO CORRIGIDA: Permite números e barras da máscara
|
|
2743
|
-
const filterNumericInput = (inputValue) => {
|
|
2744
|
-
// Permite apenas números e barras (para manter a máscara)
|
|
2745
|
-
return inputValue.replace(/[^\d/]/g, '');
|
|
2746
|
-
};
|
|
2747
|
-
// ✅ Handler para prevenir teclas não numéricas
|
|
2748
2795
|
const handleKeyDown = (event) => {
|
|
2749
|
-
const { key
|
|
2750
|
-
// ✅ NOVA FUNCIONALIDADE: Enter fecha calendário se data válida
|
|
2796
|
+
const { key } = event;
|
|
2751
2797
|
if (key === 'Enter') {
|
|
2752
2798
|
if (showCalendar) {
|
|
2753
|
-
// Se há uma data válida selecionada, fechar calendário
|
|
2754
2799
|
if (currentSelectedDate) {
|
|
2755
2800
|
setShowCalendar(false);
|
|
2756
2801
|
event.preventDefault();
|
|
2757
2802
|
return;
|
|
2758
2803
|
}
|
|
2759
|
-
// Se a data digitada está completa e válida, processar e fechar
|
|
2760
2804
|
if (tempInputValue.length === 10 && isValidDateFormat(tempInputValue, locale)) {
|
|
2761
2805
|
const parsedDate = parseDate(tempInputValue, locale);
|
|
2762
2806
|
if (parsedDate && !isNaN(parsedDate.getTime())) {
|
|
@@ -2768,13 +2812,11 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText, r
|
|
|
2768
2812
|
}
|
|
2769
2813
|
}
|
|
2770
2814
|
else {
|
|
2771
|
-
// Se calendário está fechado, Enter abre o calendário
|
|
2772
2815
|
setShowCalendar(true);
|
|
2773
2816
|
event.preventDefault();
|
|
2774
2817
|
return;
|
|
2775
2818
|
}
|
|
2776
2819
|
}
|
|
2777
|
-
// ✅ Escape sempre fecha o calendário
|
|
2778
2820
|
if (key === 'Escape') {
|
|
2779
2821
|
if (showCalendar) {
|
|
2780
2822
|
setShowCalendar(false);
|
|
@@ -2782,19 +2824,12 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText, r
|
|
|
2782
2824
|
return;
|
|
2783
2825
|
}
|
|
2784
2826
|
}
|
|
2785
|
-
// Permite teclas de controle (Backspace, Delete, Tab, etc.)
|
|
2786
2827
|
const controlKeys = [
|
|
2787
|
-
'Backspace', 'Delete', '
|
|
2788
|
-
'ArrowUp', 'ArrowDown', 'Home', 'End'
|
|
2828
|
+
'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight',
|
|
2789
2829
|
];
|
|
2790
|
-
|
|
2791
|
-
const isCtrlCommand = ctrlKey || metaKey;
|
|
2792
|
-
const allowedCtrlKeys = ['a', 'c', 'v', 'x'];
|
|
2793
|
-
// Se é uma tecla de controle ou atalho permitido, deixa passar
|
|
2794
|
-
if (controlKeys.includes(key) || (isCtrlCommand && allowedCtrlKeys.includes(key.toLowerCase()))) {
|
|
2830
|
+
if (controlKeys.includes(key)) {
|
|
2795
2831
|
return;
|
|
2796
2832
|
}
|
|
2797
|
-
// Se não é um número (0-9), previne a entrada
|
|
2798
2833
|
if (!/^\d$/.test(key)) {
|
|
2799
2834
|
event.preventDefault();
|
|
2800
2835
|
}
|
|
@@ -2803,87 +2838,62 @@ const DatePicker = ({ locale = 'pt-br', calendarPosition = 'left', helperText, r
|
|
|
2803
2838
|
setShowCalendar(false);
|
|
2804
2839
|
handleDateChange(newSelectedDate);
|
|
2805
2840
|
};
|
|
2841
|
+
const handleFocus = () => {
|
|
2842
|
+
if (!disabled) {
|
|
2843
|
+
setShowCalendar(true);
|
|
2844
|
+
}
|
|
2845
|
+
};
|
|
2806
2846
|
const handleTextFieldChange = (value) => {
|
|
2807
|
-
|
|
2808
|
-
const filteredValue = filterNumericInput(value);
|
|
2809
|
-
// ✅ Remove barras para processar apenas números
|
|
2810
|
-
const numbersOnly = filteredValue.replace(/[^\d]/g, '');
|
|
2811
|
-
// ✅ Aplica máscara progressiva em tempo real
|
|
2812
|
-
const maskedValue = applyDateMask(numbersOnly, locale);
|
|
2813
|
-
// ✅ Atualizar valor temporário SEMPRE (máscara em tempo real)
|
|
2847
|
+
const maskedValue = applyDateMask(value, locale);
|
|
2814
2848
|
setTempInputValue(maskedValue);
|
|
2815
2849
|
setIsEditing(true);
|
|
2816
|
-
// ✅ Limpar erro se campo estiver vazio
|
|
2817
2850
|
if (maskedValue === '') {
|
|
2818
2851
|
setInternalError('');
|
|
2819
2852
|
handleDateChange(null);
|
|
2820
2853
|
setCurrentDate(new Date());
|
|
2821
2854
|
return;
|
|
2822
2855
|
}
|
|
2823
|
-
|
|
2824
|
-
if (
|
|
2825
|
-
|
|
2856
|
+
const result = validatePartialDate(maskedValue, locale);
|
|
2857
|
+
if (result === 'invalid') {
|
|
2858
|
+
setInternalError('invalid');
|
|
2859
|
+
if (maskedValue.length === 10) {
|
|
2860
|
+
if (!isControlled)
|
|
2861
|
+
setInternalDate(null);
|
|
2862
|
+
onChange?.(null);
|
|
2863
|
+
}
|
|
2864
|
+
}
|
|
2865
|
+
else if (result === 'valid') {
|
|
2866
|
+
setInternalError('');
|
|
2867
|
+
if (maskedValue.length === 10) {
|
|
2826
2868
|
const parsedDate = parseDate(maskedValue, locale);
|
|
2827
|
-
if (parsedDate
|
|
2828
|
-
setInternalError('');
|
|
2869
|
+
if (parsedDate) {
|
|
2829
2870
|
handleDateChange(parsedDate);
|
|
2830
2871
|
setCurrentDate(parsedDate);
|
|
2831
2872
|
}
|
|
2832
|
-
else {
|
|
2833
|
-
setInternalError('Data inválida');
|
|
2834
|
-
handleDateChange(null);
|
|
2835
|
-
}
|
|
2836
2873
|
}
|
|
2837
|
-
else {
|
|
2838
|
-
setInternalError('Data inválida');
|
|
2839
|
-
handleDateChange(null);
|
|
2840
|
-
}
|
|
2841
|
-
}
|
|
2842
|
-
else {
|
|
2843
|
-
// ✅ Data incompleta - limpar erro mas não validar ainda
|
|
2844
|
-
setInternalError('');
|
|
2845
|
-
// ✅ Não chamar handleDateChange para data incompleta
|
|
2846
2874
|
}
|
|
2847
2875
|
};
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
return (jsx("div", { ref: wrapperRef, children: jsxs("div", { className: clsx(styles$f['zds-date-picker']), children: [jsx(TextField$1, { type: "tel", icon: jsx(Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$f['zds-date-picker__icon'], disabled && styles$f['zds-date-picker__icon--disabled']) }), onChange: (e) => {
|
|
2855
|
-
handleTextFieldChange(String(e));
|
|
2856
|
-
}, onClick: !disabled ? handleFieldClick : undefined, onFocus: !disabled ? handleFieldFocus : undefined, onKeyDown: handleKeyDown, value: displayValue, helperText: combinedHelperText, maxLength: 10, required: required, label: label, disabled: disabled, id: fieldId, className: className, "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": !!currentError, "aria-describedby": currentError ? errorId : (helperText ? helperTextId : undefined) }), jsx("div", { className: clsx(styles$f['zds-date-picker__calendar-popup'], calendarPosition === 'left' && styles$f['zds-calendar--left'], calendarPosition === 'right' && styles$f['zds-calendar--right']), children: showCalendar && (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, id: calendarId, onClear: () => {
|
|
2857
|
-
handleDateChange(null);
|
|
2858
|
-
setCurrentDate(new Date());
|
|
2859
|
-
} })) })] }) }));
|
|
2876
|
+
return (jsx("div", { ref: wrapperRef, className: styles$e.datePicker, children: jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsx(TextField$1, { className: styles$e.textfieldContainer, type: "tel", icon: jsx(Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$e.datePickerIcon, disabled && styles$e.datePickerIconDisabled) }), onChange: (e) => {
|
|
2877
|
+
handleTextFieldChange(String(e));
|
|
2878
|
+
}, onKeyDown: handleKeyDown, onFocus: handleFocus, persistIcon: true, autoComplete: "off", value: displayValue, helperText: !externalError ? (helperText || undefined) : undefined, error: hasValidationError ? (externalError ? combinedHelperText : true) : undefined, maxLength: 10, required: required, label: label, disabled: disabled, 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, id: calendarId, onClear: () => {
|
|
2879
|
+
handleDateChange(null);
|
|
2880
|
+
setCurrentDate(new Date());
|
|
2881
|
+
} }), side: calendarSide, align: calendarAlign, sideOffset: 8 }) }));
|
|
2860
2882
|
};
|
|
2861
2883
|
var DatePicker_default = React__default.memo(DatePicker);
|
|
2862
2884
|
|
|
2863
|
-
var styles$
|
|
2885
|
+
var styles$d = {"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-"};
|
|
2864
2886
|
|
|
2865
|
-
const Dialog = ({
|
|
2866
|
-
// children,
|
|
2867
|
-
show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, ...restProps }) => (jsx(AlertDialog.Root, { open: show, ...restProps, children: jsxs(AlertDialog.Portal, { children: [jsx(AlertDialog.Overlay, { className: styles$e.DialogOverlay }), jsxs(AlertDialog.Content, { className: styles$e.DialogContent, children: [jsx(AlertDialog.Title, { className: styles$e.DialogTitle, children: title }), jsx(AlertDialog.Description, { className: styles$e.DialogDescription, children: bodyContent }), jsxs("div", { className: styles$e.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 }) })] })] })] }) }));
|
|
2887
|
+
const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, ...restProps }) => (jsx(AlertDialog.Root, { open: show, ...restProps, children: jsxs(AlertDialog.Portal, { children: [jsx(AlertDialog.Overlay, { className: styles$d.DialogOverlay }), jsxs(AlertDialog.Content, { className: styles$d.DialogContent, children: [jsx(AlertDialog.Title, { className: styles$d.DialogTitle, children: title }), jsx(AlertDialog.Description, { className: styles$d.DialogDescription, children: bodyContent }), jsxs("div", { className: styles$d.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 }) })] })] })] }) }));
|
|
2868
2888
|
|
|
2869
|
-
var styles$
|
|
2889
|
+
var styles$c = {"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"};
|
|
2870
2890
|
|
|
2871
|
-
|
|
2872
|
-
* Componente Drawer do Zanthus Design System
|
|
2873
|
-
* Implementa um painel lateral deslizante com overlay
|
|
2874
|
-
* Segue padrões WCAG 2.1 AA para acessibilidade
|
|
2875
|
-
*/
|
|
2876
|
-
const Drawer = ({ children, customWidth = '400px', // ✅ Valor padrão útil
|
|
2877
|
-
onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = false, onOverlayClick, closeOnOverlayClick = true, closeOnEscape = true, }) => {
|
|
2891
|
+
const Drawer = ({ children, headerContent, customWidth = '400px', onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = false, onOverlayClick, closeOnOverlayClick = true, closeOnEscape = true, }) => {
|
|
2878
2892
|
const internalClose = useCallback(() => {
|
|
2879
2893
|
if (disabled)
|
|
2880
2894
|
return;
|
|
2881
2895
|
onClose();
|
|
2882
2896
|
}, [onClose, disabled]);
|
|
2883
|
-
/**
|
|
2884
|
-
* Manipula clique no overlay
|
|
2885
|
-
* Fecha o drawer se closeOnOverlayClick estiver habilitado
|
|
2886
|
-
*/
|
|
2887
2897
|
const handleOverlayClick = useCallback(() => {
|
|
2888
2898
|
if (onOverlayClick) {
|
|
2889
2899
|
onOverlayClick();
|
|
@@ -2892,17 +2902,9 @@ onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = fa
|
|
|
2892
2902
|
internalClose();
|
|
2893
2903
|
}
|
|
2894
2904
|
}, [onOverlayClick, closeOnOverlayClick, internalClose, disabled]);
|
|
2895
|
-
/**
|
|
2896
|
-
* Fecha o drawer ao pressionar ESC
|
|
2897
|
-
* Adiciona e remove event listener baseado no estado isOpen
|
|
2898
|
-
*/
|
|
2899
2905
|
useEffect(() => {
|
|
2900
2906
|
if (!isOpen || !closeOnEscape)
|
|
2901
2907
|
return;
|
|
2902
|
-
/**
|
|
2903
|
-
* Manipula teclas pressionadas
|
|
2904
|
-
* @param event - Evento de teclado
|
|
2905
|
-
*/
|
|
2906
2908
|
const handleKeyDown = (event) => {
|
|
2907
2909
|
if (event.key === 'Escape') {
|
|
2908
2910
|
event.preventDefault();
|
|
@@ -2912,54 +2914,38 @@ onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = fa
|
|
|
2912
2914
|
window.addEventListener('keydown', handleKeyDown);
|
|
2913
2915
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
2914
2916
|
}, [isOpen, internalClose, closeOnEscape]);
|
|
2915
|
-
/**
|
|
2916
|
-
* Gerencia overflow do body baseado no estado isOpen
|
|
2917
|
-
*/
|
|
2918
2917
|
useEffect(() => {
|
|
2919
2918
|
if (isOpen && !disabled) {
|
|
2920
|
-
// Executa callback de abertura se fornecido
|
|
2921
2919
|
if (onOpen) {
|
|
2922
2920
|
onOpen();
|
|
2923
2921
|
}
|
|
2924
|
-
// Previne scroll do body quando drawer está aberto
|
|
2925
2922
|
document.body.style.overflow = 'hidden';
|
|
2926
2923
|
}
|
|
2927
2924
|
else {
|
|
2928
|
-
// Restaura scroll do body
|
|
2929
2925
|
document.body.style.overflow = 'unset';
|
|
2930
2926
|
}
|
|
2931
2927
|
return () => {
|
|
2932
2928
|
document.body.style.overflow = 'unset';
|
|
2933
2929
|
};
|
|
2934
2930
|
}, [isOpen, onOpen, disabled]);
|
|
2935
|
-
/**
|
|
2936
|
-
* Previne propagação de eventos no drawer
|
|
2937
|
-
* Evita fechamento acidental ao clicar no conteúdo
|
|
2938
|
-
* @param event - Evento de clique
|
|
2939
|
-
*/
|
|
2940
2931
|
const handleDrawerClick = (event) => {
|
|
2941
2932
|
event.stopPropagation();
|
|
2942
2933
|
};
|
|
2943
|
-
/**
|
|
2944
|
-
* Manipula clique no botão de fechar
|
|
2945
|
-
* @param event - Evento de clique
|
|
2946
|
-
*/
|
|
2947
2934
|
const handleCloseClick = (event) => {
|
|
2948
2935
|
event.stopPropagation();
|
|
2949
2936
|
internalClose();
|
|
2950
2937
|
};
|
|
2951
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$
|
|
2952
|
-
[styles$
|
|
2953
|
-
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$
|
|
2954
|
-
[styles$
|
|
2955
|
-
[styles$
|
|
2938
|
+
return createPortal(jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$c['drawerShadow'], {
|
|
2939
|
+
[styles$c['drawerShadow--visible']]: isOpen,
|
|
2940
|
+
}), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$c['drawerSidebar'], {
|
|
2941
|
+
[styles$c['drawerSidebar--open']]: isOpen,
|
|
2942
|
+
[styles$c['drawerSidebar--disabled']]: disabled,
|
|
2956
2943
|
}, className), style: {
|
|
2957
|
-
// ✅ APENAS: Width customizável via CSS custom property
|
|
2958
2944
|
'--drawer-custom-width': customWidth,
|
|
2959
|
-
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, children: [jsxs("div", { className:
|
|
2945
|
+
}, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, children: [jsxs("div", { className: styles$c.drawerTitleClose, children: [jsx("div", { className: styles$c.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsx("div", { className: styles$c.drawerHeaderContent, children: headerContent })), jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: 'lg' })] }), jsx("div", { className: styles$c.drawerChildren, "data-testid": "drawer-content", children: children })] })] }), document.body);
|
|
2960
2946
|
};
|
|
2961
2947
|
|
|
2962
|
-
var styles$
|
|
2948
|
+
var styles$b = {"search":"Search-module__search___u3QsV","searchLeftIcon":"Search-module__searchLeftIcon___OKOBq","disabled":"Search-module__disabled___adbxO","searchClearIcon":"Search-module__searchClearIcon___qX9-h"};
|
|
2963
2949
|
|
|
2964
2950
|
const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, id, className, 'data-testid': testId, ...rest }, ref) => {
|
|
2965
2951
|
const [internalValue, setInternalValue] = useState('');
|
|
@@ -3007,439 +2993,22 @@ const Search = React__default.forwardRef(({ placeholder = 'Dica do que deve ser
|
|
|
3007
2993
|
return;
|
|
3008
2994
|
onKeyDown?.(e);
|
|
3009
2995
|
};
|
|
3010
|
-
return (jsxs("div", { className: clsx(styles$
|
|
2996
|
+
return (jsxs("div", { className: clsx(styles$b.search, { [styles$b.disabled]: disabled }, className), onClick: onClick, onMouseDown: onMouseDown, role: onClick || onMouseDown ? "button" : undefined, tabIndex: onClick || onMouseDown ? 0 : undefined, onKeyDown: onClick || onMouseDown ? (e) => {
|
|
3011
2997
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
3012
2998
|
e.preventDefault();
|
|
3013
2999
|
onClick?.(e);
|
|
3014
3000
|
}
|
|
3015
|
-
} : undefined, children: [jsx("span", { className: clsx(styles$
|
|
3001
|
+
} : undefined, children: [jsx("span", { className: clsx(styles$b.searchLeftIcon, { [styles$b.disabled]: disabled }), tabIndex: -1, role: "presentation", "aria-hidden": "true", children: jsx(Search16Regular, {}) }), jsx("input", { ref: ref, id: inputId, type: "text", placeholder: placeholder, "aria-label": placeholder, value: currentValue || '', onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, "data-testid": testId, ...rest }), currentValue && currentValue.length > 0 && (jsx("span", { className: styles$b.searchClearIcon, "aria-hidden": "true", onClick: clearInputSearch, children: jsx(Dismiss16Regular, {}) }))] }));
|
|
3016
3002
|
});
|
|
3017
3003
|
Search.displayName = 'Search';
|
|
3018
3004
|
|
|
3019
|
-
|
|
3020
|
-
* Valida e filtra itens do dropdown baseado no tipo especificado
|
|
3021
|
-
* @param items - Array de itens para validar
|
|
3022
|
-
* @param type - Tipo do dropdown ('text' | 'checkbox' | 'icon')
|
|
3023
|
-
* @returns Array de itens válidos filtrados
|
|
3024
|
-
*/
|
|
3025
|
-
const validateItems = (items, type) => {
|
|
3026
|
-
if (!Array.isArray(items))
|
|
3027
|
-
return [];
|
|
3028
|
-
return items.filter((item, index) => {
|
|
3029
|
-
// Remove items inválidos
|
|
3030
|
-
if (!item || typeof item !== 'object') {
|
|
3031
|
-
console.warn(`Dropdown: Item ${index} inválido`);
|
|
3032
|
-
return false;
|
|
3033
|
-
}
|
|
3034
|
-
// Type assertion segura após verificação de tipo
|
|
3035
|
-
const dropdownItem = item;
|
|
3036
|
-
// Validação específica para tipo icon
|
|
3037
|
-
if (type === 'icon' && !dropdownItem.icon) {
|
|
3038
|
-
console.error(`Dropdown: Item ${index} precisa de ícone quando type='icon'`);
|
|
3039
|
-
return false;
|
|
3040
|
-
}
|
|
3041
|
-
// Precisa ter text ou id
|
|
3042
|
-
if (!dropdownItem.text && !dropdownItem.id) {
|
|
3043
|
-
console.warn(`Dropdown: Item ${index} precisa de text ou id`);
|
|
3044
|
-
return false;
|
|
3045
|
-
}
|
|
3046
|
-
return true;
|
|
3047
|
-
});
|
|
3048
|
-
};
|
|
3049
|
-
|
|
3050
|
-
var styles$b = {"zds-dropdown__container":"Dropdown-module__zds-dropdown__container___UMV5O","zds-dropdown__container--top":"Dropdown-module__zds-dropdown__container--top___nys1y","zds-dropdown__container--bottom":"Dropdown-module__zds-dropdown__container--bottom___5ncXH","zds-dropdown__search-container":"Dropdown-module__zds-dropdown__search-container___5igq1","zds-dropdown__item":"Dropdown-module__zds-dropdown__item___bqAnI","zds-dropdown--disabled":"Dropdown-module__zds-dropdown--disabled___WF-ao","zds-dropdown__item--focused":"Dropdown-module__zds-dropdown__item--focused___ulKda","zds-dropdown__item--selected":"Dropdown-module__zds-dropdown__item--selected___K-Mk-","zds-dropdown__title":"Dropdown-module__zds-dropdown__title___emxcQ","zds-dropdown__subtext":"Dropdown-module__zds-dropdown__subtext___YzXrw","zds-dropdown__item-content":"Dropdown-module__zds-dropdown__item-content___E3qkd","zds-dropdown__item-content--disabled":"Dropdown-module__zds-dropdown__item-content--disabled___RmhHd","zds-dropdown__item-text":"Dropdown-module__zds-dropdown__item-text___D39Qy","zds-dropdown__item-icon":"Dropdown-module__zds-dropdown__item-icon___QdCJz","zds-dropdown__item-icon-container":"Dropdown-module__zds-dropdown__item-icon-container___ULMHu","zds-dropdown__no-results":"Dropdown-module__zds-dropdown__no-results___rUZ-Z","zds-dropdown__list":"Dropdown-module__zds-dropdown__list___d65nL","zds-checkbox":"Dropdown-module__zds-checkbox___rJTmR","zds-dropdown__item--checkbox":"Dropdown-module__zds-dropdown__item--checkbox___z94nE","zds-dropdown__container-filter":"Dropdown-module__zds-dropdown__container-filter___Deixf","zds-dropdown__infinite-scroll-trigger":"Dropdown-module__zds-dropdown__infinite-scroll-trigger___RA9Gd","zds-dropdown__loading-indicator":"Dropdown-module__zds-dropdown__loading-indicator___Zf-uW"};
|
|
3005
|
+
var styles$a = {"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"};
|
|
3051
3006
|
|
|
3052
|
-
|
|
3053
|
-
* Hook otimizado para scroll infinito usando IntersectionObserver
|
|
3054
|
-
*/
|
|
3055
|
-
function useInfiniteScroll({ status, page, lastPage, onLoadMore, threshold = 0.1, rootMargin = '100px', enabled = true, debug = false }) {
|
|
3056
|
-
const observerRef = useRef(null);
|
|
3057
|
-
const [isIntersecting, setIsIntersecting] = useState(false);
|
|
3058
|
-
// Refs para controle de estado
|
|
3059
|
-
const loadingRef = useRef(false);
|
|
3060
|
-
const lastTriggeredPageRef = useRef(0);
|
|
3061
|
-
const onLoadMoreRef = useRef(onLoadMore);
|
|
3062
|
-
// Manter referência atualizada do callback
|
|
3063
|
-
useEffect(() => {
|
|
3064
|
-
onLoadMoreRef.current = onLoadMore;
|
|
3065
|
-
}, [onLoadMore]);
|
|
3066
|
-
// ✅ NOVO: Debug logger
|
|
3067
|
-
const debugLog = useCallback((message, data) => {
|
|
3068
|
-
if (debug) {
|
|
3069
|
-
console.log(`🔄 [InfiniteScroll] ${message}`, data || '');
|
|
3070
|
-
}
|
|
3071
|
-
}, [debug]);
|
|
3072
|
-
// ✅ MELHORADO: Callback do IntersectionObserver com mais controles
|
|
3073
|
-
const handleIntersect = useCallback((entries) => {
|
|
3074
|
-
const [target] = entries;
|
|
3075
|
-
const isVisible = target.isIntersecting;
|
|
3076
|
-
setIsIntersecting(isVisible);
|
|
3077
|
-
debugLog('Element intersecting:', isVisible);
|
|
3078
|
-
// Verificar se pode carregar mais
|
|
3079
|
-
const canLoadMore = enabled &&
|
|
3080
|
-
isVisible &&
|
|
3081
|
-
status !== 'loading' &&
|
|
3082
|
-
!loadingRef.current &&
|
|
3083
|
-
page < lastPage &&
|
|
3084
|
-
page !== lastTriggeredPageRef.current;
|
|
3085
|
-
debugLog('Can load more check:', {
|
|
3086
|
-
enabled,
|
|
3087
|
-
isVisible,
|
|
3088
|
-
status,
|
|
3089
|
-
isLoading: loadingRef.current,
|
|
3090
|
-
page,
|
|
3091
|
-
lastPage,
|
|
3092
|
-
lastTriggered: lastTriggeredPageRef.current,
|
|
3093
|
-
canLoad: canLoadMore
|
|
3094
|
-
});
|
|
3095
|
-
if (canLoadMore) {
|
|
3096
|
-
debugLog('Triggering load more for next page');
|
|
3097
|
-
loadingRef.current = true;
|
|
3098
|
-
lastTriggeredPageRef.current = page;
|
|
3099
|
-
onLoadMoreRef.current();
|
|
3100
|
-
}
|
|
3101
|
-
}, [enabled, status, page, lastPage, debugLog]);
|
|
3102
|
-
// ✅ MELHORADO: Observer com configurações personalizáveis
|
|
3103
|
-
useEffect(() => {
|
|
3104
|
-
if (!enabled) {
|
|
3105
|
-
debugLog('Hook disabled, skipping observer setup');
|
|
3106
|
-
return;
|
|
3107
|
-
}
|
|
3108
|
-
const observer = new IntersectionObserver(handleIntersect, {
|
|
3109
|
-
root: null,
|
|
3110
|
-
rootMargin,
|
|
3111
|
-
threshold,
|
|
3112
|
-
});
|
|
3113
|
-
const currentObserverRef = observerRef.current;
|
|
3114
|
-
if (currentObserverRef) {
|
|
3115
|
-
observer.observe(currentObserverRef);
|
|
3116
|
-
debugLog('IntersectionObserver attached', { rootMargin, threshold });
|
|
3117
|
-
}
|
|
3118
|
-
return () => {
|
|
3119
|
-
if (currentObserverRef) {
|
|
3120
|
-
observer.unobserve(currentObserverRef);
|
|
3121
|
-
debugLog('IntersectionObserver detached');
|
|
3122
|
-
}
|
|
3123
|
-
};
|
|
3124
|
-
}, [handleIntersect, rootMargin, threshold, enabled, debugLog]);
|
|
3125
|
-
// ✅ NOVO: Reset do loading flag quando status muda
|
|
3126
|
-
useEffect(() => {
|
|
3127
|
-
if (status !== 'loading') {
|
|
3128
|
-
loadingRef.current = false;
|
|
3129
|
-
debugLog('Loading flag reset', { status });
|
|
3130
|
-
}
|
|
3131
|
-
}, [status, debugLog]);
|
|
3132
|
-
// ✅ NOVO: Função de reset manual
|
|
3133
|
-
const reset = useCallback(() => {
|
|
3134
|
-
loadingRef.current = false;
|
|
3135
|
-
lastTriggeredPageRef.current = 0;
|
|
3136
|
-
setIsIntersecting(false);
|
|
3137
|
-
debugLog('Hook manually reset');
|
|
3138
|
-
}, [debugLog]);
|
|
3139
|
-
// Estados calculados
|
|
3140
|
-
const hasNextPage = page < lastPage;
|
|
3141
|
-
const isCompleted = page >= lastPage;
|
|
3142
|
-
return {
|
|
3143
|
-
observerRef,
|
|
3144
|
-
isIntersecting,
|
|
3145
|
-
hasNextPage,
|
|
3146
|
-
isCompleted,
|
|
3147
|
-
reset
|
|
3148
|
-
};
|
|
3149
|
-
}
|
|
3150
|
-
|
|
3151
|
-
const Dropdown = ({ className, items, id, type = 'text', applySearch = false, placeholder, onSelectionChange, showSubText = false, defaultSelectedIds, initialItemsSelected, maxWidth, minWidth, width, maxHeight, filter = false, position, infiniteScroll, }) => {
|
|
3152
|
-
const [selectedItems, setSelectedItems] = useState(() => {
|
|
3153
|
-
if (initialItemsSelected && Object.keys(initialItemsSelected).length > 0) {
|
|
3154
|
-
return initialItemsSelected;
|
|
3155
|
-
}
|
|
3156
|
-
if (defaultSelectedIds && defaultSelectedIds.length > 0) {
|
|
3157
|
-
const initialState = {};
|
|
3158
|
-
defaultSelectedIds.forEach((itemId) => {
|
|
3159
|
-
initialState[itemId] = true;
|
|
3160
|
-
});
|
|
3161
|
-
return initialState;
|
|
3162
|
-
}
|
|
3163
|
-
return {};
|
|
3164
|
-
});
|
|
3165
|
-
const [internalItems, setInternalItems] = useState(items);
|
|
3166
|
-
const [focusedIndex, setFocusedIndex] = useState(-1);
|
|
3167
|
-
const [inputValue, setInputValue] = useState('');
|
|
3168
|
-
const [searchQuery, setSearchQuery] = useState('');
|
|
3169
|
-
const [isSearchFocused, setIsSearchFocused] = useState(false);
|
|
3170
|
-
const [tempSelectedItems, setTempSelectedItems] = useState({});
|
|
3171
|
-
const containerRef = useRef(null);
|
|
3172
|
-
const infiniteScrollHook = useInfiniteScroll({
|
|
3173
|
-
status: infiniteScroll?.status || 'idle',
|
|
3174
|
-
page: infiniteScroll?.page || 1,
|
|
3175
|
-
lastPage: infiniteScroll?.lastPage || 1,
|
|
3176
|
-
onLoadMore: infiniteScroll?.onLoadMore || (() => { }),
|
|
3177
|
-
threshold: infiniteScroll?.threshold,
|
|
3178
|
-
rootMargin: infiniteScroll?.rootMargin,
|
|
3179
|
-
enabled: !!infiniteScroll,
|
|
3180
|
-
debug: infiniteScroll?.debug,
|
|
3181
|
-
});
|
|
3182
|
-
const searchVisible = applySearch || internalItems.length > 4;
|
|
3183
|
-
useEffect(() => {
|
|
3184
|
-
if (filter) {
|
|
3185
|
-
setTempSelectedItems(selectedItems);
|
|
3186
|
-
}
|
|
3187
|
-
}, [selectedItems, filter]);
|
|
3188
|
-
const handleSearchChange = useCallback((event) => {
|
|
3189
|
-
const newValue = event.target.value;
|
|
3190
|
-
setInputValue(newValue);
|
|
3191
|
-
setFocusedIndex(-1);
|
|
3192
|
-
if (newValue === '' && searchQuery !== '') {
|
|
3193
|
-
setSearchQuery('');
|
|
3194
|
-
}
|
|
3195
|
-
}, [searchQuery]);
|
|
3196
|
-
const safeItems = useMemo(() => {
|
|
3197
|
-
if (!Array.isArray(items)) {
|
|
3198
|
-
console.warn('Dropdown: items deve ser um array. Recebido:', typeof items);
|
|
3199
|
-
return [];
|
|
3200
|
-
}
|
|
3201
|
-
if (items.length === 0) {
|
|
3202
|
-
return [];
|
|
3203
|
-
}
|
|
3204
|
-
return items;
|
|
3205
|
-
}, [items]);
|
|
3206
|
-
const validItems = useMemo(() => {
|
|
3207
|
-
return validateItems(safeItems, type);
|
|
3208
|
-
}, [safeItems, type]);
|
|
3209
|
-
const generateItemId = useCallback((item, index) => {
|
|
3210
|
-
return item.id || `dropdown-item-${index}`;
|
|
3211
|
-
}, []);
|
|
3212
|
-
const executeSearch = useCallback(() => {
|
|
3213
|
-
setSearchQuery(inputValue.trim());
|
|
3214
|
-
setFocusedIndex(-1);
|
|
3215
|
-
}, [inputValue]);
|
|
3216
|
-
const handleSearchClear = useCallback(() => {
|
|
3217
|
-
setInputValue('');
|
|
3218
|
-
setSearchQuery('');
|
|
3219
|
-
setFocusedIndex(-1);
|
|
3220
|
-
setIsSearchFocused(false);
|
|
3221
|
-
}, []);
|
|
3222
|
-
const handleSearchKeyDown = useCallback((event) => {
|
|
3223
|
-
if (event.key === 'Enter') {
|
|
3224
|
-
event.preventDefault();
|
|
3225
|
-
event.stopPropagation();
|
|
3226
|
-
executeSearch();
|
|
3227
|
-
return;
|
|
3228
|
-
}
|
|
3229
|
-
if (event.key === 'Escape') {
|
|
3230
|
-
event.preventDefault();
|
|
3231
|
-
event.stopPropagation();
|
|
3232
|
-
handleSearchClear();
|
|
3233
|
-
return;
|
|
3234
|
-
}
|
|
3235
|
-
if (event.key === 'Backspace') {
|
|
3236
|
-
if (inputValue.length < 2) {
|
|
3237
|
-
event.preventDefault();
|
|
3238
|
-
event.stopPropagation();
|
|
3239
|
-
handleSearchClear();
|
|
3240
|
-
}
|
|
3241
|
-
}
|
|
3242
|
-
}, [executeSearch, handleSearchClear, inputValue]);
|
|
3243
|
-
const toggleSelection = useCallback((itemId, item) => {
|
|
3244
|
-
if (item?.disabled)
|
|
3245
|
-
return;
|
|
3246
|
-
if (filter) {
|
|
3247
|
-
setTempSelectedItems((prevSelected) => {
|
|
3248
|
-
let newSelected;
|
|
3249
|
-
if (type === 'checkbox') {
|
|
3250
|
-
newSelected = {
|
|
3251
|
-
...prevSelected,
|
|
3252
|
-
[itemId]: !prevSelected[itemId],
|
|
3253
|
-
};
|
|
3254
|
-
}
|
|
3255
|
-
else {
|
|
3256
|
-
newSelected = prevSelected[itemId] ? {} : { [itemId]: true };
|
|
3257
|
-
}
|
|
3258
|
-
return newSelected;
|
|
3259
|
-
});
|
|
3260
|
-
}
|
|
3261
|
-
else {
|
|
3262
|
-
setSelectedItems((prevSelected) => {
|
|
3263
|
-
let newSelected;
|
|
3264
|
-
if (type === 'checkbox') {
|
|
3265
|
-
newSelected = {
|
|
3266
|
-
...prevSelected,
|
|
3267
|
-
[itemId]: !prevSelected[itemId],
|
|
3268
|
-
};
|
|
3269
|
-
}
|
|
3270
|
-
else {
|
|
3271
|
-
newSelected = prevSelected[itemId] ? {} : { [itemId]: true };
|
|
3272
|
-
}
|
|
3273
|
-
return newSelected;
|
|
3274
|
-
});
|
|
3275
|
-
}
|
|
3276
|
-
}, [filter, type]);
|
|
3277
|
-
const handleApplyFilter = useCallback(() => {
|
|
3278
|
-
if (!filter)
|
|
3279
|
-
return;
|
|
3280
|
-
setSelectedItems(tempSelectedItems);
|
|
3281
|
-
const selectedIds = Object.keys(tempSelectedItems).filter((key) => tempSelectedItems[key]);
|
|
3282
|
-
onSelectionChange?.(selectedIds);
|
|
3283
|
-
}, [filter, tempSelectedItems, onSelectionChange]);
|
|
3284
|
-
const handleClearFilter = useCallback(() => {
|
|
3285
|
-
if (!filter)
|
|
3286
|
-
return;
|
|
3287
|
-
setTempSelectedItems({});
|
|
3288
|
-
setSelectedItems({});
|
|
3289
|
-
onSelectionChange?.([]);
|
|
3290
|
-
}, [filter, onSelectionChange]);
|
|
3291
|
-
const isFirstRender = React__default.useRef(true);
|
|
3292
|
-
useEffect(() => {
|
|
3293
|
-
if (isFirstRender.current) {
|
|
3294
|
-
isFirstRender.current = false;
|
|
3295
|
-
return;
|
|
3296
|
-
}
|
|
3297
|
-
if (!onSelectionChange)
|
|
3298
|
-
return;
|
|
3299
|
-
const selectedIds = Object.keys(selectedItems).filter((key) => selectedItems[key]);
|
|
3300
|
-
onSelectionChange(selectedIds);
|
|
3301
|
-
}, [selectedItems, onSelectionChange]);
|
|
3302
|
-
useEffect(() => {
|
|
3303
|
-
setInternalItems(validItems);
|
|
3304
|
-
}, [validItems]);
|
|
3305
|
-
const handleItemClick = useCallback((event, itemId, item) => {
|
|
3306
|
-
event.preventDefault();
|
|
3307
|
-
event.stopPropagation();
|
|
3308
|
-
if (!item?.disabled) {
|
|
3309
|
-
toggleSelection(itemId, item);
|
|
3310
|
-
}
|
|
3311
|
-
}, [toggleSelection]);
|
|
3312
|
-
const renderItemContent = useCallback((item, index) => {
|
|
3313
|
-
const itemId = item.id || `dropdown-item-${index}`;
|
|
3314
|
-
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
3315
|
-
return (jsxs("div", { className: clsx(styles$b['zds-dropdown__item-content'], {
|
|
3316
|
-
[styles$b['zds-dropdown__item-content--disabled']]: item.disabled,
|
|
3317
|
-
}), children: [type === 'checkbox' && (jsx(Checkbox, { checked: !!currentSelection[itemId], onCheckedChange: (checked) => {
|
|
3318
|
-
if (checked === 'indeterminate')
|
|
3319
|
-
return;
|
|
3320
|
-
toggleSelection(itemId, item);
|
|
3321
|
-
}, disabled: item.disabled, label: "" })), type === 'icon' && item.icon && (jsx("div", { className: styles$b['zds-dropdown__item-icon-container'], children: jsx("span", { className: styles$b['zds-dropdown__item-icon'], onClick: (event) => {
|
|
3322
|
-
event.preventDefault();
|
|
3323
|
-
event.stopPropagation();
|
|
3324
|
-
handleItemClick(event, itemId, item);
|
|
3325
|
-
}, children: item.icon }) })), jsxs("div", { className: styles$b['zds-dropdown__item-text'], children: [jsx("span", { id: `dropdown-item-${itemId}-label`, className: styles$b['zds-dropdown__title'], children: item.text }), showSubText && item.subText && (jsx("span", { id: `dropdown-item-${itemId}-desc`, className: styles$b['zds-dropdown__subtext'], children: item.subText }))] })] }));
|
|
3326
|
-
}, [
|
|
3327
|
-
type,
|
|
3328
|
-
selectedItems,
|
|
3329
|
-
tempSelectedItems,
|
|
3330
|
-
filter,
|
|
3331
|
-
toggleSelection,
|
|
3332
|
-
handleItemClick,
|
|
3333
|
-
showSubText,
|
|
3334
|
-
]);
|
|
3335
|
-
const isMultiSelectable = useMemo(() => {
|
|
3336
|
-
return type === 'checkbox';
|
|
3337
|
-
}, [type]);
|
|
3338
|
-
const filteredItems = useMemo(() => {
|
|
3339
|
-
if (!searchQuery.trim()) {
|
|
3340
|
-
return internalItems;
|
|
3341
|
-
}
|
|
3342
|
-
return internalItems.filter((item) => {
|
|
3343
|
-
const searchText = searchQuery.toLowerCase();
|
|
3344
|
-
const itemText = item.text?.toLowerCase() || '';
|
|
3345
|
-
const itemSubText = item.subText?.toLowerCase() || '';
|
|
3346
|
-
return itemText.includes(searchText) || itemSubText.includes(searchText);
|
|
3347
|
-
});
|
|
3348
|
-
}, [internalItems, searchQuery]);
|
|
3349
|
-
const handleKeyDown = useCallback((e) => {
|
|
3350
|
-
if (isSearchFocused)
|
|
3351
|
-
return;
|
|
3352
|
-
if (filteredItems.length === 0)
|
|
3353
|
-
return;
|
|
3354
|
-
switch (e.key) {
|
|
3355
|
-
case 'ArrowDown':
|
|
3356
|
-
e.preventDefault();
|
|
3357
|
-
e.stopPropagation();
|
|
3358
|
-
setFocusedIndex((prevIndex) => prevIndex < filteredItems.length - 1 ? prevIndex + 1 : 0);
|
|
3359
|
-
return;
|
|
3360
|
-
case 'ArrowUp':
|
|
3361
|
-
e.preventDefault();
|
|
3362
|
-
e.stopPropagation();
|
|
3363
|
-
setFocusedIndex((prevIndex) => prevIndex > 0 ? prevIndex - 1 : filteredItems.length - 1);
|
|
3364
|
-
return;
|
|
3365
|
-
case 'Enter':
|
|
3366
|
-
e.preventDefault();
|
|
3367
|
-
e.stopPropagation();
|
|
3368
|
-
if (focusedIndex >= 0 && focusedIndex < filteredItems.length) {
|
|
3369
|
-
const focusedItem = filteredItems[focusedIndex];
|
|
3370
|
-
const focusedItemId = focusedItem.id || `dropdown-item-${focusedIndex}`;
|
|
3371
|
-
toggleSelection(focusedItemId, focusedItem);
|
|
3372
|
-
}
|
|
3373
|
-
return;
|
|
3374
|
-
case 'Escape':
|
|
3375
|
-
e.preventDefault();
|
|
3376
|
-
e.stopPropagation();
|
|
3377
|
-
setFocusedIndex(-1);
|
|
3378
|
-
handleSearchClear();
|
|
3379
|
-
return;
|
|
3380
|
-
default:
|
|
3381
|
-
return;
|
|
3382
|
-
}
|
|
3383
|
-
}, [
|
|
3384
|
-
filteredItems,
|
|
3385
|
-
focusedIndex,
|
|
3386
|
-
toggleSelection,
|
|
3387
|
-
isSearchFocused,
|
|
3388
|
-
handleSearchClear,
|
|
3389
|
-
]);
|
|
3390
|
-
const DropdownClass = clsx(styles$b['zds-dropdown__container'], styles$b[`zds-dropdown__container--${position}`], {
|
|
3391
|
-
[className || '']: className,
|
|
3392
|
-
[styles$b['zds-dropdown__container--search-active']]: searchQuery.length > 0,
|
|
3393
|
-
[styles$b['zds-dropdown__container--fixed-width']]: !!maxWidth,
|
|
3394
|
-
});
|
|
3395
|
-
const dropdownStyles = useMemo(() => {
|
|
3396
|
-
const styles = {};
|
|
3397
|
-
if (maxWidth) {
|
|
3398
|
-
styles.maxWidth =
|
|
3399
|
-
typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
|
|
3400
|
-
styles.width = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
|
|
3401
|
-
}
|
|
3402
|
-
if (minWidth) {
|
|
3403
|
-
styles.minWidth =
|
|
3404
|
-
typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
|
|
3405
|
-
}
|
|
3406
|
-
if (width) {
|
|
3407
|
-
styles.width = typeof width === 'number' ? `${width}px` : width;
|
|
3408
|
-
}
|
|
3409
|
-
if (maxHeight) {
|
|
3410
|
-
styles.maxHeight =
|
|
3411
|
-
typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
|
|
3412
|
-
}
|
|
3413
|
-
return styles;
|
|
3414
|
-
}, [maxWidth, minWidth, width, maxHeight]);
|
|
3415
|
-
return (jsx("div", { ref: containerRef, className: DropdownClass, tabIndex: 0, role: "combobox", "aria-expanded": filteredItems.length > 0 ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": id ? `${id}-listbox` : undefined, "aria-controls": id ? `${id}-listbox` : undefined, "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : undefined, "aria-label": "Dropdown de sele\u00E7\u00E3o", "aria-describedby": searchVisible ? `${id}-search-help` : undefined, onKeyDown: handleKeyDown, style: dropdownStyles, children: jsxs("ul", { className: styles$b['zds-dropdown__list'], id: id || undefined, role: "listbox", "aria-label": "Lista de op\u00E7\u00F5es", "aria-multiselectable": isMultiSelectable, children: [searchVisible && (jsx("li", { role: "none", className: styles$b['zds-dropdown__search-container'], children: jsx(Search, { value: inputValue, placeholder: placeholder || 'Digite e pressione Enter para buscar...', onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onFocus: () => setIsSearchFocused(true), onBlur: () => setIsSearchFocused(false), onClear: handleSearchClear, "aria-label": "Campo de busca - pressione Enter para pesquisar" }) })), filteredItems.length > 0 ? (filteredItems.map((item, index) => {
|
|
3416
|
-
const itemId = generateItemId(item, index);
|
|
3417
|
-
const currentSelection = filter ? tempSelectedItems : selectedItems;
|
|
3418
|
-
return (jsx("li", { role: "option", "aria-selected": !!currentSelection[itemId], "aria-labelledby": `dropdown-item-${itemId}-label`, "aria-describedby": item.subText ? `dropdown-item-${itemId}-desc` : undefined, className: clsx(styles$b['zds-dropdown__item'], {
|
|
3419
|
-
[styles$b[`zds-dropdown__item--${type}`]]: type,
|
|
3420
|
-
[styles$b['zds-dropdown__item--selected']]: currentSelection[itemId],
|
|
3421
|
-
[styles$b['zds-dropdown__item--focused']]: focusedIndex === index,
|
|
3422
|
-
[styles$b['zds-dropdown__item--disabled']]: item.disabled,
|
|
3423
|
-
}), tabIndex: focusedIndex === index ? 0 : -1, onFocus: () => setFocusedIndex(index), onClick: (event) => {
|
|
3424
|
-
event.stopPropagation();
|
|
3425
|
-
handleItemClick(event, itemId, item);
|
|
3426
|
-
}, onMouseDown: (e) => {
|
|
3427
|
-
if (!item.disabled) {
|
|
3428
|
-
e.preventDefault();
|
|
3429
|
-
setFocusedIndex(index);
|
|
3430
|
-
}
|
|
3431
|
-
}, children: renderItemContent(item, index) }, itemId));
|
|
3432
|
-
})) : (jsx("li", { className: styles$b['zds-dropdown__no-results'], role: "status", "aria-live": "polite", children: "Nenhum item corresponde \u00E0 sua busca" })), filter && (jsxs("div", { className: styles$b['zds-dropdown__container-filter'], children: [jsx(Button, { size: "sm", variant: "outlined", onClick: handleClearFilter, children: "Limpar" }), jsx(Button, { size: "sm", onClick: handleApplyFilter, children: "Aplicar" })] })), infiniteScrollHook && infiniteScrollHook.hasNextPage && (jsx("li", { role: "none", className: styles$b['zds-dropdown__infinite-scroll-trigger'], children: jsx("div", { ref: infiniteScrollHook.observerRef, className: styles$b['zds-dropdown__loading-indicator'], children: infiniteScroll?.status === 'loading' ? (jsx("span", { children: "Carregando..." })) : (jsx("span", { children: "Trigger" })) }) }))] }) }));
|
|
3433
|
-
};
|
|
3434
|
-
const MemoizedDropdown = React__default.memo(Dropdown);
|
|
3435
|
-
MemoizedDropdown.displayName = 'Dropdown';
|
|
3436
|
-
|
|
3437
|
-
var styles$a = {"zds-filter__container":"Filter-module__zds-filter__container___0E-nC","zds-filter__button":"Filter-module__zds-filter__button___gT9yM","zds-filter__icon":"Filter-module__zds-filter__icon___ypiCu","zds-filter__text":"Filter-module__zds-filter__text___1iywL","zds-filter__arrow":"Filter-module__zds-filter__arrow___xflU2","zds-filter__arrow--up":"Filter-module__zds-filter__arrow--up___R0HR-","zds-filter__arrow--down":"Filter-module__zds-filter__arrow--down___4YMmg","zds-filter__button--open":"Filter-module__zds-filter__button--open___OA6EF","zds-filter__dropdown":"Filter-module__zds-filter__dropdown___-67MJ","zds-filter__dropdown--left":"Filter-module__zds-filter__dropdown--left___GgonW","zds-filter__dropdown--right":"Filter-module__zds-filter__dropdown--right___7GS9L","zds-filter-button__content":"Filter-module__zds-filter-button__content___eNIIz","zds-filter-button__arrow":"Filter-module__zds-filter-button__arrow___ZhymS","zds-filter-button__icon":"Filter-module__zds-filter-button__icon___-42Ey"};
|
|
3438
|
-
|
|
3439
|
-
const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placeholder = 'Selecionar...', enableSearch = false, buttonText = 'Filter', icon, variant = 'outlined', onOpen, onClose, position = 'left', disabled = false, className, selectedDate, onDateSelect, onClearDate, minDate, maxDate, locale = 'pt-br', ...rest }) => {
|
|
3007
|
+
const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placeholder = 'Selecionar...', enableSearch = false, buttonText = 'Filter', icon, variant = 'outlined', onOpen, onClose, side = 'bottom', align = 'start', disabled = false, className, selectedDate, onDateSelect, onClearDate, minDate, maxDate, locale = 'pt-br', id, ...rest }) => {
|
|
3440
3008
|
const [isOpen, setIsOpen] = useState(false);
|
|
3009
|
+
const [tempSelectedItems, setTempSelectedItems] = useState({});
|
|
3010
|
+
const [searchQuery, setSearchQuery] = useState('');
|
|
3441
3011
|
const [currentCalendarDate, setCurrentCalendarDate] = useState(() => selectedDate || new Date());
|
|
3442
|
-
const filterRef = useRef(null);
|
|
3443
3012
|
useEffect(() => {
|
|
3444
3013
|
if (selectedDate) {
|
|
3445
3014
|
setCurrentCalendarDate(selectedDate);
|
|
@@ -3459,6 +3028,59 @@ const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placehol
|
|
|
3459
3028
|
setIsOpen(false);
|
|
3460
3029
|
onClose?.();
|
|
3461
3030
|
}, [onClearDate, onClose]);
|
|
3031
|
+
const handleOpenChange = useCallback((open) => {
|
|
3032
|
+
if (disabled && open)
|
|
3033
|
+
return;
|
|
3034
|
+
if (open) {
|
|
3035
|
+
const initial = {};
|
|
3036
|
+
selectedIds?.forEach((itemId) => { initial[itemId] = true; });
|
|
3037
|
+
setTempSelectedItems(initial);
|
|
3038
|
+
setSearchQuery('');
|
|
3039
|
+
onOpen?.();
|
|
3040
|
+
}
|
|
3041
|
+
else {
|
|
3042
|
+
onClose?.();
|
|
3043
|
+
}
|
|
3044
|
+
setIsOpen(open);
|
|
3045
|
+
}, [disabled, selectedIds, onOpen, onClose]);
|
|
3046
|
+
const toggleItem = useCallback((itemId, item) => {
|
|
3047
|
+
if (item.disabled)
|
|
3048
|
+
return;
|
|
3049
|
+
setTempSelectedItems((prev) => {
|
|
3050
|
+
if (type === 'checkbox') {
|
|
3051
|
+
return { ...prev, [itemId]: !prev[itemId] };
|
|
3052
|
+
}
|
|
3053
|
+
return prev[itemId] ? {} : { [itemId]: true };
|
|
3054
|
+
});
|
|
3055
|
+
}, [type]);
|
|
3056
|
+
const handleApplyFilter = useCallback(() => {
|
|
3057
|
+
const ids = Object.keys(tempSelectedItems).filter((k) => tempSelectedItems[k]);
|
|
3058
|
+
onApplyFilter?.(ids);
|
|
3059
|
+
setIsOpen(false);
|
|
3060
|
+
onClose?.();
|
|
3061
|
+
}, [tempSelectedItems, onApplyFilter, onClose]);
|
|
3062
|
+
const handleClearFilter = useCallback(() => {
|
|
3063
|
+
setTempSelectedItems({});
|
|
3064
|
+
onApplyFilter?.([]);
|
|
3065
|
+
}, [onApplyFilter]);
|
|
3066
|
+
const handleSearchChange = useCallback((e) => {
|
|
3067
|
+
setSearchQuery(e.target.value);
|
|
3068
|
+
}, []);
|
|
3069
|
+
const handleSearchKeyDown = useCallback((e) => {
|
|
3070
|
+
if (e.key === 'Escape') {
|
|
3071
|
+
e.preventDefault();
|
|
3072
|
+
setSearchQuery('');
|
|
3073
|
+
}
|
|
3074
|
+
}, []);
|
|
3075
|
+
const searchVisible = enableSearch || (items?.length ?? 0) > 4;
|
|
3076
|
+
const filteredItems = useMemo(() => {
|
|
3077
|
+
if (!items?.length)
|
|
3078
|
+
return [];
|
|
3079
|
+
if (!searchQuery.trim())
|
|
3080
|
+
return items;
|
|
3081
|
+
const q = searchQuery.toLowerCase();
|
|
3082
|
+
return items.filter((item) => item.text.toLowerCase().includes(q));
|
|
3083
|
+
}, [items, searchQuery]);
|
|
3462
3084
|
const buttonDisplayText = useMemo(() => {
|
|
3463
3085
|
if (type === 'calendar' && selectedDate) {
|
|
3464
3086
|
return selectedDate.toLocaleDateString(locale === 'pt-br' ? 'pt-BR' : 'en-US');
|
|
@@ -3469,60 +3091,26 @@ const Filter = ({ items, type = 'checkbox', selectedIds, onApplyFilter, placehol
|
|
|
3469
3091
|
return firstItem?.text || selectedIds[0];
|
|
3470
3092
|
}, [type, selectedDate, selectedIds, items, buttonText, locale]);
|
|
3471
3093
|
const getBadgeValue = useCallback(() => {
|
|
3472
|
-
if (!selectedIds || selectedIds.length <= 1)
|
|
3094
|
+
if (!selectedIds || selectedIds.length <= 1)
|
|
3473
3095
|
return null;
|
|
3474
|
-
}
|
|
3475
3096
|
return selectedIds.length - 1;
|
|
3476
3097
|
}, [selectedIds]);
|
|
3477
|
-
const
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
|
-
|
|
3491
|
-
|
|
3492
|
-
|
|
3493
|
-
}, [onApplyFilter, onClose]);
|
|
3494
|
-
useEffect(() => {
|
|
3495
|
-
const handleClickOutside = (event) => {
|
|
3496
|
-
if (filterRef.current &&
|
|
3497
|
-
!filterRef.current.contains(event.target)) {
|
|
3498
|
-
if (isOpen) {
|
|
3499
|
-
setIsOpen(false);
|
|
3500
|
-
onClose?.();
|
|
3501
|
-
}
|
|
3502
|
-
}
|
|
3503
|
-
};
|
|
3504
|
-
if (isOpen) {
|
|
3505
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
3506
|
-
}
|
|
3507
|
-
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
3508
|
-
}, [isOpen, onClose]);
|
|
3509
|
-
useEffect(() => {
|
|
3510
|
-
const handleEscape = (event) => {
|
|
3511
|
-
if (event.key === 'Escape' && isOpen) {
|
|
3512
|
-
setIsOpen(false);
|
|
3513
|
-
onClose?.();
|
|
3514
|
-
}
|
|
3515
|
-
};
|
|
3516
|
-
if (isOpen) {
|
|
3517
|
-
document.addEventListener('keydown', handleEscape);
|
|
3518
|
-
}
|
|
3519
|
-
return () => document.removeEventListener('keydown', handleEscape);
|
|
3520
|
-
}, [isOpen, onClose]);
|
|
3521
|
-
const filterClass = clsx(styles$a['zds-filter__container'], className);
|
|
3522
|
-
const dropdownClass = clsx(styles$a['zds-filter__dropdown'], {
|
|
3523
|
-
[styles$a[`zds-filter__dropdown--${position}`]]: position,
|
|
3524
|
-
});
|
|
3525
|
-
return (jsxs("div", { ref: filterRef, className: filterClass, ...rest, children: [jsx(Button, { variant: variant, onClick: handleToggle, disabled: disabled, icon: type === 'calendar' ? jsx(Calendar16Regular, {}) : jsx(ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxs("div", { className: styles$a['zds-filter-button__content'], children: [icon && jsx("span", { className: styles$a['zds-filter-button__icon'], children: icon }), jsx("span", { className: styles$a['zds-filter-button__text'], children: buttonDisplayText }), jsx("span", { className: `${styles$a['zds-filter-button__arrow']} ${isOpen ? styles$a['zds-filter-button__arrow--open'] : ''}`, children: getBadgeValue() && (jsx(Badge, { badgeValue: `+${getBadgeValue()}`, type: "status" })) })] }) }), isOpen && (jsx("div", { className: dropdownClass, children: type === 'calendar' ? (jsx(Calendar, { currentDate: currentCalendarDate, selectedDate: selectedDate, onDaySelect: handleDateSelection, onDateChange: handleCalendarNavigation, minDate: minDate, maxDate: maxDate, locale: locale, onClear: handleClear, id: `filter-calendar-${filterRef.current?.id || ''}`, "aria-label": "Selecionar data para filtro" })) : (jsx(MemoizedDropdown, { items: items || [], type: type, defaultSelectedIds: selectedIds, placeholder: placeholder, applySearch: enableSearch, filter: true, onSelectionChange: handleApplyFilter })) }))] }));
|
|
3098
|
+
const filterClass = clsx(styles$a.container, className);
|
|
3099
|
+
const triggerButton = (jsx(Button, { variant: variant, disabled: disabled, icon: type === 'calendar' ? jsx(Calendar16Regular, {}) : jsx(ChevronDownRegular, {}), iconPosition: "right", size: "lg", children: jsxs("div", { className: styles$a.buttonContent, children: [icon && jsx("span", { className: styles$a.buttonIcon, children: icon }), jsx("span", { className: styles$a.buttonText, children: buttonDisplayText }), jsx("span", { className: clsx(styles$a.buttonArrow, { [styles$a.buttonArrowOpen]: isOpen }), children: getBadgeValue() && (jsx(Badge, { badgeValue: `+${getBadgeValue()}`, type: "status" })) })] }) }));
|
|
3100
|
+
const popoverContent = type === 'calendar' ? (jsx(Calendar, { currentDate: currentCalendarDate, selected: selectedDate, onDaySelect: handleDateSelection, onDateChange: handleCalendarNavigation, minDate: minDate, maxDate: maxDate, locale: locale, onClear: handleClear, id: `filter-calendar-${id || ''}`, "aria-label": "Selecionar data para filtro" })) : (jsxs("div", { className: styles$a.panel, children: [searchVisible && (jsx("div", { className: styles$a.search, children: jsx(Search, { value: searchQuery, placeholder: placeholder, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: () => setSearchQuery('') }) })), jsx("ul", { className: styles$a.list, role: "listbox", "aria-multiselectable": type === 'checkbox', children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
|
|
3101
|
+
const itemId = item.id || `filter-item-${index}`;
|
|
3102
|
+
const isSelected = !!tempSelectedItems[itemId];
|
|
3103
|
+
return (jsxs("li", { role: "option", "aria-selected": isSelected, "aria-disabled": item.disabled, className: clsx(styles$a.item, {
|
|
3104
|
+
[styles$a.itemSelected]: isSelected,
|
|
3105
|
+
[styles$a.itemDisabled]: item.disabled,
|
|
3106
|
+
}), onMouseDown: (e) => e.preventDefault(), onClick: () => toggleItem(itemId, item), onKeyDown: (e) => {
|
|
3107
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
3108
|
+
e.preventDefault();
|
|
3109
|
+
toggleItem(itemId, item);
|
|
3110
|
+
}
|
|
3111
|
+
}, children: [type === 'checkbox' && (jsx(Checkbox, { checked: isSelected, disabled: item.disabled, label: "" })), type === 'icon' && item.icon && (jsx("span", { className: styles$a.itemIcon, children: item.icon })), jsx("span", { className: styles$a.itemText, children: item.text })] }, itemId));
|
|
3112
|
+
})) : (jsx("li", { className: styles$a.noResults, role: "status", "aria-live": "polite", children: "Nenhum item encontrado" })) }), jsxs("div", { className: styles$a.footer, children: [jsx(Button, { fullWidth: true, variant: "outlined", onClick: handleClearFilter, children: "Limpar" }), jsx(Button, { fullWidth: true, onClick: handleApplyFilter, children: "Aplicar" })] })] }));
|
|
3113
|
+
return (jsx("div", { className: filterClass, id: id, ...rest, children: jsx(Popover, { open: isOpen, onOpenChange: handleOpenChange, side: side, align: align, onOpenAutoFocus: (e) => e.preventDefault(), trigger: triggerButton, content: popoverContent }) }));
|
|
3526
3114
|
};
|
|
3527
3115
|
|
|
3528
3116
|
var styles$9 = {"zds-list-item__container":"ListItem-module__zds-list-item__container___mEIUK","zds-list-item--checkbox":"ListItem-module__zds-list-item--checkbox___wfi9-","zds-list-item--icon":"ListItem-module__zds-list-item--icon___h3Ijt","zds-list-item--radio":"ListItem-module__zds-list-item--radio___2l7mK","zds-list-item--text":"ListItem-module__zds-list-item--text___F0PDx","zds-list-item--hovered":"ListItem-module__zds-list-item--hovered___XrDWn","zds-list-item--disabled":"ListItem-module__zds-list-item--disabled___p1xZF","zds-list-item__wrapper-text":"ListItem-module__zds-list-item__wrapper-text___5-TX2","zds-list-item__wrapper-icon":"ListItem-module__zds-list-item__wrapper-icon___S6Fr1","zds-list-item__title":"ListItem-module__zds-list-item__title___AV7nz","zds-list-item__subtext":"ListItem-module__zds-list-item__subtext___nfXky","zds-list-item__text":"ListItem-module__zds-list-item__text___3y0sB"};
|
|
@@ -3870,13 +3458,7 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
3870
3458
|
}, ...rest, children: [search && (jsx("div", { className: styles$7.searchWrapper, children: jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), jsxs("div", { className: styles$7.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$7.emptyState, children: "Nenhum item encontrado" })), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$7.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
|
|
3871
3459
|
};
|
|
3872
3460
|
|
|
3873
|
-
var styles$6 = {"
|
|
3874
|
-
|
|
3875
|
-
const Popover = ({ trigger, content, side = "left", align = "end", }) => {
|
|
3876
|
-
return (jsxs(Popover$1.Root, { children: [jsx(Popover$1.Trigger, { asChild: true, children: trigger }), jsx(Popover$1.Portal, { children: jsxs(Popover$1.Content, { className: styles$6.Content, sideOffset: 5, side: side, align: align, children: [content, jsx(Popover$1.Arrow, { className: styles$6.Arrow })] }) })] }));
|
|
3877
|
-
};
|
|
3878
|
-
|
|
3879
|
-
var styles$5 = {"zds-quantity":"Quantity-module__zds-quantity___AymLj","zds-quantity__input":"Quantity-module__zds-quantity__input___Wlhmo"};
|
|
3461
|
+
var styles$6 = {"zds-quantity":"Quantity-module__zds-quantity___AymLj","zds-quantity__input":"Quantity-module__zds-quantity__input___Wlhmo"};
|
|
3880
3462
|
|
|
3881
3463
|
const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled = false, decimal = false, decimalPlaces = 2, size = 'lg', id, step, className, ...rest }) => {
|
|
3882
3464
|
const isControlled = controlledValue !== undefined;
|
|
@@ -4085,12 +3667,12 @@ const Quantity = ({ defaultValue = 0, value: controlledValue, onChange, disabled
|
|
|
4085
3667
|
}, [disabled, increment, decrement, decimal, decimalPlaces, isControlled, onChange, computedValue]);
|
|
4086
3668
|
const uniqueId = useId();
|
|
4087
3669
|
const inputId = id || uniqueId;
|
|
4088
|
-
return (jsxs("div", { className: clsx(styles$
|
|
3670
|
+
return (jsxs("div", { className: clsx(styles$6['zds-quantity'], { disabled }, className), ...rest, children: [jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, icon: jsx(Subtract16Regular, {}), onClick: decrement, disabled: disabled || isMinValue, "aria-label": 'Diminuir quantidade' }), jsx("input", { ref: inputRef, className: clsx(styles$6['zds-quantity__input'], { disabled }), type: 'text', value: inputValue, onChange: handleInputChange, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: inputId, min: '0', step: stepValue, "aria-label": 'Quantidade', role: 'spinbutton', "aria-valuenow": computedValue, "aria-valuemin": 0, "aria-valuemax": decimal ? undefined : 9999, disabled: disabled, inputMode: decimal ? 'decimal' : 'numeric' }), jsx(Button, { variant: 'outlined', size: size, type: 'button', iconOnly: true, onClick: increment, disabled: disabled, "aria-label": 'Aumentar quantidade', icon: jsx(Add16Regular, {}) })] }));
|
|
4089
3671
|
};
|
|
4090
3672
|
const memorizedQuantity = React__default.memo(Quantity);
|
|
4091
3673
|
memorizedQuantity.displayName = 'Quantity';
|
|
4092
3674
|
|
|
4093
|
-
var styles$
|
|
3675
|
+
var styles$5 = {"fieldContainer":"index-module__fieldContainer___gp5Hz","trigger":"index-module__trigger___rHQJz","disabled":"index-module__disabled___MIJba","open":"index-module__open___bVB-1","error":"index-module__error___nPFjW","hasValue":"index-module__hasValue___a4Sy4","triggerText":"index-module__triggerText___tyjAQ","containerLabel":"index-module__containerLabel___CExNh","content":"index-module__content___9nWeY","viewport":"index-module__viewport___nkVG9","group":"index-module__group___-PiX6","container":"index-module__container___Wg-pd","searchWrapper":"index-module__searchWrapper___umf9d","item":"index-module__item___R-Xle","subTitle":"index-module__subTitle___sXaqd","checkboxItem":"index-module__checkboxItem___FTUbN","checkboxContent":"index-module__checkboxContent___skcd5","itemWrapper":"index-module__itemWrapper___PAglx","title":"index-module__title___x1Bia","icon":"index-module__icon___l2Zze","itemIndicator":"index-module__itemIndicator___FhOim","textContent":"index-module__textContent___cBJbp","helper":"index-module__helper___w4VC7","errorMessage":"index-module__errorMessage___gquqW","noResults":"index-module__noResults___qgzod","loadingMore":"index-module__loadingMore___GHc31","expandableItemContainer":"index-module__expandableItemContainer___NexPi","chevron":"index-module__chevron___c6mu-","childrenWrapper":"index-module__childrenWrapper___tj2R-"};
|
|
4094
3676
|
|
|
4095
3677
|
const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange, value, ...restProps }) => {
|
|
4096
3678
|
const itemRef = useRef(null);
|
|
@@ -4134,9 +3716,9 @@ const CheckboxSelectItem = ({ text, subTitle, disabled, checked, onCheckedChange
|
|
|
4134
3716
|
onCheckedChange(!checked);
|
|
4135
3717
|
}
|
|
4136
3718
|
};
|
|
4137
|
-
return (jsx("div", { ref: itemRef, className: clsx(styles$
|
|
4138
|
-
[styles$
|
|
4139
|
-
}), role: "option", "aria-selected": checked, "aria-disabled": disabled, "data-selected": checked, "data-testid": `checkbox-item-${value}`, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onClick: handleClick, ...restProps, children: jsx("div", { className: styles$
|
|
3719
|
+
return (jsx("div", { ref: itemRef, className: clsx(styles$5.checkboxItem, {
|
|
3720
|
+
[styles$5.disabled]: disabled,
|
|
3721
|
+
}), role: "option", "aria-selected": checked, "aria-disabled": disabled, "data-selected": checked, "data-testid": `checkbox-item-${value}`, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onClick: handleClick, ...restProps, children: jsx("div", { className: styles$5.checkboxContent, children: jsx(Checkbox, { checked: checked, onCheckedChange: handleCheckboxChange, disabled: disabled, label: jsxs("div", { className: styles$5.textContent, children: [jsx("span", { className: styles$5.title, children: text }), subTitle && jsx("div", { className: styles$5.subTitle, children: subTitle })] }) }) }) }));
|
|
4140
3722
|
};
|
|
4141
3723
|
CheckboxSelectItem.displayName = 'CheckboxSelectItem';
|
|
4142
3724
|
|
|
@@ -4154,23 +3736,23 @@ const ExpandableSelectItem = ({ item, variant, onSelect, selectedValues, level =
|
|
|
4154
3736
|
onSelect(item.value);
|
|
4155
3737
|
}
|
|
4156
3738
|
};
|
|
4157
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: styles$
|
|
4158
|
-
[styles$
|
|
4159
|
-
[styles$
|
|
3739
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: styles$5.expandableItemContainer, style: { paddingLeft: `${level * 16}px` }, children: jsxs("div", { className: clsx(styles$5.itemWrapper, {
|
|
3740
|
+
[styles$5.selected]: isSelected && !hasChildren,
|
|
3741
|
+
[styles$5.disabled]: item.disabled,
|
|
4160
3742
|
}), onClick: handleClick, onKeyDown: (e) => {
|
|
4161
3743
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
4162
3744
|
e.preventDefault();
|
|
4163
3745
|
handleClick(e);
|
|
4164
3746
|
}
|
|
4165
|
-
}, 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$
|
|
3747
|
+
}, 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$5.icon, children: item.icon })), jsxs("div", { className: styles$5.textContent, children: [jsx("div", { className: styles$5.title, children: item.text }), item.subTitle && jsx("div", { className: styles$5.subTitle, children: item.subTitle })] }), hasChildren && (jsx("span", { className: styles$5.chevron, children: isExpanded ? jsx(ChevronDown16Regular, {}) : jsx(ChevronRight16Regular, {}) }))] }) }), hasChildren && isExpanded && (jsx("div", { className: styles$5.childrenWrapper, children: item.children.map((child) => (jsx(ExpandableSelectItem, { item: child, variant: variant, onSelect: onSelect, selectedValues: selectedValues, level: level + 1 }, child.id || child.value))) }))] }));
|
|
4166
3748
|
};
|
|
4167
3749
|
|
|
4168
3750
|
const SelectItem = React__default.forwardRef(({ text, subTitle, icon, disabled, value, variant, ...restProps }, ref) => {
|
|
4169
|
-
return (jsxs("div", { className: clsx(styles$
|
|
4170
|
-
[styles$
|
|
4171
|
-
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$
|
|
4172
|
-
[styles$
|
|
4173
|
-
}), value: value, disabled: disabled, ...restProps, children: [jsx(Select$1.ItemText, { className: styles$
|
|
3751
|
+
return (jsxs("div", { className: clsx(styles$5.itemWrapper, {
|
|
3752
|
+
[styles$5.disabled]: disabled,
|
|
3753
|
+
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$5.icon, children: icon })), jsxs(Select$1.Item, { className: clsx(styles$5.item, {
|
|
3754
|
+
[styles$5.disabled]: disabled,
|
|
3755
|
+
}), value: value, disabled: disabled, ...restProps, children: [jsx(Select$1.ItemText, { className: styles$5.title, children: text }), subTitle && jsx("div", { className: styles$5.subTitle, children: subTitle }), jsx(Select$1.ItemIndicator, { className: styles$5.itemIndicator })] })] }));
|
|
4174
3756
|
});
|
|
4175
3757
|
SelectItem.displayName = 'SelectItem';
|
|
4176
3758
|
|
|
@@ -4479,14 +4061,14 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
4479
4061
|
onApiSearch('');
|
|
4480
4062
|
}
|
|
4481
4063
|
};
|
|
4482
|
-
return (jsx(Select$1.Root, { value: variant === 'checkbox' ? '' : (state.selectedValues[0] || ''), onValueChange: variant === 'checkbox' ? undefined : actions.handleSingleSelect, required: required, open: state.isOpen, onOpenChange: actions.setOpen, disabled: disabled, ...restProps, children: jsxs("div", { className: clsx(styles$
|
|
4483
|
-
[styles$
|
|
4484
|
-
[styles$
|
|
4485
|
-
[styles$
|
|
4486
|
-
[styles$
|
|
4487
|
-
}), id: selectId, "aria-label": ariaLabel, "data-testid": `${testId}-trigger`, children: [variant === 'checkbox' ? (jsx("span", { className: styles$
|
|
4488
|
-
[styles$
|
|
4489
|
-
}), children: helperText })), state.hasError && state.touched && (jsx("span", { className: styles$
|
|
4064
|
+
return (jsx(Select$1.Root, { value: variant === 'checkbox' ? '' : (state.selectedValues[0] || ''), onValueChange: variant === 'checkbox' ? undefined : actions.handleSingleSelect, required: required, open: state.isOpen, onOpenChange: actions.setOpen, disabled: disabled, ...restProps, children: jsxs("div", { className: clsx(styles$5.container, className), style: containerStyle, "data-testid": testId, children: [jsx("div", { className: styles$5.fieldContainer, children: jsxs("div", { className: styles$5.containerLabel, children: [jsx(LabelComponent, { htmlFor: selectId, required: required, tooltipText: tooltipText, tooltip: tooltip, side: side, align: align, error: state.hasError && state.touched, disabled: disabled, children: label }), jsxs(Select$1.Trigger, { className: clsx(styles$5.trigger, {
|
|
4065
|
+
[styles$5.error]: state.hasError && state.touched,
|
|
4066
|
+
[styles$5.disabled]: disabled,
|
|
4067
|
+
[styles$5.hasValue]: state.selectedValues.length > 0,
|
|
4068
|
+
[styles$5.open]: state.isOpen,
|
|
4069
|
+
}), id: selectId, "aria-label": ariaLabel, "data-testid": `${testId}-trigger`, children: [variant === 'checkbox' ? (jsx("span", { className: styles$5.triggerText, children: displayText })) : (jsx(Select$1.Value, { placeholder: placeholder, className: styles$5.placeholder, children: displayText })), state.isOpen ? jsx(ChevronUp16Regular, {}) : jsx(ChevronDown16Regular, {})] }), !state.isOpen && helperText && !state.hasError && (jsx("span", { className: clsx(styles$5.helper, {
|
|
4070
|
+
[styles$5.disabled]: disabled
|
|
4071
|
+
}), children: helperText })), state.hasError && state.touched && (jsx("span", { className: styles$5.errorMessage, children: errorMessage || 'Campo obrigatório' }))] }) }), jsx(Select$1.Portal, { children: jsxs(Select$1.Content, { className: styles$5.content, position: "popper", side: "bottom", sideOffset: 8, align: "start", avoidCollisions: true, children: [search && (jsx("div", { className: styles$5.searchWrapper, children: jsx(Search, { ref: refs.searchInputRef, className: styles$5.search, placeholder: "Buscar", value: state.searchInput, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, onClear: handleClear, "data-testid": `${testId}-search` }) })), jsx(Select$1.Viewport, { ref: viewportRef, className: styles$5.viewport, children: jsx(Select$1.Group, { className: styles$5.group, children: filteredItems.length === 0 ? (jsx("div", { className: styles$5.noResults, children: "Nenhum resultado encontrado" })) : (jsxs(Fragment, { children: [filteredItems.map((item) => {
|
|
4490
4072
|
const hasChildren = item.children && item.children.length > 0;
|
|
4491
4073
|
if (hasChildren) {
|
|
4492
4074
|
return (jsx(ExpandableSelectItem, { item: item, variant: variant, selectedValues: state.selectedValues, onSelect: (value) => {
|
|
@@ -4500,11 +4082,11 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
4500
4082
|
} }, item.id || item.value));
|
|
4501
4083
|
}
|
|
4502
4084
|
return variant === 'checkbox' ? (jsx(CheckboxSelectItem, { ...item, checked: state.selectedValues.includes(item.value), onCheckedChange: (checked) => actions.handleMultipleSelect(item.value, checked) }, item.id || item.value)) : (jsx(SelectItem, { ...item, variant: variant }, item.id || item.value));
|
|
4503
|
-
}), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$
|
|
4085
|
+
}), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$5.loadingMore, children: "Carregando mais itens..." }))] })) }) })] }) })] }) }));
|
|
4504
4086
|
};
|
|
4505
4087
|
Select.displayName = 'Select';
|
|
4506
4088
|
|
|
4507
|
-
var styles$
|
|
4089
|
+
var styles$4 = {"zds-table__container":"Table-module__zds-table__container___9xeVY","zds-table-header":"Table-module__zds-table-header___uPRjd","zds-table__scroll-wrapper":"Table-module__zds-table__scroll-wrapper___xQZPq","zds-table":"Table-module__zds-table___bPvaS","zds-table__head":"Table-module__zds-table__head___FvQuS","zds-table__th":"Table-module__zds-table__th___R03sj","zds-table__th-content":"Table-module__zds-table__th-content___duR3c","zds-table__td":"Table-module__zds-table__td___aY-Nt","zds-table-header__filters-placeholder":"Table-module__zds-table-header__filters-placeholder___GhVwi","zds-table__body":"Table-module__zds-table__body___kuKXb","zds-table__empty":"Table-module__zds-table__empty___ZM4iu","zds-table__empty__content":"Table-module__zds-table__empty__content___8xl-u","zds-table__empty__title":"Table-module__zds-table__empty__title___7Y9Pj","zds-table__empty__caption":"Table-module__zds-table__empty__caption___toS00","zds-table__row":"Table-module__zds-table__row___8cEjq","zds-table__empty-cell":"Table-module__zds-table__empty-cell___Ldb6Z","zds-table-header__search":"Table-module__zds-table-header__search___yzLxw","zds-table__pagination":"Table-module__zds-table__pagination___FR5GH","zds-table-header__search-container":"Table-module__zds-table-header__search-container___-Fzz1","zds-table-header__filters":"Table-module__zds-table-header__filters___ViH07","zds-table-header__filter-label":"Table-module__zds-table-header__filter-label___c3BWI","zds-table-header__custom-filters":"Table-module__zds-table-header__custom-filters___oTuoM","zds-table-header__filters-content":"Table-module__zds-table-header__filters-content___nKlgL","zds-table-header__filters-wrapper":"Table-module__zds-table-header__filters-wrapper___BrZ9A","zds-table-header__filter-items":"Table-module__zds-table-header__filter-items___Tn8Yv","zds-table__pagination-select":"Table-module__zds-table__pagination-select___TZK-y","zds-table__pagination-info":"Table-module__zds-table__pagination-info___3k-B2","zds-table__pagination-controls":"Table-module__zds-table__pagination-controls___S-zs7","zds-table__pagination-button":"Table-module__zds-table__pagination-button___Wvq9W"};
|
|
4508
4090
|
|
|
4509
4091
|
/**
|
|
4510
4092
|
* Componente de ícone SVG para estado vazio da tabela
|
|
@@ -4684,13 +4266,13 @@ const Table = ({ columns, dataSource, className, loading = false, rowSelection,
|
|
|
4684
4266
|
}, [columns, rowSelection, isAllSelected, isIndeterminate, toggleAll, selectedSet, toggleRow, dataSource]);
|
|
4685
4267
|
const tableId = useMemo(() => `table-${Math.random().toString(36).substr(2, 9)}`, []);
|
|
4686
4268
|
if (loading) {
|
|
4687
|
-
return (jsx("div", { className: clsx(styles$
|
|
4269
|
+
return (jsx("div", { className: clsx(styles$4['zds-table__container'], className), children: jsx("div", { className: styles$4['zds-table__loader'], children: jsx(LoaderList, {}) }) }));
|
|
4688
4270
|
}
|
|
4689
|
-
const emptyText = locale?.emptyText || (jsxs("div", { className: styles$
|
|
4690
|
-
return (jsx("div", { className: clsx(styles$
|
|
4271
|
+
const emptyText = locale?.emptyText || (jsxs("div", { className: styles$4['zds-table__empty'], children: [jsx("div", { className: styles$4['zds-table__empty__content'], children: jsx(EmptyRows150Color, {}) }), jsxs("div", { className: styles$4['zds-table__empty__text'], children: [jsx("h3", { className: styles$4['zds-table__empty__title'], children: "Nenhum dado encontrado" }), jsx("p", { className: styles$4['zds-table__empty__caption'], children: "Nenhum registro encontrado" })] })] }));
|
|
4272
|
+
return (jsx("div", { className: clsx(styles$4['zds-table__container'], className), ...rest, children: jsx("div", { className: styles$4['zds-table__scroll-wrapper'], children: jsxs("table", { className: styles$4['zds-table'], role: "table", "aria-label": "Tabela de dados", "aria-describedby": loading ? `${tableId}-loading` : undefined, "aria-rowcount": dataSource.length + 1, children: [jsx("thead", { className: styles$4['zds-table__head'], children: jsx("tr", { children: finalColumns.map((column) => (jsx("th", { className: clsx(styles$4['zds-table__th'], column.align && `text-${column.align}`), style: column.style, children: jsx("div", { className: styles$4['zds-table__th-content'], children: column.label }) }, column.key))) }) }), jsx("tbody", { className: styles$4['zds-table__body'], children: dataSource.length > 0 ? (dataSource.map((row, index) => {
|
|
4691
4273
|
const rowProps = onRow?.(row, index) || {};
|
|
4692
|
-
return (jsx("tr", { className: clsx(styles$
|
|
4693
|
-
})) : (jsx("tr", { children: jsx("td", { colSpan: finalColumns.length, className: styles$
|
|
4274
|
+
return (jsx("tr", { className: clsx(styles$4['zds-table__row'], rowProps.className), onClick: rowProps.onClick, onDoubleClick: rowProps.onDoubleClick, children: finalColumns.map((column) => (jsx("td", { className: clsx(styles$4['zds-table__td'], column.align && `text-${column.align}`), children: renderCell(column, row, index) }, column.key))) }, index));
|
|
4275
|
+
})) : (jsx("tr", { children: jsx("td", { colSpan: finalColumns.length, className: styles$4['zds-table__empty-cell'], children: emptyText }) })) })] }) }) }));
|
|
4694
4276
|
};
|
|
4695
4277
|
|
|
4696
4278
|
const isCalendarFilter = (filter) => {
|
|
@@ -4723,26 +4305,26 @@ const TableHeader = ({ searchValue = '', onSearchChange, onSearch, searchPlaceho
|
|
|
4723
4305
|
}
|
|
4724
4306
|
};
|
|
4725
4307
|
const hasFilters = filters || (filterItems && filterItems.length > 0);
|
|
4726
|
-
return (jsxs("div", { className: `${styles$
|
|
4308
|
+
return (jsxs("div", { className: `${styles$4['zds-table-header']} ${className}`.trim(), ...rest, children: [showSearch && (onSearchChange || onSearch) && (jsx("div", { className: styles$4['zds-table-header__search-container'], children: jsx(Search, { value: internalSearchValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: styles$4['zds-table-header__search'] }) })), showFilters && (jsx("div", { className: styles$4['zds-table-header__filters'], children: hasFilters ? (jsxs("div", { className: styles$4['zds-table-header__filters-content'], children: [filters && (jsx("div", { className: styles$4['zds-table-header__custom-filters'], children: filters })), jsxs("div", { className: styles$4['zds-table-header__filters-wrapper'], children: [jsx("span", { className: styles$4['zds-table-header__filter-label'], children: "Filtros" }), jsx("div", { className: styles$4['zds-table-header__filter-items'], children: filterItems && filterItems.map((filterItem, index) => {
|
|
4727
4309
|
const commonProps = {
|
|
4728
|
-
key: filterItem.id || index,
|
|
4729
4310
|
buttonText: filterItem.buttonText,
|
|
4730
4311
|
icon: filterItem.icon,
|
|
4731
|
-
|
|
4312
|
+
side: filterItem.side,
|
|
4313
|
+
align: filterItem.align,
|
|
4732
4314
|
disabled: filterItem.disabled,
|
|
4733
4315
|
variant: 'outlined',
|
|
4734
4316
|
onOpen: () => filterItem.onToggle?.(true),
|
|
4735
4317
|
onClose: () => filterItem.onToggle?.(false),
|
|
4736
4318
|
};
|
|
4737
4319
|
if (isCalendarFilter(filterItem)) {
|
|
4738
|
-
return (jsx(Filter, { ...commonProps, type: "calendar", selectedDate: filterItem.selectedDate, onDateSelect: filterItem.onDateSelect, onClearDate: filterItem.onClear, minDate: filterItem.minDate, maxDate: filterItem.maxDate, placeholder: filterItem.placeholder }));
|
|
4320
|
+
return (jsx(Filter, { ...commonProps, type: "calendar", selectedDate: filterItem.selectedDate, onDateSelect: filterItem.onDateSelect, onClearDate: filterItem.onClear, minDate: filterItem.minDate, maxDate: filterItem.maxDate, placeholder: filterItem.placeholder }, filterItem.id || index));
|
|
4739
4321
|
}
|
|
4740
4322
|
if (isCheckboxFilter(filterItem)) {
|
|
4741
|
-
return (jsx(Filter, { ...commonProps, type: filterItem.type, items: filterItem.items, selectedIds: filterItem.selectedIds, onApplyFilter: filterItem.onSelectionChange, placeholder: filterItem.placeholder, enableSearch: filterItem.enableSearch }));
|
|
4323
|
+
return (jsx(Filter, { ...commonProps, type: filterItem.type, items: filterItem.items, selectedIds: filterItem.selectedIds, onApplyFilter: filterItem.onSelectionChange, placeholder: filterItem.placeholder, enableSearch: filterItem.enableSearch }, filterItem.id || index));
|
|
4742
4324
|
}
|
|
4743
4325
|
console.warn('TableHeader: Tipo de filtro não reconhecido:', filterItem);
|
|
4744
4326
|
return null;
|
|
4745
|
-
}) })] })] })) : (jsx("div", { className: styles$
|
|
4327
|
+
}) })] })] })) : (jsx("div", { className: styles$4['zds-table-header__filters-placeholder'], children: jsx("span", { children: "Nenhum filtro dispon\u00EDvel" }) })) }))] }));
|
|
4746
4328
|
};
|
|
4747
4329
|
|
|
4748
4330
|
const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange, onItemsPerPageChange, pageSizeOptions = [10, 25, 50, 100], disabled = false, className, ...rest }) => {
|
|
@@ -4765,11 +4347,56 @@ const TablePagination = ({ currentPage, totalItems, itemsPerPage, onPageChange,
|
|
|
4765
4347
|
const newItemsPerPage = Number(event.target.value);
|
|
4766
4348
|
onItemsPerPageChange(newItemsPerPage);
|
|
4767
4349
|
};
|
|
4768
|
-
return (jsxs("div", { className: `${styles$
|
|
4350
|
+
return (jsxs("div", { className: `${styles$4['zds-table__pagination']} ${className}`.trim(), ...rest, children: [jsxs("div", { className: styles$4['zds-table__pagination-select'], children: [jsx("label", { htmlFor: "items-per-page", className: styles$4['zds-table__pagination-label'], children: "Itens por p\u00E1gina" }), jsx("select", { id: "items-per-page", value: itemsPerPage, onChange: handleItemsPerPageChange, disabled: disabled, className: styles$4['zds-table__pagination-select-input'], children: pageSizeOptions.map((option) => (jsx("option", { value: option, children: option }, option))) })] }), jsx("div", { className: styles$4['zds-table__pagination-info'], children: jsx("span", { children: totalItems > 0
|
|
4769
4351
|
? `${startItem}–${endItem} de ${totalItems}`
|
|
4770
|
-
: '0 itens' }) }), jsxs("div", { className: styles$
|
|
4352
|
+
: '0 itens' }) }), jsxs("div", { className: styles$4['zds-table__pagination-controls'], children: [jsx("button", { className: styles$4['zds-table__pagination-button'], onClick: handlePrevious, disabled: !canGoPrev, "aria-label": "P\u00E1gina anterior", children: jsx(ChevronLeft16Regular, {}) }), jsx("button", { className: styles$4['zds-table__pagination-button'], onClick: handleNext, disabled: !canGoNext, "aria-label": "Pr\u00F3xima p\u00E1gina", children: jsx(ChevronRight16Regular, {}) })] })] }));
|
|
4771
4353
|
};
|
|
4772
4354
|
|
|
4355
|
+
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"};
|
|
4356
|
+
|
|
4357
|
+
const TextArea = forwardRef(({ className, value, label, placeholder, onChange, disabled = false, maxLength, required = false, helperText, tooltip = false, tooltipText, side = 'bottom', align = 'start', errorMessage, error, id, onBlur, onFocus, name, resize = 'vertical', showCharCount = false, height, ...textareaProps }, ref) => {
|
|
4358
|
+
const normalizeValue = (val) => {
|
|
4359
|
+
return val === undefined || val === null ? '' : String(val);
|
|
4360
|
+
};
|
|
4361
|
+
const [textareaValue, setTextareaValue] = useState(normalizeValue(value));
|
|
4362
|
+
const [textareaError, setTextareaError] = useState('');
|
|
4363
|
+
const generatedId = useId();
|
|
4364
|
+
const componentId = id || generatedId;
|
|
4365
|
+
useEffect(() => {
|
|
4366
|
+
setTextareaValue(normalizeValue(value));
|
|
4367
|
+
}, [value]);
|
|
4368
|
+
const handleChange = useCallback((e) => {
|
|
4369
|
+
const newValue = e.target.value;
|
|
4370
|
+
if (!disabled && (!maxLength || newValue.length <= maxLength)) {
|
|
4371
|
+
setTextareaValue(newValue);
|
|
4372
|
+
onChange?.(newValue);
|
|
4373
|
+
}
|
|
4374
|
+
}, [disabled, maxLength, onChange]);
|
|
4375
|
+
const handleBlur = useCallback((e) => {
|
|
4376
|
+
if (required && textareaValue.trim() === '') {
|
|
4377
|
+
setTextareaError(errorMessage || 'Campo obrigatório.');
|
|
4378
|
+
}
|
|
4379
|
+
else {
|
|
4380
|
+
setTextareaError('');
|
|
4381
|
+
}
|
|
4382
|
+
onBlur?.(e);
|
|
4383
|
+
}, [textareaValue, required, errorMessage, onBlur]);
|
|
4384
|
+
const handleFocus = useCallback((e) => {
|
|
4385
|
+
onFocus?.(e);
|
|
4386
|
+
}, [onFocus]);
|
|
4387
|
+
const hasError = Boolean(textareaError) || Boolean(error);
|
|
4388
|
+
const displayHelperText = (error ? errorMessage : undefined) || textareaError || helperText || '\u00A0';
|
|
4389
|
+
const helperId = (textareaError || error)
|
|
4390
|
+
? `${componentId}-error`
|
|
4391
|
+
: helperText
|
|
4392
|
+
? `${componentId}-helper`
|
|
4393
|
+
: undefined;
|
|
4394
|
+
const containerClass = clsx(styles$3.container, disabled && styles$3.disabled, hasError && !disabled && styles$3.error, className);
|
|
4395
|
+
return (jsxs("div", { className: containerClass, children: [label && (jsx(LabelComponent, { htmlFor: componentId, required: required, tooltip: tooltip, tooltipText: tooltipText, side: side, align: align, error: hasError, disabled: disabled, children: label })), jsxs("div", { className: styles$3.inputWrapper, children: [jsx("div", { className: styles$3.inputContainer, children: jsx("textarea", { ...textareaProps, ref: ref, 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 } }) }), jsxs("div", { className: styles$3.footer, children: [jsx("span", { id: helperId, className: styles$3.helperText, "aria-live": hasError ? 'polite' : undefined, children: displayHelperText }), showCharCount && maxLength && (jsxs("span", { className: styles$3.charCount, children: [textareaValue.length, "/", maxLength] }))] })] })] }));
|
|
4396
|
+
});
|
|
4397
|
+
TextArea.displayName = 'TextArea';
|
|
4398
|
+
var TextArea_default = React__default.memo(TextArea);
|
|
4399
|
+
|
|
4773
4400
|
var styles$2 = {"toastViewport":"Toast-module__toastViewport___Ns71-","toastRoot":"Toast-module__toastRoot___ZtA3x","slideIn":"Toast-module__slideIn___QcXWP","toastTitle":"Toast-module__toastTitle___WbjNH","toastContent":"Toast-module__toastContent___IY5QB","toastClose":"Toast-module__toastClose___FqVsT","Icon":"Toast-module__Icon___ERU9c","iconInfo":"Toast-module__iconInfo___G-II3","iconSuccess":"Toast-module__iconSuccess___N8iF1","iconAlert":"Toast-module__iconAlert___SSf8u"};
|
|
4774
4401
|
|
|
4775
4402
|
/**
|
|
@@ -5295,5 +4922,104 @@ function useApiSimulation(config = {}) {
|
|
|
5295
4922
|
};
|
|
5296
4923
|
}
|
|
5297
4924
|
|
|
5298
|
-
|
|
4925
|
+
/**
|
|
4926
|
+
* Hook otimizado para scroll infinito usando IntersectionObserver
|
|
4927
|
+
*/
|
|
4928
|
+
function useInfiniteScroll({ status, page, lastPage, onLoadMore, threshold = 0.1, rootMargin = '100px', enabled = true, debug = false }) {
|
|
4929
|
+
const observerRef = useRef(null);
|
|
4930
|
+
const [isIntersecting, setIsIntersecting] = useState(false);
|
|
4931
|
+
// Refs para controle de estado
|
|
4932
|
+
const loadingRef = useRef(false);
|
|
4933
|
+
const lastTriggeredPageRef = useRef(0);
|
|
4934
|
+
const onLoadMoreRef = useRef(onLoadMore);
|
|
4935
|
+
// Manter referência atualizada do callback
|
|
4936
|
+
useEffect(() => {
|
|
4937
|
+
onLoadMoreRef.current = onLoadMore;
|
|
4938
|
+
}, [onLoadMore]);
|
|
4939
|
+
// ✅ NOVO: Debug logger
|
|
4940
|
+
const debugLog = useCallback((message, data) => {
|
|
4941
|
+
if (debug) {
|
|
4942
|
+
console.log(`🔄 [InfiniteScroll] ${message}`, data || '');
|
|
4943
|
+
}
|
|
4944
|
+
}, [debug]);
|
|
4945
|
+
// ✅ MELHORADO: Callback do IntersectionObserver com mais controles
|
|
4946
|
+
const handleIntersect = useCallback((entries) => {
|
|
4947
|
+
const [target] = entries;
|
|
4948
|
+
const isVisible = target.isIntersecting;
|
|
4949
|
+
setIsIntersecting(isVisible);
|
|
4950
|
+
debugLog('Element intersecting:', isVisible);
|
|
4951
|
+
// Verificar se pode carregar mais
|
|
4952
|
+
const canLoadMore = enabled &&
|
|
4953
|
+
isVisible &&
|
|
4954
|
+
status !== 'loading' &&
|
|
4955
|
+
!loadingRef.current &&
|
|
4956
|
+
page < lastPage &&
|
|
4957
|
+
page !== lastTriggeredPageRef.current;
|
|
4958
|
+
debugLog('Can load more check:', {
|
|
4959
|
+
enabled,
|
|
4960
|
+
isVisible,
|
|
4961
|
+
status,
|
|
4962
|
+
isLoading: loadingRef.current,
|
|
4963
|
+
page,
|
|
4964
|
+
lastPage,
|
|
4965
|
+
lastTriggered: lastTriggeredPageRef.current,
|
|
4966
|
+
canLoad: canLoadMore
|
|
4967
|
+
});
|
|
4968
|
+
if (canLoadMore) {
|
|
4969
|
+
debugLog('Triggering load more for next page');
|
|
4970
|
+
loadingRef.current = true;
|
|
4971
|
+
lastTriggeredPageRef.current = page;
|
|
4972
|
+
onLoadMoreRef.current();
|
|
4973
|
+
}
|
|
4974
|
+
}, [enabled, status, page, lastPage, debugLog]);
|
|
4975
|
+
// ✅ MELHORADO: Observer com configurações personalizáveis
|
|
4976
|
+
useEffect(() => {
|
|
4977
|
+
if (!enabled) {
|
|
4978
|
+
debugLog('Hook disabled, skipping observer setup');
|
|
4979
|
+
return;
|
|
4980
|
+
}
|
|
4981
|
+
const observer = new IntersectionObserver(handleIntersect, {
|
|
4982
|
+
root: null,
|
|
4983
|
+
rootMargin,
|
|
4984
|
+
threshold,
|
|
4985
|
+
});
|
|
4986
|
+
const currentObserverRef = observerRef.current;
|
|
4987
|
+
if (currentObserverRef) {
|
|
4988
|
+
observer.observe(currentObserverRef);
|
|
4989
|
+
debugLog('IntersectionObserver attached', { rootMargin, threshold });
|
|
4990
|
+
}
|
|
4991
|
+
return () => {
|
|
4992
|
+
if (currentObserverRef) {
|
|
4993
|
+
observer.unobserve(currentObserverRef);
|
|
4994
|
+
debugLog('IntersectionObserver detached');
|
|
4995
|
+
}
|
|
4996
|
+
};
|
|
4997
|
+
}, [handleIntersect, rootMargin, threshold, enabled, debugLog]);
|
|
4998
|
+
// ✅ NOVO: Reset do loading flag quando status muda
|
|
4999
|
+
useEffect(() => {
|
|
5000
|
+
if (status !== 'loading') {
|
|
5001
|
+
loadingRef.current = false;
|
|
5002
|
+
debugLog('Loading flag reset', { status });
|
|
5003
|
+
}
|
|
5004
|
+
}, [status, debugLog]);
|
|
5005
|
+
// ✅ NOVO: Função de reset manual
|
|
5006
|
+
const reset = useCallback(() => {
|
|
5007
|
+
loadingRef.current = false;
|
|
5008
|
+
lastTriggeredPageRef.current = 0;
|
|
5009
|
+
setIsIntersecting(false);
|
|
5010
|
+
debugLog('Hook manually reset');
|
|
5011
|
+
}, [debugLog]);
|
|
5012
|
+
// Estados calculados
|
|
5013
|
+
const hasNextPage = page < lastPage;
|
|
5014
|
+
const isCompleted = page >= lastPage;
|
|
5015
|
+
return {
|
|
5016
|
+
observerRef,
|
|
5017
|
+
isIntersecting,
|
|
5018
|
+
hasNextPage,
|
|
5019
|
+
isCompleted,
|
|
5020
|
+
reset
|
|
5021
|
+
};
|
|
5022
|
+
}
|
|
5023
|
+
|
|
5024
|
+
export { Avatar, Badge, Button, Calendar, Callout, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, Dialog, Drawer, Filter, ListItem, Menu, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, Table, TableHeader, TablePagination, TextArea_default as TextArea, TextField$1 as TextField, Toast, ToastContainer, ToastProvider, Tooltip, VerificationCode, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
5299
5025
|
//# sourceMappingURL=index.esm.js.map
|