@dmsi/wedgekit-react 0.0.29 → 0.0.31

package/src/components/DateRangeInput.tsx

@@ -1,9 +1,17 @@
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { InputBaseProps, InputBase } from "./Input";
 import { CalendarRange } from "./CalendarRange";
 import { Icon } from "./Icon";
 import { findDocumentRoot } from "../utils";
+import {
+  parseInputDate,
+  isValidDate,
+  formatInputValue,
+  calculateCursorPosition,
+  formatDate,
+  isValidDateRangeOrder,
+} from "../utils/date";
 
 type DateRangeInputProps = Omit<InputBaseProps, "id"> & {
   id?: string;
@@ -23,7 +31,14 @@ type DateRangeInputProps = Omit<InputBaseProps, "id"> & {
    * Optional disabled state
    */
   disabled?: boolean;
-  single?: boolean; // If true, allows single date selection instead of range
+  /**
+   * If true, shows single calendar instead of double calendar
+   */
+  single?: boolean;
+  /**
+   * If true, disables range selection (single date only)
+   */
+  disableRange?: boolean;
   readOnly?: boolean; // If true, input is read-only and cannot be focused
   label?: string; // Optional label for the input
 };
@@ -35,11 +50,14 @@ export const DateRangeInput = ({
   placeholder = "MM/DD/YYYY - MM/DD/YYYY",
   disabled,
   readOnly = false,
-  single = false, // Enables single date selection instead of range
+  single = false,
+  disableRange = false,
   label,
   ...props
 }: DateRangeInputProps) => {
   const [visible, setVisible] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
   const popoverRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLInputElement | null>(null);
   const [calendarPosition, setCalendarPosition] = useState({
@@ -50,15 +68,26 @@ export const DateRangeInput = ({
 
   const [from, to] = value.split("|");
 
+  // Update input value when external value changes (but not when typing)
+  useEffect(() => {
+    if (!isTyping) {
+      setInputValue(formatDisplayValue(from, to));
+    }
+  }, [from, to, isTyping, disableRange]);
+
+  useLayoutEffect(() => {
+    if (visible) {
+      updatePosition();
+    }
+  }, [visible]);
+
   const updatePosition = () => {
     if (triggerRef.current) {
-      requestAnimationFrame(() => {
-        const rect = triggerRef.current!.getBoundingClientRect();
-        setCalendarPosition({
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX,
-          width: rect.width,
-        });
+      const rect = triggerRef.current.getBoundingClientRect();
+      setCalendarPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width,
       });
     }
   };
@@ -90,7 +119,7 @@ export const DateRangeInput = ({
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
-  });
+  }, []);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -110,27 +139,414 @@ export const DateRangeInput = ({
   }, []);
 
   function handleRangeChange(fromValue: string, toValue: string) {
-    onChange(`${fromValue}|${toValue}`);
+    if (disableRange) {
+      onChange(`${fromValue}|${fromValue}`);
+    } else {
+      onChange(`${fromValue}|${toValue}`);
+    }
     setVisible(false);
+    setIsTyping(false);
   }
 
   const handleFocus = () => {
-    if (readOnly) return; // Do not open calendar if read-only
+    if (readOnly) return;
     setVisible(true);
-    updatePosition();
   };
 
-  function formatDisplayValue(from?: string, to?: string) {
-    if (!from && !to) return "";
-    if (from && to) return `${formatDate(from)} - ${formatDate(to)}`;
-    if (from) return `${formatDate(from)} -`;
-    return "";
-  }
+  const handleClick = () => {
+    handleFocus();
+  };
 
-  function formatDate(date: string) {
-    const [y, m, d] = date.split("-");
-    return `${m}/${d}/${y}`;
-  }
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (readOnly) return;
+    
+    const rawValue = event.target.value;
+    const cursorPosition = event.target.selectionStart || 0;
+    
+    if (shouldPreventManualDash(rawValue)) {
+      handleManualDashRemoval(rawValue, cursorPosition);
+      return;
+    }
+    
+    setIsTyping(true);
+    
+    const formattedValue = formatInputValue(rawValue);
+    const finalValue = shouldAutoInsertDash(formattedValue, rawValue) 
+      ? `${formattedValue} - `
+      : formattedValue;
+    
+    setInputValue(finalValue);
+    
+    const newCursorPosition = calculateNewCursorPosition(
+      rawValue,
+      formattedValue,
+      finalValue,
+      cursorPosition
+    );
+    
+    requestAnimationFrame(() => {
+      setCursorPosition(newCursorPosition);
+    });
+    
+    updateParentValue(finalValue);
+  };
+
+  const shouldPreventManualDash = (value: string): boolean => {
+    return !disableRange && value.includes('-') && !value.includes(' - ');
+  };
+
+  const handleManualDashRemoval = (rawValue: string, cursorPosition: number) => {
+    const cleanValue = rawValue.replace(/-/g, '');
+    const formattedCleanValue = formatInputValue(cleanValue);
+    setInputValue(formattedCleanValue);
+    
+    requestAnimationFrame(() => {
+      const newPosition = Math.min(cursorPosition - 1, formattedCleanValue.length);
+      setCursorPosition(newPosition);
+    });
+  };
+
+  const shouldAutoInsertDash = (formattedValue: string, rawValue: string): boolean => {
+    if (disableRange || formattedValue.includes(' - ')) {
+      return false;
+    }
+    
+    const completeDate = formattedValue.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+    if (!completeDate || rawValue.length !== formattedValue.length) {
+      return false;
+    }
+    
+    // Only add dash if user just completed typing the year
+    const prevLength = rawValue.length - 1;
+    const prevFormatted = formatInputValue(rawValue.slice(0, prevLength));
+    
+    return !prevFormatted.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+  };
+
+  const calculateNewCursorPosition = (
+    rawValue: string,
+    formattedValue: string,
+    finalValue: string,
+    originalPosition: number
+  ): number => {
+    if (finalValue !== formattedValue) {
+      return finalValue.length; // Place cursor after auto-inserted dash
+    }
+    
+    return calculateCursorPositionHelper(rawValue, finalValue, originalPosition, disableRange);
+  };
+
+  const setCursorPosition = (position: number) => {
+    if (triggerRef.current) {
+      triggerRef.current.setSelectionRange(position, position);
+    }
+  };
+
+  const updateParentValue = (value: string) => {
+    if (disableRange) {
+      updateSingleDateValue(value);
+    } else {
+      updateRangeValue(value);
+    }
+  };
+
+  const updateSingleDateValue = (value: string) => {
+    const parsedDate = parseInputDate(value);
+    if (parsedDate && isValidDate(parsedDate)) {
+      onChange(`${parsedDate}|${parsedDate}`);
+    }
+  };
+
+  const updateRangeValue = (value: string) => {
+    if (value === "") {
+      onChange("");
+      return;
+    }
+    
+    const rangeMatch = value.match(/^(.+?)\s*-\s*(.+)$/);
+    if (rangeMatch) {
+      updateCompleteRange(rangeMatch);
+    } else {
+      updatePartialRange(value);
+    }
+  };
+
+  const updateCompleteRange = (rangeMatch: RegExpMatchArray) => {
+    const [, fromStr, toStr] = rangeMatch;
+    const fromDate = parseInputDate(fromStr.trim());
+    const toDate = parseInputDate(toStr.trim());
+    
+    if (fromDate && toDate && isValidDateRange(fromDate, toDate)) {
+      onChange(`${fromDate}|${toDate}`);
+    }
+  };
+
+  const updatePartialRange = (value: string) => {
+    const singleDate = parseInputDate(value);
+    if (singleDate && isValidDate(singleDate)) {
+      onChange(`${singleDate}|`);
+    }
+  };
+
+  const handleBlur = () => {
+    setIsTyping(false);
+    
+    // If the input is invalid, revert to the last valid value or empty
+    if (disableRange) {
+      const parsedDate = parseInputDate(inputValue);
+      if (!parsedDate || !isValidDate(parsedDate)) {
+        const lastValidValue = formatDisplayValue(from, to);
+        setInputValue(lastValidValue || "");
+      }
+    } else {
+      // For range, validate both parts
+      const rangeMatch = inputValue.match(/^(.+?)\s*-\s*(.+)$/);
+      if (rangeMatch) {
+        const [, fromStr, toStr] = rangeMatch;
+        const fromDate = parseInputDate(fromStr.trim());
+        const toDate = parseInputDate(toStr.trim());
+        
+        // Only accept if both dates are valid AND the range is valid (to >= from)
+        if (!fromDate || !toDate || !isValidDateRange(fromDate, toDate)) {
+          // Invalid range - clear the input
+          setInputValue("");
+          onChange("");
+        }
+      } else {
+        // Check if input is just a dash or incomplete second date
+        if (inputValue.includes(' - ')) {
+          // Has dash but incomplete second date - clear the input
+          setInputValue("");
+          onChange("");
+        } else {
+          // Single date in range mode - check if we have a previous valid state
+          const singleDate = parseInputDate(inputValue);
+          if (!singleDate || !isValidDate(singleDate)) {
+            // Invalid single date - clear the input
+            setInputValue("");
+            onChange("");
+          } else {
+            // Valid single date but incomplete range - clear the input
+            setInputValue("");
+            onChange("");
+          }
+        }
+      }
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    // Prevent manual typing of dash in range mode
+    if (!disableRange && event.key === "-") {
+      event.preventDefault();
+      return;
+    }
+    
+    if (event.key === "Backspace") {
+      const input = event.target as HTMLInputElement;
+      const cursorPosition = input.selectionStart || 0;
+      const value = input.value;
+      
+      // If cursor is right after a slash, move it before the slash
+      if (cursorPosition > 0 && value[cursorPosition - 1] === "/") {
+        event.preventDefault();
+        const newValue = value.slice(0, cursorPosition - 2) + value.slice(cursorPosition);
+        const formattedValue = formatInputValue(newValue);
+        setInputValue(formattedValue);
+        
+        // Set cursor position after the deletion
+        requestAnimationFrame(() => {
+          if (triggerRef.current) {
+            const newPosition = Math.max(0, cursorPosition - 2);
+            triggerRef.current.setSelectionRange(newPosition, newPosition);
+          }
+        });
+        
+        setIsTyping(true);
+        return;
+      }
+      
+      // Handle deletion when cursor is on or near the dash separator
+      if (!disableRange && value.includes(' - ')) {
+        const dashIndex = value.indexOf(' - ');
+        const dashStart = dashIndex;
+        const dashEnd = dashIndex + 3; // " - " is 3 characters
+        
+        // If cursor is within the dash area (including spaces)
+        if (cursorPosition >= dashStart && cursorPosition <= dashEnd) {
+          event.preventDefault();
+          
+          // Remove the entire range and the last digit of the year from the first date
+          const beforeDash = value.slice(0, dashStart).trim();
+          
+          // Extract the year part and remove the last digit
+          const yearMatch = beforeDash.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+          if (yearMatch) {
+            const [, month, day, year] = yearMatch;
+            const truncatedYear = year.slice(0, -1); // Remove last digit
+            const newValue = `${month}/${day}/${truncatedYear}`;
+            const formattedValue = formatInputValue(newValue);
+            setInputValue(formattedValue);
+            
+            // Update the value - no valid date yet since year is incomplete
+            onChange("");
+            
+            // Position cursor at the end
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                triggerRef.current.setSelectionRange(formattedValue.length, formattedValue.length);
+              }
+            });
+          } else {
+            // Fallback to original behavior
+            const formattedValue = formatInputValue(beforeDash);
+            setInputValue(formattedValue);
+            
+            const singleDate = parseInputDate(beforeDash);
+            if (singleDate && isValidDate(singleDate)) {
+              onChange(`${singleDate}|`);
+            } else {
+              onChange("");
+            }
+            
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                const newPosition = formattedValue.length;
+                triggerRef.current.setSelectionRange(newPosition, newPosition);
+              }
+            });
+          }
+          
+          setIsTyping(true);
+          return;
+        }
+        
+        // If cursor is right after the dash, remove the second date
+        if (cursorPosition === dashEnd) {
+          event.preventDefault();
+          
+          const beforeDash = value.slice(0, dashStart).trim();
+          const newValue = `${beforeDash} - `;
+          setInputValue(newValue);
+          
+          // Update the value to only have the first date as partial range
+          const singleDate = parseInputDate(beforeDash);
+          if (singleDate && isValidDate(singleDate)) {
+            onChange(`${singleDate}|`);
+          }
+          
+          // Position cursor after the dash
+          requestAnimationFrame(() => {
+            if (triggerRef.current) {
+              triggerRef.current.setSelectionRange(newValue.length, newValue.length);
+            }
+          });
+          
+          setIsTyping(true);
+          return;
+        }
+      }
+    }
+    
+    if (event.key === "Delete") {
+      const input = event.target as HTMLInputElement;
+      const cursorPosition = input.selectionStart || 0;
+      const value = input.value;
+      
+      // Handle deletion when cursor is on or near the dash separator
+      if (!disableRange && value.includes(' - ')) {
+        const dashIndex = value.indexOf(' - ');
+        const dashStart = dashIndex;
+        const dashEnd = dashIndex + 3; // " - " is 3 characters
+        
+        // If cursor is within the dash area or right before it
+        if (cursorPosition >= dashStart && cursorPosition <= dashEnd) {
+          event.preventDefault();
+          
+          // Remove the dash and second date, and the last digit of the year from the first date
+          const beforeDash = value.slice(0, dashStart).trim();
+          
+          // Extract the year part and remove the last digit
+          const yearMatch = beforeDash.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+          if (yearMatch) {
+            const [, month, day, year] = yearMatch;
+            const truncatedYear = year.slice(0, -1); // Remove last digit
+            const newValue = `${month}/${day}/${truncatedYear}`;
+            const formattedValue = formatInputValue(newValue);
+            setInputValue(formattedValue);
+            
+            // Update the value - no valid date yet since year is incomplete
+            onChange("");
+            
+            // Position cursor at the end
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                triggerRef.current.setSelectionRange(formattedValue.length, formattedValue.length);
+              }
+            });
+          } else {
+            // Fallback to original behavior
+            const formattedValue = formatInputValue(beforeDash);
+            setInputValue(formattedValue);
+            
+            const singleDate = parseInputDate(beforeDash);
+            if (singleDate && isValidDate(singleDate)) {
+              onChange(`${singleDate}|`);
+            } else {
+              onChange("");
+            }
+            
+            requestAnimationFrame(() => {
+              if (triggerRef.current) {
+                const newPosition = formattedValue.length;
+                triggerRef.current.setSelectionRange(newPosition, newPosition);
+              }
+            });
+          }
+          
+          setIsTyping(true);
+          return;
+        }
+      }
+    }
+    
+    if (event.key === "Enter") {
+      if (disableRange) {
+        const parsedDate = parseInputDate(inputValue);
+        if (parsedDate && isValidDate(parsedDate)) {
+          onChange(`${parsedDate}|${parsedDate}`);
+          setVisible(false);
+          setIsTyping(false);
+        }
+      } else {
+        // In range mode, only accept complete and valid ranges
+        const rangeMatch = inputValue.match(/^(.+?)\s*-\s*(.+)$/);
+        if (rangeMatch) {
+          const [, fromStr, toStr] = rangeMatch;
+          const fromDate = parseInputDate(fromStr.trim());
+          const toDate = parseInputDate(toStr.trim());
+          
+          if (fromDate && toDate && isValidDateRange(fromDate, toDate)) {
+            onChange(`${fromDate}|${toDate}`);
+            setVisible(false);
+            setIsTyping(false);
+          } else {
+            // Invalid range - clear the input
+            setInputValue("");
+            onChange("");
+            setVisible(false);
+            setIsTyping(false);
+          }
+        } else {
+          // Single date in range mode - clear the input
+          setInputValue("");
+          onChange("");
+          setVisible(false);
+          setIsTyping(false);
+        }
+      }
+    }
+  };
 
   return (
     <div className="relative">
@@ -140,16 +556,17 @@ export const DateRangeInput = ({
           triggerRef.current = el;
         }}
         {...props}
-        value={formatDisplayValue(from, to)}
-        placeholder={placeholder}
+        value={inputValue}
+        placeholder={disableRange ? "MM/DD/YYYY" : placeholder}
         disabled={disabled}
+        readOnly={readOnly}
         after={<Icon name="calendar_month" />}
         onFocus={handleFocus}
-        readOnly={readOnly}
+        onClick={handleClick}
+        onChange={handleInputChange}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
         label={label}
-        onChange={() => {
-          // Input is controlled by calendar picker, ignore direct text changes
-        }}
       />
       {visible &&
         !readOnly &&
@@ -172,12 +589,109 @@ export const DateRangeInput = ({
               onChange={handleRangeChange}
               cardStyle
               mode={single ? "single" : "double"}
+              disableRange={disableRange}
             />
           </div>,
           findDocumentRoot(popoverRef.current),
         )}
     </div>
   );
+
+  function formatInputValue(value: string): string {
+    return formatInputValueHelper(value, disableRange);
+  }
+
+  function formatDisplayValue(from?: string, to?: string) {
+    return formatDisplayValueHelper(from, to, disableRange);
+  }
 };
 
 DateRangeInput.displayName = "DateRangeInput";
