diff --git a/bun.lock b/bun.lock index 557ee0391f..625ae306a2 100644 --- a/bun.lock +++ b/bun.lock @@ -19,7 +19,7 @@ }, "packages/react": { "name": "@ark-ui/react", - "version": "5.0.0", + "version": "5.0.1", "dependencies": { "@internationalized/date": "3.7.0", "@zag-js/accordion": "1.3.3", @@ -115,7 +115,7 @@ }, "packages/solid": { "name": "@ark-ui/solid", - "version": "5.0.0", + "version": "5.1.0", "dependencies": { "@internationalized/date": "3.7.0", "@zag-js/accordion": "1.3.3", @@ -246,7 +246,7 @@ }, "packages/vue": { "name": "@ark-ui/vue", - "version": "5.0.2", + "version": "5.1.0", "dependencies": { "@internationalized/date": "3.7.0", "@zag-js/accordion": "1.3.3", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 02b36ea8ba..5bd20166a6 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -6,6 +6,10 @@ description: All notable changes will be documented in this file. ## [Unreleased] +### Added + +- Added support for clean up function in `ref`. + ## [5.0.1] - 2025-03-11 ### Fixed diff --git a/packages/react/src/components/tooltip/examples/basic.tsx b/packages/react/src/components/tooltip/examples/basic.tsx index 7b4b029a70..6aeae46314 100644 --- a/packages/react/src/components/tooltip/examples/basic.tsx +++ b/packages/react/src/components/tooltip/examples/basic.tsx @@ -2,7 +2,7 @@ import { Tooltip } from '@ark-ui/react/tooltip' export const Basic = () => ( - Hover Me + Hover Me I am a tooltip! diff --git a/packages/react/src/utils/compose-refs.ts b/packages/react/src/utils/compose-refs.ts index d3d00e9548..787c9dc47b 100644 --- a/packages/react/src/utils/compose-refs.ts +++ b/packages/react/src/utils/compose-refs.ts @@ -1,17 +1,28 @@ -type PossibleRef = React.Ref | undefined +import type { Ref } from 'react' -function setRef(ref: PossibleRef, value: T) { - if (typeof ref === 'function') { - ref(value) - } else if (ref !== null && ref !== undefined) { - ;(ref as React.MutableRefObject).current = value - } -} +type PossibleRef = Ref | undefined export function composeRefs(...refs: PossibleRef[]): (node: T | null) => void { return (node) => { + const cleanUps: VoidFunction[] = [] + for (const ref of refs) { - setRef(ref, node) + if (typeof ref === 'function') { + const cb = ref(node) + if (typeof cb === 'function') { + cleanUps.push(cb) + } + } else if (ref) { + ref.current = node + } + } + + if (cleanUps.length) { + return () => { + for (const cleanUp of cleanUps) { + cleanUp() + } + } } } } diff --git a/website/public/static/architecture_dark.svg b/website/public/static/architecture_dark.svg new file mode 100644 index 0000000000..84e4a0242a --- /dev/null +++ b/website/public/static/architecture_dark.svg @@ -0,0 +1,2 @@ +Zag.jsArk UIChakra UIUI State MachinesDate Picker +40 moreComboboxSelectDialogCarouselTabsFile UploadTree ViewPopoverFramework AdaptersReactSolidSvelteVuePreactReact ComponentsPark UIEmotionPanda CSSSolid ComponentsSvelteComponentsVueComponents \ No newline at end of file diff --git a/website/public/static/architecture_light.svg b/website/public/static/architecture_light.svg new file mode 100644 index 0000000000..36b00589eb --- /dev/null +++ b/website/public/static/architecture_light.svg @@ -0,0 +1,3 @@ + +Zag.jsArk UIChakra UIUI State MachinesDate Picker +40 moreComboboxSelectDialogCarouselTabsFile UploadTree ViewPopoverFramework AdaptersReactSolidSvelteVuePreactReact ComponentsPark UIEmotionPanda CSSSolid ComponentsSvelteComponentsVueComponents \ No newline at end of file diff --git a/website/src/components/theme-image.tsx b/website/src/components/theme-image.tsx new file mode 100644 index 0000000000..b16e92feea --- /dev/null +++ b/website/src/components/theme-image.tsx @@ -0,0 +1,22 @@ +import Image, { type ImageProps } from 'next/image' +import { Box } from 'styled-system/jsx' + +interface Props extends Omit { + srcLight: string + srcDark: string +} + +export const ThemeImage = (props: Props) => { + const { srcLight, srcDark, ...rest } = props + + return ( + <> + + + + + + + + ) +} diff --git a/website/src/content/pages/overview/introduction.mdx b/website/src/content/pages/overview/introduction.mdx index d6028b740f..bcc9c8866b 100644 --- a/website/src/content/pages/overview/introduction.mdx +++ b/website/src/content/pages/overview/introduction.mdx @@ -16,6 +16,16 @@ The goal of Ark UI is to provide a comprehensive selection of components for imp accessible UI components across a wide range of JavaScript frameworks. Building a company-wide design system or a component library for a client has never been more straightforward. +## Architecture + + + ## FAQ diff --git a/website/src/mdx-content.tsx b/website/src/mdx-content.tsx index 8a9956b63a..52694c4c20 100644 --- a/website/src/mdx-content.tsx +++ b/website/src/mdx-content.tsx @@ -14,6 +14,7 @@ import { Quickstart } from './components/quickstart' import { Story } from './components/story' import { Step, Steps } from '~/components/ui/stepper' +import { ThemeImage } from './components/theme-image' const sharedComponents = { a: Link, @@ -31,6 +32,7 @@ const sharedComponents = { Step, Steps, Story, + ThemeImage, } const useMDXComponent = (code: string) => {