@orfium/ictinus 5.43.7 → 5.43.9

package/src/components/DatePicker/DatePicker.tsx

@@ -1,231 +0,0 @@
-import { PositionInScreen } from 'components/utils/PositionInScreen';
-import useKeyboardEvents from 'hooks/useKeyboardEvents';
-import React, { memo, useCallback, useMemo, useState } from 'react';
-import isEqual from 'react-fast-compare';
-import type { Dayjs } from 'utils/date';
-import type { TestProps } from 'utils/types';
-import { EMPTY_STATE } from './constants';
-import { datePickerStyles } from './DatePicker.style';
-import type { DatePickerProps } from './DatePicker.types';
-import DatePickInput from './DatePickInput';
-import type { Range } from './OverlayComponent/OverlayComponent';
-import OverlayComponent from './OverlayComponent/OverlayComponent';
-import { initDates } from './utils';
-
-const DatePicker: React.FC<DatePickerProps & TestProps> = ({
-  isRangePicker = false,
-  onChange = () => {},
-  onClear = () => {},
-  disableDates,
-  value: initialValue,
-  inputProps,
-  dateFormatOverride = undefined,
-  isClearable = false,
-  filterConfig,
-  options,
-  dataTestId,
-  placement,
-}) => {
-  const value = useMemo(() => initDates(initialValue || {}), [initialValue]);
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedOption, setSelectedOption] = useState<string>('');
-  const [range, setRange] = useState<Range>(value);
-
-  const { keyboardProps } = useKeyboardEvents({
-    events: {
-      keydown: {
-        onEscape: () => {
-          setIsOpen(false);
-        },
-      },
-    },
-    hasPropagation: true,
-  });
-
-  const handleSelectedOptions = useCallback(
-    (option: string) => {
-      const foundOption = options?.find((optionItem) => optionItem.value === option);
-
-      if (foundOption) {
-        setRange(
-          Array.isArray(foundOption.dates)
-            ? { from: foundOption.dates[0], to: foundOption.dates[1] }
-            : { from: foundOption.dates, to: foundOption.dates }
-        );
-
-        setSelectedOption(option);
-      }
-    },
-    [options]
-  );
-
-  const applyRangeAndClose = useCallback(
-    (oldState: Range) => {
-      const startDate =
-        oldState.to && oldState.from?.isAfter(oldState.to) ? oldState.to : oldState.from;
-      const endDate =
-        oldState.to && oldState.from?.isAfter(oldState.to) ? oldState.from : oldState.to;
-      const newRange = { from: startDate, to: endDate };
-
-      if (newRange.to) {
-        setIsOpen(false);
-      }
-
-      onChange({ from: newRange.from?.toDate(), to: newRange.to?.toDate() });
-    },
-    [onChange]
-  );
-
-  const clearSelectedOption = useCallback(() => {
-    if (selectedOption.length) {
-      setSelectedOption('');
-    }
-  }, [selectedOption]);
-
-  const setRangePick = useCallback(
-    (day: Dayjs) => {
-      const startOfDay = day.startOf('day');
-      const endOfDay = day.endOf('day');
-      // in case is a day picker
-      if (!isRangePicker) {
-        return setRange((oldState) => {
-          if (oldState.from && oldState.to && day.isBetween(oldState.from, oldState.to)) {
-            return EMPTY_STATE;
-          }
-
-          return { from: startOfDay, to: endOfDay };
-        });
-      }
-
-      // in case is range picker
-      return setRange((oldState) => {
-        if (oldState.from && oldState.to) {
-          // Reset range and set new start date
-          return { from: startOfDay, to: undefined };
-        }
-
-        if (!oldState.from) {
-          // First selection - set start date
-          return { ...oldState, from: startOfDay };
-        }
-
-        // Second selection - determine correct order of dates
-        if (startOfDay.isBefore(oldState.from)) {
-          // If selected date is before the start date, swap them
-          return { from: startOfDay, to: oldState.from.endOf('day') };
-        }
-
-        // Normal case - selected date is after start date
-        return { ...oldState, to: endOfDay };
-      });
-    },
-    [isRangePicker]
-  );
-
-  const onClearAll = useCallback(() => {
-    setRange(EMPTY_STATE);
-    onChange(EMPTY_STATE);
-    clearSelectedOption();
-    setIsOpen(false);
-  }, [onChange, clearSelectedOption]);
-
-  const handleIconClick = useCallback(() => {
-    setIsOpen(!isOpen);
-  }, [isOpen]);
-
-  const handleClear = useCallback(
-    (e?: React.KeyboardEvent) => {
-      if (!isClearable && !filterConfig.filterType) {
-        return false;
-      }
-
-      if (filterConfig?.filterType) {
-        setIsOpen(false);
-        setRange(EMPTY_STATE);
-        clearSelectedOption();
-
-        if (filterConfig?.filterType === 'added') {
-          return onClear();
-        }
-
-        return onChange(EMPTY_STATE);
-      }
-
-      if (e?.keyCode === 27) {
-        // if escape
-        return setIsOpen(false);
-      }
-
-      if (e?.keyCode === 8) {
-        //backspace
-        if (isRangePicker) {
-          if (value.from && value.to) {
-            setRange({ from: value.from, to: undefined });
-
-            /** Since we are clearing the "to" value, predefined option is not valid anymore */
-            clearSelectedOption();
-
-            return onChange({ from: value.from.toDate(), to: undefined });
-          }
-        }
-
-        setRange(EMPTY_STATE);
-        onChange(EMPTY_STATE);
-      }
-    },
-    [
-      isClearable,
-      filterConfig?.filterType,
-      clearSelectedOption,
-      onChange,
-      onClear,
-      isRangePicker,
-      value.from,
-      value.to,
-    ]
-  );
-
-  const onApply = useCallback(() => {
-    applyRangeAndClose(range);
-  }, [applyRangeAndClose, range]);
-
-  return (
-    <div {...keyboardProps}>
-      <PositionInScreen
-        isVisible={isOpen}
-        setIsVisible={setIsOpen}
-        placement={placement}
-        offsetY={8}
-        parent={
-          <DatePickInput
-            filterConfig={filterConfig}
-            isRangePicker={isRangePicker}
-            selectedDay={value}
-            inputProps={inputProps}
-            dateFormatOverride={dateFormatOverride}
-            handleIconClick={handleIconClick}
-            handleClear={handleClear}
-            isOpen={isOpen}
-            dataTestId={dataTestId}
-          />
-        }
-      >
-        <div css={datePickerStyles()}>
-          <OverlayComponent
-            selectedOption={selectedOption}
-            setSelectedOption={handleSelectedOptions}
-            extraOptions={options}
-            isRangePicker={isRangePicker}
-            onDaySelect={setRangePick}
-            selectedDays={range}
-            disabledDates={disableDates}
-            onClearAll={onClearAll}
-            onApply={onApply}
-          />
-        </div>
-      </PositionInScreen>
-    </div>
-  );
-};
-
-export default memo(DatePicker, isEqual);

