Release 38.0.0

Release 38.0.0 is a major release headlined by a breaking change to the date components: DatePicker, DateRangePicker and Calendar now default to weeks starting on Monday, and the duplicate firstDay prop has been removed from Calendar in favor of weekStartsOn. Consumers relying on the previous default or the firstDay prop should review the migration notes and update accordingly.

The release also adds several component capabilities: a value clear button on the Select field, read-only support for checkboxes, a clickable inline icon for text fields, and a top-of-dropdown alert for DatePicker. DatePicker and DateRangePicker now export LocalizationProvider, Avatar image loading is more reliable with a new border ring and test-user overlay, and Person-picker gains a dialog version.

Pickers and layout were refined too: OrganizationPicker and SearchableTreeView default to a consistent dropdown width and can show selections as text, Layout adds a noDividerBelowTopSection toggle, input components moved to native CSS tokens with alignment fixes, and Alert spacing now matches Figma.

Breaking Changes

• Removing the duplicate "firstDay" prop from Calendar, as this is replaced by the "weekStartsOn" prop. All components default to Monday. (#884, 062bc99)

Features

• enabling auto merge for scan accessibility PR (a92f3d1)
• enabling auto merge for scan accessibility PR (97437e1)
• enabling auto merge for scan accessibility PR (a47bdbc)
• avatar: fix image loading issues (#863, 98dfca5)
• select: add a value clear button to the Select component field (#861, 3a3db34)
• default to consistent dropdown width for OrganizationPicker and SearchableTreeView (#855, 7344ed4)
• CO-60861: Person-picker dialog version (#844, b028802)
• date-picker: make it possible to show an alert in the top of the DatePicker dropdown (#849, 7fb8b14)
• layout: add noDividerBelowTopSection toggle to Layout, update DeleteDialog styling (#845, 5749634)
• export LocalizationProvider from DatePicker and DateRangePicker (#840, 9a0c7d5)
• add option to display selection(s) as text in Org.Picker and SearchableTreeView (#837, 6806656)
• person-picker: test-user avatar overlay matching cx-user-picker-dialog (#834, c2c08cb)
• CO-60835: support read-only mode for checkboxes (#831, 1894495)
• avatar: add border ring and test user overlay matching cx-user-avatar (#833, bc153c7)
• CO-60795: Option to make the icon inside text-field clickable (#829, 488721e)

Bug Fixes

• Merge branch 'main' of https://github.com/CatalystOne/design-system (45ef4f0)
• Merge branch 'main' of https://github.com/CatalystOne/design-system (7460831)
• run release-docs:backfill script to backfill missing release docs (#847, 2938282)
• fix styling alignment bugs, move to native CSS tokens for input components (#836, 43fa837)
• add alignment stories for input components, implement styling fixes (#835, 7999dd8)
• text-field workspace dependency for Lerna release build (#830, 4304d64)
• alert: aligning Alert spacing styling with Figma (#828, 95f99b4)

Migration guide

Only act on the default changes if the product needs Sunday-first weeks; Monday-first is the intended new behaviour.

@catalystone/calendar: prop removed

Removed the FullCalendar firstDay prop from Calendar (CalendarProps now omits it). Use weekStartsOn ('monday' | 'sunday', default 'monday') instead: firstDay={0} becomes weekStartsOn='sunday', and firstDay={1} can simply be dropped. Other start days (2-6) are no longer supported.

Before:

<Calendar events={events} firstDay={0} />

After:

<Calendar events={events} weekStartsOn='sunday' />

@catalystone/calendar: prop default changed

Calendar weeks now start on Monday by default (weekStartsOn='monday'); previously FullCalendar's default (Sunday, unless a locale or firstDay said otherwise) applied. Pass weekStartsOn='sunday' to keep Sunday-first weeks.

Before:

<Calendar events={events} />

After:

// Monday-first is now the default; opt back in to Sunday-first if required:
<Calendar events={events} weekStartsOn='sunday' />

@catalystone/date-picker: prop default changed

DatePickerLocalizationProvider now sets a dayjs locale whose week starts on Monday by default, so DatePicker calendar popovers show Monday as the first day. Pass weekStartsOn='sunday' to the provider to keep Sunday-first weeks.

Before:

<DatePickerLocalizationProvider>
  <App />
</DatePickerLocalizationProvider>

After:

<DatePickerLocalizationProvider weekStartsOn='sunday'>
  <App />
</DatePickerLocalizationProvider>

@catalystone/daterange-picker: prop default changed

DateRangePickerLocalizationProvider now defaults to Monday as the first day of the week. Pass weekStartsOn='sunday' to the provider to keep Sunday-first weeks.

Before:

<DateRangePickerLocalizationProvider>
  <App />
</DateRangePickerLocalizationProvider>

After:

<DateRangePickerLocalizationProvider weekStartsOn='sunday'>
  <App />
</DateRangePickerLocalizationProvider>