@orfium/ictinus 5.43.7 → 5.43.9

package/src/components/DatePicker/DatePickInput/DatePickInput.tsx

@@ -1,165 +0,0 @@
-import { vars } from '@orfium/tokens';
-import FilterButton from 'components/Filter/components/FilterButton';
-import Icon from 'components/Icon';
-import React, { useCallback, useMemo, type InputHTMLAttributes } from 'react';
-import type { Dayjs } from 'utils/date';
-import dayjs from 'utils/date';
-import { getLocaleFormat } from 'utils/helpers';
-import type { TestProps } from 'utils/types';
-import type { TextFieldProps } from '../../TextField/TextField';
-import TextField from '../../TextField/TextField';
-import { DATE_PICKER_LABEL, DATE_RANGE_PICKER_LABEL } from '../constants';
-import type { DateFormatType, DatePickerProps } from '../DatePicker.types';
-import type { Range } from '../OverlayComponent/OverlayComponent';
-import { FIELD_TOKENS } from './DatePickInput.style';
-
-// TODO: Need to fix this (TextField onChange prop)
-const ON_CHANGE_MOCK = () => {};
-
-export type DatePickInputProps = Pick<DatePickerProps, 'filterConfig'> & {
-  /** Callback for the calendar icon button of the input field */
-  handleIconClick: () => void;
-  /** Handles the clear action for the datepicker */
-  handleClear: (event?: React.KeyboardEvent) => void;
-  /** Defines whether the component selects a single date or a range */
-  isRangePicker: boolean;
-  /** The selected day */
-  selectedDay: Range;
-  /** Props for styling the input */
-  inputProps?: Omit<TextFieldProps, 'size' | 'mask'>;
-  /** Overrides the default date format */
-  dateFormatOverride?: DateFormatType;
-  /** Defines whether the component is open */
-  isOpen: boolean;
-} & InputProps &
-  TestProps;
-
-type InputProps = Partial<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>>;
-
-const formatDate = (dateFormatOverride: string) => (date: Dayjs | undefined) => {
-  return date ? dayjs(date).format(getLocaleFormat(dateFormatOverride)) : '';
-};
-
-const getLabels = (isRangePicker: boolean, formattedTo: string) => ({
-  selectDate: `Select Date${isRangePicker ? 's' : ''}`,
-  to: isRangePicker ? `- ${formattedTo}` : '',
-});
-
-const DatePickInput = React.forwardRef<HTMLInputElement, DatePickInputProps>(
-  (
-    {
-      handleIconClick,
-      filterConfig = {},
-      handleClear,
-      dataTestId,
-      isRangePicker,
-      inputProps,
-      selectedDay,
-      dateFormatOverride = 'MM/DD/YYYY',
-      isOpen,
-    },
-    ref
-  ) => {
-    const getDateFormatted = useCallback(formatDate(dateFormatOverride), [dateFormatOverride]);
-
-    const formattedFrom = getDateFormatted(selectedDay.from);
-    const formattedTo = getDateFormatted(selectedDay.to);
-
-    const labels = getLabels(isRangePicker, formattedTo);
-
-    const { filterType, label } = filterConfig;
-
-    const sx = {
-      wrapper: {
-        minWidth: isRangePicker
-          ? FIELD_TOKENS.minWidth.extraLarge.normal
-          : FIELD_TOKENS.minWidth.medium.normal,
-      },
-    };
-
-    const renderIconButton = useMemo(
-      () => (
-        <Icon
-          tabIndex={0}
-          name="calendar"
-          size={vars.sizing['5']}
-          color={vars.color.text.default.secondary}
-          onClick={handleIconClick}
-          dataTestId="calendar_button"
-          onKeyDown={(e) => {
-            if (e.code === 'Enter') {
-              handleIconClick();
-            }
-          }}
-        />
-      ),
-      [handleIconClick]
-    );
-
-    const getLabel = useMemo(() => {
-      if (inputProps?.label?.length) {
-        return inputProps.label;
-      }
-
-      return isRangePicker ? DATE_RANGE_PICKER_LABEL : DATE_PICKER_LABEL;
-    }, [inputProps?.label, isRangePicker]);
-
-    if (filterType) {
-      const filterLabel = `${label ?? labels.selectDate}`;
-
-      const filterValue = `${selectedDay.from ? `: ${formattedFrom}` : ''} ${
-        isRangePicker && selectedDay.to ? `- ${formattedTo}` : ''
-      }`;
-
-      return (
-        <div>
-          <FilterButton
-            isPopulated={Boolean(selectedDay.from && `${formattedFrom} - ${formattedTo}`)}
-            isActive={isOpen}
-            onClear={handleClear}
-            filterType={filterType}
-            onClick={handleIconClick}
-          >
-            {`${filterLabel}${filterValue}`}
-          </FilterButton>
-        </div>
-      );
-    }
-
-    if (isRangePicker) {
-      return (
-        <TextField
-          ref={ref}
-          {...inputProps}
-          label={getLabel}
-          onKeyDown={handleClear}
-          dataTestId={dataTestId}
-          onChange={ON_CHANGE_MOCK}
-          value={selectedDay.from ? `${formattedFrom} - ${formattedTo}` : ''}
-          suffix={renderIconButton}
-          sx={sx}
-        />
-      );
-    }
-
-    return (
-      <div>
-        <TextField
-          ref={ref}
-          {...inputProps}
-          label={getLabel}
-          onKeyDown={handleClear}
-          dataTestId={dataTestId}
-          onChange={ON_CHANGE_MOCK}
-          value={selectedDay.to ? formattedFrom : ''}
-          suffix={renderIconButton}
-          sx={sx}
-        />
-      </div>
-    );
-  }
-);
-
-DatePickInput.displayName = 'DatePickInput';
-
-export default DatePickInput;

