fix(react): filter undefined className and update dependencies

release-npm

.github/workflows/push.yml

@@ -27,7 +27,7 @@ jobs:
           # and the server continues in the background.
           npx papua serve &
       - name: 🌲 Cypress Test
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@v5
         with:
           install: false
           # Wait for server above to start before testing.

cypress.config.js

@@ -4,5 +4,6 @@ export default defineConfig({
   chromeWebSecurity: false,
   e2e: {
     supportFile: false,
+    testIsolation: false,
   },
 })

demo-ssr/package.json

@@ -16,17 +16,17 @@
     "root": true
   },
   "dependencies": {
-    "next": "12.3.1",
+    "next": "13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "indicate": "file:.."
   },
   "devDependencies": {
-    "@types/node": "18.11.7",
-    "@types/react": "18.0.23",
-    "@types/react-dom": "18.0.7",
-    "eslint": "8.26.0",
-    "eslint-config-next": "13.0.0",
-    "typescript": "4.8.4"
+    "@types/node": "18.13.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "eslint": "8.34.0",
+    "eslint-config-next": "13.1.6",
+    "typescript": "4.9.5"
   }
 }

demo/package.json

@@ -7,9 +7,9 @@
   "dependencies": {
     "exmpl": "^3.0.0",
     "konfi": "^1.0.0",
-    "mobx": "^6.6.2",
+    "mobx": "^6.8.0",
     "mobx-react-lite": "^3.4.0",
-    "papua": "^2.1.0",
+    "papua": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package.json

@@ -41,16 +41,16 @@
     "overflow"
   ],
   "devDependencies": {
-    "@types/react": "^18.0.23",
-    "cypress": "^10.11.0",
-    "padua": "^0.6.1"
+    "@types/react": "^18.0.28",
+    "cypress": "^12.5.1",
+    "padua": "^1.1.0"
   },
   "prettier": "padua/configuration/.prettierrc.json",
   "eslintConfig": {
     "extends": "./node_modules/padua/configuration/eslint.cjs"
   },
   "engines": {
-    "node": ">= 14"
+    "node": ">= 16"
   },
   "typesVersions": {
     "*": {

react.tsx

@@ -65,6 +65,19 @@ const childrenValid = (children: ReactNode, childRef: ForwardedRef<HTMLElement>)
 
 const hideScrollbarClass = 'hide-indicate-scrollbar'
 
+const getClassName = (className: string, hideScrollbar: boolean) => {
+  if (className === 'undefined') {
+    // eslint-disable-next-line no-param-reassign
+    className = undefined
+  }
+
+  if (!className && !hideScrollbar) {
+    return undefined
+  }
+
+  return [className, hideScrollbar && hideScrollbarClass].filter(Boolean).join(' ')
+}
+
 type ArrowIcon = 'arrow-rounded' | 'pointer-rounded' | 'arrow' | 'pointer'
 type ArrowPosition = 'center' | 'end' | 'start'
 
@@ -539,10 +552,7 @@ export const Indicate = forwardRef<HTMLElement, Props & ReactHTMLElementProperti
         as,
         {
           ref: elementRef,
-          className:
-            className || hideScrollbar
-              ? `${className}${hideScrollbar ? ` ${hideScrollbarClass}` : ''}`
-              : undefined,
+          className: getClassName(className, hideScrollbar),
           style: {
             overflow: 'auto',
             ...(hideScrollbar && {