test ci using node 16

.github/workflows/main.yml

@@ -11,13 +11,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
     steps:
       - uses: actions/checkout@v3
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: 8.11.0
 
       - name: Install Node.js
         uses: actions/setup-node@v3
@@ -35,13 +35,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
     steps:
       - uses: actions/checkout@v3
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: 8.11.0
 
       - name: Install Node.js
         uses: actions/setup-node@v3
@@ -65,13 +65,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14]
+        node-version: [18]
     steps:
       - uses: actions/checkout@v3
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: 8.11.0
 
       - name: Install Node.js
         uses: actions/setup-node@v3

.github/workflows/publish.yml

@@ -10,15 +10,15 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
     steps:
       - uses: actions/checkout@v3
         with:
           ref: ${{ github.event.release.target_commitish }}
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: 8.11.0
 
       - name: Install Node.js
         uses: actions/setup-node@v3

components/package.json

@@ -57,8 +57,8 @@
     "@types/glob": "^7.2.0",
     "@types/lodash": "^4.14.176",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "@types/rimraf": "^3.0.2",
     "@types/styled-components": "^5",
     "@types/testing-library__jest-dom": "^5.14.1",
@@ -69,8 +69,8 @@
     "jest": "^27.3.1",
     "jest-styled-components": "^7.0.8",
     "jest-watch-typeahead": "^1.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.0.7",
     "ts-node": "^10.4.0",
@@ -83,9 +83,9 @@
     "vite-tsconfig-paths": "^4.0.1"
   },
   "peerDependencies": {
-    "react": "^17",
-    "react-dom": "^17",
+    "react": "^18",
+    "react-dom": "^18",
     "react-transition-state": "^1.1.4",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.6"
   }
 }

components/src/components/molecules/Backdrop/Backdrop.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
-import { TransitionState, useTransition } from 'react-transition-state'
+import { TransitionState } from 'react-transition-state'
+
+import { useTransition } from '../../../hooks/useTransition/useTransition'
 
 import { Portal } from '../..'
 
@@ -81,7 +83,7 @@ export const Backdrop = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, noBackground])
 
-  return state !== 'unmounted' ? (
+  return state.status !== 'unmounted' ? (
     <Portal className={className} renderCallback={renderCallback}>
       {onDismiss && (
         <Background
@@ -91,7 +93,7 @@ export const Backdrop = ({
           onClick={dismissClick}
         />
       )}
-      {children({ state })}
+      {children({ state: state.status as TransitionState })}
     </Portal>
   ) : null
 }

components/src/components/molecules/Select/Select.tsx

@@ -603,7 +603,8 @@ export type SelectProps = {
     | 'aria-invalid'
     | 'onClick'
     | 'onKeyDown'
-  >
+  > &
+  Pick<NativeSelectProps, 'placeholder'>
 
 const getPadding = (
   key: 'outer' | 'inner',

components/src/hooks/useTransition/useTransition.ts

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import {
+  ENTERED,
+  ENTERING,
+  EXITING,
+  PRE_ENTER,
+  PRE_EXIT,
+  getEndStatus,
+  getState,
+  getTimeout,
+  nextTick,
+  startOrEnd,
+} from './utils'
+
+const updateState = (
+  status: any,
+  setState: any,
+  latestState: any,
+  timeoutId: any,
+  onChange: any,
+) => {
+  clearTimeout(timeoutId.current)
+  const state = getState(status)
+  setState(state)
+  latestState.current = state
+  onChange && onChange({ current: state })
+}
+
+export const useTransition = ({
+  enter = true,
+  exit = true,
+  preEnter,
+  preExit,
+  timeout,
+  initialEntered,
+  mountOnEnter,
+  unmountOnExit,
+  onStateChange: onChange,
+}: any = {}) => {
+  const [state, setState] = useState(() =>
+    getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
+  )
+  const latestState = useRef(state)
+  const timeoutId = useRef<any>()
+  const [enterTimeout, exitTimeout] = getTimeout(timeout)
+
+  const endTransition = useCallback(() => {
+    const status = getEndStatus(latestState.current._s, unmountOnExit)
+    status && updateState(status, setState, latestState, timeoutId, onChange)
+  }, [onChange, unmountOnExit])
+
+  const toggle = useCallback(
+    (toEnter: any) => {
+      const transitState = (status: any) => {
+        updateState(status, setState, latestState, timeoutId, onChange)
+
+        switch (status) {
+          case ENTERING:
+            if (enterTimeout >= 0)
+              timeoutId.current = setTimeout(endTransition, enterTimeout)
+            break
+
+          case EXITING:
+            if (exitTimeout >= 0)
+              timeoutId.current = setTimeout(endTransition, exitTimeout)
+            break
+
+          case PRE_ENTER:
+          case PRE_EXIT:
+            timeoutId.current = nextTick(transitState, status)
+            break
+        }
+      }
+
+      const enterStage = latestState.current.isEnter
+      if (typeof toEnter !== 'boolean') toEnter = !enterStage
+
+      if (toEnter) {
+        !enterStage &&
+          transitState(enter ? (preEnter ? PRE_ENTER : ENTERING) : ENTERED)
+      } else {
+        enterStage &&
+          transitState(
+            exit ? (preExit ? PRE_EXIT : EXITING) : startOrEnd(unmountOnExit),
+          )
+      }
+    },
+    [
+      endTransition,
+      onChange,
+      enter,
+      exit,
+      preEnter,
+      preExit,
+      enterTimeout,
+      exitTimeout,
+      unmountOnExit,
+    ],
+  )
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeoutId.current)
+    }
+  }, [])
+
+  return [state, toggle, endTransition] as const
+}