+
+function isValidDateRange(fromDate: string, toDate: string): boolean {
+  return isValidDateRangeOrder(fromDate, toDate);
+}
+
+function formatInputValueHelper(value: string, disableRange: boolean): string {
+  if (disableRange) {
+    return formatInputValue(value);
+  }
+
+  if (value.includes(' - ')) {
+    const [from, to] = value.split(' - ');
+    const fromFormatted = formatInputValue(from);
+    const toFormatted = formatInputValue(to || '');
+    return `${fromFormatted} - ${toFormatted}`;
+  }
+  
+  const cleanValue = value.replace(/-/g, '');
+  return formatInputValue(cleanValue);
+}
+
+function calculateCursorPositionHelper(originalValue: string, formattedValue: string, originalPosition: number, disableRange: boolean): number {
+  // Handle range input cursor positioning
+  if (!disableRange && formattedValue.includes(' - ')) {
+    const dashPosition = formattedValue.indexOf(' - ');
+    const originalDashPosition = originalValue.indexOf('-');
+    
+    // If cursor was after the dash in original, maintain relative position
+    if (originalDashPosition !== -1 && originalPosition > originalDashPosition) {
+      const afterDashDigits = originalValue.slice(originalDashPosition + 1).replace(/\D/g, "").length;
+      const formattedAfterDash = formattedValue.slice(dashPosition + 3);
+      
+      let newPosition = dashPosition + 3;
+      let digitCount = 0;
+      
+      for (let i = 0; i < formattedAfterDash.length; i++) {
+        if (/\d/.test(formattedAfterDash[i])) {
+          digitCount++;
+          if (digitCount >= afterDashDigits) {
+            // Check if we're at a position where a slash was auto-inserted in the second date
+            // If the next character is a slash, place cursor after it
+            if (i + 1 < formattedAfterDash.length && formattedAfterDash[i + 1] === '/') {
+              newPosition = dashPosition + 3 + i + 2;
+            } else {
+              newPosition = dashPosition + 3 + i + 1;
+            }
+            break;
+          }
+        }
+        if (digitCount < afterDashDigits) {
+          newPosition = dashPosition + 3 + i + 1;
+        }
+      }
+      
+      return Math.min(newPosition, formattedValue.length);
+    }
+  }
+  
+  return calculateCursorPosition(originalValue, formattedValue, originalPosition);
+}
+
+function formatDisplayValueHelper(from?: string, to?: string, disableRange?: boolean) {
+  if (!from && !to) {
+    return "";
+  }
+  
+  // Validate dates before displaying
+  const fromValid = from ? isValidDate(from) : false;
+  const toValid = to ? isValidDate(to) : false;
+  
+  if (disableRange) {
+    return fromValid && from ? formatDate(from) : "";
+  }
+  
+  // Return formatted display if we have a complete, valid range
+  if (fromValid && toValid && from && to && isValidDateRange(from, to)) {
+    return `${formatDate(from)} - ${formatDate(to)}`;
+  }
+  
+  // If we have a valid from date but no to date, show the from date only
+  // This preserves the previous valid state during editing
+  if (fromValid && !to && from) {
+    return `${formatDate(from)} - `;
+  }
+  
+  // Return empty string if no valid dates or invalid range
+  return "";
+}

