uikit-react-public 0.38.1 → 0.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/components/Calendar/Calendar.d.ts +1 -1
  2. package/dist/components/Calendar/Calendar.stories.d.ts +1 -1
  3. package/dist/components/Calendar/Calendar.types.d.ts +2 -0
  4. package/dist/components/Calendar/subcomponents/Controls.d.ts +5 -1
  5. package/dist/components/Calendar/subcomponents/ControlsSelect.d.ts +9 -0
  6. package/dist/components/Calendar/utils/index.d.ts +2 -0
  7. package/dist/components/Calendar/utils/months/months.d.ts +6 -0
  8. package/dist/components/Calendar/utils/months/months.test.d.ts +1 -0
  9. package/dist/components/Datepicker/Datepicker.d.ts +1 -1
  10. package/dist/components/Datepicker/Datepicker.stories.d.ts +1 -1
  11. package/dist/components/Datepicker/Datepicker.types.d.ts +2 -0
  12. package/dist/components/Datepicker/subcomponents/CustomDatepicker.d.ts +3 -1
  13. package/dist/components/Select/Select.types.d.ts +12 -0
  14. package/dist/components/Select/subcomponents/CustomSelect.d.ts +1 -1
  15. package/dist/components/Select/subcomponents/VisibleField.d.ts +3 -1
  16. package/dist/components/WeekPicker/WeekPicker.d.ts +1 -1
  17. package/dist/components/WeekPicker/WeekPicker.stories.d.ts +1 -1
  18. package/dist/components/WeekPicker/WeekPicker.types.d.ts +2 -0
  19. package/dist/components/WeekPicker/subcomponents/CustomDatepicker.d.ts +3 -1
  20. package/dist/index.js +5169 -4983
  21. package/lib/components/Calendar/Calendar.tsx +57 -9
  22. package/lib/components/Calendar/Calendar.types.ts +2 -0
  23. package/lib/components/Calendar/__tests__/Calendar.test.tsx +111 -23
  24. package/lib/components/Calendar/__tests__/__snapshots__/Calendar.test.tsx.snap +286 -90
  25. package/lib/components/Calendar/subcomponents/Controls.tsx +80 -34
  26. package/lib/components/Calendar/subcomponents/ControlsSelect.tsx +83 -0
  27. package/lib/components/Calendar/utils/index.ts +2 -0
  28. package/lib/components/Calendar/utils/months/months.test.ts +21 -0
  29. package/lib/components/Calendar/utils/months/months.ts +27 -0
  30. package/lib/components/Datepicker/Datepicker.tsx +4 -0
  31. package/lib/components/Datepicker/Datepicker.types.ts +3 -2
  32. package/lib/components/Datepicker/subcomponents/CustomDatepicker.tsx +6 -0
  33. package/lib/components/FeedbackDialog/FeedbackDialog.tsx +3 -4
  34. package/lib/components/Select/Select.tsx +21 -0
  35. package/lib/components/Select/Select.types.ts +12 -0
  36. package/lib/components/Select/subcomponents/CustomSelect.tsx +61 -24
  37. package/lib/components/Select/subcomponents/VisibleField.tsx +7 -2
  38. package/lib/components/WeekPicker/WeekPicker.tsx +4 -0
  39. package/lib/components/WeekPicker/WeekPicker.types.ts +2 -0
  40. package/lib/components/WeekPicker/subcomponents/CustomDatepicker.tsx +6 -0
  41. package/package.json +1 -1
@@ -1,3 +1,3 @@
1
1
  import { CalendarProps } from './Calendar.types';
2
- declare const Calendar: ({ pickedDate, onDatePick, minDate, maxDate, events, showAcademicWeeks, academicWeeks, testId, className, }: CalendarProps) => import("react").JSX.Element;
2
+ declare const Calendar: ({ pickedDate, onDatePick, minDate, maxDate, minYear, maxYear, events, showAcademicWeeks, academicWeeks, testId, className, }: CalendarProps) => import("react").JSX.Element;
3
3
  export default Calendar;
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/react-vite';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ pickedDate, onDatePick, minDate, maxDate, events, showAcademicWeeks, academicWeeks, testId, className, }: import('./Calendar.types').CalendarProps) => import("react").JSX.Element;
4
+ component: ({ pickedDate, onDatePick, minDate, maxDate, minYear, maxYear, events, showAcademicWeeks, academicWeeks, testId, className, }: import('./Calendar.types').CalendarProps) => import("react").JSX.Element;
5
5
  parameters: {
6
6
  layout: string;
7
7
  };
