@giro-ds/react 12.2.0 → 12.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +139 -41
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +8 -10
- package/dist/index.esm.js +107 -42
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +2 -2
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -900,6 +900,8 @@ interface ModalProps extends BaseProps {
|
|
|
900
900
|
children?: ReactNode;
|
|
901
901
|
/** Conteúdo customizado no cabeçalho, exibido ao lado do título */
|
|
902
902
|
headerContent?: ReactNode;
|
|
903
|
+
/** Define se o botão de fechar é exibido (padrão: true) */
|
|
904
|
+
closingButton?: boolean;
|
|
903
905
|
/** Define se o modal fecha ao clicar no overlay (padrão: true) */
|
|
904
906
|
closeOnOverlayClick?: boolean;
|
|
905
907
|
/** Conteúdo do rodapé do modal */
|
|
@@ -1334,6 +1336,8 @@ interface SelectPropsBase extends ScalableProps {
|
|
|
1334
1336
|
enableInfiniteScroll?: boolean;
|
|
1335
1337
|
/** Callback executado ao chegar ao final do scroll: () => void */
|
|
1336
1338
|
onScrollEnd?: () => void;
|
|
1339
|
+
/** Indica se há mais itens disponíveis para carregamento */
|
|
1340
|
+
hasMore?: boolean;
|
|
1337
1341
|
/** Estado de carregamento de mais itens */
|
|
1338
1342
|
isLoadingMore?: boolean;
|
|
1339
1343
|
/** Habilita busca via API */
|
|
@@ -1796,8 +1800,6 @@ interface TextFieldPropsBase extends ScalableProps, Omit<React__default.InputHTM
|
|
|
1796
1800
|
error?: boolean;
|
|
1797
1801
|
/** Ícone a ser exibido no campo */
|
|
1798
1802
|
icon?: React__default.ReactNode;
|
|
1799
|
-
/** Mantém o ícone visível mesmo quando o campo tem valor */
|
|
1800
|
-
persistIcon?: boolean;
|
|
1801
1803
|
/** Tipo do teclado virtual (padrão: undefined = desabilitado) */
|
|
1802
1804
|
virtualKeyboard?: VirtualKeyboardType;
|
|
1803
1805
|
/** Aplica variação visual para uso acoplado ao VirtualKeyboard no modo fixed, essa prop é de uso exclusivo do VirtualKeyboard no modo fixed */
|
|
@@ -2055,8 +2057,6 @@ declare const Switch: React$1.FC<SwitchProps>;
|
|
|
2055
2057
|
type ToggleButtonMode = 'simple' | 'combined';
|
|
2056
2058
|
/** Tipo de seleção do grupo: 'single' (um item) ou 'multiple' (múltiplos itens) */
|
|
2057
2059
|
type ToggleGroupType = 'single' | 'multiple';
|
|
2058
|
-
/** Orientação do grupo de toggles */
|
|
2059
|
-
type ToggleButtonOrientation = 'horizontal' | 'vertical';
|
|
2060
2060
|
interface BaseTooltipConfig {
|
|
2061
2061
|
tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
|
|
2062
2062
|
tooltipAlign?: 'start' | 'center' | 'end';
|
|
@@ -2120,8 +2120,6 @@ type ToggleGroupMultipleSelectionProps = {
|
|
|
2120
2120
|
* - `selectionType="multiple"` → `onValueChange: (value: string[]) => void`
|
|
2121
2121
|
*/
|
|
2122
2122
|
type ToggleGroupProps = {
|
|
2123
|
-
/** Orientação do grupo: `'horizontal'` (padrão) ou `'vertical'` */
|
|
2124
|
-
orientation?: ToggleButtonOrientation;
|
|
2125
2123
|
/** Items do grupo de toggles */
|
|
2126
2124
|
items?: ToggleGroupItem[];
|
|
2127
2125
|
} & (ToggleGroupSingleSelectionProps | ToggleGroupMultipleSelectionProps);
|
|
@@ -2158,8 +2156,8 @@ type ToggleButtonProps = ScalableProps & {
|
|
|
2158
2156
|
icon?: ReactNode;
|
|
2159
2157
|
/** Exibe somente o ícone, sem texto (modo simple) */
|
|
2160
2158
|
iconOnly?: boolean;
|
|
2161
|
-
/**
|
|
2162
|
-
|
|
2159
|
+
/** Texto exibido no botão (modo simple) */
|
|
2160
|
+
label?: string;
|
|
2163
2161
|
/** Estado pressionado controlado (modo simple) */
|
|
2164
2162
|
pressed?: boolean;
|
|
2165
2163
|
/** Estado pressionado padrão não controlado (modo simple) */
|
|
@@ -2346,5 +2344,5 @@ declare function useInfiniteScroll({ status, page, lastPage, onLoadMore, thresho
|
|
|
2346
2344
|
|
|
2347
2345
|
declare const normalizeText: (text: React.ReactNode) => string;
|
|
2348
2346
|
|
|
2349
|
-
export { Avatar, Badge, Button, Calendar, Callout, Card, Checkbox, MemoizedChips as Chips, Container, _default$2 as DatePicker, Dialog, Drawer, FileUpload, Filter, ListItem, Menu, Modal, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, TableV2, _default$1 as TextArea, _default as TextField, Toast, ToastContainer, ToastProvider, ToggleButton, Tooltip, VerificationCode, VirtualKeyboard, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
2350
|
-
export type { AvatarProps, BadgeProps, ButtonProps, CalendarProps, CalloutProps, CardProps, CheckboxProps, ChipsProps, ContainerProps, DatePickerProps, DialogProps, DrawerProps, FileUploadProps, FilterProps, ListItemProps, MenuProps, ModalProps, PopoverProps, QuantityProps, RadioGroupProps, RadioProps, SearchProps, SelectProps, SwitchProps, TableV2FooterProps, TableV2HeaderProps, TableV2Props, TextAreaProps, TextFieldProps, ToastProps, ToggleButtonMode,
|
|
2347
|
+
export { Avatar, Badge, Button, Calendar, Callout, Card, Checkbox, MemoizedChips as Chips, Container, _default$2 as DatePicker, Dialog, Drawer, FileUpload, Filter, Avatar as G_Avatar, Badge as G_Badge, Button as G_Button, Calendar as G_Calendar, Callout as G_Callout, Card as G_Card, Checkbox as G_Checkbox, MemoizedChips as G_Chips, Container as G_Container, _default$2 as G_DatePicker, Dialog as G_Dialog, Drawer as G_Drawer, FileUpload as G_FileUpload, Filter as G_Filter, ListItem as G_ListItem, Menu as G_Menu, Modal as G_Modal, Popover as G_Popover, memorizedQuantity as G_Quantity, Radio as G_Radio, Search as G_Search, Select as G_Select, Switch as G_Switch, TableV2 as G_TableV2, _default$1 as G_TextArea, _default as G_TextField, Toast as G_Toast, ToastContainer as G_ToastContainer, ToastProvider as G_ToastProvider, ToggleButton as G_ToggleButton, Tooltip as G_Tooltip, VerificationCode as G_VerificationCode, VirtualKeyboard as G_VirtualKeyboard, ListItem, Menu, Modal, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, TableV2, _default$1 as TextArea, _default as TextField, Toast, ToastContainer, ToastProvider, ToggleButton, Tooltip, VerificationCode, VirtualKeyboard, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
2348
|
+
export type { AvatarProps, BadgeProps, ButtonProps, CalendarProps, CalloutProps, CardProps, CheckboxProps, ChipsProps, ContainerProps, DatePickerProps, DialogProps, DrawerProps, FileUploadProps, FilterProps, ListItemProps, MenuProps, ModalProps, PopoverProps, QuantityProps, RadioGroupProps, RadioProps, SearchProps, SelectProps, SwitchProps, TableV2FooterProps, TableV2HeaderProps, TableV2Props, TextAreaProps, TextFieldProps, ToastProps, ToggleButtonMode, ToggleButtonProps, ToggleGroupItem, ToggleGroupType, TooltipProps, VerificationCodeProps, VirtualKeyboardProps, VirtualKeyboardVariant };
|
package/dist/index.esm.js
CHANGED
|
@@ -2,8 +2,8 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { Avatar as Avatar$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, Popover as Popover$1, Label, AlertDialog, DropdownMenu, Dialog as Dialog$1, RadioGroup, Select as Select$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Toast as Toast$1, Switch as Switch$1, unstable_OneTimePasswordField } from 'radix-ui';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import React__default, { useId, useMemo, createContext, useState, useContext, useRef, useCallback, useEffect, useLayoutEffect, createElement,
|
|
6
|
-
import { SpinnerIos16Regular, ChevronUp16Regular, ChevronLeft16Regular, ChevronRight16Regular, ChevronDown16Regular, Dismiss24Regular, ArrowImport20Regular, Emoji20Regular, ChevronDown20Regular, KeyboardShiftUppercase20Regular, KeyboardShift20Filled, KeyboardShift20Regular, Backspace20Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, DocumentAdd24Regular, Warning24Regular, Document24Regular, FilterRegular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, SearchInfo20Regular, ArrowSortUp16Regular, ArrowSortDown16Regular, ArrowSort16Regular, Info20Filled, CheckmarkCircle20Filled, Warning20Filled, Dismiss16Filled } from '@fluentui/react-icons';
|
|
5
|
+
import React__default, { useId, version, forwardRef as forwardRef$1, useMemo, createContext, useState, useContext, useRef, useCallback, useEffect, useLayoutEffect, createElement, memo, useReducer } from 'react';
|
|
6
|
+
import { SpinnerIos16Regular, ChevronUp16Regular, ChevronLeft16Regular, ChevronRight16Regular, ChevronDown16Regular, Dismiss24Regular, Spacebar20Regular, ArrowImport20Regular, Emoji20Regular, ChevronDown20Regular, KeyboardShiftUppercase20Regular, KeyboardShift20Filled, KeyboardShift20Regular, Backspace20Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, DocumentAdd24Regular, Warning24Regular, Document24Regular, FilterRegular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, SearchInfo20Regular, ArrowSortUp16Regular, ArrowSortDown16Regular, ArrowSort16Regular, Info20Filled, CheckmarkCircle20Filled, Warning20Filled, Dismiss16Filled } from '@fluentui/react-icons';
|
|
7
7
|
import { DayPicker } from 'react-day-picker';
|
|
8
8
|
import { format, addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, eachYearOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, getISOWeek, getMonth, getYear, getWeek, isAfter, isBefore, isDate, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay, startOfISOWeek, startOfMonth, startOfWeek, startOfYear } from 'date-fns';
|
|
9
9
|
import { createPortal } from 'react-dom';
|
|
@@ -57,6 +57,39 @@ const Badge = ({ children, badgeValue = null, className, id, filterVariant = fal
|
|
|
57
57
|
}, className), "data-testid": "badge", children: !isEmpty && (jsx("span", { "aria-hidden": !!ariaLabel, children: displayValue })) }) }));
|
|
58
58
|
};
|
|
59
59
|
|
|
60
|
+
const REACT_MAJOR = parseInt(version.split('.')[0], 10);
|
|
61
|
+
/**
|
|
62
|
+
* Shim de compatibilidade para `React.forwardRef` que funciona tanto no React 18
|
|
63
|
+
* quanto no React 19.
|
|
64
|
+
*
|
|
65
|
+
* - React 18: `ref` não é uma prop comum — usa `React.forwardRef` internamente.
|
|
66
|
+
* - React 19: `ref` é uma prop normal e `forwardRef` foi depreciado. Este shim
|
|
67
|
+
* cria um componente funcional comum que lê `ref` das props diretamente,
|
|
68
|
+
* evitando o aviso de depreciação.
|
|
69
|
+
*
|
|
70
|
+
* O padrão de autoria dos componentes permanece idêntico para ambas as versões.
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
* const MyInput = forwardRef<HTMLInputElement, MyInputProps>((props, ref) => {
|
|
74
|
+
* return <input ref={ref} {...props} />;
|
|
75
|
+
* });
|
|
76
|
+
*/
|
|
77
|
+
function forwardRef(render) {
|
|
78
|
+
if (REACT_MAJOR >= 19) {
|
|
79
|
+
const Comp = (props) => {
|
|
80
|
+
const { ref, ...rest } = props;
|
|
81
|
+
return render(rest, ref ?? null);
|
|
82
|
+
};
|
|
83
|
+
const displayName = render.displayName ?? render.name;
|
|
84
|
+
if (displayName) {
|
|
85
|
+
Comp.displayName = displayName;
|
|
86
|
+
}
|
|
87
|
+
return Comp;
|
|
88
|
+
}
|
|
89
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
90
|
+
return forwardRef$1(render);
|
|
91
|
+
}
|
|
92
|
+
|
|
60
93
|
var styles$t = {"tooltipContent":"Tooltip-module__tooltipContent___xycUg","triggerWrapper":"Tooltip-module__triggerWrapper___x83XR"};
|
|
61
94
|
|
|
62
95
|
const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, sideOffset = 10, className, ...rest }) => {
|
|
@@ -65,7 +98,7 @@ const Tooltip = ({ children, text, side = 'bottom', align = 'start', maxWidth, s
|
|
|
65
98
|
|
|
66
99
|
var styles$s = {"button":"Button-module__button___18Bed","button-lg":"Button-module__button-lg___-A8B9","button-sm":"Button-module__button-sm___L7aT7","button-filled":"Button-module__button-filled___IQx1z","button-outlined":"Button-module__button-outlined___hLkLN","button-text":"Button-module__button-text___8GFeA","buttonWithIcon":"Button-module__buttonWithIcon___8ehK1","buttonIconPosition-left":"Button-module__buttonIconPosition-left___uOY6b","buttonIconPosition-right":"Button-module__buttonIconPosition-right___eswRS","buttonIconPosition-both":"Button-module__buttonIconPosition-both___1Lith","buttonNoContent":"Button-module__buttonNoContent___Tc9jk","buttonIconOnly":"Button-module__buttonIconOnly___aifk4","buttonIconLeft":"Button-module__buttonIconLeft___RICR3","buttonIconRight":"Button-module__buttonIconRight___71lu2","buttonFullWidth":"Button-module__buttonFullWidth___tXuVE","disabled":"Button-module__disabled___UzdWL","buttonLoading":"Button-module__buttonLoading___RGdNw","buttonContentHidden":"Button-module__buttonContentHidden___CoCiN","buttonLoadingSpinner":"Button-module__buttonLoadingSpinner___oZxEU","spin":"Button-module__spin___kQKH9"};
|
|
67
100
|
|
|
68
|
-
const Button =
|
|
101
|
+
const Button = forwardRef(({ as, children, variant = 'filled', iconPosition = 'left', href, to, external = false, target, rel, disabled = false, onClick, size = 'lg', scale = 1, className, type = 'button', id, icon, fullWidth = false, ariaLabel, iconOnly = false, loading = false, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', ...rest }, ref) => {
|
|
69
102
|
const generatedId = useId();
|
|
70
103
|
const componentId = id || generatedId;
|
|
71
104
|
const getComponent = () => {
|
|
@@ -177,7 +210,7 @@ const Button = React__default.forwardRef(({ as, children, variant = 'filled', ic
|
|
|
177
210
|
}
|
|
178
211
|
return {};
|
|
179
212
|
};
|
|
180
|
-
if (
|
|
213
|
+
if (tooltipText && !loading) {
|
|
181
214
|
return (jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: jsx(Component, { ...baseProps, ...getNavigationProps(), children: renderContent() }) }));
|
|
182
215
|
}
|
|
183
216
|
return (jsx(Component, { ...baseProps, ...getNavigationProps(), children: renderContent() }));
|
|
@@ -2910,6 +2943,7 @@ const ICON_KEY_MAP = {
|
|
|
2910
2943
|
downkeyboard: ChevronDown20Regular,
|
|
2911
2944
|
emoji: Emoji20Regular,
|
|
2912
2945
|
enterNumpad: ArrowImport20Regular,
|
|
2946
|
+
spaceNumpad: Spacebar20Regular,
|
|
2913
2947
|
};
|
|
2914
2948
|
const SHARED_DISPLAY = {
|
|
2915
2949
|
'{capslock}': iconSlot('capslock'),
|
|
@@ -2953,7 +2987,7 @@ const QWERTY_LOWERCASE = [
|
|
|
2953
2987
|
'{numbers} {alt} {space} . {enter}',
|
|
2954
2988
|
];
|
|
2955
2989
|
const NUMPAD = ['1 2 3', '4 5 6', '7 8 9', '{abc} 0 {bksp}'];
|
|
2956
|
-
const NUMPAD_WITH_ENTER = ['1 2 3 -', '4 5 6
|
|
2990
|
+
const NUMPAD_WITH_ENTER = ['1 2 3 -', '4 5 6 {space}', '7 8 9 {bksp}', '{abc} 0 . {enter}'];
|
|
2957
2991
|
const SHARED_LAYOUTS = {
|
|
2958
2992
|
shift: [
|
|
2959
2993
|
'1 2 3 4 5 6 7 8 9 0',
|
|
@@ -3030,19 +3064,22 @@ const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFi
|
|
|
3030
3064
|
computedLayout = replaceKeyWithBlank(computedLayout, '{abc}');
|
|
3031
3065
|
}
|
|
3032
3066
|
if (isFixed) {
|
|
3033
|
-
computedLayout = Object.fromEntries(Object.entries(computedLayout).map(([layoutName, rows]) =>
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
|
|
3041
|
-
|
|
3042
|
-
|
|
3043
|
-
|
|
3044
|
-
|
|
3045
|
-
|
|
3067
|
+
computedLayout = Object.fromEntries(Object.entries(computedLayout).map(([layoutName, rows]) => {
|
|
3068
|
+
const hasBksp = rows.some((r) => r.includes('{bksp}'));
|
|
3069
|
+
return [
|
|
3070
|
+
layoutName,
|
|
3071
|
+
rows.map((row) => {
|
|
3072
|
+
const trimmed = row.trim();
|
|
3073
|
+
if (/^[a-zA-ZçÇ]/.test(trimmed) && trimmed.endsWith('{bksp}')) {
|
|
3074
|
+
return '{//} ' + trimmed.replace(/\s*\{bksp\}$/, '') + ' {//}';
|
|
3075
|
+
}
|
|
3076
|
+
if (!hasBksp && /\{(shift|capslock|shiftactivated)\}$/.test(trimmed)) {
|
|
3077
|
+
return trimmed.replace(/\{(shift|capslock|shiftactivated)\}$/, '{bksp}');
|
|
3078
|
+
}
|
|
3079
|
+
return row;
|
|
3080
|
+
}),
|
|
3081
|
+
];
|
|
3082
|
+
}));
|
|
3046
3083
|
}
|
|
3047
3084
|
return computedLayout;
|
|
3048
3085
|
};
|
|
@@ -3545,12 +3582,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange
|
|
|
3545
3582
|
if (heldKey &&
|
|
3546
3583
|
input.length >= currentValue.length + 1 &&
|
|
3547
3584
|
input.startsWith(currentValue) &&
|
|
3548
|
-
input.slice(currentValue.length).
|
|
3585
|
+
[...input.slice(currentValue.length)].every((char) => char === heldKey)) {
|
|
3549
3586
|
syncKeyboardInput(currentValue);
|
|
3550
3587
|
return;
|
|
3551
3588
|
}
|
|
3552
3589
|
if (suppressedKey &&
|
|
3553
|
-
input.length === currentValue.length +
|
|
3590
|
+
input.length === currentValue.length + suppressedKey.length &&
|
|
3554
3591
|
input.endsWith(suppressedKey)) {
|
|
3555
3592
|
suppressNextInputRef.current = null;
|
|
3556
3593
|
syncKeyboardInput(currentValue);
|
|
@@ -3580,6 +3617,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange
|
|
|
3580
3617
|
const display = { ...baseDisplay };
|
|
3581
3618
|
if (numpadWithEnter && isNumpadLayout) {
|
|
3582
3619
|
display['{enter}'] = '<span data-icon-key="enterNumpad"></span>';
|
|
3620
|
+
display['{space}'] = '<span data-icon-key="spaceNumpad"></span>';
|
|
3583
3621
|
}
|
|
3584
3622
|
if (variant === 'fixed') {
|
|
3585
3623
|
display['{bksp}'] = (display['{bksp}'] ?? '').replace(/\s*Apagar$/, '');
|
|
@@ -3655,7 +3693,7 @@ const LabelComponent = ({ children, htmlFor, required = false, tooltip = false,
|
|
|
3655
3693
|
return container;
|
|
3656
3694
|
};
|
|
3657
3695
|
|
|
3658
|
-
const TextField = forwardRef(({ className, style, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, icon, scale = 1, onBlur, onFocus, name,
|
|
3696
|
+
const TextField = forwardRef(({ className, style, value, label, placeholder, type = 'text', onChange, disabled = false, maxLength, required = false, helperText, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', errorMessage, error, id, icon, scale = 1, onBlur, onFocus, name, virtualKeyboard, attachedToVirtualKeyboard, disableAutoComplete = false, ...rest }, ref) => {
|
|
3659
3697
|
const normalizeValue = (val) => {
|
|
3660
3698
|
return val === undefined || val === null ? '' : String(val);
|
|
3661
3699
|
};
|
|
@@ -3706,7 +3744,7 @@ const TextField = forwardRef(({ className, style, value, label, placeholder, typ
|
|
|
3706
3744
|
setIsFocused(true);
|
|
3707
3745
|
onFocus?.(e);
|
|
3708
3746
|
}, [onFocus]);
|
|
3709
|
-
const showCustomIcon = (inputValue.trim().length === 0 ||
|
|
3747
|
+
const showCustomIcon = (inputValue.trim().length === 0 || !isFocused) && icon;
|
|
3710
3748
|
const showClearIcon = isFocused && inputValue.trim().length > 0;
|
|
3711
3749
|
const hasError = Boolean(inputError) || Boolean(error);
|
|
3712
3750
|
const displayHelperText = (error ? errorMessage : undefined) || inputError || helperText || '\u00A0';
|
|
@@ -3961,7 +3999,7 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
|
|
|
3961
3999
|
};
|
|
3962
4000
|
return (jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsx(TextField$1, { className: styles$h.textfieldContainer, type: "tel", icon: jsx(Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
|
|
3963
4001
|
handleTextFieldChange(String(e));
|
|
3964
|
-
}, onKeyDown: handleKeyDown, onFocus: handleFocus,
|
|
4002
|
+
}, onKeyDown: handleKeyDown, onFocus: handleFocus, autoComplete: "off", value: displayValue, helperText: !externalError ? (helperText || undefined) : undefined, errorMessage: externalError ? combinedHelperText : undefined, error: hasValidationError ? true : undefined, maxLength: 10, required: required, label: label, disabled: disabled, scale: scale, id: fieldId, "data-testid": testId, placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": calendarId, "aria-invalid": hasValidationError, "aria-describedby": externalError ? undefined : (helperText ? `${fieldId}-help` : undefined) }), content: jsx(Calendar, { selected: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy', minDate: minDate, maxDate: maxDate, scale: scale, id: calendarId, onClear: () => {
|
|
3965
4003
|
handleDateChange(null);
|
|
3966
4004
|
setCurrentDate(new Date());
|
|
3967
4005
|
} }), side: calendarSide, align: calendarAlign, sideOffset: 8 }) }));
|
|
@@ -3970,7 +4008,7 @@ var DatePicker_default = React__default.memo(DatePicker);
|
|
|
3970
4008
|
|
|
3971
4009
|
var styles$g = {"DialogOverlay":"Dialog-module__DialogOverlay___LEX2O","DialogContent":"Dialog-module__DialogContent___ziVXb","DialogTitle":"Dialog-module__DialogTitle___ay1tD","DialogDescription":"Dialog-module__DialogDescription___odslw","DivButtons":"Dialog-module__DivButtons___BiwX-"};
|
|
3972
4010
|
|
|
3973
|
-
const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsx(AlertDialog.Root, { open: show, ...rest, children: jsxs(AlertDialog.Portal, { children: [jsx(AlertDialog.Overlay, { className: styles$g.DialogOverlay }), jsxs(AlertDialog.Content, { className: clsx(styles$g.DialogContent, className), children: [jsx(AlertDialog.Title, { className: styles$g.DialogTitle, children: title }), jsx(AlertDialog.Description, { className: styles$g.DialogDescription, children: bodyContent }), jsxs("div", { className: styles$g.DivButtons, children: [!!(textSecondaryAction && textSecondaryAction.trim()) && (jsx(AlertDialog.Cancel, { asChild: true, children: jsx(Button, { variant: "outlined", ...(onSecondaryAction && { onClick: onSecondaryAction }), children: textSecondaryAction }) })), jsx(AlertDialog.Action, { asChild: true, children: jsx(Button, { variant: "filled", ...(onPrimaryAction && { onClick: onPrimaryAction }), children: textPrimaryAction }) })] })] })] }) }));
|
|
4011
|
+
const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsx(AlertDialog.Root, { open: show, ...rest, children: jsxs(AlertDialog.Portal, { children: [jsx(AlertDialog.Overlay, { className: styles$g.DialogOverlay }), jsxs(AlertDialog.Content, { className: clsx(styles$g.DialogContent, className), children: [jsx(AlertDialog.Title, { className: styles$g.DialogTitle, children: title }), jsx(AlertDialog.Description, { asChild: true, className: styles$g.DialogDescription, children: jsx("div", { children: bodyContent }) }), jsxs("div", { className: styles$g.DivButtons, children: [!!(textSecondaryAction && textSecondaryAction.trim()) && (jsx(AlertDialog.Cancel, { asChild: true, children: jsx(Button, { variant: "outlined", ...(onSecondaryAction && { onClick: onSecondaryAction }), children: textSecondaryAction }) })), jsx(AlertDialog.Action, { asChild: true, children: jsx(Button, { variant: "filled", ...(onPrimaryAction && { onClick: onPrimaryAction }), children: textPrimaryAction }) })] })] })] }) }));
|
|
3974
4012
|
|
|
3975
4013
|
var styles$f = {"drawerShadow":"Drawer-module__drawerShadow___0Z6iL","drawerShadow--visible":"Drawer-module__drawerShadow--visible___FspoH","drawerSidebar":"Drawer-module__drawerSidebar___cdyyb","drawerSidebar--open":"Drawer-module__drawerSidebar--open___ee2-Y","drawerSidebar--disabled":"Drawer-module__drawerSidebar--disabled___MYrBI","drawerTitleClose":"Drawer-module__drawerTitleClose___QzqN-","drawerTitle":"Drawer-module__drawerTitle___naMX0","drawerChildren":"Drawer-module__drawerChildren___xGdg9","drawerHeaderContent":"Drawer-module__drawerHeaderContent___NLSwj"};
|
|
3976
4014
|
|
|
@@ -4225,7 +4263,7 @@ const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled
|
|
|
4225
4263
|
|
|
4226
4264
|
var styles$c = {"search":"Search-module__search___u3QsV","searchLeftIcon":"Search-module__searchLeftIcon___OKOBq","disabled":"Search-module__disabled___adbxO","inputWithClearIcon":"Search-module__inputWithClearIcon___cqvkq","searchClearIcon":"Search-module__searchClearIcon___qX9-h"};
|
|
4227
4265
|
|
|
4228
|
-
const Search =
|
|
4266
|
+
const Search = forwardRef(({ placeholder = 'Dica do que deve ser buscado', disabled = false, value, onChange, onKeyDown, onFocus, onBlur, onClear, onClick, onMouseDown, searchMode = 'instant', onSearch, id, scale = 1, className, style, virtualKeyboard, 'data-testid': testId, ...rest }, ref) => {
|
|
4229
4267
|
const [internalValue, setInternalValue] = useState('');
|
|
4230
4268
|
const { internalRef: inputRef, setRefs: setInputRefs } = useInputKeyboardValue(ref);
|
|
4231
4269
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
@@ -4835,9 +4873,9 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4835
4873
|
}, ...rest, children: [search && (jsx("div", { className: styles$a.searchWrapper, children: jsx(Search, { placeholder: "Buscar", onChange: handleSearchChange, value: searchInput, onKeyDown: handleSearchKeyDown }) })), jsxs("div", { className: styles$a.itemsWrapper, ref: itemsWrapperRef, style: { maxHeight: maxHeightStyle }, children: [filteredItems.length > 0 ? (filteredItems.map((item, index) => renderMenuItem(item, item.value || item.text || `item-${index}`))) : (jsx("div", { className: styles$a.emptyState, children: "Nenhum item encontrado" })), enableInfiniteScroll && isLoadingMore && (jsx("div", { className: styles$a.loadingMore, children: "Carregando mais itens..." })), enableInfiniteScroll && (jsx("div", { ref: sentinelRef, "data-scroll-sentinel": true, style: { height: '1px', visibility: 'hidden' } }))] })] }) })] }));
|
|
4836
4874
|
};
|
|
4837
4875
|
|
|
4838
|
-
var styles$9 = {"modalOverlay":"Modal-module__modalOverlay___rI8Wz","modalContent":"Modal-module__modalContent___6Cgb1","modalContent--fullscreen":"Modal-module__modalContent--fullscreen___QeBlG","modalHeader":"Modal-module__modalHeader___IuHIg","modalTitle":"Modal-module__modalTitle___9VDmr","modalBody":"Modal-module__modalBody___ohjQm","modalFooter":"Modal-module__modalFooter___TEqdK"};
|
|
4876
|
+
var styles$9 = {"modalOverlay":"Modal-module__modalOverlay___rI8Wz","modalContent":"Modal-module__modalContent___6Cgb1","modalContent--fullscreen":"Modal-module__modalContent--fullscreen___QeBlG","modalHeader":"Modal-module__modalHeader___IuHIg","modalCloseButton":"Modal-module__modalCloseButton___VoWHD","modalTitle":"Modal-module__modalTitle___9VDmr","modalBody":"Modal-module__modalBody___ohjQm","modalFooter":"Modal-module__modalFooter___TEqdK"};
|
|
4839
4877
|
|
|
4840
|
-
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, customHeight, fullscreen = false, ...rest }) => {
|
|
4878
|
+
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, customHeight, closingButton = true, fullscreen = false, ...rest }) => {
|
|
4841
4879
|
const contentRef = React.useRef(null);
|
|
4842
4880
|
const handleOpenChange = (open) => {
|
|
4843
4881
|
if (!open) {
|
|
@@ -4851,7 +4889,7 @@ const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeO
|
|
|
4851
4889
|
return (jsx(Dialog$1.Root, { open: isOpen, onOpenChange: handleOpenChange, ...rest, children: jsxs(Dialog$1.Portal, { children: [jsx(Dialog$1.Overlay, { className: styles$9.modalOverlay }), jsxs(Dialog$1.Content, { ref: contentRef, className: clsx(styles$9.modalContent, fullscreen && styles$9['modalContent--fullscreen'], className), id: id, style: {
|
|
4852
4890
|
'--modal-custom-width': customWidth,
|
|
4853
4891
|
'--modal-custom-height': customHeight,
|
|
4854
|
-
}, onInteractOutside: !closeOnOverlayClick ? (e) => e.preventDefault() : undefined, onOpenAutoFocus: handleOpenAutoFocus, "aria-labelledby": id ? `${id}-title` : 'modal-title', tabIndex: -1, children: [jsxs("header", { className: styles$9.modalHeader, children: [title && (jsx(Dialog$1.Title, { className: styles$9.modalTitle, id: id ? `${id}-title` : 'modal-title', children: title })), headerContent && (jsx("div", { children: headerContent })), jsx(Dialog$1.Close, { asChild: true, children: jsx(Button, { variant: "outlined", iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: "lg", tooltipText: 'Fechar' }) })] }), jsx("section", { className: styles$9.modalBody, children: children }), footer && (jsx("footer", { className: styles$9.modalFooter, children: footer }))] })] }) }));
|
|
4892
|
+
}, onInteractOutside: !closeOnOverlayClick ? (e) => e.preventDefault() : undefined, onOpenAutoFocus: handleOpenAutoFocus, "aria-labelledby": id ? `${id}-title` : 'modal-title', tabIndex: -1, children: [(title || headerContent || closingButton) && (jsxs("header", { className: styles$9.modalHeader, children: [title && (jsx(Dialog$1.Title, { className: styles$9.modalTitle, id: id ? `${id}-title` : 'modal-title', children: title })), headerContent && (jsx("div", { children: headerContent })), closingButton && (jsx("div", { className: styles$9.modalCloseButton, children: jsx(Dialog$1.Close, { asChild: true, children: jsx(Button, { variant: "outlined", iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: "lg", tooltipText: 'Fechar' }) }) }))] })), jsx("section", { className: styles$9.modalBody, children: children }), footer && (jsx("footer", { className: styles$9.modalFooter, children: footer }))] })] }) }));
|
|
4855
4893
|
};
|
|
4856
4894
|
|
|
4857
4895
|
var styles$8 = {"quantity":"Quantity-module__quantity___-vndR","quantityInput":"Quantity-module__quantityInput___xZG-v","disabled":"Quantity-module__disabled___X6p5l"};
|
|
@@ -5127,7 +5165,7 @@ const ExpandableSelectItem = ({ item, variant, onSelect, selectedValues, level =
|
|
|
5127
5165
|
}, role: "button", tabIndex: item.disabled ? -1 : 0, "data-disabled": item.disabled || undefined, "data-selected": isSelected && !hasChildren ? 'true' : undefined, "data-testid": `select-item-${item.value}`, children: [variant === 'icon' && item.icon && (jsx("span", { className: styles$6.icon, children: item.icon })), jsxs("div", { className: styles$6.textContent, children: [jsx("div", { className: styles$6.title, children: item.text }), item.subTitle && jsx("div", { className: styles$6.subTitle, children: item.subTitle })] }), hasChildren && (jsx("span", { className: styles$6.chevron, children: isExpanded ? jsx(ChevronDown16Regular, {}) : jsx(ChevronRight16Regular, {}) }))] }) }), hasChildren && isExpanded && (jsx("div", { className: styles$6.childrenWrapper, children: item.children.map((child) => (jsx(ExpandableSelectItem, { item: child, variant: variant, onSelect: onSelect, selectedValues: selectedValues, level: level + 1 }, child.id || child.value))) }))] }));
|
|
5128
5166
|
};
|
|
5129
5167
|
|
|
5130
|
-
const SelectItem =
|
|
5168
|
+
const SelectItem = forwardRef(({ text, subTitle, icon, disabled, value, variant, disableFocusOnHover, ...restProps }, ref) => {
|
|
5131
5169
|
return (jsxs("div", { className: clsx(styles$6.itemWrapper, {
|
|
5132
5170
|
[styles$6.disabled]: disabled,
|
|
5133
5171
|
}), "data-disabled": disabled || undefined, "data-testid": `select-item-${value}`, ref: ref, children: [variant === 'icon' && icon && (jsx("span", { className: styles$6.icon, children: icon })), jsxs(Select$1.Item, { className: clsx(styles$6.item, {
|
|
@@ -5369,11 +5407,12 @@ function useSelectLogic({ value, required = false, search = false, onValueChange
|
|
|
5369
5407
|
};
|
|
5370
5408
|
}
|
|
5371
5409
|
|
|
5372
|
-
const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, error, errorMessage, disabled = false, className, style, 'aria-label': ariaLabel, 'data-testid': testId, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', enableInfiniteScroll = false, onScrollEnd, isLoadingMore = false, enableApiSearch = false, onApiSearch, isSearching = false, scale = 1, ...rest }) => {
|
|
5410
|
+
const Select = ({ items, onValueChange, onOpenChange, variant, required = false, value, label, helperText, placeholder = 'Selecione', maxWidth, search = false, error, errorMessage, disabled = false, className, style, 'aria-label': ariaLabel, 'data-testid': testId, tooltipText, tooltipSide = 'bottom', tooltipAlign = 'start', enableInfiniteScroll = false, onScrollEnd, hasMore = true, isLoadingMore = false, enableApiSearch = false, onApiSearch, isSearching = false, scale = 1, ...rest }) => {
|
|
5373
5411
|
const componentId = useId();
|
|
5374
5412
|
const selectId = `select-${componentId}`;
|
|
5375
5413
|
const viewportRef = useRef(null);
|
|
5376
5414
|
const hasReachedEndRef = useRef(false);
|
|
5415
|
+
const wasLoadingMoreRef = useRef(false);
|
|
5377
5416
|
const { state, actions, refs, utils, } = useSelectLogic({
|
|
5378
5417
|
value,
|
|
5379
5418
|
required,
|
|
@@ -5392,7 +5431,7 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
5392
5431
|
const handleScroll = () => {
|
|
5393
5432
|
const { scrollTop, scrollHeight, clientHeight } = viewport;
|
|
5394
5433
|
const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
|
|
5395
|
-
if (isAtBottom && !hasReachedEndRef.current && onScrollEnd && !isLoadingMore) {
|
|
5434
|
+
if (isAtBottom && !hasReachedEndRef.current && onScrollEnd && !isLoadingMore && hasMore) {
|
|
5396
5435
|
hasReachedEndRef.current = true;
|
|
5397
5436
|
onScrollEnd();
|
|
5398
5437
|
}
|
|
@@ -5404,17 +5443,38 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
5404
5443
|
return () => {
|
|
5405
5444
|
viewport.removeEventListener('scroll', handleScroll);
|
|
5406
5445
|
};
|
|
5407
|
-
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore]);
|
|
5446
|
+
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore, hasMore]);
|
|
5408
5447
|
useEffect(() => {
|
|
5409
5448
|
if (state.isOpen && enableInfiniteScroll) {
|
|
5410
5449
|
hasReachedEndRef.current = false;
|
|
5411
5450
|
}
|
|
5412
5451
|
}, [state.isOpen, enableInfiniteScroll]);
|
|
5452
|
+
useEffect(() => {
|
|
5453
|
+
if (wasLoadingMoreRef.current && !isLoadingMore && enableInfiniteScroll) {
|
|
5454
|
+
hasReachedEndRef.current = false;
|
|
5455
|
+
}
|
|
5456
|
+
wasLoadingMoreRef.current = isLoadingMore;
|
|
5457
|
+
}, [isLoadingMore, enableInfiniteScroll]);
|
|
5413
5458
|
const displayText = useMemo(() => utils.getDisplayText(state.selectedValues, placeholder, variant, items), [state.selectedValues, placeholder, variant, items, utils]);
|
|
5414
5459
|
const filteredItems = useMemo(() => {
|
|
5415
5460
|
const termToFilter = enableApiSearch ? state.searchTerm : state.searchInput;
|
|
5416
5461
|
return utils.getFilteredItems(items, termToFilter);
|
|
5417
5462
|
}, [items, state.searchTerm, state.searchInput, enableApiSearch, utils]);
|
|
5463
|
+
useEffect(() => {
|
|
5464
|
+
if (!state.isOpen || !enableInfiniteScroll || !onScrollEnd || isLoadingMore)
|
|
5465
|
+
return;
|
|
5466
|
+
const timer = setTimeout(() => {
|
|
5467
|
+
const viewport = viewportRef.current;
|
|
5468
|
+
if (!viewport)
|
|
5469
|
+
return;
|
|
5470
|
+
const { scrollHeight, clientHeight } = viewport;
|
|
5471
|
+
if (scrollHeight <= clientHeight && !hasReachedEndRef.current && hasMore) {
|
|
5472
|
+
hasReachedEndRef.current = true;
|
|
5473
|
+
onScrollEnd();
|
|
5474
|
+
}
|
|
5475
|
+
}, 150);
|
|
5476
|
+
return () => clearTimeout(timer);
|
|
5477
|
+
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore, hasMore, filteredItems.length]);
|
|
5418
5478
|
const containerStyle = useMemo(() => ({
|
|
5419
5479
|
maxWidth: maxWidth ? `${maxWidth}px` : undefined,
|
|
5420
5480
|
'--giro-scale': scale,
|
|
@@ -5482,18 +5542,18 @@ const EmptyState = ({ emptyIcon, emptyTitle, emptyText }) => (jsxs("div", { clas
|
|
|
5482
5542
|
|
|
5483
5543
|
var styles$4 = {"toggle":"ToggleButton-module__toggle___c1Ym-","item":"ToggleButton-module__item___2Qll-","toggle-lg":"ToggleButton-module__toggle-lg___8f3lo","item-lg":"ToggleButton-module__item-lg___479w-","toggle-sm":"ToggleButton-module__toggle-sm___SAGGb","item-sm":"ToggleButton-module__item-sm___4ju--","toggleIconLeft":"ToggleButton-module__toggleIconLeft___VwgKk","toggleWithIcon":"ToggleButton-module__toggleWithIcon___WbCr7","toggleIconOnly":"ToggleButton-module__toggleIconOnly___4iMEp","group":"ToggleButton-module__group___BoR-e"};
|
|
5484
5544
|
|
|
5485
|
-
const Toggle = ({ pressed, defaultPressed, onPressedChange, disabled = false, className,
|
|
5545
|
+
const Toggle = ({ pressed, defaultPressed, onPressedChange, disabled = false, className, label, id, size = 'lg', scale = 1, style, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', icon, iconOnly = false, mode: _mode, selectionType: _type, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, items: _items, ...rest }) => {
|
|
5486
5546
|
const toggle = (jsx(Toggle$1.Root, { pressed: pressed, defaultPressed: defaultPressed, onPressedChange: onPressedChange, disabled: disabled, className: clsx(styles$4.toggle, styles$4[`toggle-${size}`], {
|
|
5487
5547
|
[styles$4.toggleIconOnly]: iconOnly,
|
|
5488
5548
|
[styles$4.toggleWithIcon]: !!icon && !iconOnly,
|
|
5489
|
-
}, className), id: id, style: { '--giro-scale': scale, ...style }, ...rest, children: iconOnly ? (jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: icon })) : (jsxs(Fragment, { children: [icon && jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: icon }),
|
|
5549
|
+
}, className), id: id, style: { '--giro-scale': scale, ...style }, ...rest, children: iconOnly ? (jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: icon })) : (jsxs(Fragment, { children: [icon && jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: icon }), label] })) }));
|
|
5490
5550
|
if (tooltipText) {
|
|
5491
5551
|
return (jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: toggle }));
|
|
5492
5552
|
}
|
|
5493
5553
|
return toggle;
|
|
5494
5554
|
};
|
|
5495
5555
|
|
|
5496
|
-
const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueChange,
|
|
5556
|
+
const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueChange, disabled = false, items = [], className, id, size = 'lg', scale = 1, style, tooltipText, tooltipSide = 'top', tooltipAlign = 'center', mode: _mode, icon: _icon, iconOnly: _iconOnly, pressed: _pressed, defaultPressed: _defaultPressed, onPressedChange: _onPressedChange, ...rest }) => {
|
|
5497
5557
|
const rootProps = selectionType === 'multiple'
|
|
5498
5558
|
? {
|
|
5499
5559
|
type: 'multiple',
|
|
@@ -5507,11 +5567,10 @@ const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueCha
|
|
|
5507
5567
|
defaultValue: defaultValue,
|
|
5508
5568
|
onValueChange: onValueChange,
|
|
5509
5569
|
};
|
|
5510
|
-
const group = (jsx(ToggleGroup$1.Root, { ...rootProps,
|
|
5511
|
-
|
|
5512
|
-
|
|
5513
|
-
|
|
5514
|
-
}), style: { '--giro-scale': scale }, children: item.iconOnly ? (jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon })) : (jsxs(Fragment, { children: [item.icon && jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon }), item.label] })) }, item.value))) }));
|
|
5570
|
+
const group = (jsx(ToggleGroup$1.Root, { ...rootProps, disabled: disabled, className: clsx(styles$4.group, className), id: id, style: { '--giro-scale': scale, ...style }, ...rest, children: items.map((item) => (jsx(ToggleGroup$1.Item, { value: item.value, disabled: item.disabled, className: clsx(styles$4.item, styles$4[`item-${size}`], {
|
|
5571
|
+
[styles$4.toggleIconOnly]: item.iconOnly,
|
|
5572
|
+
[styles$4.toggleWithIcon]: !!item.icon && !item.iconOnly,
|
|
5573
|
+
}), style: { '--giro-scale': scale }, children: item.iconOnly ? (jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon })) : (jsxs(Fragment, { children: [item.icon && jsx("span", { className: styles$4.toggleIconLeft, "aria-hidden": "true", children: item.icon }), item.label] })) }, item.value))) }));
|
|
5515
5574
|
if (tooltipText) {
|
|
5516
5575
|
return (jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: group }));
|
|
5517
5576
|
}
|
|
@@ -5877,13 +5936,19 @@ const useToast = () => {
|
|
|
5877
5936
|
const Toast = ({ id, title, duration = 5000, icon, iconClosed = jsx(Dismiss16Filled, {}), automaticClose = true, iconType = "Info", className, ...rest }) => {
|
|
5878
5937
|
const [open, setOpen] = React.useState(false);
|
|
5879
5938
|
const { dismissToast } = useToastContext();
|
|
5939
|
+
const dismissTimerRef = React.useRef(null);
|
|
5880
5940
|
React.useEffect(() => {
|
|
5881
5941
|
setOpen(true);
|
|
5942
|
+
return () => {
|
|
5943
|
+
if (dismissTimerRef.current !== null) {
|
|
5944
|
+
clearTimeout(dismissTimerRef.current);
|
|
5945
|
+
}
|
|
5946
|
+
};
|
|
5882
5947
|
}, []);
|
|
5883
5948
|
const handleOpenChange = (isOpen) => {
|
|
5884
5949
|
setOpen(isOpen);
|
|
5885
5950
|
if (!isOpen && id) {
|
|
5886
|
-
setTimeout(() => dismissToast(id), 200);
|
|
5951
|
+
dismissTimerRef.current = setTimeout(() => dismissToast(id), 200);
|
|
5887
5952
|
}
|
|
5888
5953
|
};
|
|
5889
5954
|
let displayIcon = icon;
|
|
@@ -6291,5 +6356,5 @@ function useInfiniteScroll({ status, page, lastPage, onLoadMore, threshold = 0.1
|
|
|
6291
6356
|
};
|
|
6292
6357
|
}
|
|
6293
6358
|
|
|
6294
|
-
export { Avatar, Badge, Button, Calendar, Callout, Card, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, Dialog, Drawer, FileUpload, Filter, ListItem, Menu, Modal, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, TableV2, TextArea_default as TextArea, TextField$1 as TextField, Toast, ToastContainer, ToastProvider, ToggleButton, Tooltip, VerificationCode, VirtualKeyboard, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
6359
|
+
export { Avatar, Badge, Button, Calendar, Callout, Card, Checkbox, MemoizedChips as Chips, Container, DatePicker_default as DatePicker, Dialog, Drawer, FileUpload, Filter, Avatar as G_Avatar, Badge as G_Badge, Button as G_Button, Calendar as G_Calendar, Callout as G_Callout, Card as G_Card, Checkbox as G_Checkbox, MemoizedChips as G_Chips, Container as G_Container, DatePicker_default as G_DatePicker, Dialog as G_Dialog, Drawer as G_Drawer, FileUpload as G_FileUpload, Filter as G_Filter, ListItem as G_ListItem, Menu as G_Menu, Modal as G_Modal, Popover as G_Popover, memorizedQuantity as G_Quantity, Radio as G_Radio, Search as G_Search, Select as G_Select, Switch as G_Switch, TableV2 as G_TableV2, TextArea_default as G_TextArea, TextField$1 as G_TextField, Toast as G_Toast, ToastContainer as G_ToastContainer, ToastProvider as G_ToastProvider, ToggleButton as G_ToggleButton, Tooltip as G_Tooltip, VerificationCode as G_VerificationCode, VirtualKeyboard as G_VirtualKeyboard, ListItem, Menu, Modal, Popover, memorizedQuantity as Quantity, Radio, Search, Select, Switch, TableV2, TextArea_default as TextArea, TextField$1 as TextField, Toast, ToastContainer, ToastProvider, ToggleButton, Tooltip, VerificationCode, VirtualKeyboard, normalizeText, useApiSimulation, useInfiniteScroll, useToast };
|
|
6295
6360
|
//# sourceMappingURL=index.esm.js.map
|