@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx

@@ -3,9 +3,9 @@ import type { Locale } from 'date-fns'
 import {
   DayPicker,
   type DateRange,
-  type DayEventHandler,
+  type DayClickEventHandler,
+  type DayPickerRangeProps,
   type Matcher,
-  type PropsBase,
 } from 'react-day-picker'
 import { Icon } from '~components/__next__/Icon'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
@@ -22,7 +22,7 @@ export type LegacyCalendarRangeProps = {
   disabledDays?: Matcher[]
   selectedRange?: DateRange
   locale: Locale
-  onDayChange: DayEventHandler<React.MouseEvent>
+  onDayChange: DayClickEventHandler
 }
 
 export const LegacyCalendarRange = ({
@@ -38,13 +38,14 @@ export const LegacyCalendarRange = ({
   const selectedMonth = monthToShow && isInvalidDate(monthToShow) ? undefined : monthToShow
 
   /* eslint-disable camelcase */
-  const classNames: PropsBase['classNames'] = {
+  const classNames = {
     ...baseCalendarClassNames,
     nav: styles.nav,
-    range_start: styles.dayRangeStart,
-    range_end: styles.dayRangeEnd,
-    range_middle: styles.dayRangeMiddle,
-  }
+    nav_button_next: styles.navButtonNext,
+    day_range_start: styles.dayRangeStart,
+    day_range_end: styles.dayRangeEnd,
+    day_range_middle: styles.dayRangeMiddle,
+  } satisfies DayPickerRangeProps['classNames']
   /* eslint-enable camelcase */
 
   return (
@@ -58,13 +59,8 @@ export const LegacyCalendarRange = ({
         onDayClick={onDayChange}
         classNames={classNames}
         components={{
-          Chevron: (props) => {
-            if (props.orientation === 'left') {
-              return <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
-            }
-
-            return <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
-          },
+          IconRight: () => <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
+          IconLeft: () => <Icon name="arrow_back" isPresentational shouldMirrorInRTL />,
         }}
         locale={locale}
       />

package/src/Calendar/baseCalendarClassNames.module.scss

@@ -4,193 +4,198 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '../../styles/utils/button-reset';
 
-@layer kz-components {
-  $button-border-radius: 3px;
-  $rdp-cell-size: 40px;
+$button-border-radius: 3px;
+$rdp-cell-size: 40px;
 
-  %focus-ring {
-    position: relative;
+%focus-ring {
+  position: relative;
 
-    &:focus {
-      outline: none;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:focus-visible {
-      outline: none;
+  &:focus-visible {
+    outline: none;
 
-      &::after {
-        $focus-ring-offset: calc(-1 * calc((#{$border-focus-ring-border-width} * 2) + 1px));
+    &::after {
+      $focus-ring-offset: calc(-1 * calc((#{$border-focus-ring-border-width} * 2) + 1px));
 
-        z-index: 2;
-        content: '';
-        position: absolute;
-        inset: $focus-ring-offset;
-        border-radius: $button-border-radius;
-      }
+      z-index: 2;
+      content: '';
+      position: absolute;
+      inset: $focus-ring-offset;
+      border-radius: $button-border-radius;
     }
   }
+}
 
-  %focus-ring--enabled {
-    @extend %focus-ring;
+%focus-ring--enabled {
+  @extend %focus-ring;
 
-    &:focus-visible {
-      &::after {
-        border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
-      }
+  &:focus-visible {
+    &::after {
+      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
     }
   }
+}
 
-  .root {
-    display: inline-flex;
-    position: relative;
-  }
-
-  .months {
-    display: flex;
-  }
+.root {
+  display: inline-flex;
+}
 
-  .buttonReset {
-    @include button-reset;
-  }
+.months {
+  display: flex;
+}
 
-  .button {
-    cursor: pointer;
-  }
+.buttonReset {
+  @include button-reset;
+}
 
-  .caption {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 0 $spacing-xs;
-  }
+.button {
+  cursor: pointer;
+}
 
-  .captionLabel {
-    position: relative;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    margin: 0;
-    padding: 0 0.25em;
-    white-space: nowrap;
-    font-family: $typography-heading-4-font-family;
-    font-size: $typography-heading-4-font-size;
-    font-weight: $typography-heading-5-font-weight;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-    color: $color-purple-800;
-  }
+.caption {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0 $spacing-xs;
+}
 
-  .navButton {
-    @extend %focus-ring--enabled;
+.captionLabel {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0 0.25em;
+  white-space: nowrap;
+  font-family: $typography-heading-4-font-family;
+  font-size: $typography-heading-4-font-size;
+  font-weight: $typography-heading-5-font-weight;
+  line-height: $typography-heading-4-line-height;
+  letter-spacing: $typography-heading-4-letter-spacing;
+  color: $color-purple-800;
+}
 
-    display: inherit;
-    padding: 0.25rem $spacing-xs;
-    border: $border-solid-border-width $border-solid-border-style transparent;
-    border-radius: $button-border-radius;
+.navButton {
+  @extend %focus-ring--enabled;
 
-    &:hover {
-      background-color: $color-blue-100;
-      color: $color-blue-500;
-    }
+  display: inherit;
+  padding: 0.25rem $spacing-xs;
+  border: $border-solid-border-width $border-solid-border-style transparent;
+  border-radius: $button-border-radius;
 
-    &:focus-visible {
-      background-color: $color-blue-100;
-      color: $color-blue-500;
-    }
+  &:hover {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
   }
 
-  .table {
-    border-collapse: separate;
-    border-spacing: 1px;
-    margin: 0;
-    max-width: calc(#{$rdp-cell-size} * 7);
+  &:focus-visible {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
   }
+}
 
-  .tbody {
-    border: 0;
-    font-family: $typography-paragraph-body-font-family;
-    font-size: $typography-paragraph-body-font-size;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
-    font-weight: $typography-paragraph-body-font-weight;
-    line-height: $typography-paragraph-body-line-height;
-  }
+.table {
+  border-collapse: separate;
+  border-spacing: 1px;
+  margin: 0;
+  max-width: calc(#{$rdp-cell-size} * 7);
+}
 
-  .weekday {
-    padding: 0.5rem 0;
-    font-family: $typography-paragraph-body-font-family;
-    font-size: $typography-paragraph-body-font-size;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
-    font-weight: $typography-paragraph-body-font-weight;
-    line-height: $typography-paragraph-body-line-height;
-    color: $color-purple-800;
-  }
+.tbody {
+  border: 0;
+  font-family: $typography-paragraph-body-font-family;
+  font-size: $typography-paragraph-body-font-size;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  font-weight: $typography-paragraph-body-font-weight;
+  line-height: $typography-paragraph-body-line-height;
+}
 
-  .cell {
-    width: $rdp-cell-size;
-    height: $rdp-cell-size;
-    padding: 0;
-    text-align: center;
-  }
+.weekday {
+  padding: 0.5rem 0;
+  font-family: $typography-paragraph-body-font-family;
+  font-size: $typography-paragraph-body-font-size;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  font-weight: $typography-paragraph-body-font-weight;
+  line-height: $typography-paragraph-body-line-height;
+  color: $color-purple-800;
+}
 
-  .day {
-    @extend %focus-ring--enabled;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: $rdp-cell-size;
-    max-width: $rdp-cell-size;
-    height: $rdp-cell-size;
-    margin: 0;
-    border: $border-borderless-border-width $border-borderless-border-style
-      $border-borderless-border-color;
-    border-radius: $button-border-radius;
-    padding: calc(#{$spacing-md} / 3) 0.625rem;
-    color: $color-purple-800;
-
-    &:hover {
-      background-color: $color-blue-100;
-      color: $color-blue-500;
-    }
+.cell {
+  width: $rdp-cell-size;
+  height: $rdp-cell-size;
+  padding: 0;
+  text-align: center;
+}
 
-    &:focus-visible {
-      background-color: $color-blue-100;
-      color: $color-blue-500;
-    }
+.day {
+  @extend %focus-ring--enabled;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: $rdp-cell-size;
+  max-width: $rdp-cell-size;
+  height: $rdp-cell-size;
+  margin: 0;
+  border: $border-borderless-border-width $border-borderless-border-style
+    $border-borderless-border-color;
+  border-radius: $button-border-radius;
+  padding: calc(#{$spacing-md} / 3) 0.625rem;
+  color: $color-purple-800;
+
+  &:hover {
+    background-color: $color-blue-100;
+    color: $color-blue-500;
   }
 
-  .dayToday {
+  &:focus-visible {
+    background-color: $color-blue-100;
     color: $color-blue-500;
-    font-weight: bold;
   }
+}
 
-  .daySelected {
-    background-color: $color-blue-500;
-    border-radius: $button-border-radius;
-    color: $color-white;
+.dayToday {
+  color: $color-blue-500;
+  font-weight: bold;
+}
 
-    & .button {
-      color: $color-white;
+.daySelected {
+  background-color: $color-blue-500;
+  color: $color-white;
 
-      &:hover,
-      &:focus-visible {
-        background-color: $color-blue-400;
-        color: $color-white;
-      }
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: $color-blue-400;
+    color: $color-white;
   }
+}
 
-  .dayDisabled {
-    // Focus ring styles have been removed as react-day-picker has been updated such that
-    // disabled days do not receive focus, and keyboard navigation only lands on available days.
-    // https://github.com/gpbl/react-day-picker/pull/1519
-    // https://github.com/gpbl/react-day-picker/issues/1449#issuecomment-1149942033
-    background: none;
-    pointer-events: none;
+.dayDisabled {
+  // Focus ring styles have been removed as react-day-picker has been updated such that
+  // disabled days do not receive focus, and keyboard navigation only lands on available days.
+  // https://github.com/gpbl/react-day-picker/pull/1519
+  // https://github.com/gpbl/react-day-picker/issues/1449#issuecomment-1149942033
+  background: none;
+  pointer-events: none;
+  color: rgba($color-purple-800-rgb, 0.3);
+}
 
-    & [class*='_button_'] {
-      color: rgba($color-purple-800-rgb, 0.3);
-    }
-  }
+// We can't use <VisuallyHidden />, so copied the styles here.
+%visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.vHidden {
+  @extend %visually-hidden;
 }

package/src/Calendar/baseCalendarClassNames.ts

@@ -1,20 +1,22 @@
 /* eslint-disable camelcase */
-import { type PropsBase } from 'react-day-picker'
+import { type ClassNames } from 'react-day-picker'
 import styles from './baseCalendarClassNames.module.scss'
 
-export const baseCalendarClassNames: PropsBase['classNames'] = {
+export const baseCalendarClassNames: ClassNames = {
+  vhidden: styles.vHidden,
   root: styles.root,
   months: styles.months,
-  day_button: `${styles.buttonReset} ${styles.button} ${styles.day}`,
-  button_next: `${styles.buttonReset} ${styles.button} ${styles.navButton}`,
-  button_previous: `${styles.buttonReset} ${styles.button} ${styles.navButton}`,
-  day: styles.cell,
-  month_caption: styles.caption,
+  button_reset: styles.buttonReset,
+  button: styles.button,
+  caption: styles.caption,
   caption_label: styles.captionLabel,
-  month_grid: styles.table,
-  weekday: styles.weekday,
-  weeks: styles.tbody,
-  selected: styles.daySelected,
-  today: styles.dayToday,
-  disabled: styles.dayDisabled,
+  nav_button: styles.navButton,
+  table: styles.table,
+  head_cell: styles.weekday,
+  cell: styles.cell,
+  day: styles.day,
+  tbody: styles.tbody,
+  day_selected: styles.daySelected,
+  day_today: styles.dayToday,
+  day_disabled: styles.dayDisabled,
 }

package/src/Calendar/utils/isSelectingDayInCalendar.spec.tsx

@@ -8,8 +8,7 @@ describe('isSelectingDayInCalendar', () => {
     render(<CalendarSingle defaultMonth={new Date('2022-02-01')} />)
     const targetMonth = screen.getByRole('grid', { name: 'February 2022' })
     const targetDay = within(targetMonth).getByRole('gridcell', { name: '1' })
-    const targetBtn = within(targetDay).getByRole('button')
-    expect(isSelectingDayInCalendar(targetBtn)).toBe(true)
+    expect(isSelectingDayInCalendar(targetDay)).toBe(true)
   })
 
   it('returns false when target is not a Calendar day', () => {

package/src/Calendar/utils/setFocusInCalendar.spec.tsx

@@ -27,8 +27,7 @@ describe('setFocusInCalendar', () => {
     const targetDay = within(targetMonth).getByRole('gridcell', {
       name: todayDay,
     })
-    const targetBtn = within(targetDay).getByRole('button')
-    expect(targetBtn).toHaveFocus()
+    expect(targetDay).toHaveFocus()
   })
 
   it('should focus on the selected day', () => {
@@ -36,8 +35,7 @@ describe('setFocusInCalendar', () => {
 
     const targetMonth = screen.getByRole('grid', { name: 'August 2022' })
     const targetDay = within(targetMonth).getByRole('gridcell', { name: '15' })
-    const targetBtn = within(targetDay).getByRole('button')
-    expect(targetBtn).toHaveFocus()
+    expect(targetDay).toHaveFocus()
   })
 
   it('should focus on today when selected date is invalid', () => {
@@ -47,8 +45,7 @@ describe('setFocusInCalendar', () => {
     const targetDay = within(targetMonth).getByRole('gridcell', {
       name: todayDay,
     })
-    const targetBtn = within(targetDay).getByRole('button')
-    expect(targetBtn).toHaveFocus()
+    expect(targetDay).toHaveFocus()
   })
 
   it('should focus on the first of the month when there is no selected day nor in the current month', () => {
@@ -56,7 +53,6 @@ describe('setFocusInCalendar', () => {
 
     const targetMonth = screen.getByRole('grid', { name: 'May 2022' })
     const targetDay = within(targetMonth).getByRole('gridcell', { name: '1' })
-    const targetBtn = within(targetDay).getByRole('button')
-    expect(targetBtn).toHaveFocus()
+    expect(targetDay).toHaveFocus()
   })
 })

package/src/Calendar/utils/setFocusInCalendar.ts

@@ -3,21 +3,21 @@ import { type CalendarSingleElement } from '../CalendarSingle'
 import calendarStyles from '../baseCalendarClassNames.module.scss'
 import { isInvalidDate } from './isInvalidDate'
 
+const isHTMLElement = (element: Element | undefined): element is HTMLElement =>
+  element instanceof HTMLElement
+
 export const setFocusInCalendar = (
   calendarElement: CalendarSingleElement | CalendarRangeElement,
   selectedDay: Date | undefined,
 ): void => {
-  const dayClass =
+  const daySelectedOrToday = calendarElement.getElementsByClassName(
     selectedDay && !isInvalidDate(selectedDay)
-      ? `.${calendarStyles.daySelected}`
-      : `.${calendarStyles.dayToday}`
-
-  let dayToFocus = calendarElement.querySelector(`${dayClass} button`)
+      ? calendarStyles.daySelected
+      : calendarStyles.dayToday,
+  )[0]
 
-  // RDP v9 puts the day class on the button inside the table cell whereas today and selected appear on the table cell
-  dayToFocus ??= calendarElement.querySelector(`.${calendarStyles.day}`)
+  const dayToFocus =
+    daySelectedOrToday ?? calendarElement.getElementsByClassName(calendarStyles.day)[0]
 
-  if (dayToFocus instanceof HTMLElement) {
-    dayToFocus.focus()
-  }
+  if (isHTMLElement(dayToFocus)) dayToFocus.focus()
 }