package/src/components/DatePicker/DatePicker.types.ts

@@ -1,57 +0,0 @@
-import type { FilterType } from 'components/Filter/Filter.types';
-import type { Dayjs } from 'utils/date';
-import type { TextFieldProps } from '../TextField/TextField';
-
-export type DisabledDates = {
-  daysOfWeek?: number[];
-  days?: Date[];
-  after?: Date;
-  before?: Date;
-};
-
-export type DateRange = { from: Date | undefined; to: Date | undefined };
-
-export type DatePickerProps = {
-  /** This property is to define if this is a day picker or a day range picker */
-  isRangePicker?: boolean;
-  /** A callback to return user selection */
-  onChange?: (range: DateRange) => void;
-  /** A callback that runs ONLY on added filters when the users clears the date (presses the x button)  */
-  onClear?: () => void;
-  /** Option to disable some dates */
-  disableDates?: DisabledDates;
-  /** Value to define if needed an initial state or to handle it externally */
-  value: DateRange;
-  /** Calendar options for DateRangePicker */
-  options?: ExtraOption[];
-  /** Props of the TextField input */
-  inputProps?: Omit<TextFieldProps, 'size'>;
-  /** The format of the date displayed in the input field */
-  dateFormatOverride?: DateFormatType;
-  /** if the datepicker can be clear with backspace */
-  isClearable?: boolean;
-  /** if the datepicker's default date is today instead of placeholder text */
-  /** @deprecated This prop is being deprecated and is not used as you can manipulate date from value, will be removed in the future **/
-  isDefaultNow?: boolean;
-  /** placement of the datepicker which will open. Either above of the parent or below. Defaults to bottom */
-  placement?: 'top' | 'bottom';
-  /** Style properties for the DatePicker with a filter base */
-  filterConfig?: {
-    /** The filter's label */
-    label?: string;
-    /** This property defines the Filter's type */
-    filterType?: FilterType;
-  };
-};
-
-export type ExtraOption = { value: string; label: string; dates: Dayjs[] };
-
-export type DateFormatType =
-  | 'MM/DD/YYYY'
-  | 'DD/MM/YYYY'
-  | 'MMMM D, YYYY'
-  | 'dddd, MMMM D, YYYY'
-  | 'M/D/YYYY'
-  | 'MMM D, YYYY'
-  | 'ddd, MMM D, YYYY'
-  | 'DD MMM YYYY';

