PR feedback

Author: platypii

package.json

@@ -51,15 +51,15 @@
     "watch:url": "NODE_ENV=development nodemon bin/cli.js https://hyperparam.blob.core.windows.net/hyperparam/starcoderdata-js-00000-of-00065.parquet"
   },
   "dependencies": {
-    "hightable": "0.14.0",
-    "hyparquet": "1.10.3",
+    "hightable": "0.14.1",
+    "hyparquet": "1.10.4",
     "hyparquet-compressors": "1.1.1",
-    "icebird": "0.1.13",
+    "icebird": "0.1.14",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "9.23.0",
+    "@eslint/js": "9.24.0",
     "@storybook/addon-essentials": "8.6.12",
     "@storybook/addon-interactions": "8.6.12",
     "@storybook/blocks": "8.6.12",
@@ -83,7 +83,7 @@
     "npm-run-all": "4.1.5",
     "storybook": "8.6.12",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.29.0",
+    "typescript-eslint": "8.29.1",
     "vite": "6.2.5",
     "vitest": "3.1.1"
   },

src/components/Dropdown/Dropdown.module.css

@@ -35,7 +35,7 @@
   transform: rotate(-90deg);
   transition: transform 0.1s;
 }
-.open .dropdownButton::before {
+.dropdown:has([aria-expanded="true"]) .dropdownButton::before {
   transform: rotate(0deg);
 }
 
@@ -60,7 +60,7 @@
   z-index: 20;
 }
 
-.open .dropdownContent {
+.dropdown:has([aria-expanded="true"]) .dropdownContent {
   max-height: 170px;
   overflow-y: auto;
 }

src/components/Dropdown/Dropdown.stories.tsx

@@ -8,6 +8,7 @@ export default meta
 type Story = StoryObj<typeof Dropdown>;
 export const Default: Story = {
   args: {
+    label: 'Menu',
     children: <>
       <button>Item 1</button>
       <button>Item 2</button>

src/components/Dropdown/Dropdown.test.tsx

@@ -8,10 +8,10 @@ describe('Dropdown Component', () => {
     const { container: { children: [ div ] }, queryByText } = render(
       <Dropdown><div>Child 1</div><div>Child 2</div></Dropdown>
     )
-    expect(div?.classList).not.toContain(styles.open)
+    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
     expect(queryByText('Child 1')).toBeDefined()
     expect(queryByText('Child 2')).toBeDefined()
-    expect(div?.classList).not.toContain(styles.dropdownLeft)
+    expect(div?.classList).toContain(styles.dropdownLeft)
   })
 
   it('toggles dropdown content on button click', () => {
@@ -23,11 +23,11 @@ describe('Dropdown Component', () => {
     fireEvent.click(dropdownButton)
 
     // Check if dropdown content appears
-    expect(div?.classList).toContain(styles.open)
+    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     // Click again to close
     fireEvent.click(dropdownButton)
-    expect(div?.classList).not.toContain(styles.open)
+    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
   })
 
   it('closes dropdown when clicking outside', () => {
@@ -37,11 +37,11 @@ describe('Dropdown Component', () => {
 
     const dropdownButton = getByRole('button')
     fireEvent.click(dropdownButton) // open dropdown
-    expect(div?.classList).toContain(styles.open)
+    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     // Simulate a click outside
     fireEvent.mouseDown(document)
-    expect(div?.classList).not.toContain(styles.open)
+    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
   })
 
   it('does not close dropdown when clicking inside', () => {
@@ -51,12 +51,12 @@ describe('Dropdown Component', () => {
 
     const dropdownButton = getByRole('button')
     fireEvent.click(dropdownButton) // open dropdown
-    expect(div?.classList).toContain(styles.open)
+    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     const dropdownContent = getByText('Child 1').parentElement
     if (!dropdownContent) throw new Error('Dropdown content not found')
     fireEvent.mouseDown(dropdownContent)
-    expect(div?.classList).toContain(styles.open)
+    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
   })
 
   it('closes dropdown on escape key press', () => {
@@ -66,11 +66,11 @@ describe('Dropdown Component', () => {
 
     const dropdownButton = getByRole('button')
     fireEvent.click(dropdownButton) // open dropdown
-    expect(div?.classList).toContain(styles.open)
+    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('true')
 
     // Press escape key
     fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
-    expect(div?.classList).not.toContain(styles.open)
+    expect(div?.children[0]?.getAttribute('aria-expanded')).toBe('false')
   })
 
   it('adds dropdownLeft class when align is left', () => {

src/components/Dropdown/Dropdown.tsx

@@ -18,7 +18,7 @@ interface DropdownProps {
  *   <button>Item 2</button>
  * </Dropdown>
  */
-export default function Dropdown({ label, align, className, children }: DropdownProps) {
+export default function Dropdown({ label, align = 'left', className, children }: DropdownProps) {
   const [isOpen, setIsOpen] = useState(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
@@ -56,7 +56,7 @@ export default function Dropdown({ label, align, className, children }: Dropdown
 
   return (
     <div
-      className={cn(styles.dropdown, align === 'left' && styles.dropdownLeft, className, isOpen && styles.open)}
+      className={cn(styles.dropdown, align === 'left' && styles.dropdownLeft, className)}
       ref={dropdownRef}>
       <button
         className={styles.dropdownButton}