feat: add tests

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'plugin:storybook/recommended',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dist'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {

.github/workflows/publish.yml

@@ -34,8 +34,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      # - name: Test
-      #   run: pnpm test-ct & pnpm test
+      - name: Test
+        run: pnpm test
 
       - name: Build
         run: pnpm build

.gitignore

@@ -4,3 +4,7 @@ node_modules/
 /test-results/
 /playwright-report/
 /playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-easy-cascader",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/src/index.d.ts",
@@ -24,7 +24,7 @@
     "dev": "rm -rf dist/ && rollup -c -w",
     "storybook": "storybook dev -p 6006",
     "test": "pnpm exec playwright test",
-    "test-ct": "playwright test -c playwright-ct.config.ts"
+    "test:ui": "pnpm exec playwright test --ui"
   },
   "author": "orange",
   "description": "cascader based on MUI",
@@ -47,8 +47,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.0",
-    "@playwright/experimental-ct-react": "^1.37.0",
-    "@playwright/test": "^1.37.0",
+    "@playwright/test": "^1.40.1",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
@@ -90,7 +89,7 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "use-debounce": "^9.0.4",
-    "@mui/icons-material": "^5.14.0"
+    "@mui/icons-material": "^5.14.0",
+    "use-debounce": "^9.0.4"
   }
 }

src/EasyCascader/index.tsx

@@ -1,16 +1,29 @@
 import { Box } from '@mui/material'
-import { useMemo } from 'react'
+import { ForwardedRef, forwardRef, useImperativeHandle, useMemo } from 'react'
 import { EasyCascaderColumn } from 'src/EasyCascaderColumn'
+import { EasyKeyboardRefObject } from '../EasyList'
 import { EasyCascaderBaseNode, EasyCascaderProps, EasyId } from '../types'
 
-export function EasyCascader<T extends EasyCascaderBaseNode>({
-  selectedId,
-  data,
-  endAdornment,
-  setSelectedId,
-  startAdornment,
-  getNodeLabel,
-}: EasyCascaderProps<T>) {
+export const EasyCascader = forwardRef(EasyCascaderRaw) as <
+  T extends EasyCascaderBaseNode,
+>(
+  props: EasyCascaderProps<T>,
+  ref?: ForwardedRef<EasyKeyboardRefObject<T>>,
+) => JSX.Element
+
+export function EasyCascaderRaw<T extends EasyCascaderBaseNode>(
+  props: EasyCascaderProps<T>,
+  ref?: ForwardedRef<EasyKeyboardRefObject<T>>,
+) {
+  const {
+    selectedId,
+    data,
+    endAdornment,
+    setSelectedId,
+    startAdornment,
+    getNodeLabel,
+    hoverId,
+  } = props
   const selectedPathId = useMemo(() => {
     if (selectedId === null || selectedId === undefined) return []
     const selected = data.find((node) => node.id === selectedId)
@@ -24,6 +37,33 @@ export function EasyCascader<T extends EasyCascaderBaseNode>({
     .filter((node) => !node.pathId || node.pathId.length === 0)
     .map((node) => node.id)
 
+  const filterData = useMemo(() => {
+    if (selectedId === null) {
+      return data.filter((x) => rootId.includes(x.id))
+    }
+
+    const node = data.find((x) => x.id === selectedId)
+    if (!node) return []
+    // not leaf
+    if (node?.childrenId && node.childrenId.length !== 0) {
+      return data.filter((x) => node?.childrenId?.includes(x.id))
+    } else {
+      // leaf
+      const parent = data.find((x) => x.childrenId?.includes(node?.id))
+      return data.filter((x) => parent?.childrenId?.includes(x.id))
+    }
+  }, [data, rootId, selectedId])
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        filterData,
+      }
+    },
+    [filterData],
+  )
+
   return (
     <Box display="flex">
       {new Array((selectedPathId?.length || 0) + 1)
@@ -50,6 +90,7 @@ export function EasyCascader<T extends EasyCascaderBaseNode>({
               getNodeLabel={getNodeLabel}
               startAdornment={startAdornment}
               endAdornment={endAdornment}
+              hoverId={hoverId}
             />
           )
         })}

src/EasyCascaderColumn/index.tsx

@@ -1,6 +1,12 @@
 import { KeyboardArrowRight } from '@mui/icons-material'
-import { ListItemText, MenuItem, MenuList, Paper } from '@mui/material'
-import { EasyCascaderProps, EasyCascaderBaseNode, EasyId } from 'src/types'
+import {
+  ListItemText,
+  MenuItem,
+  MenuList,
+  Paper,
+  useTheme,
+} from '@mui/material'
+import { EasyCascaderBaseNode, EasyCascaderProps, EasyId } from 'src/types'
 
 export function EasyCascaderColumn<T extends EasyCascaderBaseNode>({
   ids,
@@ -10,16 +16,19 @@ export function EasyCascaderColumn<T extends EasyCascaderBaseNode>({
   endAdornment,
   startAdornment,
   getNodeLabel,
+  hoverId,
 }: {
   ids: EasyId[]
   activedId?: EasyId | null
   onNodeClick: (node: T, selected: boolean) => void
+  hoverId?: EasyId | null
 } & Pick<
   EasyCascaderProps<T>,
   'getNodeLabel' | 'startAdornment' | 'endAdornment' | 'data'
 >) {
   const currentNodes = data.filter((node) => ids.includes(node.id))
 
+  const { palette } = useTheme()
   return (
     <Paper>
       <MenuList>
@@ -32,6 +41,12 @@ export function EasyCascaderColumn<T extends EasyCascaderBaseNode>({
               onClick={() => {
                 onNodeClick(node, selected)
               }}
+              sx={{
+                background:
+                  hoverId === node.id && !selected
+                    ? palette.action.hover
+                    : undefined,
+              }}
             >
               <ListItemText
                 sx={{

src/EasyCascaderInput/index.stories.tsx

@@ -44,7 +44,7 @@ export const IdAsValue = () => {
 }
 
 export const DisplayPath = () => {
-  const [value, onChange] = useState<MockObject | null>(mockObjectNodes[2])
+  const [value, onChange] = useState<MockObject | null>(mockObjectNodes[1])
 
   return (
     <EasyCascaderInput<MockObject>