fix(solid): removing unnecessary memoization and fixing props handling

Author: cschroeter

packages/solid/CHANGELOG.md

@@ -11,6 +11,7 @@
   input field multiple times
 - **Presence**: Fixed a bug where elements get stuck in unmountSuspended state during rapid state updates
 - **Radio Group, Tabs**: Fixed indicator prematurely showing when rect has not been resolved yet
+- **ScrollArea**: Removed unnecessary `createMemo` wrapper in scrollbar props as is already reactive.
 - **Tabs**: Fixed tabs indicator position not updating when inactive tabs change size
 - **Tags Input**: Fixed issue where item delete trigger doesn't have `data-*` attached
 

packages/solid/src/components/scroll-area/scroll-area-scrollbar.tsx

@@ -1,6 +1,5 @@
 import type { ScrollbarProps } from '@zag-js/scroll-area'
 import { mergeProps } from '@zag-js/solid'
-import { createMemo } from 'solid-js'
 import type { Assign } from '../../types'
 import { createSplitProps } from '../../utils/create-split-props'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
@@ -12,13 +11,11 @@ export interface ScrollAreaScrollbarProps extends Assign<HTMLProps<'div'>, Scrol
 
 export const ScrollAreaScrollbar = (props: ScrollAreaScrollbarProps) => {
   const [scrollbarProps, localProps] = createSplitProps<ScrollbarProps>()(props, ['orientation'])
-  const scrollAreaApi = useScrollAreaContext()
-  const mergedProps = mergeProps(() => scrollAreaApi().getScrollbarProps(scrollbarProps), localProps)
-
-  const scrollbarContext = createMemo(() => scrollbarProps)
+  const scrollArea = useScrollAreaContext()
+  const mergedProps = mergeProps(() => scrollArea().getScrollbarProps(scrollbarProps), localProps)
 
   return (
-    <ScrollAreaScrollbarProvider value={scrollbarContext}>
+    <ScrollAreaScrollbarProvider value={scrollbarProps}>
       <ark.div {...mergedProps} />
     </ScrollAreaScrollbarProvider>
   )

packages/solid/src/components/scroll-area/scroll-area-thumb.tsx

@@ -11,7 +11,7 @@ export const ScrollAreaThumb = (props: ScrollAreaThumbProps) => {
   const scrollAreaApi = useScrollAreaContext()
   const scrollbarProps = useScrollAreaScrollbarContext()
 
-  const mergedProps = mergeProps(() => scrollAreaApi().getThumbProps(scrollbarProps()), props)
+  const mergedProps = mergeProps(() => scrollAreaApi().getThumbProps(scrollbarProps), props)
 
   return <ark.div {...mergedProps} />
 }

packages/solid/src/components/scroll-area/use-scroll-area-scrollbar-context.ts

@@ -1,8 +1,7 @@
 import type { ScrollbarProps } from '@zag-js/scroll-area'
-import type { Accessor } from 'solid-js'
 import { createContext } from '../../utils/create-context'
 
-export const [ScrollAreaScrollbarProvider, useScrollAreaScrollbarContext] = createContext<Accessor<ScrollbarProps>>({
+export const [ScrollAreaScrollbarProvider, useScrollAreaScrollbarContext] = createContext<ScrollbarProps>({
   hookName: 'useScrollAreaScrollbarContext',
   providerName: '<ScrollAreaScrollbarProvider />',
 })