@@ -10,6 +10,8 @@ export interface CalendarProps {
10
10
  onDatePick?: (date: Date | null, event?: React.SyntheticEvent) => void;
11
11
  minDate?: string | null;
12
12
  maxDate?: string | null;
13
+ minYear?: number;
14
+ maxYear?: number;
13
15
  events?: CalendarEvent[];
14
16
  showAcademicWeeks?: boolean;
15
17
  academicWeeks?: AcademicWeek[];
@@ -1,6 +1,10 @@
1
1
  interface ControlsProps {
2
2
  month: Date;
3
3
  changeMonth: (change: number) => void;
4
+ onMonthSelect: (monthIndex: number) => void;
5
+ onYearSelect: (year: number) => void;
6
+ minYear: number;
7
+ maxYear: number;
4
8
  }
5
- declare const Controls: ({ month, changeMonth }: ControlsProps) => import("react").JSX.Element;
9
+ declare const Controls: ({ month, changeMonth, onMonthSelect, onYearSelect, minYear, maxYear, }: ControlsProps) => import("react").JSX.Element;
6
10
  export default Controls;
@@ -0,0 +1,9 @@
1
+ import { OptionData } from '../../Select';
2
+ interface ControlsSelectProps<T extends string | number> {
3
+ label: string;
4
+ value: T;
5
+ options: OptionData<T>[];
6
+ onValueChange: (value: T, event: React.SyntheticEvent) => void;
7
+ }
8
+ declare const ControlsSelect: <T extends string | number>({ label, value, options, onValueChange, }: ControlsSelectProps<T>) => import("react").JSX.Element;
9
+ export default ControlsSelect;
@@ -2,3 +2,5 @@ export { default as normaliseMonth } from './normaliseMonth/normaliseMonth';
2
2
  export { default as parseDateFromString } from './parseDateFromString/parseDateFromString';
3
3
  export { default as getAcademicWeekNumbers } from './getAcademicWeekNumbers/getAcademicWeekNumbers';
4
4
  export { default as getDatesForCalendarGrid } from './getDatesForCalendarGrid/getDatesForCalendarGrid';
5
+ export { default as months } from './months/months';
6
+ export type { CalendarMonth } from './months/months';
@@ -0,0 +1,6 @@
1
+ export type CalendarMonth = {
2
+ name: string;
3
+ index: number;
4
+ };
5
+ declare const months: () => CalendarMonth[];
6
+ export default months;
@@ -1,3 +1,3 @@
1
1
  import { DatepickerProps } from './Datepicker.types';
2
- declare const Datepicker: ({ value, onValueChange, minDate, maxDate, disabled, className, clearable, ...props }: DatepickerProps) => import("react").JSX.Element;
2
+ declare const Datepicker: ({ value, onValueChange, minDate, maxDate, minYear, maxYear, disabled, className, clearable, ...props }: DatepickerProps) => import("react").JSX.Element;
3
3
  export default Datepicker;
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/react-vite';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ value, onValueChange, minDate, maxDate, disabled, className, clearable, ...props }: import('./Datepicker.types').DatepickerProps) => import("react").JSX.Element;
4
+ component: ({ value, onValueChange, minDate, maxDate, minYear, maxYear, disabled, className, clearable, ...props }: import('./Datepicker.types').DatepickerProps) => import("react").JSX.Element;
5
5
  parameters: {
6
6
  layout: string;
7
7
  };
@@ -7,6 +7,8 @@ interface BaseDatepickerProps {
7
7
  onValueChange?: (value: DatepickerValue, event?: React.SyntheticEvent) => void;
8
8
  minDate?: string | null;
9
9
  maxDate?: string | null;
10
+ minYear?: number;
11
+ maxYear?: number;
10
12
  events?: CalendarEvent[];
11
13
  showAcademicWeeks?: boolean;
12
14
  academicWeeks?: AcademicWeek[];
@@ -6,6 +6,8 @@ interface CustomDatepickerProps extends React.HTMLAttributes<HTMLDivElement> {
6
6
  onValueChange?: (value: DatepickerValue, event?: React.SyntheticEvent) => void;
7
7
  minDate?: string | null;
8
8
  maxDate?: string | null;
9
+ minYear?: number;
10
+ maxYear?: number;
9
11
  disabled?: boolean;
10
12
  clearable?: boolean;
11
13
  events?: CalendarEvent[];
@@ -16,5 +18,5 @@ interface CustomDatepickerProps extends React.HTMLAttributes<HTMLDivElement> {
16
18
  inputRef?: React.RefObject<HTMLInputElement>;
17
19
  inputProps?: InputProps;
18
20
  }
19
- declare const CustomDatepicker: ({ value, onValueChange, minDate, maxDate, disabled, clearable, events, showAcademicWeeks, academicWeeks, testId, className, ref, inputRef, inputProps, ...props }: CustomDatepickerProps) => import("react").JSX.Element;
21
+ declare const CustomDatepicker: ({ value, onValueChange, minDate, maxDate, minYear, maxYear, disabled, clearable, events, showAcademicWeeks, academicWeeks, testId, className, ref, inputRef, inputProps, ...props }: CustomDatepickerProps) => import("react").JSX.Element;
20
22
  export default CustomDatepicker;
@@ -92,6 +92,18 @@ type SelectBaseProps<T = string | number> = Omit<React.HTMLAttributes<HTMLElemen
92
92
  * Custom className for the options panel
93
93
  */
94
94
  panelClassName?: string;
95
+ /**
96
+ * Custom className for the custom select visible field
97
+ */
98
+ visibleFieldClassName?: string;
99
+ /**
100
+ * Custom className for each custom select option
101
+ */
102
+ optionClassName?: string;
103
+ /**
104
+ * Custom className for the custom select chevron icon
105
+ */
106
+ chevronIconClassName?: string;
95
107
  /**
96
108
  * Ref forwarded to the rendered element
97
109
  * (div for custom, select for native)
@@ -1,4 +1,4 @@
1
1
  import { InternalSelectProps } from '../Select.types';
2
2
  type CustomSelectProps<T> = Omit<InternalSelectProps<T>, 'native' | 'nativeHtmlAttributes'>;
3
- declare const CustomSelect: <T extends string | number>({ selectionBehaviour, value, options, onValueChange, disabled, clearable, placeholder, lineBreak, dropdownWidth, filterInputProps, width, testId, className, panelClassName, filterable, ref, ...props }: CustomSelectProps<T>) => import("react").JSX.Element;
3
+ declare const CustomSelect: <T extends string | number>({ selectionBehaviour, value, options, onValueChange, disabled, clearable, placeholder, lineBreak, dropdownWidth, filterInputProps, width, testId, className, panelClassName, visibleFieldClassName, optionClassName, chevronIconClassName, filterable, ref, ...props }: CustomSelectProps<T>) => import("react").JSX.Element;
4
4
  export default CustomSelect;
@@ -8,7 +8,9 @@ interface VisibleFieldProps<T> {
8
8
  clearable?: boolean;
9
9
  onClear?: (event: React.MouseEvent | React.KeyboardEvent) => void;
10
10
  clearButtonRef?: React.RefObject<HTMLButtonElement | null>;
11
+ className?: string;
12
+ chevronIconClassName?: string;
11
13
  children?: React.ReactNode;
12
14
  }
13
- declare const VisibleField: <T extends string | number>({ selectedOption, isOpen, placeholder, disabled, filterable, clearable, onClear, clearButtonRef, children, }: VisibleFieldProps<T>) => import("react").JSX.Element;
15
+ declare const VisibleField: <T extends string | number>({ selectedOption, isOpen, placeholder, disabled, filterable, clearable, onClear, clearButtonRef, className, chevronIconClassName, children, }: VisibleFieldProps<T>) => import("react").JSX.Element;
14
16
  export default VisibleField;
@@ -1,3 +1,3 @@
1
1
  import { WeekPickerProps } from './WeekPicker.types';
2
- declare const WeekPicker: ({ value, onValueChange, minDate, maxDate, disabled, className, ...props }: WeekPickerProps) => import("react").JSX.Element;
2
+ declare const WeekPicker: ({ value, onValueChange, minDate, maxDate, minYear, maxYear, disabled, className, ...props }: WeekPickerProps) => import("react").JSX.Element;
3
3
  export default WeekPicker;
@@ -1,7 +1,7 @@
1
1
  import { StoryObj } from '@storybook/react-vite';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ value, onValueChange, minDate, maxDate, disabled, className, ...props }: import('./WeekPicker.types').WeekPickerProps) => import("react").JSX.Element;
4
+ component: ({ value, onValueChange, minDate, maxDate, minYear, maxYear, disabled, className, ...props }: import('./WeekPicker.types').WeekPickerProps) => import("react").JSX.Element;
5
5
  parameters: {
6
6
  layout: string;
7
7
  };
@@ -6,6 +6,8 @@ export interface WeekPickerProps extends HTMLAttributes<HTMLDivElement> {
6
6
  onValueChange?: (value: DatepickerValue, event?: React.SyntheticEvent) => void;
7
7
  minDate?: string | null;
8
8
  maxDate?: string | null;
9
+ minYear?: number;
10
+ maxYear?: number;
9
11
  disabled?: boolean;
10
12
  events?: CalendarEvent[];
11
13
  showAcademicWeeks?: boolean;
@@ -5,6 +5,8 @@ interface CustomDatepickerProps extends React.HTMLAttributes<HTMLDivElement> {
5
5
  onValueChange?: (value: DatepickerValue, event?: React.SyntheticEvent) => void;
6
6
  minDate?: string | null;
7
7
  maxDate?: string | null;
8
+ minYear?: number;
9
+ maxYear?: number;
8
10
  disabled?: boolean;
9
11
  events?: CalendarEvent[];
10
12
  showAcademicWeeks?: boolean;
@@ -13,5 +15,5 @@ interface CustomDatepickerProps extends React.HTMLAttributes<HTMLDivElement> {
13
15
  ref?: React.RefObject<HTMLDivElement>;
14
16
  inputRef?: React.RefObject<HTMLInputElement>;
15
17
  }
16
- declare const CustomDatepicker: ({ value, onValueChange, minDate, maxDate, disabled, events, showAcademicWeeks, academicWeeks, testId, className, ref, inputRef, ...props }: CustomDatepickerProps) => import("react").JSX.Element;
18
+ declare const CustomDatepicker: ({ value, onValueChange, minDate, maxDate, minYear, maxYear, disabled, events, showAcademicWeeks, academicWeeks, testId, className, ref, inputRef, ...props }: CustomDatepickerProps) => import("react").JSX.Element;
17
19
  export default CustomDatepicker;