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

package/src/Filter/FilterBar/FilterBar.module.css

@@ -1,21 +1,19 @@
-@layer kz-components {
-  .filterBar {
-    display: flex;
-    padding: var(--spacing-8);
-    border-radius: var(--border-solid-border-radius);
-    background-color: var(--color-white);
-  }
+.filterBar {
+  display: flex;
+  padding: var(--spacing-8);
+  border-radius: var(--border-solid-border-radius);
+  background-color: var(--color-white);
+}
 
-  @media (width < 768px) {
-    .filterBar {
-      flex-direction: column;
-    }
+@media (width < 768px) {
+  .filterBar {
+    flex-direction: column;
   }
+}
 
-  .filtersContainer {
-    display: flex;
-    flex-grow: 1;
-    flex-wrap: wrap;
-    gap: var(--spacing-8);
-  }
+.filtersContainer {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  gap: var(--spacing-8);
 }

package/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.css

@@ -1,9 +1,7 @@
-@layer kz-components {
-  .clearAllButton {
-    white-space: nowrap;
-  }
+.clearAllButton {
+  white-space: nowrap;
+}
 
-  .hidden {
-    visibility: hidden;
-  }
+.hidden {
+  visibility: hidden;
 }

package/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.module.css

@@ -1,5 +1,3 @@
-@layer kz-components {
-  .filterBarButton {
-    width: 100%;
-  }
+.filterBarButton {
+  width: 100%;
 }

package/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.spec.tsx

@@ -127,9 +127,8 @@ describe('<FilterBarDatePicker />', () => {
 
     const targetMonth = screen.getByRole('grid', { name: 'June 2023' })
     const targetDay = within(targetMonth).getByRole('gridcell', { name: '7' })
-    const targetBtn = within(targetDay).getByRole('button')
 
-    await user.click(targetBtn)
+    await user.click(targetDay)
 
     await waitFor(() => {
       expect(screen.getByRole('button', { name: 'Drank : 7 Jun 2023' })).toBeInTheDocument()
@@ -149,8 +148,7 @@ describe('<FilterBarDatePicker />', () => {
 
     const targetMonth = screen.getByRole('grid', { name: 'June 2023' })
     const targetDay = within(targetMonth).getByRole('gridcell', { name: '7' })
-    const targetBtn = within(targetDay).getByRole('button')
-    await user.click(targetBtn)
+    await user.click(targetDay)
 
     await waitFor(() => {
       expect(onChange.mock.calls).toEqual([[new Date('2023-06-07')]])

package/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.spec.tsx

@@ -138,9 +138,7 @@ describe('<FilterBarDateRangePicker />', () => {
 
     const targetMonth = screen.getByRole('grid', { name: 'June 2022' })
     const targetDay = within(targetMonth).getByRole('gridcell', { name: '23' })
-    const targetBtn = within(targetDay).getByRole('button')
-
-    await user.click(targetBtn)
+    await user.click(targetDay)
     await user.click(document.body) // Exit the focus lock
 
     await waitFor(() => {
@@ -172,9 +170,7 @@ describe('<FilterBarDateRangePicker />', () => {
 
     const targetMonth = screen.getByRole('grid', { name: 'June 2022' })
     const targetDay = within(targetMonth).getByRole('gridcell', { name: '23' })
-    const targetBtn = within(targetDay).getByRole('button')
-
-    await user.click(targetBtn)
+    await user.click(targetDay)
 
     await waitFor(() => {
       expect(onChange).toHaveBeenCalledWith({

package/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.module.css

@@ -1,7 +1,5 @@
-@layer kz-components {
-  @media (width < 768px) {
-    .filterMultiSelect {
-      flex-basis: 100%;
-    }
+@media (width < 768px) {
+  .filterMultiSelect {
+    flex-basis: 100%;
   }
 }

package/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.spec.tsx

@@ -180,6 +180,7 @@ describe('<FilterBarMultiSelect />', () => {
     })
 
     await user.click(getByRole('option', { name: 'Fruit Jelly' }))
+    await user.keyboard('{Escape}')
     await waitFor(() => {
       expect(getByRole('button', { name: 'Toppings : Pearls, Fruit Jelly' })).toBeInTheDocument()
     })

package/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx

@@ -60,7 +60,7 @@ export const FilterBarSelect = <Option extends SelectOption = SelectOption>({
         <FilterBarButton {...triggerProps} filterId={id} isRemovable={filterState.isRemovable} />
       )}
       onSelectionChange={(key): void => {
-        updateValue(id, key ?? undefined)
+        updateValue(id, key)
         onSelectionChange?.(key)
       }}
       isOpen={filterState.isOpen}

package/src/Filter/FilterButton/FilterButton/FilterButton.module.css

@@ -1,25 +1,23 @@
-@layer kz-components {
-  .filterButton {
-    gap: var(--spacing-6);
-    justify-content: space-between;
-  }
+.filterButton {
+  gap: var(--spacing-6);
+  justify-content: space-between;
+}
 
-  @media (width < 768px) {
-    .filterButton {
-      flex-grow: 1;
-    }
+@media (width < 768px) {
+  .filterButton {
+    flex-grow: 1;
   }
+}
 
-  .labelContainer {
-    display: inline-flex;
-    flex-wrap: wrap;
-  }
+.labelContainer {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
 
-  .hasSelectedValues {
-    font-weight: bold;
-  }
+.hasSelectedValues {
+  font-weight: bold;
+}
 
-  .labelSeparator {
-    margin-inline-end: var(--spacing-6);
-  }
+.labelSeparator {
+  margin-inline-end: var(--spacing-6);
 }

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.module.css

@@ -1,5 +1,3 @@
-@layer kz-components {
-  .filterButtonBase {
-    height: 100%;
-  }
+.filterButtonBase {
+  height: 100%;
 }

package/src/Filter/FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.module.scss

@@ -5,54 +5,52 @@
 @import '../../../../../styles/utils/button-reset';
 @import './variables';
 
-@layer kz-components {
-  .filterButtonBase {
-    @include button-reset;
+.filterButtonBase {
+  @include button-reset;
 
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    min-height: 3rem; // 48px
-    padding: $spacing-sm;
-    border-width: 0;
-    border-radius: $border-solid-border-radius;
-    background-color: $color-blue-100;
-    font-family: $typography-button-secondary-font-family;
-    font-weight: $typography-button-secondary-font-weight;
-    font-size: $typography-button-secondary-font-size;
-    line-height: $typography-button-secondary-line-height;
-    letter-spacing: $typography-button-secondary-letter-spacing;
-    color: $color-blue-500;
-    text-align: start;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-height: 3rem; // 48px
+  padding: $spacing-sm;
+  border-width: 0;
+  border-radius: $border-solid-border-radius;
+  background-color: $color-blue-100;
+  font-family: $typography-button-secondary-font-family;
+  font-weight: $typography-button-secondary-font-weight;
+  font-size: $typography-button-secondary-font-size;
+  line-height: $typography-button-secondary-line-height;
+  letter-spacing: $typography-button-secondary-letter-spacing;
+  color: $color-blue-500;
+  text-align: start;
 
-    &:hover,
-    &:active {
-      z-index: 2;
-    }
+  &:hover,
+  &:active {
+    z-index: 2;
+  }
 
-    &:hover,
-    &:active,
-    &:focus-visible {
-      background-color: $color-blue-200;
-    }
+  &:hover,
+  &:active,
+  &:focus-visible {
+    background-color: $color-blue-200;
+  }
 
-    &:focus {
-      outline: none;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:focus-visible {
-      outline: none;
+  &:focus-visible {
+    outline: none;
 
-      &::after {
-        content: '';
-        z-index: 3;
-        position: absolute;
-        inset: $focus-ring-offset-outer;
-        border-radius: $border-focus-ring-border-radius;
-        border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
-      }
+    &::after {
+      content: '';
+      z-index: 3;
+      position: absolute;
+      inset: $focus-ring-offset-outer;
+      border-radius: $border-focus-ring-border-radius;
+      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
     }
   }
 }

package/src/Filter/FilterDatePicker/FilterDatePicker.spec.tsx

@@ -75,8 +75,7 @@ describe('<FilterDatePicker />', () => {
 
     const targetMonth = screen.getByRole('grid', { name: 'May 2022' })
     const targetDay = within(targetMonth).getByRole('gridcell', { name: '2' })
-    const targetBtn = within(targetDay).getByRole('button')
-    await user.click(targetBtn)
+    await user.click(targetDay)
 
     await waitFor(() => {
       expect(dialog).not.toBeInTheDocument()
@@ -197,7 +196,7 @@ describe('<FilterDatePicker />', () => {
     })
 
     const navigateMonthsButton = getByRole('button', {
-      name: /Go to the next month/i,
+      name: 'Go to next month',
     })
 
     await user.click(navigateMonthsButton)

package/src/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.module.scss

@@ -1,5 +1,3 @@
-@layer kz-components {
-  .disabled {
-    opacity: 0.3;
-  }
+.disabled {
+  opacity: 0.3;
 }

package/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.module.scss

@@ -1,9 +1,7 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .filterDatePickerField {
-    width: 288px;
-    display: grid;
-    gap: $spacing-16;
-  }
+.filterDatePickerField {
+  width: 288px;
+  display: grid;
+  gap: $spacing-16;
 }

package/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx

@@ -191,8 +191,7 @@ describe('<FilterDatePickerField />', () => {
       const targetDay = within(targetMonth).getByRole('gridcell', {
         name: '15',
       })
-      const targetBtn = within(targetDay).getByRole('button')
-      await user.click(targetBtn)
+      await user.click(targetDay)
 
       await waitFor(() => {
         expect(inputDateOnSubmit).toHaveBeenCalled()
@@ -211,8 +210,7 @@ describe('<FilterDatePickerField />', () => {
         name: '12',
       })
       expect(targetDay).not.toHaveAttribute('aria-selected')
-      const targetBtn = within(targetDay).getByRole('button')
-      await user.click(targetBtn)
+      await user.click(targetDay)
 
       await waitFor(() => {
         expect(targetDay).toHaveAttribute('aria-selected', 'true')
@@ -231,8 +229,7 @@ describe('<FilterDatePickerField />', () => {
       const firstSelectedDay = within(targetMonth).getByRole('gridcell', {
         name: '15',
       })
-      const targetBtn = within(firstSelectedDay).getByRole('button')
-      await user.click(targetBtn)
+      await user.click(firstSelectedDay)
 
       await waitFor(() => {
         expect(inputDate).toHaveValue('')
@@ -326,8 +323,7 @@ describe('<FilterDatePickerField />', () => {
       const targetDay = within(targetMonth).getByRole('gridcell', {
         name: '12',
       })
-      const targetBtn = within(targetDay).getByRole('button')
-      await user.click(targetBtn)
+      await user.click(targetDay)
 
       await waitFor(() => {
         expect(dateErrorContainer).not.toBeInTheDocument()

package/src/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css

@@ -1,9 +1,7 @@
-@layer kz-components {
-  @media (width <= 320px) {
-    .filterDateRangePickerContents {
-      padding: var(--spacing-16);
-      max-width: 320px;
-      box-sizing: border-box;
-    }
+@media (width <= 320px) {
+  .filterDateRangePickerContents {
+    padding: var(--spacing-16);
+    max-width: 320px;
+    box-sizing: border-box;
   }
 }

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx

@@ -454,8 +454,8 @@ export const OnSmallViewport: Story = {
 
     await step('Back and Forward arrow and both visible', async () => {
       await waitFor(() => {
-        const prevMonth = canvas.getByLabelText(/Go to the previous month/i)
-        const nextMonth = canvas.getByLabelText(/Go to the next month/i)
+        const prevMonth = canvas.getByLabelText('Go to previous month')
+        const nextMonth = canvas.getByLabelText('Go to next month')
 
         expect(prevMonth).toBeVisible()
         expect(nextMonth).toBeVisible()

package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.module.scss

@@ -1,8 +1,6 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .dateRangeDisplayLabel {
-    display: inline-flex;
-    gap: $spacing-6;
-  }
+.dateRangeDisplayLabel {
+  display: inline-flex;
+  gap: $spacing-6;
 }

package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.module.scss

@@ -1,47 +1,45 @@
 @import '~@kaizen/design-tokens/sass/border';
 
-@layer kz-components {
-  $input-disabled-opacity: 0.3;
+$input-disabled-opacity: 0.3;
 
-  .dateRangeInputContainer {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    border: none;
-  }
+.dateRangeInputContainer {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
 
-  .inputStartDate input {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
+.inputStartDate input {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 
-    // `postcss-preset-env` v8 has this style as a lower priority
-    // than what it wants to override so we must make everything important
-    + [class*='focusRing'] {
-      /* stylelint-disable declaration-no-important */
-      border-start-end-radius: 0 !important;
-      border-end-end-radius: 0 !important;
-      /* stylelint-enable declaration-no-important */
-    }
+  // `postcss-preset-env` v8 has this style as a lower priority
+  // than what it wants to override so we must make everything important
+  + [class*='focusRing'] {
+    /* stylelint-disable declaration-no-important */
+    border-start-end-radius: 0 !important;
+    border-end-end-radius: 0 !important;
+    /* stylelint-enable declaration-no-important */
   }
+}
 
-  .inputEndDate input {
-    position: relative;
-    inset-inline-start: calc(-1 * #{$border-solid-border-width});
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
+.inputEndDate input {
+  position: relative;
+  inset-inline-start: calc(-1 * #{$border-solid-border-width});
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 
-    // `postcss-preset-env` v8 has this style as a lower priority
-    // than what it wants to override so we must make everything important
-    + [class*='focusRing'] {
-      /* stylelint-disable declaration-no-important */
-      border-start-start-radius: 0 !important;
-      border-end-start-radius: 0 !important;
-      inset-inline: calc(-1 * calc(2 * #{$border-solid-border-width} + 1px)) -1px !important;
-      /* stylelint-enable declaration-no-important */
-    }
+  // `postcss-preset-env` v8 has this style as a lower priority
+  // than what it wants to override so we must make everything important
+  + [class*='focusRing'] {
+    /* stylelint-disable declaration-no-important */
+    border-start-start-radius: 0 !important;
+    border-end-start-radius: 0 !important;
+    inset-inline: calc(-1 * calc(2 * #{$border-solid-border-width} + 1px)) -1px !important;
+    /* stylelint-enable declaration-no-important */
   }
+}
 
-  .disabled {
-    opacity: $input-disabled-opacity;
-  }
+.disabled {
+  opacity: $input-disabled-opacity;
 }

package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.module.scss

@@ -1,8 +1,6 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .fieldMessageList {
-    margin: $spacing-0;
-    padding-inline-start: $spacing-24;
-  }
+.fieldMessageList {
+  margin: $spacing-0;
+  padding-inline-start: $spacing-24;
 }

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.module.scss

@@ -1,11 +1,9 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .filterDateRangePickerField {
-    display: contents;
-  }
+.filterDateRangePickerField {
+  display: contents;
+}
 
-  .dateRangeInputField {
-    margin-bottom: $spacing-24;
-  }
+.dateRangeInputField {
+  margin-bottom: $spacing-24;
 }

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx

@@ -254,9 +254,7 @@ describe('<FilterDateRangePickerField />', () => {
         name: '12',
       })
       expect(targetDay).not.toHaveAttribute('aria-selected')
-
-      const targetBtn = within(targetDay).getByRole('button')
-      await user.click(targetBtn)
+      await user.click(targetDay)
 
       await waitFor(() => {
         expect(targetDay).toHaveAttribute('aria-selected', 'true')
@@ -283,8 +281,7 @@ describe('<FilterDateRangePickerField />', () => {
         name: '23',
       })
       expect(targetDay).not.toHaveAttribute('aria-selected')
-      const targetBtn = within(targetDay).getByRole('button')
-      await user.click(targetBtn)
+      await user.click(targetDay)
 
       await waitFor(() => {
         expect(targetDay).toHaveAttribute('aria-selected', 'true')
@@ -292,7 +289,7 @@ describe('<FilterDateRangePickerField />', () => {
       })
     })
 
-    it('sets the range end date to match the start date when clicking on the start date with an active range', async () => {
+    it('clears the inputs when clearing the calendar value', async () => {
       render(
         <FilterDateRangePickerFieldWrapper
           selectedRange={{
@@ -305,20 +302,18 @@ describe('<FilterDateRangePickerField />', () => {
 
       const inputStartDate = screen.getByLabelText('Date from')
       const inputEndDate = screen.getByLabelText('Date to')
-      const startDate = '15 May 2022'
-      expect(inputStartDate).toHaveValue(startDate)
+      expect(inputStartDate).toHaveValue('15 May 2022')
       expect(inputEndDate).toHaveValue('22 May 2022')
 
       const targetMonth = screen.getByRole('grid', { name: 'May 2022' })
       const firstSelectedDay = within(targetMonth).getByRole('gridcell', {
         name: '15',
       })
-      const firstSelectedDayBtn = within(firstSelectedDay).getByRole('button')
-      await user.click(firstSelectedDayBtn)
+      await user.click(firstSelectedDay)
 
       await waitFor(() => {
-        expect(inputStartDate).toHaveValue(startDate)
-        expect(inputEndDate).toHaveValue(startDate)
+        expect(inputStartDate).toHaveValue('')
+        expect(inputEndDate).toHaveValue('')
       })
     })
   })
@@ -639,8 +634,7 @@ describe('<FilterDateRangePickerField />', () => {
       const targetDay = within(targetMonth).getByRole('gridcell', {
         name: '12',
       })
-      const targetBtn = within(targetDay).getByRole('button')
-      await user.click(targetBtn)
+      await user.click(targetDay)
 
       await waitFor(() => {
         expect(dateEndErrorContainer).not.toBeInTheDocument()

package/src/Filter/FilterMultiSelect/FilterMultiSelect.tsx

@@ -58,9 +58,10 @@ export const FilterMultiSelect = ({
   onSearchInputChange,
   triggerRef,
   className,
+  floatingOptions,
 }: FilterMultiSelectProps): JSX.Element => {
   const menuTriggerProps = { isOpen, defaultOpen, onOpenChange, triggerRef }
-  const menuPopupProps = { isLoading, loadingSkeleton }
+  const menuPopupProps = { isLoading, loadingSkeleton, floatingOptions }
   const disabledKeys: Selection = new Set(
     items?.filter((item) => item.isDisabled === true).map((disabledItem) => disabledItem.value),
   )
@@ -79,7 +80,7 @@ export const FilterMultiSelect = ({
     <MenuTriggerProvider {...menuTriggerProps}>
       <div className={className}>
         <MenuTriggerConsumer>{trigger}</MenuTriggerConsumer>
-        <MenuPopup {...menuPopupProps}>
+        <MenuPopup aria-label={label} {...menuPopupProps}>
           <SelectionProvider {...selectionProps}>
             <SelectionConsumer>{children}</SelectionConsumer>
           </SelectionProvider>

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx

@@ -30,6 +30,14 @@ The FilterMultiSelect is a component relies heavily on consumer implemntation. I
 
 <Canvas of={FilterMultiSelectStories.WithSectionHeaders} />
 
+### Limited viewport autoplacement above
+
+<Canvas of={FilterMultiSelectStories.AboveIfAvailable} />
+
+### With floatingOptions
+
+<Canvas of={FilterMultiSelectStories.WithFloatingOptions} />
+
 ### Async
 
 The following is an example of how you may create an async FilterMultiSelect using `@tanstack/react-query`.