uikit-react-public 0.11.16 → 0.11.24

package/dist/components/Datepicker/subcomponents/CalendarMenu/index.d.ts

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

package/dist/components/Datepicker/subcomponents/ColumnHeadings/ColumnHeadings.d.ts

@@ -1,2 +0,0 @@
-declare const ColumnHeadings: () => import("react/jsx-runtime").JSX.Element;
-export default ColumnHeadings;

package/dist/components/Datepicker/subcomponents/ColumnHeadings/index.d.ts

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

package/dist/components/Datepicker/subcomponents/DateField/DateField.d.ts

@@ -1,7 +0,0 @@
-interface DateFieldProps {
-    date: Date | null | undefined;
-    onChange: (date: Date | null | undefined) => void;
-    testId?: string;
-}
-declare const DateField: ({ date, onChange, testId, }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
-export default DateField;

package/dist/components/Datepicker/subcomponents/DateField/index.d.ts

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

package/dist/components/Datepicker/subcomponents/Day/Day.d.ts

@@ -1,10 +0,0 @@
-export interface DayProps {
-    date: Date | null | undefined;
-    isSelected?: boolean;
-    isToday?: boolean;
-    isInCurrentMonth?: boolean;
-    isDisabled?: boolean;
-    onPick?: (date: Date) => void;
-}
-declare const Day: ({ date, isSelected, isToday, isInCurrentMonth, isDisabled, onPick, }: DayProps) => import("react/jsx-runtime").JSX.Element;
-export default Day;

package/dist/components/Datepicker/subcomponents/Day/index.d.ts

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

package/dist/components/Datepicker/subcomponents/MonthSelector/MonthSelector.d.ts

@@ -1,6 +0,0 @@
-interface MonthSelectorProps {
-    date: Date | null | undefined;
-    changeMonth: (change: number) => void;
-}
-declare const MonthSelector: ({ date, changeMonth, }: MonthSelectorProps) => import("react/jsx-runtime").JSX.Element;
-export default MonthSelector;

package/dist/components/Datepicker/subcomponents/MonthSelector/index.d.ts

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

package/dist/components/Datepicker/subcomponents/Native/Native.d.ts

@@ -1,9 +0,0 @@
-interface NativeProps {
-    date?: Date | null | undefined;
-    minDate?: Date | null | undefined;
-    maxDate?: Date | null | undefined;
-    onDateChange?: (date: Date | null | undefined) => void;
-    testId?: string;
-}
-declare const Native: ({ date, minDate, maxDate, onDateChange, testId, ...props }: NativeProps) => import("react/jsx-runtime").JSX.Element;
-export default Native;

package/dist/components/Datepicker/subcomponents/Native/index.d.ts

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

package/dist/components/Datepicker/utils/parseDateForDateField/parseDateForDateField.d.ts

@@ -1,20 +0,0 @@
-/**
- * Parses a date string and returns a `Date` object.
- *
- * Can handle date strings entered by the user as "day/month/year", "day month year", or "day-month-year".
- * If the date is not in the expected format or contains invalid numbers, it returns `null`.
- *
- * Used solely by `<DateField>` component.
- *
- * - A one-digit or two-digit year is assumed to be in the 21st century (e.g., '21' becomes '2021').
- *
- * @param {string} dateString - The date string to be parsed.
- *
- * @future Any additional validation logic for dates entered by the user should be added here.
- * For example, supporting formats like "day / month / year" (separated with a space and a slash)
- * or "daymonthyear" (without spaces or separators).
- *
- * @returns {void}
- */
-declare const parseDate: (dateString: string) => Date | null;
-export default parseDate;

package/lib/components/Datepicker/subcomponents/CalendarGrid/CalendarGrid.tsx

@@ -1,59 +0,0 @@
-import { css } from '@emotion/css';
-import { ColumnHeadings, Day } from '../';
-import useTheme from '../../../../theme/useTheme';
-import { getDatesForCalendarGrid } from '../../utils';
-
-interface CalendarGridProps {
-  date: Date | null | undefined;
-  onDatePick: (date: Date) => void;
-}
-
-const CalendarGrid = ({
-  date,
-  onDatePick,
-}: CalendarGridProps) => {
-  const [theme] = useTheme();
-
-  const dates = date
-    ? getDatesForCalendarGrid(date)
-    : getDatesForCalendarGrid(new Date());
-
-  const gridStyle = css`
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 0;
-    text-align: center;
-    font-family: ${theme.font.family.primary};
-    font-weight: 400;
-    user-select: none;
-  `;
-
-  return (
-    <div className={gridStyle}>
-      <ColumnHeadings />
-      {dates.map((mappedDate) => (
-        <Day
-          key={mappedDate.toISOString()}
-          date={mappedDate}
-          isSelected={
-            date?.toDateString() ===
-            mappedDate.toDateString()
-          }
-          isToday={
-            mappedDate.toDateString() ===
-            new Date().toDateString()
-          }
-          isInCurrentMonth={
-            date
-              ? mappedDate.getMonth() === date?.getMonth()
-              : mappedDate.getMonth() ===
-                new Date().getMonth()
-          }
-          onPick={onDatePick}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default CalendarGrid;

package/lib/components/Datepicker/subcomponents/CalendarGrid/index.ts

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

package/lib/components/Datepicker/subcomponents/CalendarMenu/CalendarMenu.tsx

@@ -1,64 +0,0 @@
-import { css } from '@emotion/css';
-import MonthSelector from '../MonthSelector';
-import CalendarGrid from '../CalendarGrid';
-import useTheme from '../../../../theme/useTheme';
-
-interface CalendarMenuProps {
-  date: Date | null | undefined;
-  setDate: (date: Date) => void;
-  onDatePick: () => void;
-  testId?: string;
-}
-
-const CalendarMenu = ({
-  date,
-  setDate,
-  onDatePick,
-  testId = 'ucl',
-}: CalendarMenuProps) => {
-  const [theme] = useTheme();
-
-  const onMonthChange = (change: number) => {
-    const newDate = date ? new Date(date) : new Date();
-    newDate.setMonth(newDate.getMonth() + change);
-    setDate(newDate);
-  };
-
-  const style = css`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-    width: 280px;
-    height: 320px;
-    z-index: 10;
-    position: absolute;
-    top: 60px;
-    border: 1px solid ${theme.color.neutral.grey20};
-    padding: 16px;
-    background-color: ${theme.color.neutral.white};
-  `;
-
-  const handlePick = (pickedDate: Date) => {
-    setDate(pickedDate);
-    onDatePick();
-  };
-
-  return (
-    <div
-      className={style}
-      data-testid={testId + '-calendar-menu'}
-    >
-      <MonthSelector
-        date={date}
-        changeMonth={onMonthChange}
-      />
-      <CalendarGrid
-        date={date}
-        onDatePick={handlePick}
-      />
-    </div>
-  );
-};
-
-export default CalendarMenu;

package/lib/components/Datepicker/subcomponents/CalendarMenu/index.ts

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

package/lib/components/Datepicker/subcomponents/ColumnHeadings/ColumnHeadings.tsx

@@ -1,35 +0,0 @@
-import { css } from '@emotion/css';
-import { useTheme } from '../../../../theme';
-
-const ColumnHeadings = () => {
-  const [theme] = useTheme();
-
-  const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
-
-  const headingStyle = (isWeekend: boolean) => css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 32px;
-    color: ${isWeekend
-      ? theme.color.system.orange100
-      : theme.color.neutral.grey60};
-    font-weight: 700;
-  `;
-
-  return (
-    <>
-      {days.map((day, index) => (
-        <div
-          key={index}
-          className={headingStyle(index >= 5)}
-        >
-          {day}
-        </div>
-      ))}
-    </>
-  );
-};
-
-export default ColumnHeadings;

package/lib/components/Datepicker/subcomponents/ColumnHeadings/index.ts

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

package/lib/components/Datepicker/subcomponents/DateField/DateField.tsx

@@ -1,155 +0,0 @@
-import { css } from '@emotion/css';
-import { Icon } from '../../..';
-import { useTheme } from '../../../../theme';
-import { useState, useRef, useEffect } from 'react';
-import { parseDate } from '../../utils';
-
-interface DateFieldProps {
-  date: Date | null | undefined;
-  onChange: (date: Date | null | undefined) => void;
-  testId?: string;
-}
-
-const DateField = ({
-  date,
-  onChange,
-  testId,
-}: DateFieldProps) => {
-  const [theme] = useTheme();
-
-  // Derived props (tidier than using `date?.getDate()`, etc, everywhere.)
-  const day =
-    date?.getDate().toString().padStart(2, '0') ?? '';
-  const month = date
-    ? (date.getMonth() + 1).toString().padStart(2, '0')
-    : '';
-  const year = date?.getFullYear().toString() ?? '';
-
-  const [displayDate, setDisplayDate] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    // Format: DD/MM/YYYY
-    setDisplayDate(date ? `${day}/${month}/${year}` : '');
-  }, [date, day, month, year]);
-
-  /**
-   * Handles the change event for the date input field.
-   *
-   * This function ensures that only valid characters for a date are accepted
-   * in the input field. The accepted characters include digits (0-9), slashes (/),
-   * spaces, and hyphens (-). If the input contains any other characters, the function
-   * will not update the display date.
-   *
-   * @param event - The change event triggered by the input field.
-   */
-  const handleInputChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    // Accepted characters: 0-9, /, space, hyphen
-    const regex = new RegExp('^[0123456789\\/ \\-]*$');
-    if (!regex.test(event.target.value)) return;
-
-    setDisplayDate(event.target.value);
-  };
-
-  const resetDate = () => {
-    setDisplayDate(date ? `${day}/${month}/${year}` : '');
-  };
-
-  const handleParseDate = () => {
-    const parsedDate = parseDate(displayDate);
-    if (parsedDate) onChange(parsedDate);
-    else resetDate();
-  };
-
-  const handleInputKeyDown = (
-    event: React.KeyboardEvent<HTMLDivElement>
-  ) => {
-    if (event.key === 'Enter') handleParseDate();
-    else if (event.key === 'Escape') resetDate();
-  };
-
-  const handleKeyDownEventPropagation = (
-    event: React.KeyboardEvent<HTMLDivElement>
-  ) => {
-    // Prevent event bubbling any further, so arrow keys presses don't affect `<CalendarGrid>`
-    event.stopPropagation();
-  };
-
-  const containerStyle = css`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 200px;
-    height: 48px;
-    padding: 0 16px;
-    border: 1px solid ${theme.color.neutral.grey60};
-    color: ${theme.color.neutral.black};
-    background-color: ${theme.color.neutral.white};
-    cursor: pointer;
-
-    &:focus-visible {
-      outline: none;
-      box-shadow: ${theme.boxShadow.focus};
-    }
-  `;
-
-  const inputStyle = css`
-    width: 150px;
-    font-family: ${theme.font.family.primary};
-    font-size: 16px;
-    text-align: left;
-    border: none;
-    padding: 6px;
-    letter-spacing: 1px;
-    color: ${theme.color.text.primary};
-    caret-color: ${theme.color.text.primary};
-
-    &::placeholder {
-      color: ${theme.color.neutral.grey40};
-    }
-
-    &::selection {
-      background-color: ${theme.color.neutral.grey60};
-      color: ${theme.color.neutral.white};
-    }
-
-    &:focus {
-      outline: none;
-      background-color: ${theme.color.interaction.blue10};
-    }
-  `;
-
-  return (
-    <div
-      className={containerStyle}
-      role='group'
-      aria-label='Date input'
-      onBlur={handleParseDate}
-      onClick={() => inputRef.current?.focus()}
-      data-testid={testId + '-date-field'}
-    >
-      <div onKeyDown={handleKeyDownEventPropagation}>
-        <input
-          className={inputStyle}
-          value={displayDate}
-          placeholder='DD/MM/YYYY'
-          onChange={handleInputChange}
-          onKeyDown={handleInputKeyDown}
-          type='text'
-          inputMode='numeric'
-          ref={inputRef}
-          aria-label='Date'
-          data-testid={testId + '-input'}
-        />
-      </div>
-      <Icon.Calendar
-        onClick={handleParseDate}
-        data-testid={testId + '-calendar-icon'}
-      />
-    </div>
-  );
-};
-
-export default DateField;

package/lib/components/Datepicker/subcomponents/DateField/__tests__/DateField.test.tsx

@@ -1,191 +0,0 @@
-import {
-  describe,
-  test,
-  expect,
-  vi,
-  afterEach,
-} from 'vitest';
-import {
-  render,
-  screen,
-  fireEvent,
-  cleanup,
-} from '@testing-library/react';
-import { ThemeContextProvider } from '../../../../../theme';
-import DateField from '../DateField';
-
-const customRender = (ui: React.ReactElement) => {
-  return render(ui, {
-    wrapper: ({ children }) => (
-      <ThemeContextProvider>
-        {children}
-      </ThemeContextProvider>
-    ),
-  });
-};
-
-describe('DateField', () => {
-  // Run cleanup after each test
-  afterEach(() => {
-    cleanup();
-    vi.resetAllMocks();
-  });
-
-  test('Renders without crashing', () => {
-    const testId = 'abc';
-    customRender(
-      <DateField
-        date={null}
-        onChange={vi.fn()}
-        testId={testId}
-      />
-    );
-    const dateField = screen.getByTestId(
-      testId + '-date-field'
-    );
-    expect(dateField).toBeInTheDocument();
-  });
-
-  test('Displays placeholder text when `date` prop is null', () => {
-    const testId = 'abc';
-    customRender(
-      <DateField
-        date={null}
-        onChange={vi.fn()}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-    expect(inputField.placeholder).toBe('DD/MM/YYYY');
-  });
-
-  test('Displays the correct date values when a date is present', () => {
-    const testId = 'abc';
-    const date = new Date('2025-02-01');
-    customRender(
-      <DateField
-        date={date}
-        onChange={vi.fn()}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-    expect(inputField.value).toBe('01/02/2025');
-  });
-
-  test('Updates date value (from null)', () => {
-    const testId = 'abc';
-    const date = new Date('2025-02-01');
-    const onChange = vi.fn();
-    customRender(
-      <DateField
-        date={null}
-        onChange={onChange}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-
-    fireEvent.change(inputField, {
-      target: { value: '01/02/2025' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Enter' });
-    expect(onChange).toHaveBeenCalledWith(date);
-  });
-
-  test('Updates date value (from existing date)', () => {
-    const testId = 'abc';
-    const date = new Date('2025-01-01');
-    const onChange = vi.fn();
-    customRender(
-      <DateField
-        date={date}
-        onChange={onChange}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-
-    fireEvent.change(inputField, {
-      target: { value: '01/02/2025' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Enter' });
-    expect(onChange).toHaveBeenCalledWith(
-      new Date('2025-02-01')
-    );
-  });
-
-  test('Handles alternative date formats', () => {
-    const testId = 'abc';
-    const onChange = vi.fn();
-    customRender(
-      <DateField
-        date={null}
-        onChange={onChange}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-
-    // With 1 digit for day and month, and 2 digits for year
-    fireEvent.change(inputField, {
-      target: { value: '3/2/25' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Enter' });
-    expect(onChange).toHaveBeenCalledWith(
-      new Date('2025-02-03')
-    );
-
-    // With hyphens
-    fireEvent.change(inputField, {
-      target: { value: '20-03-2026' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Enter' });
-    expect(onChange).toHaveBeenCalledWith(
-      new Date('2026-03-20')
-    );
-
-    // With spaces
-    fireEvent.change(inputField, {
-      target: { value: '10 11 27' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Enter' });
-    expect(onChange).toHaveBeenCalledWith(
-      new Date('2027-11-10')
-    );
-  });
-
-  test('Resets date value on ESCAPE key press', () => {
-    const testId = 'abc';
-    const date = new Date('2025-01-01');
-    const onChange = vi.fn();
-    customRender(
-      <DateField
-        date={date}
-        onChange={onChange}
-        testId={testId}
-      />
-    );
-    const inputField = screen.getByTestId(
-      testId + '-input'
-    ) as HTMLInputElement;
-
-    fireEvent.change(inputField, {
-      target: { value: '10/10/2026' },
-    });
-    fireEvent.keyDown(inputField, { key: 'Escape' });
-    expect(inputField.value).toBe('01/01/2025');
-  });
-
-  // Any further tests can be added here
-});

package/lib/components/Datepicker/subcomponents/DateField/index.ts

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

package/lib/components/Datepicker/subcomponents/Day/Day.tsx

@@ -1,94 +0,0 @@
-import { css } from '@emotion/css';
-import { useTheme } from '../../../../theme/';
-
-export interface DayProps {
-  date: Date | null | undefined;
-  isSelected?: boolean;
-  isToday?: boolean;
-  isInCurrentMonth?: boolean;
-  isDisabled?: boolean;
-  onPick?: (date: Date) => void;
-}
-
-const Day = ({
-  date,
-  isSelected,
-  isToday = false,
-  isInCurrentMonth = true,
-  isDisabled = false,
-  onPick,
-}: DayProps) => {
-  const [theme] = useTheme();
-
-  const onClick = () => {
-    if (date && onPick) onPick(date);
-  };
-
-  const backgroundStyle = css`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 40px;
-    height: 40px;
-    background-color: ${theme.color.neutral.white};
-    cursor: pointer;
-    outline: none;
-
-    &:hover {
-      background-color: ${theme.color.neutral.grey10};
-    }
-
-    ${isSelected &&
-    css`
-      background-color: ${theme.color.interaction.blue70};
-      color: ${theme.color.text.inverted};
-
-      &:hover {
-        background-color: ${theme.color.interaction
-          .blue100};
-      }
-    `}
-    ${isDisabled &&
-    css`
-      cursor: not-allowed;
-
-      &:hover {
-        background-color: ${theme.color.neutral.white};
-      }
-    `}
-  `;
-
-  const foregroundStyle = css`
-    font-family: ${theme.font.family.primary};
-    user-select: none;
-    font-size: 16px;
-
-    ${!isInCurrentMonth &&
-    css`
-      color: ${theme.color.neutral.grey40};
-    `}
-    ${isToday &&
-    css`
-      font-weight: 700;
-    `}
-    ${isDisabled &&
-    css`
-      color: ${theme.color.neutral.grey40};
-    `}
-  `;
-
-  return (
-    <div
-      className={backgroundStyle}
-      role='button'
-      aria-label={`Select ${date?.toDateString()}`}
-      onClick={onClick}
-    >
-      <div className={foregroundStyle}>
-        {date?.getDate()}
-      </div>
-    </div>
-  );
-};
-
-export default Day;