From 1898d9d4ecb75610caffd2fa73e8e64145dcacf3 Mon Sep 17 00:00:00 2001
From: Sukka <isukkaw@gmail.com>
Date: Sat, 5 Oct 2024 07:08:48 +0800
Subject: [PATCH] refactor: minor changes here and there (#39)

---
 global.d.ts                                   |  4 +-
 package.json                                  |  7 +++-
 pnpm-lock.yaml                                | 31 +++++----------
 src/client/components/button/button.tsx       | 19 +++++-----
 src/client/components/checkbox/checkbox.tsx   |  5 ++-
 src/client/components/drawer/backdrop.tsx     |  6 +--
 src/client/components/drawer/wrapper.tsx      |  5 ++-
 src/client/components/input/input.tsx         |  5 ++-
 src/client/components/select/dropdown.tsx     |  6 +--
 .../components/select/select-multiple.tsx     |  4 +-
 src/client/components/text/child.tsx          |  5 ++-
 src/client/composables/index.ts               |  1 -
 src/client/composables/use-classes/index.ts   |  1 -
 .../composables/use-classes/use-classes.ts    | 38 -------------------
 .../use-click-anywhere/use-click-anywhere.ts  |  8 ++--
 .../use-dom-observer/use-dom-observer.ts      | 10 ++---
 16 files changed, 53 insertions(+), 102 deletions(-)
 delete mode 100644 src/client/composables/use-classes/index.ts
 delete mode 100644 src/client/composables/use-classes/use-classes.ts

diff --git a/global.d.ts b/global.d.ts
index 556f30f..6a52c32 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -1,4 +1,4 @@
 type DeepPartial<T> = T extends object ? {
-    [P in keyof T]?: DeepPartial<T[P]>
-  } :
+  [P in keyof T]?: DeepPartial<T[P]>
+} :
   T
diff --git a/package.json b/package.json
index 84f51ab..c5366d9 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "ansis": "^3.3.2",
     "ava": "^5.3.1",
     "c8": "^8.0.1",
+    "clsx": "^2.1.1",
     "dprint": "^0.46.0",
     "eslint": "^8.49.0",
     "eslint-config-kagura": "^2.2.1",
@@ -72,7 +73,8 @@
       "object.assign": "npm:@nolyfill/object.assign@^1",
       "object.entries": "npm:@nolyfill/object.entries@^1",
       "object.fromentries": "npm:@nolyfill/object.fromentries@^1",
-      "object.values": "npm:@nolyfill/object.values@^1"
+      "object.values": "npm:@nolyfill/object.values@^1",
+      "es-iterator-helpers": "npm:@nolyfill/es-iterator-helpers@^1"
     },
     "patchedDependencies": {
       "@rollup/plugin-esm-shim@0.1.7": "patches/@rollup__plugin-esm-shim@0.1.7.patch"
@@ -107,5 +109,6 @@
       "@swc-node/register"
     ],
     "timeout": "30s"
-  }
+  },
+  "packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d4224a..33bb495 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,6 +15,7 @@ overrides:
   object.entries: npm:@nolyfill/object.entries@^1
   object.fromentries: npm:@nolyfill/object.fromentries@^1
   object.values: npm:@nolyfill/object.values@^1
+  es-iterator-helpers: npm:@nolyfill/es-iterator-helpers@^1
 
 patchedDependencies:
   '@rollup/plugin-esm-shim@0.1.7':
@@ -91,6 +92,9 @@ importers:
       c8:
         specifier: ^8.0.1
         version: 8.0.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       dprint:
         specifier: ^0.46.0
         version: 0.46.3
