chore: Upgrade to @ariakit/react v0.3.14 (#778)

Co-authored-by: Seva Zaikov <[email protected]>

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v24.0.0-beta
+
+-   [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react
+
 # v23.1.0
 
 -   [Feat] Add `--reactist-font-family-monospace` with updated font family for monospace elements

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "23.1.0",
+    "version": "24.0.0-beta",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {
@@ -143,10 +143,8 @@
         "webpack": "^4.43.0"
     },
     "dependencies": {
+        "@ariakit/react": "^0.3.14",
         "aria-hidden": "^1.2.1",
-        "ariakit": "2.0.0-next.43",
-        "ariakit-react-utils": "0.17.0-next.27",
-        "ariakit-utils": "0.17.0-next.27",
         "dayjs": "^1.8.10",
         "patch-package": "^6.4.6",
         "react-focus-lock": "^2.9.1",

src/checkbox-field/checkbox-field.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
-import { useForkRef } from 'ariakit-react-utils'
 import { Box } from '../box'
 import { Text } from '../text'
 import { CheckboxIcon } from './checkbox-icon'
 
 import styles from './checkbox-field.module.css'
+import { useForkRef } from './use-fork-ref'
 
 type CheckboxFieldProps = Omit<
     JSX.IntrinsicElements['input'],

src/checkbox-field/use-fork-ref.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+
+/**
+ * Sets both a function and object React ref.
+ */
+function setRef<T>(
+    ref: React.RefCallback<T> | React.MutableRefObject<T> | null | undefined,
+    value: T,
+) {
+    if (typeof ref === 'function') {
+        ref(value)
+    } else if (ref) {
+        ref.current = value
+    }
+}
+
+/**
+ * Merges React Refs into a single memoized function ref so you can pass it to an element.
+ * @example
+ * const Component = React.forwardRef((props, ref) => {
+ *   const internalRef = React.useRef();
+ *   return <div {...props} ref={useForkRef(internalRef, ref)} />;
+ * });
+ */
+function useForkRef(...refs: Array<React.Ref<unknown> | undefined>) {
+    return useMemo(
+        () => {
+            if (!refs.some(Boolean)) return
+            return (value: unknown) => {
+                refs.forEach((ref) => setRef(ref, value))
+            }
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        refs,
+    )
+}
+
+export { useForkRef }