package/src/components/DatePicker/Day/Day.style.ts

@@ -1,111 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import type { Theme } from 'theme';
-
-import { vars } from '@orfium/tokens';
-import { label02 } from 'components/Typography/Typography.config.styles';
-
-type DayStyleProps = {
-  day?: number;
-  isSelected?: boolean;
-  isBetween?: boolean;
-  isLast?: boolean;
-  isFirst?: boolean;
-  isDisabled?: boolean;
-  isToday: boolean;
-};
-
-export const DATEPICKER_TOKENS = {
-  dateSize: vars.sizing['9'],
-  actionsContainer: vars.sizing['15'],
-  fieldWidth: vars.sizing['21'],
-};
-
-export const dayWrapperStyle = ({
-  isSelected,
-  isBetween,
-  isLast,
-  isFirst,
-  isToday,
-  isDisabled,
-}: DayStyleProps & { isToday: boolean }): SerializedStyles => {
-  return css`
-    vertical-align: middle;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-    color: ${isSelected ? vars.color.text.inverted.primary : vars.color.text.default.primary};
-    width: ${DATEPICKER_TOKENS.dateSize};
-    font-weight: ${isToday && 'bold'};
-    opacity: ${isDisabled ? 0.5 : 1};
-    background: ${isLast || isFirst
-      ? vars.color.palette.primary.contrast
-      : (isSelected || isBetween) &&
-        typeof isBetween !== 'undefined' &&
-        vars.color.palette.tertiary.muted};
-    border-bottom-right-radius: ${isLast && isSelected && '100%'};
-    border-top-right-radius: ${isLast && isSelected && '100%'};
-    border-bottom-left-radius: ${isFirst && isSelected && '100%'};
-    border-top-left-radius: ${isFirst && isSelected && '100%'};
-
-    &:focus-visible {
-      background-color: ${vars.color.palette.tertiary.muted};
-      border-radius: ${vars['border-radius']['7']};
-    }
-
-    ${(isSelected || isLast || isFirst) &&
-    `&:after {
-          z-index: -1;
-          content: ' ';
-          height: 100%;
-          width: 50%;
-          position: absolute;
-          top: 0;
-          left: ${isLast ? '0' : 'initial'};
-          right: ${isFirst ? '0' : 'initial'};
-          border-bottom-right-radius: ${isLast && isSelected && '100%'};
-          border-top-right-radius: ${isLast && isSelected && '100%'};
-          border-bottom-left-radius: ${isFirst && isSelected && '100%'};
-          border-top-left-radius: ${isFirst && isSelected && '100%'};
-      }`}
-  `;
-};
-
-export const emptyDayStyle = ({ isBetween }: { isBetween: boolean }) => {
-  return css`
-    vertical-align: middle;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-    background: ${isBetween ? vars.color.palette.tertiary.muted : vars.color.palette.tertiary.base};
-  `;
-};
-
-export const dayStyle =
-  ({ isSelected, isToday, isDisabled, isBetween }: DayStyleProps) =>
-  (theme: Theme) => {
-    return css`
-      ${label02(theme)};
-      border: ${isSelected ? 0 : vars['border-width']['1']} solid
-        ${isToday
-          ? vars.color['border-color'].interactive.active
-          : vars.color['border-color'].decorative.transparent};
-      border-radius: ${(isToday || isSelected) && vars['border-radius']['7']};
-      width: ${DATEPICKER_TOKENS.dateSize};
-      height: ${DATEPICKER_TOKENS.dateSize};
-      color: ${isSelected ? vars.color.text.inverted.primary : vars.color.text.default.primary};
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: ${isSelected ? vars.color.palette.primary.contrast : 'transparent'};
-
-      ${!isDisabled &&
-      `&:hover {
-            border-radius: ${vars['border-radius']['7']};
-            background: ${
-              !isSelected && (!isBetween ? vars.color.palette.tertiary.muted : 'transparent')
-            };
-          }`}
-    `;
-  };

package/src/components/DatePicker/Day/Day.test.tsx

