uikit-react-public 0.11.16 → 0.11.20

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

@@ -1,4 +1,5 @@
 import { InputHTMLAttributes } from 'react';
+import { CalendarEvent, AcademicWeek } from './Datepicker.types';
 export declare const NAME = "ucl-datepicker";
 export interface DatepickerProps extends InputHTMLAttributes<HTMLInputElement> {
     date: Date | null | undefined;
@@ -6,7 +7,10 @@ export interface DatepickerProps extends InputHTMLAttributes<HTMLInputElement> {
     maxDate?: Date | null | undefined;
     onDateChange: (date: Date | null | undefined) => void;
     native?: boolean;
+    events?: CalendarEvent[];
+    showAcademicWeeks?: boolean;
+    academicWeeks?: AcademicWeek[];
     testId?: string;
 }
-declare const _default: import('react').MemoExoticComponent<({ date, minDate, maxDate, onDateChange, native, testId, className, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ date, minDate, maxDate, onDateChange, native, events, showAcademicWeeks, academicWeeks, testId, className, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/components/Datepicker/Datepicker.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import('react').MemoExoticComponent<({ date, minDate, maxDate, onDateChange, native, testId, className, ...props }: import('./Datepicker').DatepickerProps) => import("react/jsx-runtime").JSX.Element>;
+    component: import('react').MemoExoticComponent<({ date, minDate, maxDate, onDateChange, native, events, showAcademicWeeks, academicWeeks, testId, className, ...props }: import('./Datepicker').DatepickerProps) => import("react/jsx-runtime").JSX.Element>;
     parameters: {
         layout: string;
     };
@@ -26,6 +26,11 @@ declare const meta: {
                 type: "boolean";
             };
         };
+        showAcademicWeeks: {
+            control: {
+                type: "boolean";
+            };
+        };
     };
     tags: string[];
 };
@@ -33,3 +38,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const AsNative: Story;
+export declare const WithEvents: Story;
+export declare const WithAcademicWeeks: Story;

package/dist/components/Datepicker/Datepicker.types.d.ts

@@ -0,0 +1,7 @@
+export type CalendarEvent = {
+    date: string;
+};
+export type AcademicWeek = {
+    start: string;
+    number: number;
+};

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

@@ -1,2 +1,3 @@
 export { default } from './Datepicker';
 export type { DatepickerProps } from './Datepicker';
+export type { CalendarEvent, AcademicWeek } from './Datepicker.types';

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

@@ -0,0 +1,5 @@
+interface AcademicWeekProps {
+    weekNumber?: number | null;
+}
+declare const AcademicWeek: ({ weekNumber }: AcademicWeekProps) => import("react/jsx-runtime").JSX.Element;
+export default AcademicWeek;

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

@@ -0,0 +1,7 @@
+import { AcademicWeek as AcademicWeekType } from '../Datepicker.types';
+interface AcademicWeeksProps {
+    date: Date;
+    academicWeeks: AcademicWeekType[];
+}
+declare const AcademicWeeks: ({ date, academicWeeks }: AcademicWeeksProps) => import("react/jsx-runtime").JSX.Element;
+export default AcademicWeeks;

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

@@ -1,6 +1,8 @@
+import { CalendarEvent } from '../../Datepicker.types';
 interface CalendarGridProps {
     date: Date | null | undefined;
     onDatePick: (date: Date) => void;
+    events: CalendarEvent[];
 }
-declare const CalendarGrid: ({ date, onDatePick, }: CalendarGridProps) => import("react/jsx-runtime").JSX.Element;
+declare const CalendarGrid: ({ date, onDatePick, events }: CalendarGridProps) => import("react/jsx-runtime").JSX.Element;
 export default CalendarGrid;

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

@@ -1,8 +1,12 @@
+import { CalendarEvent, AcademicWeek } from '../../Datepicker.types';
 interface CalendarMenuProps {
     date: Date | null | undefined;
     setDate: (date: Date) => void;
     onDatePick: () => void;
+    events: CalendarEvent[];
+    showAcademicWeeks?: boolean;
+    academicWeeks: AcademicWeek[];
     testId?: string;
 }
