@mezzanine-ui/react 0.16.0 → 1.0.0-beta.0

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/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 | 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/Popconfirm/Popconfirm.js

@@ -8,7 +8,7 @@ import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 const Popconfirm = forwardRef(function Popconfirm(props, ref) {
-    const { className, container, cancelButtonProps, cancelText, confirmButtonProps, confirmText, icon = ExclamationCircleFilledIcon, onCancel, onConfirm, title, ...rest } = props;
+    const { className, cancelButtonProps, cancelText, confirmButtonProps, confirmText, icon = ExclamationCircleFilledIcon, onCancel, onConfirm, title, ...rest } = props;
     return (jsx(Popover, { ...rest, ref: ref, className: cx(popConfirmClasses.host, className), title: jsxs(Fragment, { children: [jsx(Icon, { className: popConfirmClasses.icon, icon: icon }), title] }), children: jsx(ConfirmActions, { cancelButtonProps: cancelButtonProps, cancelText: cancelText, confirmButtonProps: confirmButtonProps, confirmText: confirmText, onCancel: onCancel, onConfirm: onConfirm, size: "small" }) }));
 });
 

package/Popconfirm/index.d.ts

@@ -1 +1,2 @@
-export { PopconfirmProps, default } from './Popconfirm';
+export type { PopconfirmProps } from './Popconfirm';
+export { default } from './Popconfirm';

package/Popover/Popover.js

@@ -1,23 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { popoverClasses } from '@mezzanine-ui/core/popover';
+import { offset } from '@floating-ui/react-dom';
 import { useClickAway } from '../hooks/useClickAway.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import Popper from '../Popper/Popper.js';
 import cx from 'clsx';
 
-const offsetModifier = {
-    name: 'offset',
-    options: {
-        offset: [0, 8],
-    },
-};
+const offsetMiddleware = offset({ mainAxis: 8 });
 /**
  * The react component for `mezzanine` popover.
  */
 const Popover = forwardRef(function Popover(props, ref) {
     const { children, className, disableClickAway = false, onClose, open, options = {}, title, ...rest } = props;
-    const { modifiers = [] } = options;
+    const { middleware = [] } = options;
     const popoverRef = useRef(null);
     const composedRef = useComposeRefs([ref, popoverRef]);
     useClickAway(() => {
@@ -32,7 +28,7 @@ const Popover = forwardRef(function Popover(props, ref) {
     }, popoverRef, [open, disableClickAway, onClose, popoverRef]);
     return (jsxs(Popper, { ...rest, ref: composedRef, className: cx(popoverClasses.host, className), open: open, options: {
             ...options,
-            modifiers: [offsetModifier, ...modifiers],
+            middleware: [offsetMiddleware, ...middleware],
         }, children: [title && jsx("div", { className: popoverClasses.title, children: title }), children && jsx("div", { className: popoverClasses.content, children: children })] }));
 });
 

package/Popover/index.d.ts

@@ -1 +1,2 @@
-export { PopoverProps, default } from './Popover';
+export type { PopoverProps } from './Popover';
+export { default } from './Popover';

package/Popper/Popper.d.ts

@@ -1,21 +1,26 @@
-import { Options as _PopperOptions } from '@popperjs/core';
 import { Ref } from 'react';
-import { Modifier, usePopper } from 'react-popper';
+import { UseFloatingOptions, UseFloatingReturn, Placement, Strategy } from '@floating-ui/react-dom';
 import { ElementGetter } from '../utils/getElement';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { PortalProps } from '../Portal';
-export type { Placement as PopperPlacement, PositioningStrategy as PopperPositionStrategy, } from '@popperjs/core';
-export type PopperOptions<Modifiers> = Omit<Partial<_PopperOptions>, 'modifiers'> & {
-    modifiers?: ReadonlyArray<Modifier<Modifiers>>;
-};
-export type PopperController = ReturnType<typeof usePopper>;
+export type PopperPlacement = Placement;
+export type PopperPositionStrategy = Strategy;
+export type PopperController = UseFloatingReturn;
 export interface PopperProps extends Pick<PortalProps, 'container' | 'disablePortal'>, NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
      * The ref of trigger Element.
      */
     anchor?: ElementGetter;
     /**
-     * Provide `controllerRef` if you need access to `usePopper` results.
+     * Whether to show arrow element on the popper
+     */
+    arrow?: {
+        enabled: boolean;
+        className: string;
+        padding?: number;
+    } | null;
+    /**
+     * Provide `controllerRef` if you need access to `useFloating` results.
      */
     controllerRef?: Ref<PopperController>;
     /**
@@ -24,9 +29,9 @@ export interface PopperProps extends Pick<PortalProps, 'container' | 'disablePor
      */
     open?: boolean;
     /**
-     * The options of usePopper hook of react-popper.
+     * The options of useFloating hook from @floating-ui/react-dom.
      */
-    options?: PopperOptions<any>;
+    options?: UseFloatingOptions;
 }
 declare const Popper: import("react").ForwardRefExoticComponent<PopperProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Popper;