CatalystOne Logo

CatalystOne Design System

Home / Releases / 37.0.0

Release 37.0.0

Major

Released 2026-08-19

Major release with 2 breaking changes, 17 new features and 21 fixes.

Breaking Changes

  • calendar: Breaking changes in type names plus props used to set color for calendar and timeline events. (#827, 06cbbea)
  • The @catalystone/axios-interceptors package has been moved to the frontend-utils monorepo. CO-60084 (#770, 8ac6bea)

Features

  • rich-text-editor: add support for AI features (#821, 05cfc09)
  • person-picker: opt-in "Recently used" filter, fix ignored employeeSearchType (#819, c7067c3)
  • per-column minWidth and opt-in sticky header (#813, c0d3118)
  • symmetric page gutters for horizontally scrolling tables (#810) (#812, 38f11de)
  • symmetric page gutters for horizontally scrolling tables (#810, 7e39728)
  • dialog: add support for setting max height and width (#800, 3bbcefd)
  • add release docs to the Portal app (#796, d5882d7)
  • textfield: add support for readOnly, improved styling (#794, ceae22b)
  • add Breadcrumbs component implementation (#792, 5da7e3b)
  • add support for showing Tooltips on disabled buttons (#790, 81c0ec8)
  • add new DocumentField component (#782, 96a1f64)
  • button: add support for router integration via component prop (#777, 640ae82)
  • button: add prop to position loading indicator (#776, 580b4d0)
  • support 'Name' field in personLookup (#775, 4046d3c)
  • add option to render any IconSymbol on the Avatar, ColoredAvatar and AvatarGroup (#774, ba87245)
  • add Berries component (#772, 60f8f03)
  • layout: add props to show optional alert in the Layout TopSection (#771, a678eeb)

Bug Fixes

  • calendar: use CSS var design tokens, reduce dependence on MUI (#826, c90b525)
  • alert: fix close button styling (#825, 93235b0)
  • layout: increase the bottom margin for the breadcrumbs (#822, 1c78e50)
  • regenerate generate-release-docs workflow after frontmatter has changed (#820, 98b9b2a)
  • date-picker: make MUI date picker dependencies external (#818, 725f035)
  • CO-60524 Enable Table Horizontal Overflow Beyond Layout Width & … (#809, 80cf2be)
  • app-starter: emit declarations flat at build/index.d.ts (#807, 9c4685a)
  • not showing tooltip when title is empty (#805, 3648ffb)
  • register shared source translations (#793, 1e67d1f)
  • remove unnecessary console log form chip component (#789, d0cb0fe)
  • bump to latest minor versions across the repo (#788, 6cfdebb)
  • patch version upgrades across the repo (#787, 498b213)
  • upgrade to latest bun, fix package version bugs (#786, d8e3b75)
  • forward aria props to Dropzone button, update DocumentField translations (#784, 704b845)
  • uI issues in Textfield and Avatar Group (#783, 9b8ad6e)
  • treeview: align styling with Figma designs (#781, a89178f)
  • fix layout styling (#780, 0db4f47)
  • deletedialog: update loading spinner placement (#779, ab32dc7)
  • update DeleteDialog after design changes (#778, 4149394)
  • table: take control over the table header and header cell styling (#769, b22d916)
  • chip: switch to native CSS design tokens (#768, 172546b)

Migration guide

Calendar also dropped its direct dependencies on @fullcalendar/core, daygrid, interaction, multimonth, resource and resource-timeline v6 in favour of @fullcalendar/react and @fullcalendar/react-scheduler v7. Apps that import @fullcalendar v6 packages directly must upgrade them too. With weekNumberPosition='column', the week-number column is hidden in the most compact layout.

@catalystone/calendar: export renamed

Calendar moved to FullCalendar v7 and its re-exported FullCalendar types were renamed: DayCellContentArg -> DayCellInfo, DayHeaderContentArg -> DayHeaderInfo, EventContentArg -> EventDisplayInfo, DatesSetArg -> DatesSetInfo, EventDropArg -> EventDropInfo, EventClickArg -> EventClickInfo, DateClickArg -> DateClickInfo, ResourceLabelContentArg -> ResourceCellInfo, and the ref type FullCalendar -> CalendarRef (still exposes getApi()). CalendarApi, EventInput, FormatterInput, EventImpl, ResourceApi, ResourceInput and Duration keep their names.

Mechanical change, safe to apply automatically.

Before:

import { type EventClickArg, type FullCalendar } from '@catalystone/calendar'

const calendarRef = useRef<FullCalendar>(null)
const handleEventClick = ({ event }: EventClickArg) => openEvent(event.id)

After:

import { type EventClickInfo, type CalendarRef } from '@catalystone/calendar'

const calendarRef = useRef<CalendarRef>(null)
const handleEventClick = ({ event }: EventClickInfo) => openEvent(event.id)

@catalystone/calendar: export removed

The CoreCalendar and BaseOptionsRefined type exports were removed. EmployeeCalendarTimelineView timelineViewOptions is now typed as Partial<CalendarOptions> instead of BaseOptionsRefined. Use CalendarApi (via ref.getApi()) instead of CoreCalendar.

Before:

import { type BaseOptionsRefined } from '@catalystone/calendar'

const timelineOptions: BaseOptionsRefined = { slotMinWidth: 60 }

After:

import { type EmployeeCalendarTimelineViewProps } from '@catalystone/calendar'

const timelineOptions: EmployeeCalendarTimelineViewProps['timelineViewOptions'] = { slotMinWidth: 60 }

@catalystone/calendar: prop renamed

Event colours follow FullCalendar v7: on event objects (EventInput) backgroundColor, borderColor and textColor are gone. Use color for the event fill and contrastColor for the text/icon colour on top of it. Note that color changes meaning if it was used for text before. Calendar-level eventBackgroundColor/eventTextColor are likewise replaced by eventColor/eventContrastColor.

Before:

const events: EventInput[] = [
  { id: '1', title: 'Vacation', start: '2026-08-03', backgroundColor: '#2e7d32', textColor: '#fff' }
]

After:

const events: EventInput[] = [
  { id: '1', title: 'Vacation', start: '2026-08-03', color: '#2e7d32', contrastColor: '#fff' }
]

@catalystone/calendar: prop renamed

CalendarProps extends FullCalendar's CalendarOptions, so v7 option renames apply to props passed to Calendar and EmployeeCalendarTimelineView (and to view options): slotLabelContent -> slotHeaderContent, slotLabelFormat -> slotHeaderFormat, resourceLabelContent -> resourceCellContent, resourceAreaWidth -> resourceColumnsWidth, resourceAreaHeaderContent -> resourceColumnHeaderContent, weekNumberContent -> inlineWeekNumberContent, weekNumberDidMount -> inlineWeekNumberDidMount. dayCellContent no longer exists (the closest v7 hook is dayCellTopContent); check other FullCalendar options against the v7 docs.

Before:

<EmployeeCalendarTimelineView
  resources={resources}
  events={events}
  resourceLabelContent={renderResourceLabel}
/>

After:

<EmployeeCalendarTimelineView
  resources={resources}
  events={events}
  resourceCellContent={renderResourceLabel}
/>

@catalystone/calendar: behavior changed

With FullCalendar v7's React connector, content hooks (eventContent, dayHeaderContent, slotHeaderContent, ...) render their return value directly as React. The v6 workaround of returning a thunk ((arg) => () => <Jsx />) so hooks inside the content could run is no longer needed; return JSX directly.

Before:

<Calendar eventContent={(arg) => () => <EventChip event={arg.event} />} />

After:

<Calendar eventContent={(arg) => <EventChip event={arg.event} />} />

@catalystone/axios-interceptors: behavior changed

No consumer action required: this release note repeats the @catalystone/axios-interceptors removal (commit 8ac6bea) that first shipped in 36.0.3. See the 36.0.3 migration 36-0-3-axios-interceptors-moved-out.