@giro-ds/react 12.2.0 → 12.4.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 +143 -50
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +17 -10
- package/dist/index.esm.js +111 -51
- 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 */
|
|
@@ -1146,6 +1148,15 @@ interface VirtualKeyboardProps extends Omit<BaseProps, 'disabled'> {
|
|
|
1146
1148
|
* @default false
|
|
1147
1149
|
*/
|
|
1148
1150
|
numpadWithEnter?: boolean;
|
|
1151
|
+
/**
|
|
1152
|
+
* Altura do teclado no modo `native` (overlay). Aceita qualquer valor CSS válido
|
|
1153
|
+
* de altura (ex.: `'320px'`, `'50dvh'`, `'40%'`).
|
|
1154
|
+
* Se omitido, o teclado usa uma altura fluida padrão baseada no viewport
|
|
1155
|
+
* (`clamp(280px, 45dvh, 420px)`).
|
|
1156
|
+
* Independente do valor informado, a altura nunca fica menor que 280px (piso mínimo).
|
|
1157
|
+
* Só tem efeito quando `variant="native"`.
|
|
1158
|
+
*/
|
|
1159
|
+
nativeHeight?: string;
|
|
1149
1160
|
/** Texto de ajuda do TextField exibido no modo `fixed` */
|
|
1150
1161
|
helperText?: string;
|
|
1151
1162
|
/** Sinaliza erro no TextField exibido no modo `fixed` */
|
|
@@ -1334,6 +1345,8 @@ interface SelectPropsBase extends ScalableProps {
|
|
|
1334
1345
|
enableInfiniteScroll?: boolean;
|
|
1335
1346
|
/** Callback executado ao chegar ao final do scroll: () => void */
|
|
1336
1347
|
onScrollEnd?: () => void;
|
|
1348
|
+
/** Indica se há mais itens disponíveis para carregamento */
|
|
1349
|
+
hasMore?: boolean;
|
|
1337
1350
|
/** Estado de carregamento de mais itens */
|
|
1338
1351
|
isLoadingMore?: boolean;
|
|
1339
1352
|
/** Habilita busca via API */
|
|
@@ -1796,8 +1809,6 @@ interface TextFieldPropsBase extends ScalableProps, Omit<React__default.InputHTM
|
|
|
1796
1809
|
error?: boolean;
|
|
1797
1810
|
/** Ícone a ser exibido no campo */
|
|
1798
1811
|
icon?: React__default.ReactNode;
|
|
1799
|
-
/** Mantém o ícone visível mesmo quando o campo tem valor */
|
|
1800
|
-
persistIcon?: boolean;
|
|
1801
1812
|
/** Tipo do teclado virtual (padrão: undefined = desabilitado) */
|
|
1802
1813
|
virtualKeyboard?: VirtualKeyboardType;
|
|
1803
1814
|
/** Aplica variação visual para uso acoplado ao VirtualKeyboard no modo fixed, essa prop é de uso exclusivo do VirtualKeyboard no modo fixed */
|
|
@@ -2055,8 +2066,6 @@ declare const Switch: React$1.FC<SwitchProps>;
|
|
|
2055
2066
|
type ToggleButtonMode = 'simple' | 'combined';
|
|
2056
2067
|
/** Tipo de seleção do grupo: 'single' (um item) ou 'multiple' (múltiplos itens) */
|
|
2057
2068
|
type ToggleGroupType = 'single' | 'multiple';
|
|
2058
|
-
/** Orientação do grupo de toggles */
|
|
2059
|
-
type ToggleButtonOrientation = 'horizontal' | 'vertical';
|
|
2060
2069
|
interface BaseTooltipConfig {
|
|
2061
2070
|
tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
|
|
2062
2071
|
tooltipAlign?: 'start' | 'center' | 'end';
|
|
@@ -2120,8 +2129,6 @@ type ToggleGroupMultipleSelectionProps = {
|
|
|
2120
2129
|
* - `selectionType="multiple"` → `onValueChange: (value: string[]) => void`
|
|
2121
2130
|
*/
|
|
2122
2131
|
type ToggleGroupProps = {
|
|
2123
|
-
/** Orientação do grupo: `'horizontal'` (padrão) ou `'vertical'` */
|
|
2124
|
-
orientation?: ToggleButtonOrientation;
|
|
2125
2132
|
/** Items do grupo de toggles */
|
|
2126
2133
|
items?: ToggleGroupItem[];
|
|
2127
2134
|
} & (ToggleGroupSingleSelectionProps | ToggleGroupMultipleSelectionProps);
|
|
@@ -2158,8 +2165,8 @@ type ToggleButtonProps = ScalableProps & {
|
|
|
2158
2165
|
icon?: ReactNode;
|
|
2159
2166
|
/** Exibe somente o ícone, sem texto (modo simple) */
|
|
2160
2167
|
iconOnly?: boolean;
|
|
2161
|
-
/**
|
|
2162
|
-
|
|
2168
|
+
/** Texto exibido no botão (modo simple) */
|
|
2169
|
+
label?: string;
|
|
2163
2170
|
/** Estado pressionado controlado (modo simple) */
|
|
2164
2171
|
pressed?: boolean;
|
|
2165
2172
|
/** Estado pressionado padrão não controlado (modo simple) */
|
|
@@ -2346,5 +2353,5 @@ declare function useInfiniteScroll({ status, page, lastPage, onLoadMore, thresho
|
|
|
2346
2353
|
|
|
2347
2354
|
declare const normalizeText: (text: React.ReactNode) => string;
|
|
2348
2355
|
|
|
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,
|
|
2356
|
+
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 };
|
|
2357
|
+
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() }));
|
|
@@ -2086,12 +2119,6 @@ class DateLib {
|
|
|
2086
2119
|
* @param overrides Custom overrides for the date library functions.
|
|
2087
2120
|
*/
|
|
2088
2121
|
constructor(options, overrides) {
|
|
2089
|
-
/**
|
|
2090
|
-
* Reference to the built-in Date constructor.
|
|
2091
|
-
*
|
|
2092
|
-
* @deprecated Use `newDate()` or `today()`.
|
|
2093
|
-
*/
|
|
2094
|
-
this.Date = Date;
|
|
2095
2122
|
/**
|
|
2096
2123
|
* Creates a new `Date` object representing today's date.
|
|
2097
2124
|
*
|
|
@@ -2105,7 +2132,8 @@ class DateLib {
|
|
|
2105
2132
|
if (this.options.timeZone) {
|
|
2106
2133
|
return TZDate.tz(this.options.timeZone);
|
|
2107
2134
|
}
|
|
2108
|
-
|
|
2135
|
+
const DateCtor = this.options.Date ?? Date;
|
|
2136
|
+
return new DateCtor();
|
|
2109
2137
|
};
|
|
2110
2138
|
/**
|
|
2111
2139
|
* Creates a new `Date` object with the specified year, month, and day.
|
|
@@ -2910,6 +2938,7 @@ const ICON_KEY_MAP = {
|
|
|
2910
2938
|
downkeyboard: ChevronDown20Regular,
|
|
2911
2939
|
emoji: Emoji20Regular,
|
|
2912
2940
|
enterNumpad: ArrowImport20Regular,
|
|
2941
|
+
spaceNumpad: Spacebar20Regular,
|
|
2913
2942
|
};
|
|
2914
2943
|
const SHARED_DISPLAY = {
|
|
2915
2944
|
'{capslock}': iconSlot('capslock'),
|
|
@@ -2953,7 +2982,7 @@ const QWERTY_LOWERCASE = [
|
|
|
2953
2982
|
'{numbers} {alt} {space} . {enter}',
|
|
2954
2983
|
];
|
|
2955
2984
|
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
|
|
2985
|
+
const NUMPAD_WITH_ENTER = ['1 2 3 -', '4 5 6 {space}', '7 8 9 {bksp}', '{abc} 0 . {enter}'];
|
|
2957
2986
|
const SHARED_LAYOUTS = {
|
|
2958
2987
|
shift: [
|
|
2959
2988
|
'1 2 3 4 5 6 7 8 9 0',
|
|
@@ -3030,19 +3059,22 @@ const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFi
|
|
|
3030
3059
|
computedLayout = replaceKeyWithBlank(computedLayout, '{abc}');
|
|
3031
3060
|
}
|
|
3032
3061
|
if (isFixed) {
|
|
3033
|
-
computedLayout = Object.fromEntries(Object.entries(computedLayout).map(([layoutName, rows]) =>
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
|
|
3041
|
-
|
|
3042
|
-
|
|
3043
|
-
|
|
3044
|
-
|
|
3045
|
-
|
|
3062
|
+
computedLayout = Object.fromEntries(Object.entries(computedLayout).map(([layoutName, rows]) => {
|
|
3063
|
+
const hasBksp = rows.some((r) => r.includes('{bksp}'));
|
|
3064
|
+
return [
|
|
3065
|
+
layoutName,
|
|
3066
|
+
rows.map((row) => {
|
|
3067
|
+
const trimmed = row.trim();
|
|
3068
|
+
if (/^[a-zA-ZçÇ]/.test(trimmed) && trimmed.endsWith('{bksp}')) {
|
|
3069
|
+
return '{//} ' + trimmed.replace(/\s*\{bksp\}$/, '') + ' {//}';
|
|
3070
|
+
}
|
|
3071
|
+
if (!hasBksp && /\{(shift|capslock|shiftactivated)\}$/.test(trimmed)) {
|
|
3072
|
+
return trimmed.replace(/\{(shift|capslock|shiftactivated)\}$/, '{bksp}');
|
|
3073
|
+
}
|
|
3074
|
+
return row;
|
|
3075
|
+
}),
|
|
3076
|
+
];
|
|
3077
|
+
}));
|
|
3046
3078
|
}
|
|
3047
3079
|
return computedLayout;
|
|
3048
3080
|
};
|
|
@@ -3094,7 +3126,7 @@ const ACCENT_OPTIONS = {
|
|
|
3094
3126
|
* <VirtualKeyboard targetRef={inputRef} value={value} onChange={setValue} />
|
|
3095
3127
|
* ```
|
|
3096
3128
|
*/
|
|
3097
|
-
const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange, onKeyPress, onEnterPress, onTypeChange, maxLength, Emoji = false, className, id, placeholder = 'Digite aqui...', helperText, error, errorMessage, targetRef, textFieldScale = 1, showEnterKey = true, showTypeSwitchKey = true, numpadWithEnter = false, }) => {
|
|
3129
|
+
const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange, onKeyPress, onEnterPress, onTypeChange, maxLength, Emoji = false, className, id, placeholder = 'Digite aqui...', helperText, error, errorMessage, targetRef, textFieldScale = 1, showEnterKey = true, showTypeSwitchKey = true, numpadWithEnter = false, nativeHeight, }) => {
|
|
3098
3130
|
const [internalValue, setInternalValue] = useState(value ?? '');
|
|
3099
3131
|
const [layoutName, setLayoutName] = useState('default');
|
|
3100
3132
|
const [capsLockOn, setCapsLockOn] = useState(false);
|
|
@@ -3545,12 +3577,12 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange
|
|
|
3545
3577
|
if (heldKey &&
|
|
3546
3578
|
input.length >= currentValue.length + 1 &&
|
|
3547
3579
|
input.startsWith(currentValue) &&
|
|
3548
|
-
input.slice(currentValue.length).
|
|
3580
|
+
[...input.slice(currentValue.length)].every((char) => char === heldKey)) {
|
|
3549
3581
|
syncKeyboardInput(currentValue);
|
|
3550
3582
|
return;
|
|
3551
3583
|
}
|
|
3552
3584
|
if (suppressedKey &&
|
|
3553
|
-
input.length === currentValue.length +
|
|
3585
|
+
input.length === currentValue.length + suppressedKey.length &&
|
|
3554
3586
|
input.endsWith(suppressedKey)) {
|
|
3555
3587
|
suppressNextInputRef.current = null;
|
|
3556
3588
|
syncKeyboardInput(currentValue);
|
|
@@ -3580,6 +3612,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange
|
|
|
3580
3612
|
const display = { ...baseDisplay };
|
|
3581
3613
|
if (numpadWithEnter && isNumpadLayout) {
|
|
3582
3614
|
display['{enter}'] = '<span data-icon-key="enterNumpad"></span>';
|
|
3615
|
+
display['{space}'] = '<span data-icon-key="spaceNumpad"></span>';
|
|
3583
3616
|
}
|
|
3584
3617
|
if (variant === 'fixed') {
|
|
3585
3618
|
display['{bksp}'] = (display['{bksp}'] ?? '').replace(/\s*Apagar$/, '');
|
|
@@ -3624,7 +3657,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value, onChange
|
|
|
3624
3657
|
event.stopPropagation();
|
|
3625
3658
|
}, onClick: () => handleAccentSelect(option), children: option }, `${accentMenu.sourceKey}-${option}`))) }, rowIndex))) }), document.body))] })) : null;
|
|
3626
3659
|
if (variant === 'native' && typeof document !== 'undefined') {
|
|
3627
|
-
return createPortal(jsx("div", { id: id, className: clsx(styles$k.overlay, { [styles$k.overlayOpen]: isOpen }, styles$k[isNumpadLayout ? 'layout--numeric' : 'layout--default'], className), children: keyboardEl }), document.body);
|
|
3660
|
+
return createPortal(jsx("div", { id: id, className: clsx(styles$k.overlay, { [styles$k.overlayOpen]: isOpen }, styles$k[isNumpadLayout ? 'layout--numeric' : 'layout--default'], className), style: nativeHeight ? { '--vkeyboard-native-height': nativeHeight } : undefined, children: keyboardEl }), document.body);
|
|
3628
3661
|
}
|
|
3629
3662
|
return (jsxs("div", { id: id, className: clsx(styles$k.container, styles$k[`mode--${variant}`], styles$k[isNumpadLayout ? 'layout--numeric' : 'layout--default'], className), children: [variant === 'fixed' && (jsx("div", { className: styles$k.textFieldContainer, children: jsx(TextField$1, { placeholder: placeholder, value: effectiveValue, onChange: onChange, helperText: helperText, error: error, errorMessage: errorMessage, readOnly: true, disableAutoComplete: true, maxLength: maxLength, attachedToVirtualKeyboard: true, className: styles$k.textFieldWrapper, scale: textFieldScale }) })), keyboardEl] }));
|
|
3630
3663
|
};
|
|
@@ -3655,7 +3688,7 @@ const LabelComponent = ({ children, htmlFor, required = false, tooltip = false,
|
|
|
3655
3688
|
return container;
|
|
3656
3689
|
};
|
|
3657
3690
|
|
|
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,
|
|
3691
|
+
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
3692
|
const normalizeValue = (val) => {
|
|
3660
3693
|
return val === undefined || val === null ? '' : String(val);
|
|
3661
3694
|
};
|
|
@@ -3706,7 +3739,7 @@ const TextField = forwardRef(({ className, style, value, label, placeholder, typ
|
|
|
3706
3739
|
setIsFocused(true);
|
|
3707
3740
|
onFocus?.(e);
|
|
3708
3741
|
}, [onFocus]);
|
|
3709
|
-
const showCustomIcon = (inputValue.trim().length === 0 ||
|
|
3742
|
+
const showCustomIcon = (inputValue.trim().length === 0 || !isFocused) && icon;
|
|
3710
3743
|
const showClearIcon = isFocused && inputValue.trim().length > 0;
|
|
3711
3744
|
const hasError = Boolean(inputError) || Boolean(error);
|
|
3712
3745
|
const displayHelperText = (error ? errorMessage : undefined) || inputError || helperText || '\u00A0';
|
|
@@ -3961,7 +3994,7 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
|
|
|
3961
3994
|
};
|
|
3962
3995
|
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
3996
|
handleTextFieldChange(String(e));
|
|
3964
|
-
}, onKeyDown: handleKeyDown, onFocus: handleFocus,
|
|
3997
|
+
}, 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
3998
|
handleDateChange(null);
|
|
3966
3999
|
setCurrentDate(new Date());
|
|
3967
4000
|
} }), side: calendarSide, align: calendarAlign, sideOffset: 8 }) }));
|
|
@@ -3970,7 +4003,7 @@ var DatePicker_default = React__default.memo(DatePicker);
|
|
|
3970
4003
|
|
|
3971
4004
|
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
4005
|
|
|
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 }) })] })] })] }) }));
|
|
4006
|
+
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
4007
|
|
|
3975
4008
|
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
4009
|
|
|
@@ -4225,7 +4258,7 @@ const Combined = ({ buttonText = 'Filtrar', icon, variant = 'outlined', disabled
|
|
|
4225
4258
|
|
|
4226
4259
|
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
4260
|
|
|
4228
|
-
const Search =
|
|
4261
|
+
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
4262
|
const [internalValue, setInternalValue] = useState('');
|
|
4230
4263
|
const { internalRef: inputRef, setRefs: setInputRefs } = useInputKeyboardValue(ref);
|
|
4231
4264
|
const isControlled = value !== undefined && onChange !== undefined;
|
|
@@ -4835,9 +4868,9 @@ const Menu = ({ items, children, onItemSelect, search, enableInfiniteScroll, onS
|
|
|
4835
4868
|
}, ...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
4869
|
};
|
|
4837
4870
|
|
|
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"};
|
|
4871
|
+
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
4872
|
|
|
4840
|
-
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, customHeight, fullscreen = false, ...rest }) => {
|
|
4873
|
+
const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeOnOverlayClick = true, className, id, footer, customWidth, customHeight, closingButton = true, fullscreen = false, ...rest }) => {
|
|
4841
4874
|
const contentRef = React.useRef(null);
|
|
4842
4875
|
const handleOpenChange = (open) => {
|
|
4843
4876
|
if (!open) {
|
|
@@ -4851,7 +4884,7 @@ const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeO
|
|
|
4851
4884
|
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
4885
|
'--modal-custom-width': customWidth,
|
|
4853
4886
|
'--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 }))] })] }) }));
|
|
4887
|
+
}, 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
4888
|
};
|
|
4856
4889
|
|
|
4857
4890
|
var styles$8 = {"quantity":"Quantity-module__quantity___-vndR","quantityInput":"Quantity-module__quantityInput___xZG-v","disabled":"Quantity-module__disabled___X6p5l"};
|
|
@@ -5127,7 +5160,7 @@ const ExpandableSelectItem = ({ item, variant, onSelect, selectedValues, level =
|
|
|
5127
5160
|
}, 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
5161
|
};
|
|
5129
5162
|
|
|
5130
|
-
const SelectItem =
|
|
5163
|
+
const SelectItem = forwardRef(({ text, subTitle, icon, disabled, value, variant, disableFocusOnHover, ...restProps }, ref) => {
|
|
5131
5164
|
return (jsxs("div", { className: clsx(styles$6.itemWrapper, {
|
|
5132
5165
|
[styles$6.disabled]: disabled,
|
|
5133
5166
|
}), "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 +5402,12 @@ function useSelectLogic({ value, required = false, search = false, onValueChange
|
|
|
5369
5402
|
};
|
|
5370
5403
|
}
|
|
5371
5404
|
|
|
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 }) => {
|
|
5405
|
+
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
5406
|
const componentId = useId();
|
|
5374
5407
|
const selectId = `select-${componentId}`;
|
|
5375
5408
|
const viewportRef = useRef(null);
|
|
5376
5409
|
const hasReachedEndRef = useRef(false);
|
|
5410
|
+
const wasLoadingMoreRef = useRef(false);
|
|
5377
5411
|
const { state, actions, refs, utils, } = useSelectLogic({
|
|
5378
5412
|
value,
|
|
5379
5413
|
required,
|
|
@@ -5392,7 +5426,7 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
5392
5426
|
const handleScroll = () => {
|
|
5393
5427
|
const { scrollTop, scrollHeight, clientHeight } = viewport;
|
|
5394
5428
|
const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
|
|
5395
|
-
if (isAtBottom && !hasReachedEndRef.current && onScrollEnd && !isLoadingMore) {
|
|
5429
|
+
if (isAtBottom && !hasReachedEndRef.current && onScrollEnd && !isLoadingMore && hasMore) {
|
|
5396
5430
|
hasReachedEndRef.current = true;
|
|
5397
5431
|
onScrollEnd();
|
|
5398
5432
|
}
|
|
@@ -5404,17 +5438,38 @@ const Select = ({ items, onValueChange, onOpenChange, variant, required = false,
|
|
|
5404
5438
|
return () => {
|
|
5405
5439
|
viewport.removeEventListener('scroll', handleScroll);
|
|
5406
5440
|
};
|
|
5407
|
-
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore]);
|
|
5441
|
+
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore, hasMore]);
|
|
5408
5442
|
useEffect(() => {
|
|
5409
5443
|
if (state.isOpen && enableInfiniteScroll) {
|
|
5410
5444
|
hasReachedEndRef.current = false;
|
|
5411
5445
|
}
|
|
5412
5446
|
}, [state.isOpen, enableInfiniteScroll]);
|
|
5447
|
+
useEffect(() => {
|
|
5448
|
+
if (wasLoadingMoreRef.current && !isLoadingMore && enableInfiniteScroll) {
|
|
5449
|
+
hasReachedEndRef.current = false;
|
|
5450
|
+
}
|
|
5451
|
+
wasLoadingMoreRef.current = isLoadingMore;
|
|
5452
|
+
}, [isLoadingMore, enableInfiniteScroll]);
|
|
5413
5453
|
const displayText = useMemo(() => utils.getDisplayText(state.selectedValues, placeholder, variant, items), [state.selectedValues, placeholder, variant, items, utils]);
|
|
5414
5454
|
const filteredItems = useMemo(() => {
|
|
5415
5455
|
const termToFilter = enableApiSearch ? state.searchTerm : state.searchInput;
|
|
5416
5456
|
return utils.getFilteredItems(items, termToFilter);
|
|
5417
5457
|
}, [items, state.searchTerm, state.searchInput, enableApiSearch, utils]);
|
|
5458
|
+
useEffect(() => {
|
|
5459
|
+
if (!state.isOpen || !enableInfiniteScroll || !onScrollEnd || isLoadingMore)
|
|
5460
|
+
return;
|
|
5461
|
+
const timer = setTimeout(() => {
|
|
5462
|
+
const viewport = viewportRef.current;
|
|
5463
|
+
if (!viewport)
|
|
5464
|
+
return;
|
|
5465
|
+
const { scrollHeight, clientHeight } = viewport;
|
|
5466
|
+
if (scrollHeight <= clientHeight && !hasReachedEndRef.current && hasMore) {
|
|
5467
|
+
hasReachedEndRef.current = true;
|
|
5468
|
+
onScrollEnd();
|
|
5469
|
+
}
|
|
5470
|
+
}, 150);
|
|
5471
|
+
return () => clearTimeout(timer);
|
|
5472
|
+
}, [state.isOpen, enableInfiniteScroll, onScrollEnd, isLoadingMore, hasMore, filteredItems.length]);
|
|
5418
5473
|
const containerStyle = useMemo(() => ({
|
|
5419
5474
|
maxWidth: maxWidth ? `${maxWidth}px` : undefined,
|
|
5420
5475
|
'--giro-scale': scale,
|
|
@@ -5482,18 +5537,18 @@ const EmptyState = ({ emptyIcon, emptyTitle, emptyText }) => (jsxs("div", { clas
|
|
|
5482
5537
|
|
|
5483
5538
|
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
5539
|
|
|
5485
|
-
const Toggle = ({ pressed, defaultPressed, onPressedChange, disabled = false, className,
|
|
5540
|
+
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
5541
|
const toggle = (jsx(Toggle$1.Root, { pressed: pressed, defaultPressed: defaultPressed, onPressedChange: onPressedChange, disabled: disabled, className: clsx(styles$4.toggle, styles$4[`toggle-${size}`], {
|
|
5487
5542
|
[styles$4.toggleIconOnly]: iconOnly,
|
|
5488
5543
|
[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 }),
|
|
5544
|
+
}, 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
5545
|
if (tooltipText) {
|
|
5491
5546
|
return (jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: toggle }));
|
|
5492
5547
|
}
|
|
5493
5548
|
return toggle;
|
|
5494
5549
|
};
|
|
5495
5550
|
|
|
5496
|
-
const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueChange,
|
|
5551
|
+
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
5552
|
const rootProps = selectionType === 'multiple'
|
|
5498
5553
|
? {
|
|
5499
5554
|
type: 'multiple',
|
|
@@ -5507,11 +5562,10 @@ const ToggleGroup = ({ selectionType = 'single', value, defaultValue, onValueCha
|
|
|
5507
5562
|
defaultValue: defaultValue,
|
|
5508
5563
|
onValueChange: onValueChange,
|
|
5509
5564
|
};
|
|
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))) }));
|
|
5565
|
+
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}`], {
|
|
5566
|
+
[styles$4.toggleIconOnly]: item.iconOnly,
|
|
5567
|
+
[styles$4.toggleWithIcon]: !!item.icon && !item.iconOnly,
|
|
5568
|
+
}), 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
5569
|
if (tooltipText) {
|
|
5516
5570
|
return (jsx(Tooltip, { text: tooltipText, side: tooltipSide, align: tooltipAlign, children: group }));
|
|
5517
5571
|
}
|
|
@@ -5877,13 +5931,19 @@ const useToast = () => {
|
|
|
5877
5931
|
const Toast = ({ id, title, duration = 5000, icon, iconClosed = jsx(Dismiss16Filled, {}), automaticClose = true, iconType = "Info", className, ...rest }) => {
|
|
5878
5932
|
const [open, setOpen] = React.useState(false);
|
|
5879
5933
|
const { dismissToast } = useToastContext();
|
|
5934
|
+
const dismissTimerRef = React.useRef(null);
|
|
5880
5935
|
React.useEffect(() => {
|
|
5881
5936
|
setOpen(true);
|
|
5937
|
+
return () => {
|
|
5938
|
+
if (dismissTimerRef.current !== null) {
|
|
5939
|
+
clearTimeout(dismissTimerRef.current);
|
|
5940
|
+
}
|
|
5941
|
+
};
|
|
5882
5942
|
}, []);
|
|
5883
5943
|
const handleOpenChange = (isOpen) => {
|
|
5884
5944
|
setOpen(isOpen);
|
|
5885
5945
|
if (!isOpen && id) {
|
|
5886
|
-
setTimeout(() => dismissToast(id), 200);
|
|
5946
|
+
dismissTimerRef.current = setTimeout(() => dismissToast(id), 200);
|
|
5887
5947
|
}
|
|
5888
5948
|
};
|
|
5889
5949
|
let displayIcon = icon;
|
|
@@ -6291,5 +6351,5 @@ function useInfiniteScroll({ status, page, lastPage, onLoadMore, threshold = 0.1
|
|
|
6291
6351
|
};
|
|
6292
6352
|
}
|
|
6293
6353
|
|
|
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 };
|
|
6354
|
+
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
6355
|
//# sourceMappingURL=index.esm.js.map
|