@giro-ds/react 12.1.1 → 12.2.0

package/dist/index.cjs

@@ -2928,6 +2928,7 @@ const ICON_KEY_MAP = {
     capslock: reactIcons.KeyboardShiftUppercase20Regular,
     downkeyboard: reactIcons.ChevronDown20Regular,
     emoji: reactIcons.Emoji20Regular,
+    enterNumpad: reactIcons.ArrowImport20Regular,
 };
 const SHARED_DISPLAY = {
     '{capslock}': iconSlot('capslock'),
@@ -2953,9 +2954,11 @@ const LAYOUT_DISPLAY = {
 const EMOTICON_KEY = '{emoticon}';
 const DOWN_KEYBOARD_KEY = '{downkeyboard}';
 const ENTER_KEY = '{enter}';
-const removeKeyFromLayout = (layout, key) => Object.fromEntries(Object.entries(layout).map(([layoutName, rows]) => [
+const removeKeyFromLayout = (layout, key, skipLayouts = []) => Object.fromEntries(Object.entries(layout).map(([layoutName, rows]) => [
     layoutName,
-    rows.map((row) => row.split(key).join(' ').replace(/\s+/g, ' ').trim()),
+    skipLayouts.includes(layoutName)
+        ? rows
+        : rows.map((row) => row.split(key).join(' ').replace(/\s+/g, ' ').trim()),
 ]));
 const replaceKeyWithBlank = (layout, key) => Object.fromEntries(Object.entries(layout).map(([layoutName, rows]) => [
     layoutName,
@@ -2968,7 +2971,8 @@ const QWERTY_LOWERCASE = [
     '{shift} z x c v b n m {bksp}',
     '{numbers} {alt} {space} . {enter}',
 ];
-const NUMPAD = ['1 2 3', '4 5 6', '7 8 9', '{bksp} 0 {abc}'];
+const NUMPAD = ['1 2 3', '4 5 6', '7 8 9', '{abc} 0 {bksp}'];
+const NUMPAD_WITH_ENTER = ['1 2 3 -', '4 5 6 _', '7 8 9 {bksp}', '{abc} 0 . {enter}'];
 const SHARED_LAYOUTS = {
     shift: [
         '1 2 3 4 5 6 7 8 9 0',
@@ -3018,11 +3022,17 @@ const NATIVE_LAYOUTS = {
 const NATIVE_LAYOUT_KEYS = new Set([
     'default', 'numeric',
 ]);
-const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFixed = false, showEnterKey = true, showTypeSwitchKey = true) => {
+const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFixed = false, showEnterKey = true, showTypeSwitchKey = true, numpadWithEnter = false) => {
     const layout = NATIVE_LAYOUTS[type] ?? NATIVE_LAYOUTS.default ?? null;
     if (!layout)
         return null;
-    let computedLayout = layout;
+    let computedLayout = numpadWithEnter
+        ? {
+            ...layout,
+            ...(type === 'numeric' ? { default: NUMPAD_WITH_ENTER } : {}),
+            numbers: NUMPAD_WITH_ENTER,
+        }
+        : layout;
     if (!Emoji) {
         computedLayout = removeKeyFromLayout(computedLayout, EMOTICON_KEY);
     }
@@ -3030,7 +3040,9 @@ const getNativeLayout = (type, Emoji = true, showDownKeyboardButton = true, isFi
         computedLayout = removeKeyFromLayout(computedLayout, DOWN_KEYBOARD_KEY);
     }
     if (!showEnterKey) {
-        computedLayout = removeKeyFromLayout(computedLayout, ENTER_KEY);
+        // Numpad layouts always preserve {enter}; only remove from QWERTY layouts
+        const numpadLayouts = type === 'numeric' ? ['default', 'numbers'] : ['numbers'];
+        computedLayout = removeKeyFromLayout(computedLayout, ENTER_KEY, numpadLayouts);
     }
     if (!showTypeSwitchKey) {
         computedLayout = removeKeyFromLayout(computedLayout, '{numbers}');
@@ -3101,13 +3113,16 @@ const ACCENT_OPTIONS = {
  * <VirtualKeyboard targetRef={inputRef} value={value} onChange={setValue} />
  * ```
  */
-const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onChange, onKeyPress, onTypeChange, maxLength, Emoji = false, className, id, placeholder = 'Digite aqui...', helperText, error, errorMessage, targetRef, textFieldScale = 1, showEnterKey = true, showTypeSwitchKey = true, }) => {
+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, }) => {
+    const [internalValue, setInternalValue] = React.useState(value ?? '');
     const [layoutName, setLayoutName] = React.useState('default');
     const [capsLockOn, setCapsLockOn] = React.useState(false);
     const [accentMenu, setAccentMenu] = React.useState(null);
     const [accentMenuOffsetX, setAccentMenuOffsetX] = React.useState(0);
-    const [activeLayout, setActiveLayout] = React.useState(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey));
+    const [activeLayout, setActiveLayout] = React.useState(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey, numpadWithEnter));
     const visualType = NATIVE_LAYOUT_KEYS.has(type) ? type : 'default';
+    const effectiveValue = onChange !== undefined ? (value ?? '') : internalValue;
+    const isNumpadLayout = (type === 'numeric' && layoutName === 'default') || layoutName === 'numbers';
     const [isOpen, setIsOpen] = React.useState(variant !== 'native');
     const hideTimeoutRef = React.useRef(null);
     const scrollTimeoutRef = React.useRef(null);
@@ -3120,15 +3135,15 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
     const keyboardInstanceRef = React.useRef(null);
     const accentMenuRef = React.useRef(null);
     const accentButtonRef = React.useRef(null);
-    const valueRef = React.useRef(value);
+    const valueRef = React.useRef(value ?? '');
     const [iconSlots, setIconSlots] = React.useState([]);
     const [keyPreview, setKeyPreview] = React.useState(null);
     const [keyPreviewOffsetX, setKeyPreviewOffsetX] = React.useState(0);
     const keyPreviewRef = React.useRef(null);
     const [containerWidth, setContainerWidth] = React.useState(Infinity);
     React.useEffect(() => {
-        valueRef.current = value;
-    }, [value]);
+        valueRef.current = effectiveValue;
+    }, [effectiveValue]);
     const clearLongPressTimeout = React.useCallback(() => {
         if (longPressTimeoutRef.current !== null) {
             clearTimeout(longPressTimeoutRef.current);
@@ -3143,8 +3158,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
         keyboardInstanceRef.current?.setInput(nextValue);
     }, []);
     React.useEffect(() => {
-        syncKeyboardInput(value);
-    }, [value, syncKeyboardInput]);
+        syncKeyboardInput(effectiveValue);
+    }, [effectiveValue, syncKeyboardInput]);
     React.useEffect(() => {
         onTypeChange?.(type);
     }, [type, onTypeChange]);
@@ -3222,8 +3237,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
     React.useEffect(() => {
         setLayoutName('default');
         setCapsLockOn(false);
-        setActiveLayout(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey));
-    }, [type, Emoji, variant, showEnterKey, showTypeSwitchKey]);
+        setActiveLayout(getNativeLayout(type, Emoji, variant === 'native', variant === 'fixed', showEnterKey, showTypeSwitchKey, numpadWithEnter));
+    }, [type, Emoji, variant, showEnterKey, showTypeSwitchKey, numpadWithEnter]);
     React.useEffect(() => {
         if (!Emoji && layoutName === 'emoticon') {
             setLayoutName(type === 'numeric' ? 'abc' : 'default');
@@ -3303,7 +3318,10 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
             if (newSlots.length === 0)
                 return;
             newSlots.forEach((s) => s.setAttribute('data-icon-root', 'true'));
-            setIconSlots((prev) => [...prev, ...newSlots]);
+            setIconSlots((prev) => [
+                ...prev.filter((slot) => container.contains(slot)),
+                ...newSlots,
+            ]);
         };
         registerNewSlots();
         const observer = new MutationObserver(() => {
@@ -3314,7 +3332,7 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
         return () => {
             observer.disconnect();
         };
-    }, []);
+    }, [variant]);
     React.useEffect(() => {
         closeAccentMenu();
         setAccentMenuOffsetX(0);
@@ -3396,6 +3414,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
             const currentValue = valueRef.current;
             if (maxLength === undefined || currentValue.length < maxLength) {
                 const nextValue = `${currentValue}${heldKey}`;
+                if (onChange === undefined)
+                    setInternalValue(nextValue);
                 onChange?.(nextValue);
                 onKeyPress?.(heldKey);
                 syncKeyboardInput(nextValue);
@@ -3429,6 +3449,8 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
             return;
         }
         const nextValue = `${currentValue}${accentedChar}`;
+        if (onChange === undefined)
+            setInternalValue(nextValue);
         onChange?.(nextValue);
         onKeyPress?.(accentedChar);
         closeAccentMenu();
@@ -3519,12 +3541,16 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
         if (isHeldAccentKey) {
             return;
         }
+        if (button === '{enter}') {
+            onEnterPress?.();
+        }
         onKeyPress?.(button);
     }, [
         type,
         layoutName,
         capsLockOn,
         onKeyPress,
+        onEnterPress,
         onTypeChange,
         Emoji,
         variant,
@@ -3551,8 +3577,10 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
         }
         if (maxLength !== undefined && input.length > maxLength)
             return;
+        if (onChange === undefined)
+            setInternalValue(input);
         onChange?.(input);
-    }, [maxLength, onChange, syncKeyboardInput]);
+    }, [maxLength, onChange, setInternalValue, syncKeyboardInput]);
     const portalSizes = React.useMemo(() => {
         if (containerWidth <= 360)
             return { preview: 42, option: 44, fontSize: 'var(--font-size-16)' };
@@ -3568,15 +3596,16 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
         const baseDisplay = LAYOUT_DISPLAY[visualType];
         if (!baseDisplay)
             return baseDisplay;
-        if (variant !== 'fixed') {
-            return baseDisplay;
+        const display = { ...baseDisplay };
+        if (numpadWithEnter && isNumpadLayout) {
+            display['{enter}'] = '<span data-icon-key="enterNumpad"></span>';
         }
-        return {
-            ...baseDisplay,
-            '{bksp}': (baseDisplay['{bksp}'] ?? '').replace(/\s*Apagar$/, ''),
-        };
-    }, [visualType, variant]);
-    const keyboardEl = activeLayout ? (jsxRuntime.jsxs("div", { ref: keyboardWrapperRef, className: clsx(styles$k.keyboardWrapper, ((type === 'numeric' && layoutName === 'default') || layoutName === 'numbers' || type === 'default') && styles$k.keyboardNumpadActive), onPointerDownCapture: handleLongPressStart, onPointerUpCapture: handleLongPressEnd, onPointerLeave: handleLongPressEnd, onPointerCancelCapture: handleLongPressEnd, children: [jsxRuntime.jsx(Keyboard, { keyboardRef: (instance) => {
+        if (variant === 'fixed') {
+            display['{bksp}'] = (display['{bksp}'] ?? '').replace(/\s*Apagar$/, '');
+        }
+        return display;
+    }, [visualType, variant, numpadWithEnter, isNumpadLayout]);
+    const keyboardEl = activeLayout ? (jsxRuntime.jsxs("div", { ref: keyboardWrapperRef, className: clsx(styles$k.keyboardWrapper, isNumpadLayout && styles$k.keyboardNumpadActive), onPointerDownCapture: handleLongPressStart, onPointerUpCapture: handleLongPressEnd, onPointerLeave: handleLongPressEnd, onPointerCancelCapture: handleLongPressEnd, children: [jsxRuntime.jsx(Keyboard, { keyboardRef: (instance) => {
                     keyboardInstanceRef.current = instance;
                     if (instance) {
                         instance.setInput(valueRef.current);
@@ -3614,9 +3643,9 @@ const VirtualKeyboard = ({ variant = 'native', type = 'default', value = '', onC
                                 event.stopPropagation();
                             }, onClick: () => handleAccentSelect(option), children: option }, `${accentMenu.sourceKey}-${option}`))) }, rowIndex))) }), document.body))] })) : null;
     if (variant === 'native' && typeof document !== 'undefined') {
-        return reactDom.createPortal(jsxRuntime.jsx("div", { id: id, className: clsx(styles$k.overlay, { [styles$k.overlayOpen]: isOpen }, styles$k[`layout--${visualType}`], className), children: keyboardEl }), document.body);
+        return reactDom.createPortal(jsxRuntime.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);
     }
-    return (jsxRuntime.jsxs("div", { id: id, className: clsx(styles$k.container, styles$k[`mode--${variant}`], styles$k[`layout--${visualType}`], className), children: [variant === 'fixed' && (jsxRuntime.jsx("div", { className: styles$k.textFieldContainer, children: jsxRuntime.jsx(TextField, { placeholder: placeholder, value: value, onChange: onChange, helperText: helperText, error: error, errorMessage: errorMessage, readOnly: true, disableAutoComplete: true, maxLength: maxLength, attachedToVirtualKeyboard: true, className: styles$k.textFieldWrapper, scale: textFieldScale }) })), keyboardEl] }));
+    return (jsxRuntime.jsxs("div", { id: id, className: clsx(styles$k.container, styles$k[`mode--${variant}`], styles$k[isNumpadLayout ? 'layout--numeric' : 'layout--default'], className), children: [variant === 'fixed' && (jsxRuntime.jsx("div", { className: styles$k.textFieldContainer, children: jsxRuntime.jsx(TextField, { 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] }));
 };
 
 var styles$j = {"container":"TextField-module__container___WJHFR","inputWrapper":"TextField-module__inputWrapper___INjfd","inputContainer":"TextField-module__inputContainer___3EsFJ","icon":"TextField-module__icon___p1vwi","clearButton":"TextField-module__clearButton___kgOot","inputWithIcon":"TextField-module__inputWithIcon___shqkL","helperText":"TextField-module__helperText___d5QGC","error":"TextField-module__error___IGQzp","disabled":"TextField-module__disabled___roIKP","attachedToVirtualKeyboard":"TextField-module__attachedToVirtualKeyboard___fuO2O","errorWithMessage":"TextField-module__errorWithMessage___m-5AA","clearButtonIcon":"TextField-module__clearButtonIcon___Z2iyc"};