package/src/components/DatePicker/DatePickInput/index.ts

@@ -1,2 +0,0 @@
-export { default } from './DatePickInput';
-export * from './DatePickInput';

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

@@ -1,15 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-
-import { vars } from '@orfium/tokens';
-
-export const datePickerStyles = (): SerializedStyles => {
-  return css`
-    max-height: inherit;
-    overflow: auto;
-    background-color: ${vars.color.palette.tertiary.base};
-    box-shadow: ${vars['box-shadow']['3']};
-    border-radius: ${vars['border-radius']['2']};
-    border-color: ${vars.color['border-color'].decorative.default};
-  `;
-};

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

@@ -1,346 +0,0 @@
-import { waitFor } from '@testing-library/react';
-import dayjs from 'dayjs';
-import { vi } from 'vitest';
-import { KEYBOARD_EVENT_KEYS } from '../../hooks/useKeyboardEvents';
-import { fireEvent, render } from '../../test';
-import DatePicker from './DatePicker';
-import { currentDay } from './utils';
-
-export const clickOnElement = (element: HTMLElement, key: string, charCode: number) =>
-  fireEvent.keyDown(element, {
-    key: key,
-    code: key,
-    charCode: charCode,
-  });
-
-export const navigateOnElement = (
-  element: HTMLElement,
-  path: (keyof typeof KEYBOARD_EVENT_KEYS)[]
-) => {
-  path.forEach((key) => {
-    switch (key) {
-      case KEYBOARD_EVENT_KEYS.ArrowLeft:
-        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowLeft, 37);
-      case KEYBOARD_EVENT_KEYS.ArrowUp:
-        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowUp, 38);
-      case KEYBOARD_EVENT_KEYS.ArrowRight:
-        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowRight, 39);
-      case KEYBOARD_EVENT_KEYS.ArrowDown:
-        return clickOnElement(element, KEYBOARD_EVENT_KEYS.ArrowDown, 40);
-      default:
-        return null;
-    }
-  });
-};
-
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
-
-const format = 'YYYY-MM-DD';
-
-describe('DatePicker', () => {
-  it('should render without errors', () => {
-    render(
-      <DatePicker
-        value={{
-          from: currentDay.toDate(),
-          to: currentDay.toDate(),
-        }}
-      />
-    );
-    // Add assertions here to check if the component rendered correctly
-  });
-
-  it('should handle selecting a day in day picker mode', () => {
-    const onChange = vi.fn();
-    const { getByText, getByTestId } = render(
-      <DatePicker
-        dataTestId="input"
-        value={{
-          from: currentDay.toDate(),
-          to: currentDay.toDate(),
-        }}
-        onChange={onChange}
-      />
-    );
-    const calendarButton = getByTestId('calendar_button');
-    // trigger overlay
-    fireEvent.click(calendarButton);
-    const dayButton = getByText(currentDay.add(5, 'day').format('D'));
-    const applyButton = getByTestId('button-apply');
-    // select day
-    fireEvent.click(dayButton);
-    // apply
-    fireEvent.click(applyButton);
-
-    // check if the selected day is passed to the onChange callback
-    expect(onChange).toBeCalledTimes(1);
-    const onChangeResult: { from: Date; to: Date } = onChange.mock.calls[0][0];
-    expect({
-      from: dayjs(onChangeResult.from).format(format),
-      to: dayjs(onChangeResult.to).format(format),
-    }).toEqual({
-      from: currentDay.add(5, 'day').format(format),
-      to: currentDay.add(5, 'day').format(format),
-    });
-  });
-
-  it('should handle selecting a range in range picker mode', () => {
-    const onChange = vi.fn();
-    const { getByTestId, getAllByText } = render(
-      <DatePicker
-        dataTestId="input"
-        isRangePicker
-        value={{
-          from: currentDay.toDate(),
-          to: currentDay.add(1).toDate(),
-        }}
-        onChange={onChange}
-      />
-    );
-    const calendarButton = getByTestId('calendar_button');
-    // trigger overlay
-    fireEvent.click(calendarButton);
-    const day1Button = getAllByText(currentDay.add(3, 'day').format('D'))[0];
-    const day2Button = getAllByText(currentDay.add(5, 'day').format('D'))[0];
-    const applyButton = getByTestId('button-apply');
-    // select days
-    fireEvent.click(day1Button);
-    fireEvent.click(day2Button);
-    // apply
-    fireEvent.click(applyButton);
-
-    // check if the selected day is passed to the onChange callback
-    expect(onChange).toBeCalledTimes(1);
-    const onChangeResult: { from: Date; to: Date } = onChange.mock.calls[0][0];
-
-    expect({
-      from: dayjs(onChangeResult.from).format(format),
-      to: dayjs(onChangeResult.to).format(format),
-    }).toEqual({
-      from: currentDay.add(3, 'day').format(format),
-      to: currentDay.add(5, 'day').format(format),
-    });
-  });
-
-  it('should handle selecting a range in reverse order', () => {
-    const onChange = vi.fn();
-    const { getByTestId, getAllByText } = render(
-      <DatePicker
-        dataTestId="input"
-        isRangePicker
-        value={{
-          from: currentDay.toDate(),
-          to: currentDay.add(1).toDate(),
-        }}
-        onChange={onChange}
-      />
-    );
-    const calendarButton = getByTestId('calendar_button');
-    // trigger overlay
-    fireEvent.click(calendarButton);
-
-    // Select later date first
-    const laterDay = getAllByText(currentDay.add(5, 'day').format('D'))[0];
-    const earlierDay = getAllByText(currentDay.add(3, 'day').format('D'))[0];
-    const applyButton = getByTestId('button-apply');
-
-    // select days in reverse order
-    fireEvent.click(laterDay);
-    fireEvent.click(earlierDay);
-    // apply
-    fireEvent.click(applyButton);
-
-    // check if the selected days are correctly ordered in the onChange callback
-    expect(onChange).toBeCalledTimes(1);
-    const onChangeResult: { from: Date; to: Date } = onChange.mock.calls[0][0];
-
-    expect({
-      from: dayjs(onChangeResult.from).format(format),
-      to: dayjs(onChangeResult.to).format(format),
-    }).toEqual({
-      from: currentDay.add(3, 'day').format(format),
-      to: currentDay.add(5, 'day').format(format),
-    });
-  });
-
-  it('should change months when arrow buttons are clicked', () => {
-    const { getByTestId } = render(
-      <DatePicker
-        dataTestId="input"
-        isClearable
-        value={{
-          from: currentDay.toDate(),
-          to: currentDay.add(1, 'day').toDate(),
-        }}
-      />
-    );
-
-    const calendarButton = getByTestId('calendar_button');
-    fireEvent.click(calendarButton);
-
-    const backButton = getByTestId('icon-button-month_back');
-    const forwardButton = getByTestId('icon-button-month_forward');
-    const monthButton = getByTestId('button-month');
-
-    fireEvent.click(backButton);
-
-    expect(monthButton).toContainHTML(currentDay.month(currentDay.month() - 1).format('MMMM YYYY'));
-
-    fireEvent.click(forwardButton);
-
-    expect(monthButton).toContainHTML(currentDay.format('MMMM YYYY'));
-  });
-
-  it('should render the calendars correctly when initial values are given', () => {
-    const { getByTestId } = render(
-      <DatePicker
-        dataTestId="input"
-        isClearable
-        isRangePicker
-        value={{
-          from: currentDay.month(currentDay.month() - 1).toDate(),
-          to: currentDay.add(1, 'day').toDate(),
-        }}
-      />
-    );
-
-    const calendarButton = getByTestId('calendar_button');
-    fireEvent.click(calendarButton);
-
-    const selectedFrom = getByTestId(
-      currentDay.month(currentDay.month() - 1).format('D_M_YYYY') + '_selected'
-    );
-    const selectedTo = getByTestId(currentDay.add(1, 'day').format('D_M_YYYY') + '_selected');
-
-    expect(selectedFrom).toBeInTheDocument();
-    expect(selectedTo).toBeInTheDocument();
-  });
-
-  it('should handle escape', async () => {
-    const onChange = vi.fn();
-    const { getByTestId, getByPlaceholderText } = render(
-      <DatePicker
-        dataTestId="input"
-        isClearable
-        value={{
-          from: currentDay.toDate(),
-          to: currentDay.add(1, 'day').toDate(),
-        }}
-        onChange={onChange}
-      />
-    );
-    const calendarButton = getByTestId('calendar_button');
-    const input = getByPlaceholderText('Select Date') as HTMLInputElement;
-    // trigger overlay
-    fireEvent.click(calendarButton);
-
-    const applyButton = getByTestId('button-apply');
-    expect(applyButton).toBeInTheDocument();
-
-    fireEvent.keyDown(input, { key: 'Escape', keyCode: 27 });
-
-    await waitFor(() => expect(applyButton).not.toBeInTheDocument());
-  });
-
-  it('should navigate through the month days when arrows are clicked', async () => {
-    const { getByTestId, findByTestId } = render(
-      <DatePicker
-        value={{
-          from: currentDay.toDate(),
-          to: currentDay.toDate(),
-        }}
-      />
-    );
-
-    const calendarButton = getByTestId('calendar_button');
-    fireEvent.click(calendarButton);
-
-    const calendarTable = getByTestId('calendar_table');
-
-    const selectedDay = getByTestId('3_11_2020_selected');
-    expect(selectedDay).toHaveFocus();
-
-    navigateOnElement(calendarTable, [
-      'ArrowUp',
-      'ArrowLeft',
-      'ArrowLeft',
-      'ArrowLeft',
-      'ArrowLeft',
-      'ArrowDown',
-      'ArrowDown',
-      'ArrowDown',
-      'ArrowDown',
-      'ArrowDown',
-      'ArrowRight',
-      'ArrowRight',
-      'ArrowRight',
-      'ArrowUp',
-    ]);
-
-    const selectedDayElements = calendarTable.querySelectorAll(`div[tabindex = "0"]`);
-    /** Make sure that only one day is focused */
-    expect(selectedDayElements.length).toBe(1);
-
-    fireEvent.keyDown(selectedDayElements[0], { key: 'Enter', code: 'Enter', charCode: 13 });
-
-    /** Clicked keys path should lead to the following day being selected*/
-    const newSelectedDay = await findByTestId('23_11_2020_selected');
-    expect(newSelectedDay).toBeInTheDocument();
-  });
-
-  it('should handle clearing the selected date', async () => {
-    const onChange = vi.fn();
-    const { getByPlaceholderText } = render(
-      <DatePicker
-        dataTestId="input"
-        isClearable
-        value={{
-          from: currentDay.toDate(),
-          to: currentDay.add(1, 'day').toDate(),
-        }}
-        onChange={onChange}
-      />
-    );
-    const input = getByPlaceholderText('Select Date') as HTMLInputElement;
-    fireEvent.keyDown(input, { key: 'Backspace', keyCode: 8 });
-
-    expect(onChange).toBeCalledTimes(1);
-    expect(onChange).toBeCalledWith({
-      from: undefined,
-      to: undefined,
-    });
-  });
-
-  it('should handle clearing the selected date in range pickger', async () => {
-    const onChange = vi.fn();
-    const { getByPlaceholderText } = render(
-      <DatePicker
-        dataTestId="input"
-        isClearable
-        isRangePicker
-        value={{
-          from: currentDay.toDate(),
-          to: currentDay.add(1, 'day').toDate(),
-        }}
-        onChange={onChange}
-      />
-    );
-    const input = getByPlaceholderText('Enter Date Range') as HTMLInputElement;
-    fireEvent.keyDown(input, { key: 'Backspace', keyCode: 8 });
-
-    expect(onChange).toBeCalledTimes(1);
-    const onChangeResult: { from: Date; to: Date } = onChange.mock.calls[0][0];
-
-    expect({
-      from: dayjs(onChangeResult.from).format(format),
-      to: onChangeResult.to,
-    }).toEqual({
-      from: currentDay.format(format),
-      to: undefined,
-    });
-  });
-});