feat(date-field, calendar): new TEDI-Ready DateField component #24

package.json

@@ -50,6 +50,7 @@
     "formik": "^2.4.5",
     "lodash-es": "^4.17.22",
     "react-animate-height": "^3.2.3",
+    "react-day-picker": "^9.13.2",
     "react-dropzone": "^14.3.5",
     "react-select": "^5.10.1",
     "react-sticky-box": "2.0.5",

skills/tedi-react/SKILL.md

@@ -154,7 +154,7 @@ const [email, setEmail] = useState('');
 <Checkbox id="agree" label="I agree" value="agree" onChange={(val, checked) => setAgreed(checked)} />
 ```
 
-Form controls: `TextField`, `Select`, `TextArea`, `NumberField`, `Checkbox`, `Radio`, `ChoiceGroup`, `Search`, `FileUpload`, `FileDropzone`.
+Form controls: `TextField`, `Select`, `TextArea`, `NumberField`, `Checkbox`, `Radio`, `ChoiceGroup`, `Search`, `DateField`, `FileUpload`, `FileDropzone`.
 
 ## Theming
 

skills/tedi-react/references/components.md

@@ -156,6 +156,43 @@ Sub-component: `List.Item`
 - `maxLength?: number = 200`
 - `expandable?: boolean = true`
 
+### Calendar
+> **For plain date inputs use `DateField`.** Calendar is the lower-level primitive — reach for it only when you need an always-visible inline calendar (scheduling grid, availability picker) or are building a custom date control on top.
+
+**Props:** `CalendarProps` extends `DayPickerProps`
+- `mode?: 'single' | 'multiple' | 'range' = 'single'`
+- `value: Date | Date[] | DateRange | undefined` (required) — shape matches the active `mode`
+- `handleSelect: OnSelectHandler<...>` (required) — fires when a day is clicked
+- `applyValue: (date: Date) => void` (required) — invoked when a month / year cell commits a selection via `selectionLevel`
+- `currentMonth: Date` (required), `setCurrentMonth: (date: Date) => void` (required) — controlled visible month
+- `view?: 'days' | 'months' | 'years' = 'days'`, `setView?: (view) => void` — controlled visible grid (independent of `selectionLevel`)
+- `selectionLevel?: 'days' | 'months' | 'years' = 'days'` — coarser commit level: `'years'` selects Jan 1 of the picked year, `'months'` selects day 1
+- `disabledMatchers?: Matcher[]` — same shape as DayPicker's `disabled`
+- `availableDays?: Date[] | ((date) => boolean)`, `unavailableDays?: Date[] | ((date) => boolean)` — overlay highlights without disabling neighbours
+- `monthYearSelectType?: 'dropdown' | 'grid' = 'dropdown'` — header picker style
+- `showOutsideDays?: boolean = true`, `showNavigation?: boolean = true`
+- `locale?: Locale = et`, `localeCode?: string = 'et-EE'`
+- `required?: boolean`, `footer?: ReactNode`, `className?: string`
+
+```tsx
+import { Calendar } from '@tedi-design-system/react/tedi';
+
+const [view, setView] = useState<'days' | 'months' | 'years'>('days');
+const [month, setMonth] = useState(new Date());
+const [date, setDate] = useState<Date | undefined>();
+
+<Calendar
+  mode="single"
+  view={view}
+  setView={setView}
+  currentMonth={month}
+  setCurrentMonth={setMonth}
+  value={date}
+  handleSelect={(value) => setDate(value as Date)}
+  applyValue={setDate}
+/>
+```
+
 ## Form
 
 ### TextField
@@ -252,6 +289,55 @@ Same as Checkbox (without indeterminate)
 - `onSearch?: (value: string) => void`
 - `button?: Partial<ButtonProps>`
 
+### DateField
+**Props:** `DateFieldProps` extends `DayPickerProps` | fRef (`TextFieldForwardRef`), bp, form
+- `id: string` (required), `label: string` (required)
+- `mode?: 'single' | 'multiple' | 'range' = 'single'` — selection model
+- `selected?: Date | Date[] | DateRange`, `defaultValue?: Date | Date[] | DateRange`
+- `onSelect?: OnSelectHandler<Date | Date[] | DateRange | undefined>`
+- `placeholder?: string`
+- `required?: boolean`, `readOnly?: boolean`
+- `formatDate?: (date) => string` — display formatter (default: `dd.MM.yyyy`, et-EE)
+- `parseDate?: (value: string) => Date | Date[] | DateRange | undefined` — manual-input parser; without it the field is calendar-only
+- `locale?: Locale = et`, `localeCode?: string = 'et-EE'`
+- `initialMonth?: Date`
+- `closeOnSelect?: boolean` — default: `true` for `'single'`, `false` otherwise
+- `footer?: ReactNode` — slot below the calendar grid
+- `monthYearSelectType?: 'dropdown' | 'grid' = 'dropdown'` — header pickers
+- `selectionLevel?: 'days' | 'months' | 'years' = 'days'` — coarser commit level
+- `showOutsideDays?: boolean = true`
+- **Disabling:** `disabled?: Matcher | Matcher[]`, `minDate?: Date`, `maxDate?: Date`, `disablePast?: boolean`, `disableFuture?: boolean`, `shouldDisableMonth?: (date) => boolean`, `shouldDisableYear?: (date) => boolean`
+- `availableDays?: Date[] | ((date) => boolean)` — opposite of `disabled`
+- `inputProps?: Omit<TextFieldProps | MultiValueFieldProps, 'label' | 'id'>` — pass-through to the underlying input
+- **Breakpoint-aware:** `enableCalendar?: boolean = true`, `calendarTrigger?: 'input' | 'button' = 'button'`, `useNativePicker?: boolean = false` (`'single'` mode only — swaps to `<input type="date">`), `numberOfMonths?: number` (clamped to 1 below `md`)
+
+The ref shape mirrors TextField (`{ input, wrapper }`). In `'multiple'` mode the underlying control is `MultiValueField`, so `ref.current.input` is `null` there. The calendar trigger button carries `aria-haspopup="dialog"` + `aria-expanded`; when `calendarTrigger="input"` those land on the `<input>` instead.
+
+```tsx
+<DateField
+  id="birthdate"
+  label="Birth date"
+  defaultValue={new Date(1990, 0, 1)}
+  onSelect={(date) => console.log(date)}
+  minDate={new Date(1900, 0, 1)}
+  disableFuture
+/>
+
+// Range with manual input parsing
+<DateField
+  id="period"
+  label="Period"
+  mode="range"
+  parseDate={(v) => /* return DateRange */}
+  selected={range}
+  onSelect={setRange}
+  closeOnSelect={false}
+/>
+
+// Native picker on mobile, custom calendar on desktop
+<DateField id="dob" label="Date of birth" useNativePicker md={{ useNativePicker: false }} />
+```
+
 ### FileUpload
 **Props:** `FileUploadProps` | form
 - `id: string` (required), `name: string` (required)

skills/tedi-react/references/forms.md

@@ -14,6 +14,7 @@ TEDI form controls support both **controlled** and **uncontrolled** modes, follo
 | Radio | `boolean` (via onChange) | Used in ChoiceGroup |
 | ChoiceGroup | `ChoiceGroupValue` | Radio/checkbox groups, segmented variant |
 | Search | `string` | Search button, onSearch callback |
+| DateField | `Date \| Date[] \| DateRange` | Single/multiple/range, manual input, min/max, native picker, breakpoint-aware |
 | FileUpload | `FileUploadFile[]` | Multi-file, validation, loading states |
 | FileDropzone | `FileUploadFile[]` | Drag-and-drop |
 
@@ -108,6 +109,74 @@ import { NumberField } from '@tedi-design-system/react/tedi';
 />
 ```
 
