@indico-data/design-system 2.36.4 → 2.38.0

package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.tsx

@@ -1,245 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { format } from 'date-fns';
-import FocusTrap from 'focus-trap-react';
-import {
-  DayPicker,
-  SelectSingleEventHandler,
-  SelectRangeEventHandler,
-  useNavigation,
-  CaptionProps,
-  DateRange,
-} from 'react-day-picker';
-import { usePopper } from 'react-popper';
-import { IconName, IconSizes, PermafrostComponent } from '@/types';
-import { Icon } from '@/components';
-
-type Props = PermafrostComponent & {
-  ariaLabel?: string;
-  disableBeforeDate?: Date;
-  disableAfterDate?: Date;
-  disabled?: boolean;
-  id: string;
-  label?: string;
-  onChange: (value: Date | DateRange | undefined) => void;
-  selected?: Date | undefined;
-  selectedRange?: DateRange | undefined;
-  value: Date | undefined;
-  triggerIcon: IconName;
-  triggerIconSize: IconSizes;
-  isRangePicker?: boolean;
-  isOpen?: boolean;
-  clearOnClose?: boolean;
-};
-
-function CustomCaption(props: CaptionProps) {
-  const { goToMonth, nextMonth, previousMonth } = useNavigation();
-
-  return (
-    <div className="custom__caption">
-      <button
-        className="custom__caption__action__button"
-        disabled={!previousMonth}
-        onClick={(event) => {
-          event.preventDefault();
-          if (previousMonth) {
-            goToMonth(previousMonth);
-          }
-        }}
-      >
-        <Icon size="sm" ariaLabel="Previous Month" name="chevron-left" />
-      </button>
-      <h2 className="custom__caption__text">{format(props.displayMonth, 'MMM yyyy')}</h2>
-      <button
-        className="custom__caption__action__button"
-        disabled={!nextMonth}
-        onClick={(event) => {
-          event.preventDefault();
-          if (nextMonth) {
-            goToMonth(nextMonth);
-          }
-        }}
-      >
-        <Icon size="sm" ariaLabel="Next Month" name="chevron-right" />
-      </button>
-    </div>
-  );
-}
-export const NoInputDatePicker = (props: Props) => {
-  const {
-    ariaLabel,
-    className,
-    disabled,
-    disableBeforeDate,
-    disableAfterDate,
-    id,
-    label,
-    onChange,
-    selected,
-    triggerIcon,
-    triggerIconSize,
-    isRangePicker,
-    selectedRange,
-    isOpen,
-    clearOnClose,
-  } = props;
-
-  const [localSelected, setLocalSelected] = useState<Date | undefined>(selected || undefined);
-  const [localSelectedRange, setLocalSelectedRange] = useState<DateRange | undefined>(
-    selectedRange || undefined,
-  );
-  const [isPopperOpen, setIsPopperOpen] = useState(isOpen || false);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const popperRef = useRef<HTMLDivElement>(null);
-  const popper = usePopper(popperRef.current, popperElement, {
-    placement: 'bottom-start',
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [-12, -12],
-        },
-      },
-    ],
-  });
-
-  const [isTrapActive, setIsTrapActive] = useState(false);
-
-  const datePickerRef = useRef<HTMLDivElement | null>(null);
-
-  // Addresses clickout side bug when implementing in an application
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      // Close the date picker only when clicked outside
-      if (
-        datePickerRef.current &&
-        event.target instanceof Node &&
-        !datePickerRef.current.contains(event.target)
-      ) {
-        closePopper();
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  // Allow datepicker to load before setting active trap
-  useLayoutEffect(() => {
-    if (isOpen) {
-      setIsTrapActive(true);
-    } else {
-      setIsTrapActive(false);
-    }
-  }, [isOpen]);
-
-  const closePopper = () => {
-    clearOnClose && setLocalSelected(undefined);
-    clearOnClose && setLocalSelectedRange(undefined);
-
-    setIsPopperOpen(false);
-  };
-
-  const handleDaySelect: SelectSingleEventHandler = (date) => {
-    setLocalSelected(date);
-    if (date) {
-      onChange(date);
-      closePopper();
-    } else {
-      onChange(date);
-    }
-  };
-
-  const handleRangeSelect: SelectRangeEventHandler = (range: DateRange | undefined) => {
-    setLocalSelectedRange(range);
-    if (range?.from && range?.to) {
-      onChange(range);
-      closePopper();
-    } else {
-      onChange(range);
-    }
-  };
-
-  return (
-    <div
-      className={className}
-      aria-label={ariaLabel || 'date select'}
-      aria-describedby={`picker-label--${id}`}
-      data-cy={props['data-cy']}
-      data-testid={props['data-testid']}
-      id={id}
-      ref={datePickerRef}
-    >
-      {label ? (
-        <div id={`picker-label--${id}`} className="visually-hidden">
-          {label}
-        </div>
-      ) : null}
-      <div ref={popperRef} className="no__input__date__picker-inputParent">
-        <Icon
-          aria-label="Open date picker"
-          name={triggerIcon}
-          size={triggerIconSize}
-          className="date__picker__trigger"
-          data-testid={`datepicker-trigger-for-${id}`}
-          onClick={() => setIsPopperOpen(!isPopperOpen)}
-        />
-      </div>
-      {isPopperOpen && (
-        <FocusTrap
-          active={isTrapActive}
-          focusTrapOptions={{
-            initialFocus: false,
-            allowOutsideClick: true,
-            clickOutsideDeactivates: true,
-            onDeactivate: closePopper,
-            fallbackFocus: popperRef.current || undefined,
-          }}
-        >
-          <div
-            tabIndex={-1}
-            style={popper.styles.popper}
-            className="DayPickerInput-Overlay"
-            {...popper.attributes.popper}
-            ref={setPopperElement}
-            role="dialog"
-            aria-label="DayPicker calendar"
-            data-testid="datepicker-dialog"
-          >
-            {isRangePicker ? (
-              <DayPicker
-                components={{
-                  Caption: CustomCaption,
-                }}
-                disabled={disabled}
-                mode={'range'}
-                defaultMonth={localSelected}
-                selected={localSelectedRange}
-                onSelect={handleRangeSelect}
-                fromDate={disableBeforeDate}
-                toDate={disableAfterDate}
-                data-testid="range-datepicker"
-              />
-            ) : (
-              <DayPicker
-                components={{
-                  Caption: CustomCaption,
-                }}
-                disabled={disabled}
-                mode={'single'}
-                defaultMonth={localSelected}
-                selected={localSelected}
-                onSelect={handleDaySelect}
-                fromDate={disableBeforeDate}
-                toDate={disableAfterDate}
-                data-testid="single-datepicker"
-              />
-            )}
-          </div>
-        </FocusTrap>
-      )}
-    </div>
-  );
-};

package/src/legacy/components/inputs/NoInputDatePicker/index.ts

@@ -1 +0,0 @@
-export { NoInputDatePicker } from './NoInputDatePicker';