@@ -369,25 +373,21 @@ packages:
     resolution: {integrity: sha512-9P13g1vgV8RfQH2qBGa8YAfaOeWA42RIhj7lmWRpkDFtwau96reMKwnBBn8bHUnc5e6bSsbPUOMb/X1KMUKz/g==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@dprint/linux-arm64-musl@0.46.3':
     resolution: {integrity: sha512-AAcdcMSZ6DEIoY9E0xQHjkZP+THP7EWsQge4TWzglSIjzn31YltglHAGYFcLB4CTJYpF0NsFDNFktzgkO+s0og==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@dprint/linux-x64-glibc@0.46.3':
     resolution: {integrity: sha512-c5cQ3G1rC64nBZ8Pd2LGWwzkEk4D7Ax9NrBbwYmNPvs6mFbGlJPC1+RD95x2WwIrIlMIciLG+Kxmt25PzBphmg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@dprint/linux-x64-musl@0.46.3':
     resolution: {integrity: sha512-ONtk2QtLcV0TqWOCOqzUFQixgk3JC+vnJLB5L6tQwT7BX5LzeircfE/1f4dg459iqejNC9MBXZkHnXqabvWSow==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@dprint/win32-x64@0.46.3':
     resolution: {integrity: sha512-xvj4DSEilf0gGdT7CqnwNEgfWNuWqT6eIBxHDEUbmcn1vZ7IwirtqRq/nm3lmYtQaJ4EbtMQZvACHZwxC7G96w==}
@@ -908,55 +908,46 @@ packages:
     resolution: {integrity: sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.18.0':
     resolution: {integrity: sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.18.0':
     resolution: {integrity: sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.18.0':
     resolution: {integrity: sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.18.0':
     resolution: {integrity: sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.18.0':
     resolution: {integrity: sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.18.0':
     resolution: {integrity: sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.18.0':
     resolution: {integrity: sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.18.0':
     resolution: {integrity: sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.18.0':
     resolution: {integrity: sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==}
@@ -1126,28 +1117,24 @@ packages:
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@swc/core-linux-arm64-musl@1.6.1':
     resolution: {integrity: sha512-dr6YbLBg/SsNxs1hDqJhxdcrS8dGMlOXJwXIrUvACiA8jAd6S5BxYCaqsCefLYXtaOmu0bbx1FB/evfodqB70Q==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@swc/core-linux-x64-gnu@1.6.1':
     resolution: {integrity: sha512-A0b/3V+yFy4LXh3O9umIE7LXPC7NBWdjl6AQYqymSMcMu0EOb1/iygA6s6uWhz9y3e172Hpb9b/CGsuD8Px/bg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@swc/core-linux-x64-musl@1.6.1':
     resolution: {integrity: sha512-5dJjlzZXhC87nZZZWbpiDP8kBIO0ibis893F/rtPIQBI5poH+iJuA32EU3wN4/WFHeK4et8z6SGSVghPtWyk4g==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@swc/core-win32-arm64-msvc@1.6.1':
     resolution: {integrity: sha512-HBi1ZlwvfcUibLtT3g/lP57FaDPC799AD6InolB2KSgkqyBbZJ9wAXM8/CcH67GLIP0tZ7FqblrJTzGXxetTJQ==}
@@ -1582,6 +1569,10 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   code-excerpt@4.0.0:
     resolution: {integrity: sha512-xxodCmBen3iy2i0WtAK8FlFNrRzjUqjRsMfho58xT/wvZU1YTM3fCnRjcy1gJPMepaRlgm/0e6w8SpWHpn3/cA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2379,28 +2370,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.25.1:
     resolution: {integrity: sha512-IhxVFJoTW8wq6yLvxdPvyHv4NjzcpN1B7gjxrY3uaykQNXPHNIpChLB52+wfH+yS58zm1PL4LemUp8u9Cfp6Bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.25.1:
     resolution: {integrity: sha512-RXIaru79KrREPEd6WLXfKfIp4QzoppZvD3x7vuTKkDA64PwTzKJ2jaC43RZHRt8BmyIkRRlmywNhTRMbmkPYpA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.25.1:
     resolution: {integrity: sha512-TdcNqFsAENEEFr8fJWg0Y4fZ/nwuqTRsIr7W7t2wmDUlA8eSXVepeeONYcb+gtTj1RaXn/WgNLB45SFkz+XBZA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-x64-msvc@1.25.1:
     resolution: {integrity: sha512-9KZZkmmy9oGDSrnyHuxP6iMhbsgChUiu/NSgOx+U1I/wTngBStDf2i2aGRCHvFqj19HqqBEI4WuGVQBa2V6e0A==}
@@ -4673,6 +4660,8 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clsx@2.1.1: {}
+
   code-excerpt@4.0.0:
     dependencies:
       convert-to-spaces: 2.0.1
diff --git a/src/client/components/button/button.tsx b/src/client/components/button/button.tsx
index dbe8b51..32674cf 100644
--- a/src/client/components/button/button.tsx
+++ b/src/client/components/button/button.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
-import { useClasses, useScale, withScale } from '../../composables'
+import { clsx } from 'clsx'
+import { useScale, withScale } from '../../composables'
 
 interface Props {
   icon?: React.ReactNode
@@ -109,14 +110,12 @@ const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
         lineHeight: SCALES.height(2.5),
         fontSize: SCALES.font(0.875),
         height: SCALES.height(2.5),
-        padding: `${SCALES.pt(0)} ${auto ? SCALES.pr(1.15) : SCALES.pr(1.375)} ${SCALES.pt(0)} ${
-          auto ? SCALES.pl(1.15) : SCALES.pl(1.375)
-        }`,
-        margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${
-          SCALES.ml(
-            0
-          )
-        }`,
+        padding: `${SCALES.pt(0)} ${auto ? SCALES.pr(1.15) : SCALES.pr(1.375)} ${SCALES.pt(0)} ${auto ? SCALES.pl(1.15) : SCALES.pl(1.375)
+          }`,
+        margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(
+          0
+        )
+          }`,
         '--button-height': SCALES.height(2.5),
         '--button-icon-padding': SCALES.pl(0.727),
         ...(auto && { width: 'auto' }),
@@ -128,7 +127,7 @@ const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
       })
     )
 
-    const classes = useClasses('button', className, userClassName)
+    const classes = clsx('button', className, userClassName)
 
     return (
       <button
diff --git a/src/client/components/checkbox/checkbox.tsx b/src/client/components/checkbox/checkbox.tsx
index 9d9f016..c825fa1 100644
--- a/src/client/components/checkbox/checkbox.tsx
+++ b/src/client/components/checkbox/checkbox.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
-import { useClasses, useScale, withScale } from '../../composables'
+import { clsx } from 'clsx'
+import { useScale, withScale } from '../../composables'
 import { useCheckbox } from './context'
 
 export interface CheckboxEventTarget {
@@ -88,7 +89,7 @@ function CheckboxComponent(props: CheckboxProps) {
     fontSize: 0,
     backgroundColor: 'transparent'
   }))
-  const classes = useClasses(className, userClassName)
+  const classes = clsx(className, userClassName)
   const [selfChecked, setSelfChecked] = useState<boolean>(false)
   const isDisabled = inGroup ? disabledAll || disabled : disabled
 
diff --git a/src/client/components/drawer/backdrop.tsx b/src/client/components/drawer/backdrop.tsx
index 1646b52..aad6479 100644
--- a/src/client/components/drawer/backdrop.tsx
+++ b/src/client/components/drawer/backdrop.tsx
@@ -2,8 +2,8 @@ import React, { useRef } from 'react'
 import type { MouseEvent } from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { injectGlobalStyle } from '@stylex-extend/core'
+import { clsx } from 'clsx'
 import { CSSTransition } from '../css-transition'
-import { useClasses } from '../../composables'
 
 interface Props {
   onClick?: (event: MouseEvent<HTMLElement>) => void
@@ -113,12 +113,12 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
       <CSSTransition name="backdrop-wrapper" visible={visible} clearTime={300}>
         <div
           role="presentation"
-          className={useClasses(stylex.props(styles.backdrop).className, backdropClassName, 'backdrop')}
+          className={clsx(stylex.props(styles.backdrop).className, backdropClassName, 'backdrop')}
           onClick={handleClick}
           onMouseUp={handleMouseUp}
           {...props}
         >
-          <div className={useClasses(stylex.props(styles.layer).className, layerClassName, 'layer')} />
+          <div className={clsx(stylex.props(styles.layer).className, layerClassName, 'layer')} />
           <div
             role="presentation"
             onClick={onContentClick}
diff --git a/src/client/components/drawer/wrapper.tsx b/src/client/components/drawer/wrapper.tsx
index 8b7419f..9afd38f 100644
--- a/src/client/components/drawer/wrapper.tsx
+++ b/src/client/components/drawer/wrapper.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
+import { clsx } from 'clsx'
 import { CSSTransition } from '../css-transition'
-import { useClasses, useScale } from '../../composables'
+import { useScale } from '../../composables'
 
 interface Props {
   visible?: boolean
@@ -59,7 +60,7 @@ function DrawerWrapper(props: React.PropsWithChildren<DrawerWrapperProps>) {
     width: SCALES.width(1, 'auto'),
     height: SCALES.height(1, '100%')
   }))
-  const classes = useClasses(className, 'wrapper')
+  const classes = clsx(className, 'wrapper')
 
   return (
     <CSSTransition name="wrapper" visible={visible} clearTime={300}>
diff --git a/src/client/components/input/input.tsx b/src/client/components/input/input.tsx
index 3549904..feb98b4 100644
--- a/src/client/components/input/input.tsx
+++ b/src/client/components/input/input.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
-import { useClasses, useScale, withScale } from '../../composables'
+import { clsx } from 'clsx'
+import { useScale, withScale } from '../../composables'
 
 interface Props {
   value?: string
@@ -57,7 +58,7 @@ const InputComponent = React.forwardRef<HTMLInputElement, InputProps>((props, re
 
   useImperativeHandle(ref, () => inputRef.current!)
 
-  const classes = useClasses('input', className, userClassName)
+  const classes = clsx('input', className, userClassName)
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (disabled || readOnly) return
diff --git a/src/client/components/select/dropdown.tsx b/src/client/components/select/dropdown.tsx
index 4ea399f..4545054 100644
--- a/src/client/components/select/dropdown.tsx
+++ b/src/client/components/select/dropdown.tsx
@@ -61,11 +61,11 @@ const SelectDropdown = React.forwardRef<
   })
   useEffect(() => {
     if (!ref || !ref.current) return
-    ref.current.addEventListener('mouseenter', updateRect)
+    const internalDropdownEl = ref.current
+    internalDropdownEl.addEventListener('mouseenter', updateRect)
     /* istanbul ignore next */
     return () => {
-      if (!ref || !ref.current) return
-      ref.current.removeEventListener('mouseenter', updateRect)
+      internalDropdownEl.removeEventListener('mouseenter', updateRect)
     }
   }, [ref, updateRect])
 
diff --git a/src/client/components/select/select-multiple.tsx b/src/client/components/select/select-multiple.tsx
index 7d8c89e..b7c9e4d 100644
--- a/src/client/components/select/select-multiple.tsx
+++ b/src/client/components/select/select-multiple.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
-import { useClasses } from '../../composables'
+import { clsx } from 'clsx'
 
 interface Props {
   disabled: boolean
@@ -29,7 +29,7 @@ function SelectMultipleValue({
     visibility: 'visible',
     opacity: 1
   }))
-  const classes = useClasses('clear-icon', className)
+  const classes = clsx('clear-icon', className)
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault()
diff --git a/src/client/components/text/child.tsx b/src/client/components/text/child.tsx
index 5be0058..69bb403 100644
--- a/src/client/components/text/child.tsx
+++ b/src/client/components/text/child.tsx
@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react'
 import * as stylex from '@stylexjs/stylex'
 import { inline } from '@stylex-extend/core'
-import { useClasses, useScale } from '../../composables'
+import { clsx } from 'clsx'
+import { useScale } from '../../composables'
 
 export interface Props {
   tag: keyof JSX.IntrinsicElements
@@ -63,7 +64,7 @@ function TextChild({
     }
   }))
 
-  const classes = useClasses(className, classNames)
+  const classes = clsx(className, classNames)
 
   return (
     <Component className={classes} style={style} {...props}>
diff --git a/src/client/composables/index.ts b/src/client/composables/index.ts
index bc3cecb..079c499 100644
--- a/src/client/composables/index.ts
+++ b/src/client/composables/index.ts
@@ -1,5 +1,4 @@
 export * from './use-body-scroll'
-export * from './use-classes'
 export * from './use-click-anywhere'
 export * from './use-dom-observer'
 export * from './use-portal'
diff --git a/src/client/composables/use-classes/index.ts b/src/client/composables/use-classes/index.ts
deleted file mode 100644
index f545f15..0000000
--- a/src/client/composables/use-classes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useClasses } from './use-classes'
diff --git a/src/client/composables/use-classes/use-classes.ts b/src/client/composables/use-classes/use-classes.ts
deleted file mode 100644
index b5aea77..0000000
--- a/src/client/composables/use-classes/use-classes.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-export type classNamesObject = Record<
-  string,
-  boolean | string | number | null | undefined
->
-export type className = string | classNamesObject | null | undefined | boolean | number
-
-function classObjectToString(className: classNamesObject) {
-  const keys = Object.keys(className)
-  const len = keys.length
-  let str = ''
-  for (let index = 0; index < len; index++) {
-    const key = keys[index]
-    const val = className[keys[index]]
-    if (!val) continue
-    str = str ? `${str} ${String(key)}` : String(key)
-  }
-  return str
-}
-
-function isObjectClassName(value: className): value is classNamesObject {
-  return typeof value === 'object' && !Array.isArray(value)
-}
-
-export function useClasses(...classNames: Array<className>) {
-  const len = classNames.length
-  let classes = ''
-  if (len === 0) return classes
-  for (let index = 0; index < len; index++) {
-    const val = classNames[index]
-    if (!val) continue
-    if (isObjectClassName(val)) {
-      classes += ` ${classObjectToString(val)}`
-    } else {
-      classes += ` ${String(val).trim()}`
-    }
-  }
-  return classes.trim()
-}
diff --git a/src/client/composables/use-click-anywhere/use-click-anywhere.ts b/src/client/composables/use-click-anywhere/use-click-anywhere.ts
index 86d5576..bcfa12e 100644
--- a/src/client/composables/use-click-anywhere/use-click-anywhere.ts
+++ b/src/client/composables/use-click-anywhere/use-click-anywhere.ts
@@ -1,12 +1,10 @@
 import { useEffect } from 'react'
 
 export function useClickAnyWhere(
-  handler: (event: Event) => void
+  handler: (this: Document, ev: MouseEvent) => void
 ) {
   useEffect(() => {
-    const callback = (event: Event) => handler(event)
-
-    document.addEventListener('click', callback)
-    return () => document.removeEventListener('click', callback)
+    document.addEventListener('click', handler)
+    return () => document.removeEventListener('click', handler)
   }, [handler])
 }
diff --git a/src/client/composables/use-dom-observer/use-dom-observer.ts b/src/client/composables/use-dom-observer/use-dom-observer.ts
index 16ae282..c301108 100644
--- a/src/client/composables/use-dom-observer/use-dom-observer.ts
+++ b/src/client/composables/use-dom-observer/use-dom-observer.ts
@@ -1,23 +1,21 @@
-import { useEffect } from 'react'
+import { useEffect } from 'foxact/use-abortable-effect'
 import type { MutableRefObject } from 'react'
 
 export function useDOMObserver(
   ref: MutableRefObject<HTMLElement | null> | undefined,
-  callback: MutationCallback = () => {}
+  callback: MutationCallback = () => { }
 ) {
   const config = { attributes: false, childList: true, subtree: true }
 
-  useEffect(() => {
+  useEffect((signal) => {
     if (!ref || !ref.current) return
-    let unmount = false
     const done: MutationCallback = (...params) => {
-      if (unmount) return
+      if (signal.aborted) return
       callback(...params)
     }
     const observer = new MutationObserver(done)
     observer.observe(ref.current, config)
     return () => {
-      unmount = true
       observer.disconnect()
     }
   }, [ref])