components/src/hooks/useTransition/utils.ts

@@ -0,0 +1,50 @@
+export const PRE_ENTER = 0
+export const ENTERING = 1
+export const ENTERED = 2
+export const PRE_EXIT = 3
+export const EXITING = 4
+export const EXITED = 5
+export const UNMOUNTED = 6
+
+export const STATUS = [
+  'preEnter',
+  'entering',
+  'entered',
+  'preExit',
+  'exiting',
+  'exited',
+  'unmounted',
+]
+
+export const getState = (status: any) => ({
+  _s: status,
+  status: STATUS[status],
+  isEnter: status < PRE_EXIT,
+  isMounted: status !== UNMOUNTED,
+  isResolved: status === ENTERED || status > EXITING,
+})
+
+export const startOrEnd = (unmounted: any) => (unmounted ? UNMOUNTED : EXITED)
+
+export const getEndStatus = (status: any, unmountOnExit: any) => {
+  switch (status) {
+    case ENTERING:
+    case PRE_ENTER:
+      return ENTERED
+
+    case EXITING:
+    case PRE_EXIT:
+      return startOrEnd(unmountOnExit)
+  }
+}
+
+export const getTimeout = (timeout: any) =>
+  typeof timeout === 'object'
+    ? [timeout.enter, timeout.exit]
+    : [timeout, timeout]
+
+export const nextTick = (transitState: any, status: any) =>
+  setTimeout(() => {
+    // Reading document.body.offsetTop can force browser to repaint before transition to the next state
+    isNaN(document.body.offsetTop) || transitState(status + 1)
+  }, 0)

docs/package.json

@@ -8,7 +8,7 @@
     "build:next": "next build",
     "export": "next export",
     "clean": "rimraf .next public/playroom",
-    "dev": "NODE_OPTIONS='--inspect' next dev & playroom start",
+    "dev": "NODE_OPTIONS='--inspect' next dev & NODE_OPTIONS='--openssl-legacy-provider' playroom start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "lint:types": "tsc --noEmit",
@@ -26,12 +26,12 @@
     "nookies": "^2.5.2",
     "playroom": "^0.28.1",
     "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-element-to-jsx-string": "^14.3.4",
     "react-live": "3.1.1",
     "react-transition-state": "^1.1.4",
-    "styled-components": "5.3.3"
+    "styled-components": "5.3.6"
   },
   "devDependencies": {
     "@mdx-js/loader": "^1.6.22",
@@ -43,8 +43,8 @@
     "@types/lodash": "^4.14.176",
     "@types/mdx-js__react": "^1.5.5",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "@types/rimraf": "^3.0.2",
     "@types/styled-components": "^5",
     "babel-loader": "^8.2.4",

package.json

@@ -80,10 +80,10 @@
     "utility-types": "^3.10.0"
   },
   "dependencies": {
-    "react": "^17",
-    "react-dom": "^17",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-transition-state": "^1.1.4",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.6"
   },
   "peerDependencies": {
     "eslint-plugin-import": "^2.24.2",