fix: Export TooltipProvider as a component (#847)

* fix: Export TooltipProvider as a component

* Bump version to 26.2.1

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.
 
+# 26.2.1
+
+-   [Fix] Export `TooltipProvider` as a component
+
 # 26.2.0
 
 -   [Feat] Add `TooltipContext` to allow `showTimeout` and `hideTimeout` to be set globally

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "26.2.0",
+    "version": "26.2.1",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

src/tooltip/index.ts

@@ -1,2 +1,2 @@
-export { Tooltip } from './tooltip'
+export { Tooltip, TooltipProvider } from './tooltip'
 export type { TooltipProps } from './tooltip'

src/tooltip/tooltip.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { createPortal } from 'react-dom'
 
-import { Tooltip, TooltipContext, TooltipProps } from './tooltip'
+import { Tooltip, TooltipProps, TooltipProvider } from './tooltip'
 import { Button } from '../button'
 import { Stack } from '../stack'
 import { TextField } from '../text-field'
@@ -186,19 +186,14 @@ export function TooltipGlobalContext({
     showTimeout,
     hideTimeout,
 }: Required<Pick<TooltipProps, 'showTimeout' | 'hideTimeout'>>) {
-    const contextValue = React.useMemo(() => ({ showTimeout, hideTimeout }), [
-        showTimeout,
-        hideTimeout,
-    ])
-
     return (
         <Stack space="medium">
             <Text>
                 <code>{'<TooltipContext>'}</code> can be used to provide global settings to all
                 tooltips:
             </Text>
 
-            <TooltipContext.Provider value={contextValue}>
+            <TooltipProvider showTimeout={showTimeout} hideTimeout={hideTimeout}>
                 <Box padding="large" display="flex" gap="medium">
                     <Tooltip content="Click here to begin your journey">
                         <Button variant="primary">Got it</Button>
@@ -208,7 +203,7 @@ export function TooltipGlobalContext({
                         <Button variant="secondary">Cancel</Button>
                     </Tooltip>
                 </Box>
-            </TooltipContext.Provider>
+            </TooltipProvider>
         </Stack>
     )
 }

src/tooltip/tooltip.tsx

@@ -13,16 +13,31 @@ import type { TooltipStoreState } from '@ariakit/react'
 import styles from './tooltip.module.css'
 import type { ObfuscatedClassName } from '../utils/common-types'
 
+const defaultShowTimeout = 500
+const defaultHideTimeout = 100
+
 type TooltipContextState = {
     showTimeout: number
     hideTimeout: number
 }
 
 const TooltipContext = React.createContext<TooltipContextState>({
-    showTimeout: 500,
-    hideTimeout: 100,
+    showTimeout: defaultShowTimeout,
+    hideTimeout: defaultHideTimeout,
 })
 
+function TooltipProvider({
+    showTimeout = defaultShowTimeout,
+    hideTimeout = defaultHideTimeout,
+    children,
+}: React.PropsWithChildren<{
+    showTimeout?: number
+    hideTimeout?: number
+}>) {
+    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])
+    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>
+}
+
 interface TooltipProps extends ObfuscatedClassName {
     /**
      * The element that triggers the tooltip. Generally a button or link.
@@ -154,4 +169,4 @@ function Tooltip({
 }
 
 export type { TooltipProps }
-export { Tooltip, TooltipContext }
+export { Tooltip, TooltipProvider }