-declare const CalendarMenu: ({ date, setDate, onDatePick, testId, }: CalendarMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const CalendarMenu: ({ date, setDate, onDatePick, events, showAcademicWeeks, academicWeeks, testId, }: CalendarMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default CalendarMenu;

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

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

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

@@ -1,7 +1,14 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ date, isSelected, isToday, isInCurrentMonth, isDisabled, onPick, }: import('./Day').DayProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ date, onPick, isSelected, isToday, isInCurrentMonth, isDisabled, events, }: import('./Day').DayProps) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        events: {
+            table: {
+                disable: true;
+            };
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -10,4 +17,5 @@ export declare const Selected: Story;
 export declare const Today: Story;
 export declare const Disabled: Story;
 export declare const NotInCurrentMonth: Story;
+export declare const WithEventDots: Story;
 export declare const AlertOnPick: Story;

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

@@ -0,0 +1,6 @@
+type EventDotProps = {
+    inverted: boolean;
+    inCurrentMonth: boolean;
+};
+declare const EventDot: ({ inverted, inCurrentMonth }: EventDotProps) => import("react/jsx-runtime").JSX.Element;
+export default EventDot;

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

@@ -0,0 +1,24 @@
+import { AcademicWeek } from '../../Datepicker.types';
+/**
+ * Returns the Monday for the week of the given date.
+ * For example:
+ * - If the input date is a Wednesday, it returns the Monday of that week.
+ * - If the input date is already a Monday, it returns that date.
+ * @param {Date} d - The input date.
+ * @returns {Date} The Monday of the week of the input date.
+ */
+export declare const getMonday: (d: Date) => Date;
+/**
+ * Calculates the academic week numbers for each week displayed in a calendar month.
+ * Used by `<AcademicWeeks />` component in the Datepicker.
+ * It determines the Mondays of each week shown in the calendar for the `targetDate`'s month.
+ * Then, it maps these Mondays to the corresponding academic week number from the `academicWeeks` array.
+ * If an academic week is not found for a given Monday, `undefined` is used, in place in the returned array.
+ *
+ * @param {AcademicWeek[]} academicWeeks - An array of academic week objects, each with a `start` date and `number`.
+ * @param {Date} targetDate - The date used to generate the calendar display.
+ * @returns {(number | undefined)[]} An array of academic week numbers or `undefined` for each week in the calendar display.
+ * Returns an empty array if `academicWeeks` is empty or `targetDate` is invalid, with console warnings, in the interest of safe usage.
+ */
+declare const getAcademicWeekNumbers: (academicWeeks: AcademicWeek[], targetDate: Date) => (number | undefined)[];
+export default getAcademicWeekNumbers;

package/dist/components/Datepicker/utils/getAcademicWeekNumbers/getAcademicWeekNumbers.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,2 +1,3 @@
 export { default as getDatesForCalendarGrid } from './getDatesForCalendarGrid/getDatesForCalendarGrid';
 export { default as parseDate } from './parseDateForDateField/parseDateForDateField';
+export { default as getAcademicWeekNumbers } from './getAcademicWeekNumbers/getAcademicWeekNumbers';

package/dist/components/Header/Header.d.ts

@@ -1,14 +1,15 @@
-import { default as React, HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 import { default as HeaderMenu } from './HeaderMenu';
 export declare const NAME = "ucl-uikit-header";
-export declare const HEADER_TOP_HEIGHT = 72;
-export declare const Z_INDEX = 3;
+export declare const HEADER_DESKTOP_HEIGHT_PX = 72;
+export declare const HEADER_MOBILE_HEIGHT_PX = 48;
+export declare const DEFAULT_Z_INDEX = 3;
 export interface HeaderProps extends HTMLAttributes<HTMLElement> {
     title?: string;
     fixed?: boolean;
     testId?: string;
 }
-declare const MemoAppHeader: React.MemoExoticComponent<({ title, fixed, testId, className, children, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const MemoAppHeader: import('react').MemoExoticComponent<({ title, fixed, testId, className, children, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element>;
 export interface IHeaderSubComponents {
     Menu: typeof HeaderMenu;
 }

package/dist/components/Header/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './Header';
-export { HEADER_TOP_HEIGHT } from './Header';
+export { HEADER_DESKTOP_HEIGHT_PX, HEADER_MOBILE_HEIGHT_PX, DEFAULT_Z_INDEX, } from './Header';
 export type { HeaderProps } from './Header';

package/dist/components/Select/Select.stories.d.ts

@@ -41,7 +41,7 @@ declare const meta: {
         value: undefined;
         onChange: () => void;
         options: {
-            text: string;
+            label: string;
             value: string;
         }[];
     };

package/dist/components/Select/Select.types.d.ts

@@ -7,7 +7,7 @@ export type OptionData = {
     /**
      * Display text shown to the user
      */
-    text: string;
+    label: string;
     /**
      * Data-friendly value that is returned when the option is selected
      * We assume this will be submitted to a server or used in some other way
@@ -20,12 +20,6 @@ export type OptionData = {
      */
     icon?: React.ReactNode;
 };
-/**
- * Utility type we expose to developers
- * We expect this to be used in typing event handlers
- * This only applies to the top-level <Select> component
- */
-export type SelectEvent = React.ChangeEvent<HTMLSelectElement> | React.MouseEvent | React.KeyboardEvent;
 /**
  * Top level props that <Select> accepts when implemented
  */
@@ -34,20 +28,6 @@ interface BaseSelectProps {
      * An array of option data, to be rendered either natively or custom
      */
     options: OptionData[];
-    /**
-     * The currently selected value
-     * This determines which option is shown when the select is closed
-     */
-    value: string | undefined | null;
-    /**
-     * Generic onChange that splits into native and custom versions
-     * The original event is exposed, and the value always returns the value of the selected option
-     */
-    onChange: (event: SelectEvent, value: string) => void;
-    /**
-     * Prevents use, including focus events
-     */
-    disabled?: boolean | undefined;
     /**
      * Placeholder text shown when no option is selected
      * Displayed in visible field of custom implementation
@@ -64,51 +44,31 @@ interface BaseSelectProps {
      * as `data-testid`
      */
     testId?: string;
-    /**
-     * Optional className for styling
-     * This is passed to the root element of the component
-     * for additional CSS styling via Emotion.
-     */
-    className?: string;
     /**
      * Native flag determines which implementation to use
      */
     native?: boolean;
 }
-export type SelectProps = BaseSelectProps & (({
-    native: true;
-    ref?: React.RefObject<HTMLSelectElement | null>;
-} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, keyof BaseSelectProps>) | ({
-    native?: false;
-    ref?: React.RefObject<HTMLDivElement | null>;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, keyof BaseSelectProps>));
 /**
  * Internal props for the custom implementation, with <div> as root element
  * onChange already exists on <div>. We override it.
  */
-export interface CustomSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    options: OptionData[];
-    value: string | undefined | null;
-    onChange: (event: React.MouseEvent | React.KeyboardEvent, value: string) => void;
+export type CustomSelectProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & BaseSelectProps & {
+    native?: false;
+    value?: string | number;
     disabled?: boolean;
-    placeholder?: string;
-    width?: number;
-    testId?: string;
-    className?: string;
+    onValueChange?: (value: string, ev: React.UIEvent) => void;
     ref?: React.RefObject<HTMLDivElement | null>;
-}
+};
 /**
  * Internal props for native implementation, with <select> as root element
  * Default props like value and onChange are passed to the <select> element automatically
  */
-export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-    options: OptionData[];
-    placeholder?: string;
-    width?: number;
-    testId?: string;
-    className?: string;
+export type NativeSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & BaseSelectProps & {
+    native: true;
     ref?: React.RefObject<HTMLSelectElement | null>;
-}
+};
+export type SelectProps = NativeSelectProps | CustomSelectProps;
 /**
  * Each option as displayed in the Panel of <CustomSelect>
  * Roughly equivalent to a custom version of <option>

package/dist/components/Select/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Select';
-export type { SelectProps, OptionData, SelectEvent } from './Select.types';
+export type { SelectProps, OptionData } from './Select.types';

package/dist/components/Select/subcomponents/CustomSelect.d.ts

@@ -1,3 +1,4 @@
 import { CustomSelectProps } from '../Select.types';
-declare const CustomSelect: ({ value, options, onChange, disabled, placeholder, width, testId, className, ref, ...props }: CustomSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DEFAULT_WIDTH_PX = 200;
+declare const CustomSelect: ({ value, options, onValueChange, disabled, placeholder, width, testId, className, ref, ...props }: CustomSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default CustomSelect;