@orfium/ictinus 5.43.7 → 5.43.9

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

@@ -1,320 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Day > should render correctly 1`] = `
-.emotion-0 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-default-primary);
-  width: var(--ictinus-sizing-9);
-  font-weight: bold;
-  opacity: 1;
-}
-
-.emotion-0:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-1 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-interactive-active);
-  border-radius: var(--ictinus-border-radius-7);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-default-primary);
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: transparent;
-}
-
-.emotion-1:hover {
-  border-radius: var(--ictinus-border-radius-7);
-  background: var(--ictinus-color-palette-tertiary-muted);
-}
-
-<div>
-  <table>
-    <tbody>
-      <tr>
-        <td
-          style="padding: 0px;"
-        >
-          <div
-            class="emotion-0"
-            data-testid="3_11_2020"
-          >
-            <div
-              class="emotion-1"
-            >
-              3
-            </div>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`Day > should render disabled correctly 1`] = `
-.emotion-0 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-default-primary);
-  width: var(--ictinus-sizing-9);
-  font-weight: bold;
-  opacity: 0.5;
-}
-
-.emotion-0:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-1 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-interactive-active);
-  border-radius: var(--ictinus-border-radius-7);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-default-primary);
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: transparent;
-}
-
-<div>
-  <table>
-    <tbody>
-      <tr>
-        <td
-          style="padding: 0px;"
-        >
-          <div
-            class="emotion-0"
-            data-testid="3_11_2020"
-          >
-            <div
-              class="emotion-1"
-            >
-              3
-            </div>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`Day > should render isFirst, isLast correctly 1`] = `
-.emotion-0 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-default-primary);
-  width: var(--ictinus-sizing-9);
-  font-weight: bold;
-  opacity: 1;
-  background: var(--ictinus-color-palette-primary-contrast);
-}
-
-.emotion-0:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-0:after {
-  z-index: -1;
-  content: ' ';
-  height: 100%;
-  width: 50%;
-  position: absolute;
-  top: 0;
-  left: initial;
-  right: 0;
-  border-bottom-right-radius: false;
-  border-top-right-radius: false;
-  border-bottom-left-radius: false;
-  border-top-left-radius: false;
-}
-
-.emotion-1 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-interactive-active);
-  border-radius: var(--ictinus-border-radius-7);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-default-primary);
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: transparent;
-}
-
-.emotion-1:hover {
-  border-radius: var(--ictinus-border-radius-7);
-  background: var(--ictinus-color-palette-tertiary-muted);
-}
-
-<div>
-  <table>
-    <tbody>
-      <tr>
-        <td
-          style="padding: 0px;"
-        >
-          <div
-            class="emotion-0"
-            data-testid="3_11_2020"
-          >
-            <div
-              class="emotion-1"
-            >
-              3
-            </div>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`Day > should render isFirst, isLast correctly 2`] = `
-.emotion-0 {
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  color: var(--ictinus-color-text-default-primary);
-  width: var(--ictinus-sizing-9);
-  font-weight: bold;
-  opacity: 1;
-  background: var(--ictinus-color-palette-primary-contrast);
-}
-
-.emotion-0:focus-visible {
-  background-color: var(--ictinus-color-palette-tertiary-muted);
-  border-radius: var(--ictinus-border-radius-7);
-}
-
-.emotion-0:after {
-  z-index: -1;
-  content: ' ';
-  height: 100%;
-  width: 50%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: initial;
-  border-bottom-right-radius: false;
-  border-top-right-radius: false;
-  border-bottom-left-radius: false;
-  border-top-left-radius: false;
-}
-
-.emotion-1 {
-  font-family: Roboto;
-  font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  border: var(--ictinus-border-width-1) solid var(--ictinus-color-border-color-interactive-active);
-  border-radius: var(--ictinus-border-radius-7);
-  width: var(--ictinus-sizing-9);
-  height: var(--ictinus-sizing-9);
-  color: var(--ictinus-color-text-default-primary);
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  background: transparent;
-}
-
-.emotion-1:hover {
-  border-radius: var(--ictinus-border-radius-7);
-  background: var(--ictinus-color-palette-tertiary-muted);
-}
-
-<div>
-  <table>
-    <tbody>
-      <tr>
-        <td
-          style="padding: 0px;"
-        >
-          <div
-            class="emotion-0"
-            data-testid="3_11_2020"
-          >
-            <div
-              class="emotion-1"
-            >
-              3
-            </div>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;

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

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

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

@@ -1,32 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-
-import { vars } from '@orfium/tokens';
-import { DATEPICKER_TOKENS } from '../Day/Day.style';
-
-export const weekDaysWrapperStyle = (): SerializedStyles => css`
-  display: flex;
-  justify-content: space-around;
-`;
-
-export const weekDayStyle = (): SerializedStyles => {
-  return css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: ${vars.color.text.default.secondary};
-    width: ${DATEPICKER_TOKENS.dateSize};
-    height: ${DATEPICKER_TOKENS.dateSize};
-    font-size: ${vars['font-size']['3']};
-    line-height: ${vars['line-height']['4']};
-    text-align: center;
-    font-weight: ${vars.weight.medium};
-  `;
-};
-
-export const datesWrapperStyle = (): SerializedStyles => {
-  return css`
-    border-collapse: separate;
-    border-spacing: 0 ${vars.spacing['5']};
-  `;
-};

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

