@kaizen/components 0.0.0-canary-fix-filter-select-jump-issue-useHasStableYPosition-20250120225815 → 0.0.0-canary-fix-filter-select-jump-issue-useHasStableYPosition-test-20250129223936

package/dist/types/__rc__/Select/hooks/{useHasStableYPosition.d.ts → useHasCalculatedListboxPosition.d.ts}

@@ -2,4 +2,4 @@
  * Due to the floating element's position starting as a negative value on render and then jumping to the correct position, this caused the focus to jump to the top of the page.
  * This now polls to check if the element's position is stable by comparing the first and last position.
  */
-export declare const useHasStableYPosition: (ref: React.RefObject<HTMLElement>) => boolean;
+export declare const useHasCalculatedListboxPosition: (ref: React.RefObject<HTMLElement>) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-fix-filter-select-jump-issue-useHasStableYPosition-20250120225815",
+  "version": "0.0.0-canary-fix-filter-select-jump-issue-useHasStableYPosition-test-20250129223936",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Content/Content.module.scss

@@ -3,10 +3,11 @@
 
 .content {
   max-width: $layout-content-max-width;
-  padding: 0 $layout-content-side-margin;
+  margin: 0 $layout-content-side-margin;
   width: 100%;
 
   @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
-    padding: 0 $content-margin-width-on-medium-and-small;
+    margin: 0 $content-margin-width-on-medium-and-small;
+    width: calc(100% - 2 * #{$content-margin-width-on-medium-and-small});
   }
 }

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx

@@ -4,7 +4,7 @@ import * as FilterDRPStories from './FilterDateRangePicker.stories'
 
 <Meta of={FilterDRPStories} />
 
-# Filter
+# FilterDateRangePicker
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterDateRangePicker"

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

@@ -4,7 +4,7 @@ import * as FilterMultiSelectStories from './FilterMultiSelect.stories'
 
 <Meta of={FilterMultiSelectStories} />
 
-# Filter Bar
+# FilterMultiSelect
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterMultiSelect"

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 import { renderTriggerControls } from '~components/Filter/_docs/controls/renderTriggerControls'
+import { Well } from '~components/Well'
 import { FilterButton } from '../../FilterButton'
 import { FilterSelect } from '../FilterSelect'
 import { type SelectOption } from '../types'
@@ -104,44 +105,40 @@ export const AdditionalProperties: Story = {
 /**
  * Extend the option type to have additional properties to use for rendering.
  */
-export const TestPageWithFilterSelect: Story = {
-  render: (args) => {
+export const FilterSelectBelowPageContent: Story = {
+  render: () => {
     const [isOpen, setIsOpen] = useState<boolean>(false)
 
     return (
       <div>
-        <div style={{ color: 'coral', display: 'block', height: '1500px' }}>Content</div>
-        <FilterSelect<SelectOption & { isFruit: boolean }>
-          {...args}
-          label="Custom"
+        <Well color="gray" style={{ height: '1500px' }}>
+          Page content above the FilterSelect
+        </Well>
+        <FilterSelect
+          label="Label"
           isOpen={isOpen}
           setIsOpen={setIsOpen}
-          items={[
-            { label: 'Bubblegum', value: 'bubblegum', isFruit: false },
-            { label: 'Strawberry', value: 'strawberry', isFruit: true },
-            { label: 'Chocolate', value: 'chocolate', isFruit: false },
-            { label: 'Apple', value: 'apple', isFruit: true },
-            { label: 'Lemon', value: 'lemon', isFruit: true },
-          ]}
+          renderTrigger={(triggerProps) => <FilterButton {...triggerProps} />}
+          items={groupedMockItems}
         >
           {({ items }): JSX.Element[] =>
-            items.map((item) =>
-              item.type === 'item' ? (
-                <FilterSelect.Option
-                  key={item.key}
-                  item={{
-                    ...item,
-                    rendered: item.value?.isFruit ? `${item.rendered} (Fruit)` : item.rendered,
-                  }}
-                />
-              ) : (
-                <FilterSelect.ItemDefaultRender key={item.key} item={item} />
-              ),
-            )
+            items.map((item) => {
+              if (item.type === 'item') {
+                return (
+                  <FilterSelect.Option
+                    key={item.key}
+                    item={{
+                      ...item,
+                    }}
+                  />
+                )
+              }
+              return <FilterSelect.ItemDefaultRender key={item.key} item={item} />
+            })
           }
         </FilterSelect>
       </div>
     )
   },
-  name: 'Additional option properties',
+  name: 'FilterSelect below page content',
 }

package/src/__rc__/Select/Select.spec.tsx

@@ -188,14 +188,24 @@ describe('<Select />', () => {
           })
         })
         it('is closed when hits the escape key', async () => {
-          const { getByRole } = render(<SelectWrapper defaultOpen />)
-          const menu = getByRole('listbox')
+          const { getByRole, queryByRole } = render(<SelectWrapper />)
+          const trigger = getByRole('combobox', {
+            name: 'Mock Label',
+          })
+          await user.tab()
+          await waitFor(() => {
+            expect(trigger).toHaveFocus()
+          })
+          await user.keyboard('{Enter}')
+
           await waitFor(() => {
-            expect(menu).toBeVisible()
+            expect(queryByRole('listbox')).toBeVisible()
           })
+
           await user.keyboard('{Escape}')
+
           await waitFor(() => {
-            expect(menu).not.toBeInTheDocument()
+            expect(queryByRole('listbox')).toBe(null)
           })
         })
       })

