@mezzanine-ui/react 0.15.3 → 1.0.0-alpha.0

package/Picker/formatUtils.js

@@ -0,0 +1,124 @@
+/**
+ * Format key characters that can appear in patterns
+ */
+const FORMAT_KEY_CHARS = new Set([
+    'Y',
+    'g',
+    'G',
+    'W',
+    'w', // Locale week (not ISO week)
+    'M',
+    'D',
+    'H', // Hour (0-23)
+    'n', // Half-year number (1-2)
+    'm',
+    's',
+    'S',
+    'Q',
+]);
+/**
+ * Parse format string into segments with their actual value positions
+ * Handles bracket literals and consecutive format keys
+ */
+function parseFormatSegments(format) {
+    const segments = [];
+    let valuePos = 0;
+    let i = 0;
+    while (i < format.length) {
+        const char = format[i];
+        // Handle escaped literals [...]
+        if (char === '[') {
+            const closeIndex = format.indexOf(']', i);
+            if (closeIndex !== -1) {
+                for (let j = i + 1; j < closeIndex; j++) {
+                    segments.push({
+                        type: 'literal',
+                        text: format[j],
+                        start: valuePos,
+                        end: valuePos + 1,
+                    });
+                    valuePos++;
+                }
+                i = closeIndex + 1;
+                continue;
+            }
+        }
+        // Handle format keys (consecutive same characters)
+        if (FORMAT_KEY_CHARS.has(char)) {
+            const keyStart = i;
+            while (i + 1 < format.length && format[i + 1] === char) {
+                i++;
+            }
+            const keyLength = i - keyStart + 1;
+            segments.push({
+                type: 'mask',
+                text: char.repeat(keyLength),
+                start: valuePos,
+                end: valuePos + keyLength,
+            });
+            valuePos += keyLength;
+            i++;
+            continue;
+        }
+        // Handle separators
+        segments.push({
+            type: 'separator',
+            text: char,
+            start: valuePos,
+            end: valuePos + 1,
+        });
+        valuePos++;
+        i++;
+    }
+    return segments;
+}
+/**
+ * Check if a mask segment is fully filled with digits
+ */
+function isMaskSegmentFilled(value, segment) {
+    if (segment.type !== 'mask')
+        return true;
+    for (let i = segment.start; i < segment.end; i++) {
+        if (!/\d/.test(value[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Find the last mask segment before a given position
+ */
+function findPreviousMaskSegment(segments, currentPos) {
+    let lastMask = null;
+    for (const segment of segments) {
+        if (segment.start >= currentPos)
+            break;
+        if (segment.type === 'mask') {
+            lastMask = segment;
+        }
+    }
+    return lastMask;
+}
+/**
+ * Strip brackets from format string to get template without brackets
+ */
+function getTemplateWithoutBrackets(format) {
+    let template = '';
+    let i = 0;
+    while (i < format.length) {
+        const char = format[i];
+        if (char === '[') {
+            const closeIndex = format.indexOf(']', i);
+            if (closeIndex !== -1) {
+                template += format.slice(i + 1, closeIndex);
+                i = closeIndex + 1;
+                continue;
+            }
+        }
+        template += char;
+        i++;
+    }
+    return template;
+}
+
+export { FORMAT_KEY_CHARS, findPreviousMaskSegment, getTemplateWithoutBrackets, isMaskSegmentFilled, parseFormatSegments };

package/Picker/index.d.ts

@@ -1,7 +1,18 @@
 export { useTabKeyClose } from './useTabKeyClose';
-export { UsePickerDocumentEventCloseProps, usePickerDocumentEventClose, } from './usePickerDocumentEventClose';
-export { UsePickerInputValueProps, usePickerInputValue, } from './usePickerInputValue';
-export { UsePickerValueProps, usePickerValue } from './usePickerValue';
-export { UseRangePickerValueProps, useRangePickerValue, } from './useRangePickerValue';
-export { PickerTriggerProps, default as PickerTrigger } from './PickerTrigger';
-export { RangePickerTriggerProps, default as RangePickerTrigger, } from './RangePickerTrigger';
+export { usePickerDocumentEventClose } from './usePickerDocumentEventClose';
+export type { UsePickerDocumentEventCloseProps } from './usePickerDocumentEventClose';
+export { usePickerInputValue } from './usePickerInputValue';
+export type { UsePickerInputValueProps } from './usePickerInputValue';
+export { usePickerValue } from './usePickerValue';
+export type { UsePickerValueProps } from './usePickerValue';
+export type { PickerTriggerProps } from './PickerTrigger';
+export { default as PickerTrigger } from './PickerTrigger';
+export { default as PickerTriggerWithSeparator } from './PickerTriggerWithSeparator';
+export type { PickerTriggerWithSeparatorProps } from './PickerTriggerWithSeparator';
+export { default as RangePickerTrigger } from './RangePickerTrigger';
+export type { RangePickerTriggerProps } from './RangePickerTrigger';
+export { default as FormattedInput } from './FormattedInput';
+export type { FormattedInputProps } from './FormattedInput';
+export { useDateInputFormatter } from './useDateInputFormatter';
+export type { UseDateInputFormatterProps } from './useDateInputFormatter';
+export { default as MaskFormat } from './MaskFormat';

package/Picker/index.js

@@ -2,6 +2,9 @@ export { useTabKeyClose } from './useTabKeyClose.js';
 export { usePickerDocumentEventClose } from './usePickerDocumentEventClose.js';
 export { usePickerInputValue } from './usePickerInputValue.js';
 export { usePickerValue } from './usePickerValue.js';
-export { useRangePickerValue } from './useRangePickerValue.js';
 export { default as PickerTrigger } from './PickerTrigger.js';
+export { default as PickerTriggerWithSeparator } from './PickerTriggerWithSeparator.js';
 export { default as RangePickerTrigger } from './RangePickerTrigger.js';
+export { default as FormattedInput } from './FormattedInput.js';
+export { useDateInputFormatter } from './useDateInputFormatter.js';
+export { default as MaskFormat } from './MaskFormat.js';

package/Picker/useDateInputFormatter.d.ts

@@ -0,0 +1,52 @@
+import { ClipboardEventHandler, FocusEventHandler, KeyboardEvent } from 'react';
+export interface UseDateInputFormatterProps {
+    /**
+     * error messages for different validation scenarios
+     * @default { enabled: true, invalidInput: 'Input value is not valid.', invalidPaste: 'Pasted content is not valid.' }
+     */
+    errorMessages?: {
+        enabled?: boolean;
+        invalidInput?: string;
+        invalidPaste?: string;
+    };
+    /**
+     * Format pattern (e.g., "YYYY-MM-DD", "HH:mm:ss")
+     */
+    format: string;
+    /**
+     * Current value
+     */
+    value?: string;
+    /**
+     * Change handler receiving formatted value and raw digits
+     */
+    onChange?: (formattedValue: string, rawDigits: string) => void;
+    /**
+     * Input ref for controlling selection
+     */
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+    /**
+     * Focus event handler
+     */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Blur event handler
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Custom validation function. Return true if valid, false to clear the value.
+     * Called after format validation passes.
+     */
+    validate?: (isoDate: string) => boolean;
+}
+/**
+ * Hook for formatting date/time input with mask format
+ */
+export declare function useDateInputFormatter(props: UseDateInputFormatterProps): {
+    value: string;
+    focused: boolean;
+    handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    handleFocus: FocusEventHandler<HTMLInputElement>;
+    handleBlur: FocusEventHandler<HTMLInputElement>;
+    handlePaste: ClipboardEventHandler<HTMLInputElement>;
+};

package/Picker/useDateInputFormatter.js

@@ -0,0 +1,382 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import MaskFormat, { getMaskRange } from './MaskFormat.js';
+import { getTemplateWithoutBrackets } from './formatUtils.js';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+import Message from '../Message/Message.js';
+
+/**
+ * Hook for formatting date/time input with mask format
+ */
+function useDateInputFormatter(props) {
+    const { errorMessages = {
+        enabled: true,
+        invalidInput: 'Input value is not valid.',
+        invalidPaste: 'Pasted content is not valid.',
+    }, format, value: externalValue = '', onChange, inputRef, onFocus: onFocusProp, onBlur: onBlurProp, validate, } = props;
+    const { parseFormattedValue, isValid, locale, formatToString } = useCalendarContext();
+    const maskFormat = useRef(new MaskFormat(format)).current;
+    const [internalValue, setInternalValue] = useState(externalValue || getTemplateWithoutBrackets(format));
+    // Track focus state
+    const [focused, setFocused] = useState(false);
+    /**
+     * Check if value is completely filled and valid
+     */
+    const isValueComplete = useCallback((val) => {
+        return maskFormat.match(val);
+    }, [maskFormat]);
+    // Sync external value - only update internal when external explicitly changes
+    const prevExternalValue = useRef(externalValue);
+    useEffect(() => {
+        // Only sync when external value actually changes (not caused by our own onChange)
+        if (externalValue !== prevExternalValue.current) {
+            prevExternalValue.current = externalValue;
+            if (externalValue) {
+                setInternalValue(externalValue);
+            }
+            else {
+                // External cleared - reset to template
+                setInternalValue(getTemplateWithoutBrackets(format));
+            }
+        }
+    }, [externalValue, format]);
+    /**
+     * Trigger value change
+     */
+    const triggerChange = useCallback((newValue, cursorPosition) => {
+        setInternalValue(newValue);
+        // Only trigger onChange if value is complete and valid
+        if (onChange && isValueComplete(newValue)) {
+            // Try to parse and validate the formatted value
+            const isoDate = parseFormattedValue(newValue, format, locale);
+            // Validate format and custom validation (e.g., time step)
+            if (isoDate && (!validate || validate(isoDate))) {
+                const rawDigits = newValue.replace(/[^0-9]/g, '');
+                onChange(isoDate, rawDigits);
+            }
+            else {
+                if (errorMessages.enabled) {
+                    Message.error(errorMessages.invalidInput);
+                }
+            }
+        }
+        // Restore cursor position after React re-renders
+        if (cursorPosition !== undefined && (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(cursorPosition, cursorPosition);
+            });
+        }
+    }, [
+        errorMessages,
+        onChange,
+        inputRef,
+        isValueComplete,
+        parseFormattedValue,
+        format,
+        validate,
+        locale,
+    ]);
+    /**
+     * Handle focus event
+     */
+    const handleFocus = useCallback((e) => {
+        setFocused(true);
+        onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(e);
+        // If value doesn't match format, fill with format template
+        if (!maskFormat.match(internalValue)) {
+            triggerChange(getTemplateWithoutBrackets(format));
+        }
+    }, [format, internalValue, maskFormat, triggerChange, onFocusProp]);
+    /**
+     * Handle blur event - clear incomplete values
+     */
+    const handleBlur = useCallback((e) => {
+        setFocused(false);
+        onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(e);
+        // If value is incomplete, clear it and notify parent
+        if (!isValueComplete(internalValue)) {
+            const templateValue = getTemplateWithoutBrackets(format);
+            setInternalValue(templateValue);
+            // Notify parent that value is cleared
+            if (onChange) {
+                onChange('', '');
+            }
+        }
+        else {
+            // Value is complete, validate it
+            const isoDate = parseFormattedValue(internalValue, format, locale);
+            if (!isoDate) {
+                // Invalid date/time format, clear it
+                const templateValue = getTemplateWithoutBrackets(format);
+                setInternalValue(templateValue);
+                if (onChange) {
+                    onChange('', '');
+                }
+            }
+            else if (validate && !validate(isoDate)) {
+                // Custom validation failed (e.g., time step validation), clear it
+                const templateValue = getTemplateWithoutBrackets(format);
+                setInternalValue(templateValue);
+                if (onChange) {
+                    onChange('', '');
+                }
+            }
+        }
+    }, [
+        format,
+        internalValue,
+        isValueComplete,
+        onChange,
+        onBlurProp,
+        parseFormattedValue,
+        validate,
+        locale,
+    ]);
+    /**
+     * Handle key down for mask input
+     */
+    const handleKeyDown = useCallback((e) => {
+        const { key } = e;
+        const templateValue = getTemplateWithoutBrackets(format);
+        if (key === 'Tab') {
+            e.stopPropagation();
+            return;
+        }
+        // Backspace
+        if (key === 'Backspace') {
+            e.preventDefault();
+            const cursorPos = e.target.selectionStart || 0;
+            if (cursorPos === 0)
+                return;
+            // Check if cursor is on a separator
+            let isSeparatorPos = true;
+            for (const cell of maskFormat.maskCells) {
+                if (cursorPos > cell.start && cursorPos <= cell.end) {
+                    isSeparatorPos = false;
+                    break;
+                }
+            }
+            if (isSeparatorPos) {
+                // On separator, move cursor to previous editable position
+                let prevPos = cursorPos - 1;
+                while (prevPos >= 0) {
+                    let found = false;
+                    for (const cell of maskFormat.maskCells) {
+                        if (prevPos >= cell.start && prevPos < cell.end) {
+                            // Check if this position has a digit
+                            if (/\d/.test(internalValue[prevPos])) {
+                                found = true;
+                                break;
+                            }
+                        }
+                    }
+                    if (found)
+                        break;
+                    prevPos--;
+                }
+                if (prevPos < 0)
+                    return;
+                // Clear that position
+                const newValue = internalValue.split('');
+                newValue[prevPos] = templateValue[prevPos];
+                triggerChange(newValue.join(''), prevPos);
+                return;
+            }
+            // Find which cell the cursor is in
+            let targetCellIndex = -1;
+            let posInCell = -1;
+            for (let i = 0; i < maskFormat.maskCells.length; i++) {
+                const cell = maskFormat.maskCells[i];
+                if (cursorPos > cell.start && cursorPos <= cell.end) {
+                    targetCellIndex = i;
+                    posInCell = cursorPos - cell.start;
+                    break;
+                }
+            }
+            if (targetCellIndex === -1)
+                return;
+            const targetCell = maskFormat.maskCells[targetCellIndex];
+            const clearPos = targetCell.start + posInCell - 1;
+            // Check if clearing the first position of current cell
+            if (posInCell === 1) {
+                // Check if entire cell is empty (all format chars)
+                let cellIsEmpty = true;
+                for (let i = targetCell.start; i < targetCell.end; i++) {
+                    if (/\d/.test(internalValue[i])) {
+                        cellIsEmpty = false;
+                        break;
+                    }
+                }
+                if (cellIsEmpty && targetCellIndex > 0) {
+                    // Jump to previous cell's last position
+                    const prevCell = maskFormat.maskCells[targetCellIndex - 1];
+                    let lastDigitPos = prevCell.end - 1;
+                    // Find last digit in previous cell
+                    while (lastDigitPos >= prevCell.start) {
+                        if (/\d/.test(internalValue[lastDigitPos])) {
+                            break;
+                        }
+                        lastDigitPos--;
+                    }
+                    if (lastDigitPos >= prevCell.start) {
+                        const newValue = internalValue.split('');
+                        newValue[lastDigitPos] = templateValue[lastDigitPos];
+                        triggerChange(newValue.join(''), lastDigitPos);
+                        return;
+                    }
+                }
+            }
+            // Normal clear
+            const newValue = internalValue.split('');
+            newValue[clearPos] = templateValue[clearPos];
+            triggerChange(newValue.join(''), clearPos);
+            return;
+        }
+        // Number input
+        if (/^\d$/.test(key)) {
+            e.preventDefault();
+            const cursorPos = e.target.selectionStart || 0;
+            // Check if cursor is on a separator
+            let isSeparatorPos = true;
+            let nextEditablePos = cursorPos;
+            for (const cell of maskFormat.maskCells) {
+                if (cursorPos >= cell.start && cursorPos < cell.end) {
+                    isSeparatorPos = false;
+                    break;
+                }
+            }
+            if (isSeparatorPos) {
+                // Find next editable position
+                for (const cell of maskFormat.maskCells) {
+                    if (cell.start >= cursorPos) {
+                        nextEditablePos = cell.start;
+                        break;
+                    }
+                }
+            }
+            // Find which cell the cursor is in
+            let targetCellIndex = -1;
+            for (let i = 0; i < maskFormat.maskCells.length; i++) {
+                const cell = maskFormat.maskCells[i];
+                if (nextEditablePos >= cell.start && nextEditablePos < cell.end) {
+                    targetCellIndex = i;
+                    break;
+                }
+            }
+            if (targetCellIndex === -1) {
+                // Not in a valid cell, block input
+                return;
+            }
+            const targetCell = maskFormat.maskCells[targetCellIndex];
+            const [minVal, maxVal] = getMaskRange(targetCell.mask || '');
+            // Get current cell value
+            const currentCellValue = internalValue.slice(targetCell.start, targetCell.end);
+            // Build the new cell value with the input at cursor position
+            const newCellValue = currentCellValue.split('');
+            const posInCell = nextEditablePos - targetCell.start;
+            newCellValue[posInCell] = key;
+            // Validate the new cell value
+            const newCellStr = newCellValue.join('');
+            // Check if all positions are filled
+            if (!/^\d+$/.test(newCellStr)) {
+                // Not all filled, allow input
+                const newValue = internalValue.split('');
+                newValue[nextEditablePos] = key;
+                // Check if we need to jump to next cell
+                let nextPos = nextEditablePos + 1;
+                if (nextPos >= targetCell.end &&
+                    targetCellIndex < maskFormat.maskCells.length - 1) {
+                    // Jump to next cell
+                    nextPos = maskFormat.maskCells[targetCellIndex + 1].start;
+                }
+                triggerChange(newValue.join(''), nextPos);
+                return;
+            }
+            // All filled, validate range
+            const cellNum = parseInt(newCellStr, 10);
+            if (cellNum < minVal || cellNum > maxVal) {
+                // Invalid, block input
+                return;
+            }
+            // Valid, update
+            const newValue = internalValue.split('');
+            newValue[nextEditablePos] = key;
+            // Jump to next cell after filling current cell
+            let nextPos = nextEditablePos + 1;
+            if (nextPos >= targetCell.end &&
+                targetCellIndex < maskFormat.maskCells.length - 1) {
+                // Jump to next cell
+                nextPos = maskFormat.maskCells[targetCellIndex + 1].start;
+            }
+            triggerChange(newValue.join(''), nextPos);
+            return;
+        }
+        // Block other keys (separators, letters, etc.)
+        if (key.length === 1 && !/[\dBackspace]/.test(key)) {
+            if (!(e.ctrlKey || e.metaKey || e.altKey)) {
+                e.preventDefault();
+            }
+        }
+    }, [format, internalValue, maskFormat, triggerChange]);
+    const handlePaste = useCallback((e) => {
+        e.preventDefault();
+        const pasteData = e.clipboardData.getData('Text');
+        if (isValid(pasteData)) {
+            // If pasted data is a valid ISO date, format it accordingly
+            const parsedDate = formatToString(locale, pasteData, format);
+            if (parsedDate) {
+                triggerChange(parsedDate);
+                return;
+            }
+        }
+        const newValueArray = internalValue.split('');
+        let pasteIndex = 0;
+        for (const cell of maskFormat.maskCells) {
+            for (let i = cell.start; i < cell.end; i++) {
+                if (pasteIndex >= pasteData.length) {
+                    break;
+                }
+                const char = pasteData[pasteIndex];
+                if (/\d/.test(char)) {
+                    newValueArray[i] = char;
+                    pasteIndex++;
+                }
+                else {
+                    // Skip non-digit characters in paste data
+                    pasteIndex++;
+                    i--; // Stay on the same position
+                }
+            }
+            if (pasteIndex >= pasteData.length) {
+                break;
+            }
+        }
+        const newValue = newValueArray.join('');
+        if (newValue === getTemplateWithoutBrackets(format)) {
+            // No valid input from paste
+            if (errorMessages.enabled) {
+                Message.error(errorMessages.invalidPaste);
+            }
+        }
+        triggerChange(newValue);
+    }, [
+        errorMessages,
+        internalValue,
+        maskFormat,
+        triggerChange,
+        isValid,
+        format,
+        formatToString,
+        locale,
+    ]);
+    return {
+        value: internalValue,
+        focused,
+        handleKeyDown,
+        handleFocus,
+        handleBlur,
+        handlePaste,
+    };
+}
+
+export { useDateInputFormatter };

package/Picker/usePickerDocumentEventClose.d.ts

@@ -1,10 +1,10 @@
 import { RefObject } from 'react';
 export interface UsePickerDocumentEventCloseProps {
-    anchorRef: RefObject<HTMLElement>;
-    lastElementRefInFlow: RefObject<HTMLElement>;
+    anchorRef: RefObject<HTMLElement | null>;
+    lastElementRefInFlow: RefObject<HTMLElement | null>;
     onClose: VoidFunction;
     onChangeClose: VoidFunction;
     open?: boolean;
-    popperRef: RefObject<HTMLElement>;
+    popperRef: RefObject<HTMLElement | null>;
 }
 export declare function usePickerDocumentEventClose({ anchorRef, lastElementRefInFlow, onClose, onChangeClose, open, popperRef, }: UsePickerDocumentEventCloseProps): void;

package/Picker/usePickerValue.d.ts

@@ -3,14 +3,13 @@ import { FocusEventHandler, KeyboardEventHandler, RefObject } from 'react';
 export type UsePickerValueProps = {
     defaultValue?: DateType;
     format: string;
-    formats: string[];
-    inputRef: RefObject<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement | null>;
     value?: DateType;
 };
 /**
  * This hook keep tracks of an internal value.
  */
-export declare function usePickerValue({ defaultValue, format, formats, inputRef, value: valueProp, }: UsePickerValueProps): {
+export declare function usePickerValue({ defaultValue, format, inputRef, value: valueProp, }: UsePickerValueProps): {
     inputValue: string;
     onBlur: FocusEventHandler<HTMLInputElement>;
     onChange: (val?: DateType) => void;

package/Picker/usePickerValue.js

@@ -5,33 +5,28 @@ import { usePickerInputValue } from './usePickerInputValue.js';
 /**
  * This hook keep tracks of an internal value.
  */
-function usePickerValue({ defaultValue, format, formats, inputRef, value: valueProp, }) {
-    const { formatToString, parse, valueLocale } = useCalendarContext();
+function usePickerValue({ defaultValue, format, inputRef, value: valueProp, }) {
+    const { formatToString, locale } = useCalendarContext();
     const inputDefaultValue = defaultValue
-        ? formatToString(valueLocale, defaultValue, format)
+        ? formatToString(locale, defaultValue, format)
         : '';
     const [value, setValue] = useState(valueProp);
     const onChange = (val) => {
         setValue(val);
     };
     const onInputChange = (val) => {
-        const valDateType = parse(valueLocale, val, formats);
-        onChange(valDateType);
+        onChange(val);
     };
     const { inputChangeHandler, inputValue, onChange: setInputValue, } = usePickerInputValue({
         defaultValue: inputDefaultValue,
         onChange: onInputChange,
     });
     useEffect(() => {
-        const valString = valueProp
-            ? formatToString(valueLocale, valueProp, format)
-            : '';
-        setInputValue(valString);
+        setInputValue(valueProp || '');
         onChange(valueProp);
-    }, [valueProp]);
+    }, [valueProp, format, formatToString, setInputValue, locale]);
     const onSyncInputAndStateChange = (val) => {
-        const valueString = val ? formatToString(valueLocale, val, format) : '';
-        setInputValue(valueString);
+        setInputValue(val || '');
         setValue(val);
     };
     const guardValidDateTypeOnEvents = () => {
@@ -50,7 +45,7 @@ function usePickerValue({ defaultValue, format, formats, inputRef, value: valueP
         guardValidDateTypeOnEvents();
     };
     return {
-        inputValue,
+        inputValue: inputValue ? formatToString(locale, inputValue, format) : '',
         onBlur,
         onChange: onSyncInputAndStateChange,
         onInputChange: inputChangeHandler,

package/Picker/useTabKeyClose.d.ts

@@ -1,2 +1,2 @@
 import { DependencyList, RefObject } from 'react';
-export declare function useTabKeyClose(onClose: VoidFunction, lastElementRefInFlow: RefObject<HTMLElement>, deps?: DependencyList): void;
+export declare function useTabKeyClose(onClose: VoidFunction, lastElementRefInFlow: RefObject<HTMLElement | null>, deps?: DependencyList): void;