@@ -1,96 +0,0 @@
-import React from 'react';
-import { render } from 'test';
-
-import { currentDay } from '../utils';
-import Month from './Month';
-import {
-  calculatedDayIsBetween,
-  calculateDisabledDays,
-  calculateSelectedDay,
-  calculateSelectedDayPosition,
-} from './Month.utils';
-
-describe('Month', () => {
-  const mockDate = currentDay;
-  const day = mockDate.date();
-  const year = mockDate.year();
-  const month = mockDate.month();
-
-  it('should render correctly', () => {
-    const { container } = render(
-      <Month
-        year={year}
-        month={month}
-        selectedDays={{
-          from: mockDate.add(1, 'day'),
-          to: mockDate.add(44, 'day'),
-        }}
-      />
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should check calculateDisabledDays', () => {
-    const isDisabledAfter = calculateDisabledDays(day, month, year, {
-      after: mockDate.subtract(3, 'day').toDate(),
-    });
-    const isDisabledBefore = calculateDisabledDays(day, month, year, {
-      before: mockDate.add(3, 'day').toDate(),
-    });
-    const isDisabledBeforeAndAfter = calculateDisabledDays(day, month, year, {
-      before: mockDate.subtract(1, 'day').toDate(),
-      after: mockDate.add(1, 'day').toDate(),
-    });
-    const isDisabledArray = calculateDisabledDays(day, month, year, {
-      days: [mockDate.subtract(1, 'day').toDate()],
-    });
-
-    expect(isDisabledAfter).toBeTruthy();
-    expect(isDisabledBefore).toBeTruthy();
-    expect(isDisabledBeforeAndAfter).toBeFalsy();
-    expect(isDisabledArray).toBeFalsy();
-  });
-
-  it('should check calculatedDayIsBetween', () => {
-    const wrongDate = mockDate.subtract(3, 'day');
-    const correctDate = mockDate;
-    const isFaultyDay = calculatedDayIsBetween(
-      day,
-      month,
-      year,
-      wrongDate.startOf('day'),
-      wrongDate.endOf('day')
-    );
-    const isTruthyDay = calculatedDayIsBetween(
-      day,
-      month,
-      year,
-      correctDate.startOf('day'),
-      correctDate.endOf('day')
-    );
-
-    expect(isFaultyDay).toBeFalsy();
-    expect(isTruthyDay).toBeTruthy();
-  });
-
-  it('should check calculateSelectedDayPosition', () => {
-    const dateFrom = mockDate;
-    const dateTo = mockDate.add(3, 'day');
-    const isFirst = calculateSelectedDayPosition(day, 'first', month, year, dateFrom, dateTo);
-    const isLast = calculateSelectedDayPosition(day, 'first', month, year, dateTo, dateFrom);
-
-    expect(isFirst).toBeTruthy();
-    expect(isLast).toBeTruthy();
-  });
-
-  it('should check calculateSelectedDay', () => {
-    const dateFrom = mockDate;
-    const wrongDateFrom = mockDate.add(1, 'day');
-    const dateTo = mockDate.add(3, 'day');
-    const isSelected = calculateSelectedDay(day, month, year, dateFrom, dateTo);
-    const isSelectedWrongly = calculateSelectedDay(day, month, year, wrongDateFrom, dateTo);
-
-    expect(isSelected).toBeTruthy();
-    expect(isSelectedWrongly).toBeFalsy();
-  });
-});

package/src/components/DatePicker/Month/Month.tsx

@@ -1,154 +0,0 @@
-import isBetween from 'dayjs/plugin/isBetween';
-import { chunk, inRange } from 'lodash-es';
-import { useCallback } from 'react';
-import * as React from 'react';
-import type { Dayjs } from 'utils/date';
-import dayjs from 'utils/date';
-
-import useMonthKeyboardNavigation from './hooks/useMonthKeyboardNavigation';
-import { datesWrapperStyle, weekDayStyle, weekDaysWrapperStyle } from './Month.style';
-import {
-  calculatedDayIsBetween,
-  calculateDisabledDays,
-  calculateSelectedDay,
-  calculateSelectedDayPosition,
-  getNumWeeksForMonth,
-} from './Month.utils';
-import type { DisabledDates } from '../DatePicker.types';
-import Day from '../Day/Day';
-import type { Range } from '../OverlayComponent/OverlayComponent';
-import { currentDay } from '../utils';
-
-dayjs.extend(isBetween);
-
-const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thurdsday', 'Friday', 'Saturday', 'Sunday'];
-
-export type WeekRow = number[];
-
-export type MonthProps = {
-  year: number;
-  month: number;
-  onDaySelect?: (date: Dayjs) => void;
-  selectedDays: Range;
-  disabledDates?: DisabledDates;
-  isFirstCalendar?: boolean;
-};
-
-const Month: React.FCC<MonthProps> = ({
-  year,
-  month,
-  onDaySelect,
-  selectedDays,
-  disabledDates,
-  isFirstCalendar,
-}) => {
-  const weeksWithDays = React.useMemo<WeekRow[]>(() => {
-    const monthDate = currentDay.month(month).year(year).date(1);
-    const daysOfMonth = monthDate.daysInMonth();
-    /**
-     * Dayjs uses 0-6 (Sun-Sat) indexing for days of the week, while the reduce callback on line 48 uses
-     * 1-7 (Mon-Sun) indexing for calculating the days array for the calendar grid. To resolve this conflict,
-     * we replace the 0 used for Sunday with 7, so that Dayjs can match our internal indexing.
-     */
-    const startDay = monthDate.day() || 7;
-    const daysPerWeekCount = 7;
-    const weeksCount = getNumWeeksForMonth(year, month);
-    const daysForThisMonthsWeeks = Array(weeksCount * daysPerWeekCount).fill(null);
-    const days = daysForThisMonthsWeeks.reduce((acc, __day, index) => {
-      const dayIndex = index + 1; // to start for monday
-      const actualDay = inRange(dayIndex, startDay, daysOfMonth + startDay)
-        ? dayIndex - startDay + 1
-        : undefined;
-
-      return [...acc, actualDay];
-    }, []);
-
-    return chunk(days, daysPerWeekCount);
-  }, [year, month]);
-
-  const calculateSelected = useCallback(calculateSelectedDay, []);
-  const disabledDatesCalculated = useCallback(calculateDisabledDays, []);
-  const calculateIsBetween = useCallback(calculatedDayIsBetween, []);
-  const calculateSelectedDayFirstOrLast = useCallback(calculateSelectedDayPosition, []);
-
-  const { focusedDay, setFocusedDay, calendarRef, keyboardProps } = useMonthKeyboardNavigation({
-    selectedDays,
-    isFirstCalendar,
-    month,
-    year,
-  });
-
-  return (
-    <React.Fragment>
-      <div css={weekDaysWrapperStyle()}>
-        {DAYS.map((day) => (
-          <div key={day} css={weekDayStyle()}>
-            {day.substr(0, 2)}
-          </div>
-        ))}
-      </div>
-      <table
-        css={datesWrapperStyle()}
-        ref={calendarRef}
-        tabIndex={0}
-        data-testid="calendar_table"
-        {...keyboardProps}
-        onFocus={() => {
-          if (focusedDay === 0) {
-            setFocusedDay(1);
-          }
-        }}
-      >
-        <tbody>
-          {weeksWithDays.map((week, weekIndex) => (
-            <tr
-              // eslint-disable-next-line react/no-array-index-key
-              key={`${year}-${month}-${weekIndex}-week`}
-            >
-              {week.map((day, dayIndex) => (
-                <Day
-                  // eslint-disable-next-line react/no-array-index-key
-                  key={`${year}-${month}-${weekIndex}-${dayIndex}-day`}
-                  tabIndex={focusedDay === day ? 0 : -1}
-                  year={year}
-                  month={month}
-                  day={day}
-                  onSelect={onDaySelect}
-                  isDisabled={Boolean(disabledDatesCalculated(day, month, year, disabledDates))}
-                  isSelected={Boolean(
-                    calculateSelected(day, month, year, selectedDays.from, selectedDays.to)
-                  )}
-                  isBetween={Boolean(
-                    calculateIsBetween(day, month, year, selectedDays.from, selectedDays.to)
-                  )}
-                  isLast={Boolean(
-                    calculateSelectedDayFirstOrLast(
-                      day,
-                      'last',
-                      month,
-                      year,
-                      selectedDays.from,
-                      selectedDays.to
-                    )
-                  )}
-                  isFirst={Boolean(
-                    calculateSelectedDayFirstOrLast(
-                      day,
-                      'first',
-                      month,
-                      year,
-                      selectedDays.from,
-                      selectedDays.to
-                    )
-                  )}
-                />
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </React.Fragment>
-  );
-};
-
-export default React.memo(Month);

package/src/components/DatePicker/Month/Month.utils.ts

@@ -1,107 +0,0 @@
-import type { Dayjs } from 'utils/date';
-import dayjs from 'utils/date';
-
-import type { DisabledDates } from '../DatePicker.types';
-import { currentDay } from '../utils';
-
-export const calculateDisabledDays = (
-  day: number | undefined,
-  month: number,
-  year: number,
-  disabledDates?: DisabledDates
-) => {
-  if (!day) return false;
-
-  const date = currentDay.month(month).year(year).date(day);
-
-  if (disabledDates?.after && disabledDates?.before) {
-    return !date.isBetween(dayjs(disabledDates?.after), dayjs(disabledDates?.before));
-  }
-  if (disabledDates?.after) {
-    return date.isAfter(dayjs(disabledDates?.after));
-  }
-  if (disabledDates?.before) {
-    return date.isBefore(dayjs(disabledDates?.before));
-  }
-  if (disabledDates?.daysOfWeek) {
-    return disabledDates?.daysOfWeek.includes(date.day());
-  }
-  if (disabledDates?.days) {
-    return Boolean(disabledDates?.days.find((cur) => dayjs(cur).isSame(dayjs(date), 'day')));
-  }
-
-  return false;
-};
-
-export const calculatedDayIsBetween = (
-  day: number | undefined,
-  month: number,
-  year: number,
-  from: Dayjs | undefined,
-  to: Dayjs | undefined
-) => {
-  if (!day) return false;
-
-  const date = currentDay.month(month).year(year).date(day);
-
-  return from && to && dayjs(date).isBetween(from, to);
-};
-
-export const calculateSelectedDayPosition = (
-  day: number | undefined,
-  position: 'last' | 'first' = 'first',
-  month: number,
-  year: number,
-  from: Dayjs | undefined,
-  to: Dayjs | undefined
-) => {
-  if (day && from && to) {
-    const startDate = from.isAfter(to) ? to : from;
-    const endDate = from.isAfter(to) ? from : to;
-    const pickedDate = position === 'last' ? endDate : startDate;
-
-    return pickedDate && pickedDate.isSame(currentDay.month(month).year(year).date(day), 'day');
-  }
-
-  return day && from?.isSame(currentDay.month(month).year(year).date(day), 'day');
-};
-
-export const calculateSelectedDay = (
-  day: number,
-  month: number,
-  year: number,
-  from: Dayjs | undefined,
-  to: Dayjs | undefined
-) => {
-  if (!day) return false;
-
-  const date = currentDay.month(month).year(year).date(day);
-
-  return [from?.format('D,M,YYYY'), to?.format('D,M,YYYY')].includes(date.format('D,M,YYYY'));
-};
-
-export const getNumWeeksForMonth = (year: number, month: number): number => {
-  // Create a date object for the first day of the month
-  const firstDayOfMonth = new Date(year, month, 1);
-
-  // Get the day of the week for the first day (0 = Monday, 1 = Tuesday, ..., 6 = Sunday)
-  const firstDayOfWeek = (firstDayOfMonth.getDay() + 6) % 7; // Adjusting the index to start from Monday
-
-  // Calculate the number of days in the month
-  const lastDayOfMonth = new Date(year, month + 1, 0);
-  const totalDaysInMonth = lastDayOfMonth.getDate();
-
-  // Calculate the number of days needed to complete the first week
-  const daysToCompleteFirstWeek = 7 - firstDayOfWeek;
-
-  // Calculate the number of remaining days after completing the first week
-  const remainingDays = totalDaysInMonth - daysToCompleteFirstWeek;
-
-  // Calculate the number of additional weeks needed for the remaining days
-  const additionalWeeks = Math.ceil(remainingDays / 7);
-
-  // Total weeks needed, including the first partial week
-  const totalWeeks = 1 + additionalWeeks;
-
-  return totalWeeks;
-};