package/src/__rc__/Select/hooks/{useHasStableYPosition.ts → useHasCalculatedListboxPosition.ts}

@@ -4,8 +4,8 @@ import { useEffect, useState } from 'react'
  * Due to the floating element's position starting as a negative value on render and then jumping to the correct position, this caused the focus to jump to the top of the page.
  * This now polls to check if the element's position is stable by comparing the first and last position.
  */
-export const useHasStableYPosition = (ref: React.RefObject<HTMLElement>): boolean => {
-  const [isStable, setIsStable] = useState(false)
+export const useHasCalculatedListboxPosition = (ref: React.RefObject<HTMLElement>): boolean => {
+  const [hasStablePosition, setHasStablePosition] = useState(false)
   const [lastYPosition, setLastYPosition] = useState<number | null>(null)
 
   useEffect(() => {
@@ -14,18 +14,24 @@ export const useHasStableYPosition = (ref: React.RefObject<HTMLElement>): boolea
         const { y } = ref.current.getBoundingClientRect()
         if (lastYPosition === null) {
           setLastYPosition(y)
-        } else if (y === lastYPosition) {
-          setIsStable(true)
+        } else if (y === lastYPosition && y >= 0) {
+          setHasStablePosition(true)
         } else {
           setLastYPosition(y)
         }
       }
     }
 
-    const intervalId = setInterval(checkPosition, 1)
+    const intervalId = setInterval(() => {
+      if (hasStablePosition) {
+        clearInterval(intervalId)
+        return
+      }
+      checkPosition()
+    }, 1)
 
     return () => clearInterval(intervalId)
-  }, [ref, lastYPosition])
+  }, [ref, lastYPosition, hasStablePosition])
 
-  return isStable
+  return hasStablePosition
 }

package/src/__rc__/Select/subcomponents/ListBox/ListBox.tsx

@@ -4,8 +4,8 @@ import { type SelectState } from '@react-stately/select'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { useSelectContext } from '../../context'
-import { useHasStableYPosition } from '../../hooks/useHasStableYPosition'
-import { type SelectItem, type SelectOption } from '../../types'
+import { useHasCalculatedListboxPosition } from '../../hooks/useHasCalculatedListboxPosition'
+import { type SelectItem, type SelectItemNode, type SelectOption } from '../../types'
 import styles from './ListBox.module.scss'
 
 export type SingleListBoxProps<Option extends SelectOption> = OverrideClassName<
@@ -16,17 +16,38 @@ export type SingleListBoxProps<Option extends SelectOption> = OverrideClassName<
   menuProps: AriaListBoxOptions<SelectItem<Option>>
 }
 
-/** A util to retrieve the key of the correct focusable items based of the focus strategy
+/** determines is the first or last key passed in is a section. If not it will return the key, otherwise will return the first option key of that section */
+const getOptionOrSectionKey = (
+  optionKey: SelectOption['value'] | null,
+  state: SelectState<SelectItem<any>>,
+): Key | null => {
+  if (!optionKey) return null
+
+  const option = state.collection.getItem(optionKey) as SelectItemNode | null
+  const optionType = option?.type
+
+  if (optionType === 'section') {
+    const sectionOptions = option?.value?.options
+
+    return sectionOptions ? Array.from(sectionOptions)[0]?.value : null
+  }
+  return optionKey
+}
+
+/** A util to retrieve the key of the correct focusable option based of the focus strategy
  * This is used to determine which element from the collection to focus to on open base on the keyboard event
  * ie: UpArrow will set the focusStrategy to "last"
  */
 const getOptionKeyFromCollection = (state: SelectState<SelectItem<any>>): Key | null => {
   if (state.selectedItem) {
     return state.selectedItem.key
-  } else if (state.focusStrategy === 'last') {
-    return state.collection.getLastKey()
   }
-  return state.collection.getFirstKey()
+
+  if (state.focusStrategy === 'last') {
+    return getOptionOrSectionKey(state.collection.getLastKey(), state)
+  }
+
+  return getOptionOrSectionKey(state.collection.getFirstKey(), state)
 }
 
 /** This makes the use of query selector less brittle in instances where a failed selector is passed in
@@ -49,7 +70,7 @@ export const ListBox = <Option extends SelectOption>({
 }: SingleListBoxProps<Option>): JSX.Element => {
   const { state } = useSelectContext<Option>()
   const ref = useRef<HTMLUListElement>(null)
-  const hasStableYPosition = useHasStableYPosition(ref)
+  const hasCalculatedListboxPosition = useHasCalculatedListboxPosition(ref)
   const { listBoxProps } = useListBox(
     {
       ...menuProps,
@@ -62,10 +83,10 @@ export const ListBox = <Option extends SelectOption>({
   )
 
   /**
-   * This uses the hasStableYPosition to determine if the position is stable within the window
+   * When the Listbox is opened the initial position starts above the window, which can cause the out of the box behaviour in react-aria's listbox to jump a user to the top of the page.
    */
   useEffect(() => {
-    if (hasStableYPosition) {
+    if (hasCalculatedListboxPosition) {
       const optionKey = getOptionKeyFromCollection(state)
       const focusToElement = safeQuerySelector(`[data-key='${optionKey}']`)
 
@@ -77,7 +98,7 @@ export const ListBox = <Option extends SelectOption>({
     }
     // Only run this effect for checking the first successful render
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hasStableYPosition])
+  }, [hasCalculatedListboxPosition])
 
   return (
     <ul