+## DateField
+
+Three modes (`'single'`, `'multiple'`, `'range'`) sharing one calendar popover. `selected`/`defaultValue`/`onSelect` adapt their value shape to the active mode (`Date`, `Date[]`, or `DateRange`). Manual text input is **off** by default — supply a `parseDate` to enable it.
+
+```tsx
+import { DateField } from '@tedi-design-system/react/tedi';
+
+// Single date (controlled)
+const [date, setDate] = useState<Date>();
+<DateField id="birthdate" label="Birth date" selected={date} onSelect={setDate} required />
+
+// Range with manual input parsing
+<DateField
+  id="period"
+  label="Period"
+  mode="range"
+  selected={range}
+  onSelect={setRange}
+  parseDate={(value) => parseDateRange(value)}
+  closeOnSelect={false}
+/>
+
+// Multiple dates (renders MultiValueField as the input)
+<DateField id="appointments" label="Appointments" mode="multiple" selected={dates} onSelect={setDates} />
+```
+
+**Constraining the calendar** — every option also greys out the corresponding entries in the month / year header dropdowns:
+```tsx
+<DateField
+  id="future-only"
+  label="Pick a future date"
+  disablePast
+  maxDate={new Date(2030, 11, 31)}
+  shouldDisableYear={(year) => year.getFullYear() === 2026}
+/>
+```
+
+**Native picker on small screens** — uses `<input type="date">` below `md`, custom calendar from `md` up. Only valid with `mode="single"`:
+```tsx
+<DateField id="dob" label="Date of birth" useNativePicker md={{ useNativePicker: false }} />
+```
+
+**Custom display formatting**:
+```tsx
+<DateField
+  id="iso"
+  label="ISO date"
+  formatDate={(d) => (d instanceof Date ? d.toISOString().slice(0, 10) : '')}
+/>
+```
+
+**Calendar selection granularity** — `selectionLevel="months"` or `"years"` commits at a coarser level (useful for "pick a year" UIs):
+```tsx
+<DateField id="year" label="Year" selectionLevel="years" />
+```
+
+**Forwarding to the inner input** — pass-through props (e.g. `helper`, `icon`, `isClearable`):
+```tsx
+<DateField
+  id="end"
+  label="End date"
+  inputProps={{
+    helper: { type: 'hint', text: 'Leave empty for "ongoing"' },
+    isClearable: true,
+  }}
+/>
+```
+
 ## Checkbox & Radio
 
 ```tsx
@@ -213,6 +282,7 @@ import { FileUpload, FileDropzone } from '@tedi-design-system/react/tedi';
 - **Choice inputs:** `onChange?: (value: string, checked: boolean) => void`
 - **Select:** `onChange?: (value: ISelectOption | ISelectOption[] | null) => void`
 - **NumberField:** `onChange?: (value: number) => void`
+- **DateField:** `onSelect?: OnSelectHandler<Date | Date[] | DateRange | undefined>` — value shape depends on `mode` (`'single'` → `Date`, `'multiple'` → `Date[]`, `'range'` → `DateRange`)
 
 ## Disabled State
 

src/tedi/components/cards/card/card-header/card-header.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
-import { UnknownType } from 'libs/react-components/src/tedi/types/commonTypes';
 
 import { useBreakpointProps } from '../../../../helpers';
+import { UnknownType } from '../../../../types/commonTypes';
 import styles from '../card.module.scss';
 import { CardContentProps } from '../card-content/card-content';
 import { CardContext } from '../card-context';