impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/DatePicker/datePickerDropdown.js

@@ -1,282 +0,0 @@
-import React, { useState, useLayoutEffect, useRef } from "react";
-import { DayPickerSingleDateController } from "react-dates";
-import DatePickerFooter from "./datePickerFooter";
-import ShowMonthYearSelect from "./showMonthYearSelect";
-import moment from "moment";
-import Portal from "../Portal";
-
-export default function DatePickerDropdown({
-  datePickerMainContainer,
-  onDatesChange,
-  focused,
-  setFocused,
-  selectedDate,
-  setSelectedDate,
-  showWeekNumbers,
-  setIsOpen,
-  withPortal,
-  portalContainer,
-  containerRef,
-  showMonthYearSelect,
-  customYears,
-  tertiaryButtonProps,
-  primaryButtonProps,
-  onTertiaryButtonClick,
-  onSecondaryButtonClick,
-  onPrimaryButtonClick,
-  minDate,
-  maxDate,
-  placement,
-  hideTertiaryButton,
-  hideSecondaryButton,
-  hidePrimaryButton,
-  dropdownRef: externalDropdownRef,
-  allButtonsHidden,
-  ...args
-}) {
-  const [position, setPosition] = useState({
-    x: 0,
-    y: 0,
-    offsetHeight: 0,
-    offsetWidth: 0,
-  });
-
-  const internalDropdownRef = useRef(null);
-  const dropdownRef = externalDropdownRef || internalDropdownRef;
-  const [dropdownWidth, setDropdownWidth] = useState(269);
-  const [dropdownHeight, setDropdownHeight] = useState(
-    allButtonsHidden ? 250 : 300
-  );
-
-  useLayoutEffect(() => {
-    let frame = null;
-
-    const update = () => {
-      if (!containerRef?.current) return;
-
-      const scrollY = window.scrollY || document.documentElement.scrollTop;
-      const {
-        x,
-        y,
-        height: offsetHeight,
-        width: offsetWidth,
-      } = containerRef.current.getBoundingClientRect();
-      setPosition({ x, y: y + scrollY, offsetHeight, offsetWidth });
-
-      if (dropdownRef.current) {
-        const rect = dropdownRef.current.getBoundingClientRect();
-        if (rect.width) setDropdownWidth(rect.width);
-        if (rect.height) setDropdownHeight(rect.height);
-      }
-    };
-
-    const scheduleUpdate = () => {
-      if (frame !== null) return;
-      frame = requestAnimationFrame(() => {
-        update();
-        frame = null;
-      });
-    };
-
-    // Initial measure
-    update();
-
-    // Schedule a second measure after paint so the dropdown DOM is fully rendered
-    let rafOuter = requestAnimationFrame(() => {
-      rafOuter = null;
-      rafOuter = requestAnimationFrame(() => {
-        rafOuter = null;
-        update();
-      });
-    });
-
-    window.addEventListener("resize", scheduleUpdate);
-    window.addEventListener("scroll", scheduleUpdate, true);
-
-    return () => {
-      window.removeEventListener("resize", scheduleUpdate);
-      window.removeEventListener("scroll", scheduleUpdate, true);
-      if (frame !== null) cancelAnimationFrame(frame);
-      if (rafOuter !== null) cancelAnimationFrame(rafOuter);
-    };
-  }, [
-    containerRef,
-    placement,
-    withPortal,
-    showMonthYearSelect,
-    showWeekNumbers,
-    allButtonsHidden,
-  ]);
-
-  const handleDateChange = (date) => {
-    if (date) {
-      const newDate = moment(date);
-      onDatesChange(newDate);
-    } else {
-      onDatesChange(null);
-    }
-  };
-
-  const renderDayContents = React.useCallback((momentInstance, modifiers) => {
-    // Calculate the week number within the month
-    const startOfMonth = momentInstance.clone().startOf("month");
-    const weekNumber = Math.ceil(
-      (momentInstance.date() - 1 + startOfMonth.day()) / 7
-    );
-
-    return (
-      <>
-        {/* Add week numbers, adds one button each row */}
-        {showWeekNumbers && modifiers.has("first-day-of-week") && (
-          <span className="CalendarDayWeekNumber">W{weekNumber + 1}</span>
-        )}
-        <span className="CalendarDayNumber">{momentInstance.format("D")}</span>
-      </>
-    );
-  }, []);
-
-  const renderCalendar = () => {
-    const currentDate = selectedDate ? moment(selectedDate) : null;
-    return (
-      <DayPickerSingleDateController
-        key={`calendar-${withPortal ? "portal" : "inline"}-${
-          focused ? "focused" : "unfocused"
-        }`}
-        onDateChange={handleDateChange}
-        onFocusChange={() => setFocused(true)}
-        focused={focused}
-        date={currentDate}
-        initialMonth={currentDate || moment()}
-        hideKeyboardShortcutsPanel={true}
-        daySize={26}
-        horizontalMonthPadding={showWeekNumbers ? 24 : 12}
-        renderDayContents={showWeekNumbers ? renderDayContents : undefined}
-        renderMonthElement={
-          showMonthYearSelect
-            ? ({ month, onMonthSelect, onYearSelect }) => (
-                <ShowMonthYearSelect
-                  customYears={customYears}
-                  month={month}
-                  onMonthSelect={onMonthSelect}
-                  onYearSelect={onYearSelect}
-                  minDate={minDate}
-                  maxDate={maxDate}
-                />
-              )
-            : undefined
-        }
-        {...args}
-      />
-    );
-  };
-
-  if (withPortal) {
-    const spacing = 6;
-    const scrollX = window.scrollX || document.documentElement.scrollLeft;
-    const scrollY = window.scrollY || document.documentElement.scrollTop;
-    const viewportWidth = window.innerWidth;
-    const viewportTopOffset = 64;
-    const top =
-      placement === "top"
-        ? position.y - dropdownHeight - spacing
-        : position.y + position.offsetHeight + spacing;
-
-    const clampedTop = Math.max(viewportTopOffset + scrollY, top);
-
-    const rightPadding = 10;
-    const leftPadding = 10;
-    const triggerRight = position.x + position.offsetWidth;
-    const wouldOverflowRight =
-      position.x + dropdownWidth > viewportWidth - rightPadding;
-
-    const viewportLeft = wouldOverflowRight
-      ? triggerRight - dropdownWidth
-      : position.x;
-
-    const clampedViewportLeft = Math.min(
-      Math.max(leftPadding, viewportLeft),
-      viewportWidth - dropdownWidth - rightPadding
-    );
-    const documentLeft = clampedViewportLeft + scrollX;
-
-    return (
-      <Portal container={portalContainer}>
-        <div
-          className="impact-portal-container"
-          style={{
-            top: clampedTop,
-            left: documentLeft,
-            width: (position.offsetWidth || 0) + "px",
-          }}
-        >
-          <div
-            className={`impact-date-picker-dropdown-container impact-date-picker-dropdown-portal ${
-              showWeekNumbers ? "showWeekNumbers" : ""
-            }`}
-            ref={dropdownRef}
-          >
-            {renderCalendar()}
-            <DatePickerFooter
-              tertiaryButtonProps={tertiaryButtonProps}
-              primaryButtonProps={primaryButtonProps}
-              setSelectedDate={setSelectedDate}
-              setFocused={setFocused}
-              onSecondaryButtonClick={onSecondaryButtonClick}
-              onPrimaryButtonClick={onPrimaryButtonClick}
-              onTertiaryButtonClick={onTertiaryButtonClick}
-              setIsOpen={setIsOpen}
-              hideTertiaryButton={hideTertiaryButton}
-              hideSecondaryButton={hideSecondaryButton}
-              hidePrimaryButton={hidePrimaryButton}
-            />
-          </div>
-        </div>
-        <div
-          className="ia-select-container-v3-blanket"
-          onClick={() => setIsOpen(false)}
-        />
-      </Portal>
-    );
-  }
-
-  const viewportWidth = window.innerWidth;
-  const rightPadding = 10;
-  const leftPadding = 10;
-
-  const triggerRight = position.x + position.offsetWidth;
-  const wouldOverflowRight =
-    position.x + dropdownWidth > viewportWidth - rightPadding;
-  const viewportLeft = wouldOverflowRight
-    ? triggerRight - dropdownWidth
-    : position.x;
-  const clampedViewportLeft = Math.min(
-    Math.max(leftPadding, viewportLeft),
-    viewportWidth - dropdownWidth - rightPadding
-  );
-  const relativeLeft = clampedViewportLeft - position.x;
-
-  return (
-    <div
-      className={`impact-date-picker-dropdown-container ${
-        placement === "top" ? "impact-date-picker-dropdown-top" : ""
-      } ${showWeekNumbers ? "showWeekNumbers" : ""}`}
-      style={{ left: relativeLeft }}
-      ref={dropdownRef}
-    >
-      {renderCalendar()}
-      <DatePickerFooter
-        tertiaryButtonProps={tertiaryButtonProps}
-        primaryButtonProps={primaryButtonProps}
-        setSelectedDate={setSelectedDate}
-        setFocused={setFocused}
-        onTertiaryButtonClick={onTertiaryButtonClick}
-        onSecondaryButtonClick={onSecondaryButtonClick}
-        onPrimaryButtonClick={onPrimaryButtonClick}
-        setIsOpen={setIsOpen}
-        hideTertiaryButton={hideTertiaryButton}
-        hideSecondaryButton={hideSecondaryButton}
-        hidePrimaryButton={hidePrimaryButton}
-      />
-    </div>
-  );
-}

