More configurable dropdown and slidepanel

Author: platypii

package.json

@@ -63,27 +63,27 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "9.30.1",
-    "@storybook/react-vite": "9.0.15",
+    "@eslint/js": "9.32.0",
+    "@storybook/react-vite": "9.0.18",
     "@testing-library/react": "16.3.0",
-    "@types/node": "24.0.10",
+    "@types/node": "24.1.0",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
-    "@vitejs/plugin-react": "4.6.0",
+    "@vitejs/plugin-react": "4.7.0",
     "@vitest/coverage-v8": "3.2.4",
-    "eslint": "9.30.1",
+    "eslint": "9.32.0",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "0.4.20",
-    "eslint-plugin-storybook": "9.0.15",
+    "eslint-plugin-storybook": "9.0.18",
     "globals": "16.3.0",
     "jsdom": "26.1.0",
     "nodemon": "3.1.10",
     "npm-run-all": "4.1.5",
-    "storybook": "9.0.15",
+    "storybook": "9.0.18",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.35.1",
-    "vite": "7.0.1",
+    "typescript-eslint": "8.38.0",
+    "vite": "7.0.6",
     "vitest": "3.2.4"
   },
   "eslintConfig": {

src/components/Dropdown/Dropdown.tsx

@@ -3,7 +3,7 @@ import { cn } from '../../lib/utils'
 import styles from './Dropdown.module.css'
 
 interface DropdownProps {
-  label?: string
+  label?: ReactNode
   align?: 'left' | 'right'
   className?: string
   children: ReactNode

src/components/SlidePanel/SlidePanel.tsx

@@ -7,6 +7,7 @@ interface SlidePanelProps {
   mainContent: ReactNode
   panelContent: ReactNode
   isPanelOpen: boolean
+  className?: string
 }
 
 const WIDTH = {
@@ -17,7 +18,7 @@ const WIDTH = {
 /**
  * Slide out panel component with resizing.
  */
-export default function SlidePanel({ mainContent, panelContent, isPanelOpen }: SlidePanelProps) {
+export default function SlidePanel({ mainContent, panelContent, isPanelOpen, className }: SlidePanelProps) {
   const { slidePanel, customClass } = useConfig()
   const minWidth = slidePanel?.minWidth && slidePanel.minWidth > 0 ? slidePanel.minWidth : WIDTH.MIN
   function validWidth(width?: number): number | undefined {
@@ -81,7 +82,7 @@ export default function SlidePanel({ mainContent, panelContent, isPanelOpen }: S
   }, [panelWidth, isPanelOpen])
 
   return (
-    <div className={cn(styles.slidePanel, customClass?.slidePanel)}>
+    <div className={cn(styles.slidePanel, customClass?.slidePanel, className)}>
       <article>
         {mainContent}
       </article>