@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/components/DateInput.tsx

@@ -1,306 +0,0 @@
-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,
-} from "../utils/date";
-import { Temporal } from "@js-temporal/polyfill";
-
-type DateInputProps = Omit<InputBaseProps, "id"> & {
-  id?: string;
-  testid?: string;
-  /**
-   * Value in the format "YYYY-MM-DD" or empty string.
-   * When enableRangeInSingleMode is true, this should be in format "YYYY-MM-DD|YYYY-MM-DD"
-   */
-  value: string;
-  /**
-   * Called when the date changes.
-   * For single date: receives "YYYY-MM-DD"
-   * For range: receives "YYYY-MM-DD|YYYY-MM-DD"
-   */
-  onChange: (value: string) => void;
-  /**
-   * Optional placeholder text
-   */
-  placeholder?: string;
-  /**
-   * Optional disabled state
-   */
-  disabled?: boolean;
-  /**
-   * Enable range selection in single mode calendar
-   */
-  readOnly?: boolean; // If true, input is read-only and cannot be focused
-  label?: string; // Optional label for the input
-  /**
-   * Optional to check if a day is enabled/disabled
-   * @param value The date to check for availability as a Temporal.PlainDate
-   * @returns Is date enabled/disabled
-   */
-  isDateAvailable?: (value: Temporal.PlainDate) => boolean;
-};
-
-export const DateInput = ({
-  id,
-  testid,
-  value,
-  onChange,
-  placeholder = "MM/DD/YYYY",
-  disabled,
-  readOnly = false,
-  label,
-  isDateAvailable,
-  ...props
-}: DateInputProps) => {
-  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 rootRef = useRef<HTMLDivElement | null>(null);
-  const [calendarPosition, setCalendarPosition] = useState({
-    top: 0,
-    left: 0,
-    width: 0,
-  });
-
-  // Extract from and to values from the pipe-separated string when range is enabled
-  const [from, to] = [value, ""];
-
-  // Update input value when external value changes (but not when typing)
-  useEffect(() => {
-    if (!isTyping) {
-      setInputValue(formatDisplayValue(from));
-    }
-  }, [from, isTyping]);
-
-  useLayoutEffect(() => {
-    if (visible) {
-      updatePosition();
-    }
-  }, [visible]);
-
-  const updatePosition = () => {
-    if (rootRef.current) {
-      const rect = rootRef.current.getBoundingClientRect();
-      setCalendarPosition({
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX,
-        width: rect.width,
-      });
-    }
-  };
-
-  useEffect(() => {
-    updatePosition();
-
-    const resizeObserver = new ResizeObserver(updatePosition);
-    if (triggerRef.current) {
-      resizeObserver.observe(triggerRef.current);
-    }
-
-    window.addEventListener("scroll", updatePosition);
-
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updatePosition);
-    };
-  }, []);
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && popoverRef.current) {
-        setVisible(false);
-        triggerRef.current?.blur();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  });
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        popoverRef.current &&
-        !popoverRef.current.contains(event.target as HTMLElement) &&
-        triggerRef.current &&
-        !triggerRef.current.contains(event.target as HTMLElement)
-      ) {
-        setVisible(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  function handleDateChange(fromValue: string) {
-    // For single date selection, only pass the from value
-    onChange(fromValue);
-    setVisible(false);
-    setIsTyping(false);
-  }
-
-  const handleFocus = () => {
-    if (readOnly) return;
-    setVisible(true);
-  };
-
-  const handleClick = () => {
-    handleFocus();
-  };
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (readOnly) return;
-
-    const rawValue = event.target.value;
-    const cursorPosition = event.target.selectionStart || 0;
-    setIsTyping(true);
-
-    // Format the input as user types (add slashes automatically)
-    const formattedValue = formatInputValue(rawValue);
-    setInputValue(formattedValue);
-
-    // Restore cursor position after formatting
-    requestAnimationFrame(() => {
-      if (triggerRef.current) {
-        const newPosition = calculateCursorPosition(
-          rawValue,
-          formattedValue,
-          cursorPosition,
-        );
-        triggerRef.current.setSelectionRange(newPosition, newPosition);
-      }
-    });
-
-    // Try to parse and validate the date
-    const parsedDate = parseInputDate(formattedValue);
-    if (parsedDate && isValidDate(parsedDate)) {
-      onChange(parsedDate);
-    }
-  };
-
-  const handleBlur = () => {
-    setIsTyping(false);
-    // If the input is invalid, revert to the last valid value
-    const parsedDate = parseInputDate(inputValue);
-    if (!parsedDate || !isValidDate(parsedDate)) {
-      setInputValue(formatDisplayValue(from));
-    }
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    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;
-      }
-    }
-
-    if (event.key === "Enter") {
-      const parsedDate = parseInputDate(inputValue);
-      if (parsedDate && isValidDate(parsedDate)) {
-        onChange(parsedDate);
-        setVisible(false);
-        setIsTyping(false);
-      }
-    }
-  };
-
-  return (
-    <div className="relative">
-      <InputBase
-        id={id}
-        testid={testid}
-        ref={(el) => {
-          triggerRef.current = el;
-        }}
-        {...props}
-        wrapperRef={rootRef}
-        value={inputValue}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
-        after={<Icon name="calendar_month" />}
-        onFocus={handleFocus}
-        onClick={handleClick}
-        onChange={handleInputChange}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        label={label}
-        secondaryIconColor
-      />
-      {visible &&
-        !readOnly &&
-        createPortal(
-          <div
-            ref={(el) => {
-              popoverRef.current = el;
-            }}
-            className="absolute z-40 bg-white"
-            style={{
-              top: `${calendarPosition.top + 4}px`,
-              left: `${calendarPosition.left}px`,
-              minWidth: `${calendarPosition.width}px`,
-            }}
-          >
-            <CalendarRange
-              id={id ? `${id}-calendar` : undefined}
-              testid={testid ? `${testid}-calendar` : undefined}
-              from={from}
-              to={to || from}
-              onChange={handleDateChange}
-              cardStyle
-              mode="single"
-              disableRange
-              isDateAvailable={isDateAvailable}
-            />
-          </div>,
-          findDocumentRoot(popoverRef.current),
-        )}
-    </div>
-  );
-};
-
-DateInput.displayName = "DateInput";
-
-function formatDisplayValue(from?: string): string {
-  if (!from) {
-    return "";
-  }
-  if (!isValidDate(from)) {
-    return "";
-  }
-
-  return formatDate(from);
-}