package/src/components/DatePicker/datePickerFooter.js

@@ -1,76 +0,0 @@
-import React from "react";
-import { Button } from "../Button";
-
-export default function DatePickerFooter({
-  tertiaryButtonProps,
-  secondaryButtonProps,
-  primaryButtonProps,
-  setSelectedDate,
-  setFocused,
-  onTertiaryButtonClick,
-  onSecondaryButtonClick,
-  onPrimaryButtonClick,
-  setIsOpen,
-  hideTertiaryButton,
-  hideSecondaryButton,
-  hidePrimaryButton,
-}) {
-  const handleClear = () => {
-    setSelectedDate(null);
-    setFocused(false);
-    onTertiaryButtonClick?.();
-  };
-
-  const handleCancel = () => {
-    setIsOpen(false);
-    setFocused(false);
-    onSecondaryButtonClick?.();
-  };
-
-  const handelApply = () => {
-    setIsOpen(false);
-    onPrimaryButtonClick?.();
-  };
-  return (
-    <div
-      className={`datePicker-buttons-container ${
-        hideTertiaryButton && hideSecondaryButton && hidePrimaryButton
-          ? "datePicker-buttons-container--hidden"
-          : ""
-      }`}
-    >
-      {!hideTertiaryButton && (
-        <Button
-          variant="url"
-          size="small"
-          onClick={handleClear}
-          {...tertiaryButtonProps}
-        >
-          Clear
-        </Button>
-      )}
-
-      {!hideSecondaryButton && (
-        <Button
-          variant="secondary"
-          size="small"
-          onClick={handleCancel}
-          {...secondaryButtonProps}
-        >
-          Cancel
-        </Button>
-      )}
-
-      {!hidePrimaryButton && (
-        <Button
-          variant="primary"
-          size="small"
-          onClick={handelApply}
-          {...primaryButtonProps}
-        >
-          Apply
-        </Button>
-      )}
-    </div>
-  );
-}