package/src/components/MenuOption.tsx

@@ -162,10 +162,22 @@ export const MenuOption = ({
   const disabledStyles =
     disabled && clsx("bg-transparent cursor-default pointer-events-none");
 
-  const renderChildren =
-    typeof children === "string" && highlightMatchingText
-      ? highlightMatch(children, menuValue)
-      : children;
+  const processChildren = typeof children === 'string' && highlightMatchingText
+    ? (
+      highlightMatch(children, menuValue)
+    ) : children;
+
+  const renderChildren = typeof children === 'object'
+    ? children
+    : variant === "action" ? (
+      <Label padded className={textLabelStyles}>
+        {processChildren}
+      </Label>
+    ) : (
+      <Paragraph padded className={textLabelStyles}>
+        {processChildren}
+      </Paragraph>
+    )
 
   return (
     <>
@@ -200,16 +212,8 @@ export const MenuOption = ({
       >
         {before && <div className="shrink-0 flex items-center">{before}</div>}
 
-        {variant === "action" ? (
-          <Label padded className={textLabelStyles}>
-            {renderChildren}
-          </Label>
-        ) : (
-          <Paragraph padded className={textLabelStyles}>
-            {renderChildren}
-          </Paragraph>
-        )}
-
+        {renderChildren}
+        
         {renderAfterProp()}
       </div>