@@ -1,97 +0,0 @@
-import { fireEvent, render } from 'test';
-import { vi } from 'vitest';
-import { currentDay } from '../utils';
-import Day from './Day';
-
-describe('Day', () => {
-  const mockDate = currentDay;
-  const day = mockDate.date();
-  const year = mockDate.year();
-  const month = mockDate.month();
-
-  it('should render correctly', () => {
-    const { container } = render(
-      <table>
-        <tbody>
-          <tr>
-            <Day day={day} month={month} year={year} />
-          </tr>
-        </tbody>
-      </table>
-    );
-    expect(container).toMatchSnapshot();
-  });
-  it('should render isFirst, isLast correctly', () => {
-    const { container } = render(
-      <table>
-        <tbody>
-          <tr>
-            <Day day={day} month={month} year={year} isFirst />
-          </tr>
-        </tbody>
-      </table>
-    );
-    expect(container).toMatchSnapshot();
-
-    const { container: isLastContainer } = render(
-      <table>
-        <tbody>
-          <tr>
-            <Day day={day} month={month} year={year} isLast />
-          </tr>
-        </tbody>
-      </table>
-    );
-    expect(isLastContainer).toMatchSnapshot();
-  });
-  it('should render disabled correctly', () => {
-    const { container } = render(
-      <table>
-        <tbody>
-          <tr>
-            <Day day={day} month={month} year={year} isDisabled />
-          </tr>
-        </tbody>
-      </table>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should run onDaySelect correctly', async () => {
-    const onDaySelect = vi.fn();
-
-    const { findByText } = render(
-      <table>
-        <tbody>
-          <tr>
-            <Day day={day} month={month} year={year} onSelect={onDaySelect} />
-          </tr>
-        </tbody>
-      </table>
-    );
-
-    const dayCell = await findByText(day.toString());
-    fireEvent.click(dayCell);
-
-    expect(onDaySelect).toHaveBeenCalledTimes(1);
-  });
-
-  it('should not run onDaySelect when day is disabled', async () => {
-    const onDaySelect = vi.fn();
-
-    const { findByText } = render(
-      <table>
-        <tbody>
-          <tr>
-            <Day day={day} month={month} year={year} onSelect={onDaySelect} isDisabled />
-          </tr>
-        </tbody>
-      </table>
-    );
-
-    const dayCell = await findByText(day.toString());
-    fireEvent.click(dayCell);
-
-    expect(onDaySelect).toHaveBeenCalledTimes(0);
-  });
-});

package/src/components/DatePicker/Day/Day.tsx

@@ -1,100 +0,0 @@
-import useKeyboardEvents from 'hooks/useKeyboardEvents';
-import React from 'react';
-import type { Dayjs } from 'utils/date';
-
-import { dayStyle, dayWrapperStyle, emptyDayStyle } from './Day.style';
-import { currentDay } from '../utils';
-
-export type DayProps = {
-  day?: number;
-  month: number;
-  year: number;
-  onSelect?: (date: Dayjs) => void;
-  isSelected?: boolean;
-  isBetween?: boolean;
-  isLast?: boolean;
-  isFirst?: boolean;
-  isDisabled?: boolean;
-  tabIndex?: number;
-};
-
-const Day: React.FCC<DayProps> = ({
-  day,
-  month,
-  year,
-  onSelect,
-  isSelected = false,
-  isBetween = false,
-  isLast = false,
-  isFirst = false,
-  isDisabled = false,
-  tabIndex,
-}) => {
-  const date = React.useMemo(
-    () => day && currentDay.month(month).date(day).year(year),
-    [year, day, month]
-  );
-  const isToday = React.useMemo(() => {
-    return currentDay.month() === month && currentDay.year() === year && currentDay.date() === day;
-  }, [year, month, day]);
-
-  const onDayClick = React.useCallback(
-    (e: React.MouseEvent | React.KeyboardEvent) => {
-      e.preventDefault();
-      if (onSelect && date) {
-        onSelect(date);
-      }
-    },
-    [onSelect, date]
-  );
-
-  const { keyboardProps } = useKeyboardEvents({
-    events: {
-      keydown: {
-        onEnter: (e) => {
-          if (!isDisabled) {
-            onDayClick(e);
-          }
-        },
-      },
-    },
-    hasPropagation: true,
-  });
-
-  if (!day) {
-    return <td css={emptyDayStyle({ isBetween })} />;
-  }
-
-  return (
-    <td style={{ padding: 0 }} onClick={isDisabled ? undefined : onDayClick}>
-      <div
-        css={dayWrapperStyle({
-          isSelected,
-          isBetween,
-          isLast,
-          isFirst,
-          isToday,
-          isDisabled,
-        })}
-        tabIndex={tabIndex}
-        data-testid={`${day}_${month + 1}_${year}` + `${isSelected ? '_selected' : ''}`}
-        {...keyboardProps}
-      >
-        <div
-          css={dayStyle({
-            isSelected,
-            isBetween,
-            isLast,
-            isFirst,
-            isToday,
-            isDisabled,
-          })}
-        >
-          {day}
-        </div>
-      </div>
-    </td>
-  );
-};
-
-export default React.memo<DayProps>(Day);