package/src/components/DatePicker/datePickerInput.js

@@ -1,333 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import moment from "moment";
-
-export default function DatePickerInput({
-  dateString,
-  placeholder,
-  isDisabled,
-  isError,
-  inputContainerRef,
-  selectedDate,
-  ref,
-  inputProps,
-  isOpen,
-  setIsOpen,
-  displayFormat = "DD-MM-YYYY",
-  onDateStringChange,
-  minDate,
-  maxDate,
-  onCancel,
-  readOnly = false,
-  customIcon,
-}) {
-  const [isFocused, setIsFocused] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-  const inputRef = useRef(null);
-  const [errorState, setErrorState] = useState(false);
-  const [pendingCursorPosition, setPendingCursorPosition] = useState(null);
-
-  // Handle cancel action
-  useEffect(() => {
-    if (onCancel) {
-      setErrorState(false);
-      setInputValue("");
-    }
-  }, [onCancel]);
-
-  // Fixed positions for DD-MM-YYYY format
-  const NUMBER_POSITIONS =
-    displayFormat === "YYYY-MM-DD"
-      ? [0, 1, 2, 3, 5, 6, 8, 9] // For YYYY-MM-DD format
-      : [0, 1, 3, 4, 6, 7, 8, 9]; // For DD-MM-YYYY and MM-DD-YYYY formats
-
-  // Handle cursor positioning after value updates
-  useEffect(() => {
-    if (pendingCursorPosition !== null && inputRef.current) {
-      inputRef.current.setSelectionRange(
-        pendingCursorPosition,
-        pendingCursorPosition
-      );
-      setPendingCursorPosition(null);
-    }
-  }, [inputValue, pendingCursorPosition]);
-
-  useEffect(() => {
-    if (dateString) {
-      setInputValue(dateString);
-    } else {
-      setInputValue("");
-    }
-  }, [dateString]);
-
-  useEffect(() => {
-    if (readOnly) {
-      setInputValue("");
-      return;
-    }
-    if (!inputValue && isFocused) {
-      setInputValue(displayFormat);
-      setPendingCursorPosition(NUMBER_POSITIONS[0]);
-    }
-  }, [isFocused]);
-
-  const handleDateInputFocus = () => {
-    setIsFocused(true);
-    setIsOpen(true);
-    // If input is empty, show the format as placeholder
-    if (!inputValue) {
-      if (!readOnly) {
-        setInputValue(displayFormat);
-      }
-      if (inputRef.current) {
-        inputRef.current.setSelectionRange(0, 0);
-      }
-    }
-  };
-
-  const validateDate = (date) => {
-    if (!date) return false;
-
-    try {
-      // If date is a string, try to parse it
-      const momentDate =
-        typeof date === "string"
-          ? moment(date, displayFormat, true)
-          : moment(date);
-
-      // Check if it's a valid moment object
-      if (!momentDate.isValid()) {
-        return false;
-      }
-
-      // Check if date is within min/max range
-      if (minDate && momentDate.isBefore(minDate, "day")) {
-        return false;
-      }
-      if (maxDate && momentDate.isAfter(maxDate, "day")) {
-        return false;
-      }
-
-      // Get the day and month from the input value
-      const format = displayFormat || "DD-MM-YYYY";
-      const formatMap = {
-        "DD-MM-YYYY": { day: [0, 2], month: [3, 5], year: [6, 10] },
-        "MM-DD-YYYY": { day: [3, 5], month: [0, 2], year: [6, 10] },
-        "YYYY-MM-DD": { day: [8, 10], month: [5, 7], year: [0, 4] },
-      };
-
-      const formatInfo = formatMap[format] || formatMap["DD-MM-YYYY"];
-
-      // Safely parse the date parts
-      const day =
-        parseInt(inputValue.substring(formatInfo.day[0], formatInfo.day[1])) ||
-        0;
-      const month =
-        parseInt(
-          inputValue.substring(formatInfo.month[0], formatInfo.month[1])
-        ) || 0;
-      const year =
-        parseInt(
-          inputValue.substring(formatInfo.year[0], formatInfo.year[1])
-        ) || 0;
-
-      // Validate month (1-12)
-      if (month < 1 || month > 12) {
-        return false;
-      }
-
-      // Get the last day of the month
-      const lastDayOfMonth = moment(`${year}-${month}`, "YYYY-M").daysInMonth();
-
-      // Validate day (1 to last day of month)
-      if (day < 1 || day > lastDayOfMonth) {
-        return false;
-      }
-
-      return true;
-    } catch (error) {
-      console.warn("Date validation error:", error);
-      return false;
-    }
-  };
-
-  const handleDateInputBlur = () => {
-    setIsFocused(false);
-
-    try {
-      // Validate date on blur
-      const parsedDate = moment(inputValue, displayFormat, true);
-      if (parsedDate.isValid()) {
-        const isValid = validateDate(parsedDate);
-        setErrorState(!isValid);
-        if (isValid) {
-          onDateStringChange?.(parsedDate);
-        }
-      } else {
-        setErrorState(true);
-      }
-
-      // If input is empty or just the format, clear it
-      if (!inputValue || inputValue === displayFormat) {
-        setInputValue("");
-        setErrorState(false);
-        onDateStringChange?.(null);
-      }
-    } catch (error) {
-      console.warn("Date blur handling error:", error);
-      setErrorState(true);
-    }
-  };
-
-  const handleInputClick = () => {
-    setIsOpen(true);
-    if (inputRef.current) {
-      const cursor = inputRef.current.selectionStart;
-
-      // Special case: clicking after last character
-      if (cursor >= NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] + 1) {
-        inputRef.current.setSelectionRange(
-          NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] + 1,
-          NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1] + 1
-        );
-        return;
-      }
-
-      // If click lands on a non-digit position (i.e. separator)
-      if (!NUMBER_POSITIONS.includes(cursor)) {
-        // Find the next number position *after* the click
-        const nextPos = NUMBER_POSITIONS.find((pos) => pos >= cursor);
-
-        // Fallback: go to last number position
-        const fallbackPos = NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1];
-
-        inputRef.current.setSelectionRange(
-          nextPos !== undefined ? nextPos : fallbackPos,
-          nextPos !== undefined ? nextPos : fallbackPos
-        );
-      }
-      // Else: click landed on a number digit, let it be
-    }
-  };
-
-  const handleInputChange = (e) => {
-    try {
-      const input = e.target;
-      const value = input.value;
-      const cursorPosition = input.selectionStart;
-
-      // Guard: invalid cursor
-      if (cursorPosition == null || cursorPosition < 1) return;
-
-      const newChar = value[cursorPosition - 1];
-      if (!/^\d$/.test(newChar)) return;
-
-      const pos = cursorPosition - 1;
-
-      // Guard: only allow typing in number positions
-      if (!NUMBER_POSITIONS.includes(pos)) {
-        e.preventDefault?.();
-        setPendingCursorPosition(
-          NUMBER_POSITIONS.find((p) => p > pos) ??
-            NUMBER_POSITIONS[NUMBER_POSITIONS.length - 1]
-        );
-        return;
-      }
-
-      const newValue =
-        inputValue.slice(0, pos) + newChar + inputValue.slice(pos + 1);
-
-      if (newValue.length > displayFormat.length) return;
-      setInputValue(newValue);
-      onDateStringChange?.(newValue);
-
-      const currentIndex = NUMBER_POSITIONS.indexOf(pos);
-      if (currentIndex < NUMBER_POSITIONS.length - 1) {
-        const nextPos = NUMBER_POSITIONS[currentIndex + 1];
-        setPendingCursorPosition(nextPos);
-      } else {
-        const parsedDate = moment(newValue, displayFormat, true);
-        const isValid = parsedDate.isValid() && validateDate(parsedDate);
-        setErrorState(!isValid);
-        onDateStringChange?.(isValid ? parsedDate : newValue);
-      }
-    } catch (error) {
-      console.warn("Date input change error:", error);
-      setErrorState(true);
-    }
-  };
-
-  const handleKeyDown = (e) => {
-    // Allow navigation keys
-    if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Tab") {
-      return;
-    }
-
-    if (e.key === "Backspace") {
-      e.preventDefault();
-
-      const caret = inputRef.current.selectionStart;
-
-      /* 1️⃣ figure out which digit we should delete */
-      const deletePos = [...NUMBER_POSITIONS] // reverse‑scan
-        .reverse()
-        .find((p) => p < caret);
-
-      if (deletePos == null) return; // nothing to delete
-
-      /* 2️⃣ build a new masked value */
-      const newValue =
-        inputValue.slice(0, deletePos) +
-        displayFormat[deletePos] + // "D" | "M" | "Y"
-        inputValue.slice(deletePos + 1);
-
-      setInputValue(newValue);
-      onDateStringChange?.(newValue);
-
-      /* 3️⃣ place caret so next Backspace hits the next digit */
-      let nextCaret = deletePos; // start just after the reset char
-      while (nextCaret > 0 && !NUMBER_POSITIONS.includes(nextCaret - 1)) {
-        nextCaret--; // hop over separator(s)
-      }
-      setPendingCursorPosition(nextCaret);
-      return;
-    }
-    // Only allow numbers
-    if (!/^\d$/.test(e.key)) {
-      e.preventDefault();
-    }
-  };
-
-  return (
-    <div
-      className={`datePicker-input-container ${
-        isDisabled ? "datePicker-input-disabled" : null
-      }
-      ${isError || errorState ? "impact-datePicker-error" : null} ${
-        customIcon ? "datePicker-input-container-custom-icon" : null
-      }`}
-      ref={inputContainerRef}
-    >
-      <input
-        type="text"
-        placeholder={placeholder || "Select Date"}
-        value={inputValue}
-        onFocus={handleDateInputFocus}
-        onBlur={handleDateInputBlur}
-        onClick={handleInputClick}
-        onChange={handleInputChange}
-        onKeyDown={handleKeyDown}
-        ref={(node) => {
-          inputRef.current = node;
-          if (ref?.inputRef) {
-            ref.inputRef.current = node;
-          }
-        }}
-        {...inputProps}
-        disabled={isDisabled}
-        readOnly={readOnly}
-        className="impact-datepicker-date-input"
-      />
-      {customIcon && customIcon}
-    </div>
-  );
-}