@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/core/hooks/useClickOutsideEvent.test.tsx

@@ -1,8 +1,7 @@
-/** @jest-environment jsdom */
-
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {useRef} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useClickOutsideEvent} from './useClickOutsideEvent'
 
@@ -13,7 +12,7 @@ describe('useClickOutsideEvent', () => {
 
   it('calls the handler when clicking outside of the array of elements', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -42,7 +41,7 @@ describe('useClickOutsideEvent', () => {
 
   it('the elements array flattens nested arrays one level deep', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -76,7 +75,7 @@ describe('useClickOutsideEvent', () => {
 
   it('it can set a boundary to scope outside click events', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)

package/src/core/hooks/useClickOutsideEvent.ts

@@ -3,19 +3,13 @@ import {useEffectEvent} from 'use-effect-event'
 
 import {EMPTY_ARRAY} from '../constants'
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideEventListener = (event: MouseEvent) => void
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
-/**
- * @public
- */
+/** @public */
 export function useClickOutsideEvent(
   listener: ClickOutsideEventListener | false | undefined,
   elementsArg: () => ClickOutsideEventElements = () => EMPTY_ARRAY,

package/src/core/hooks/useDelayed.test.ts

@@ -1,6 +1,5 @@
-/** @jest-environment jsdom */
-
 import {act, renderHook} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useDelayedState} from './useDelayedState'
 
@@ -16,7 +15,7 @@ describe('useDelayedState', () => {
   })
 
   it('should update state after delay if delay is provided', async () => {
-    jest.useFakeTimers()
+    vi.useFakeTimers()
     const {result} = renderHook(() => useDelayedState(false))
     const [, setState] = result.current
 
@@ -25,12 +24,12 @@ describe('useDelayedState', () => {
     })
     expect(result.current[0]).toBe(false)
     act(() => {
-      jest.advanceTimersByTime(500)
+      vi.advanceTimersByTime(500)
     })
     expect(result.current[0]).toBe(false)
 
     act(() => {
-      jest.advanceTimersByTime(500)
+      vi.advanceTimersByTime(500)
     })
 
     expect(result.current[0]).toBe(true)
@@ -56,12 +55,12 @@ describe('useDelayedState', () => {
     })
     expect(result.current[0]).toBe(false)
 
-    jest.advanceTimersByTime(500)
+    vi.advanceTimersByTime(500)
 
     act(() => {
       setState(false)
     })
-    jest.advanceTimersByTime(600)
+    vi.advanceTimersByTime(600)
     // Even after 1.1 seconds, the state should continue being false, because it was cancelled by a next setState call
     expect(result.current[0]).toBe(false)
   })

package/src/core/hooks/useDelayedState.ts

@@ -1,4 +1,4 @@
-import {SetStateAction, useCallback, useRef, useState} from 'react'
+import {type SetStateAction, useCallback, useRef, useState} from 'react'
 
 /**
  * @beta

package/src/core/hooks/useElementSize.ts

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react'
 
-import {_elementSizeObserver, ElementSize} from '../observers/elementSizeObserver'
+import {_elementSizeObserver, type ElementSize} from '../observers/elementSize'
 
 /**
  * Subscribe to the size of a DOM element.

package/src/core/hooks/useMatchMedia.ts

@@ -3,7 +3,7 @@ import {useCallback, useDebugValue, useSyncExternalStore} from 'react'
 /**
  * Efficiently subscribes to `window.matchMedia` queries
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * @public
  */

package/src/core/hooks/useMediaIndex/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'hooks/use-media-index',
   title: 'useMediaIndex',
   stories: [
@@ -11,4 +11,6 @@ export default defineScope({
       component: lazy(() => import('./test')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/hooks/useMediaIndex/__workshop__/test.tsx

@@ -1,11 +1,11 @@
 import {Card, Stack, Text, useMediaIndex} from '@sanity/ui'
 
-export default function TestStory() {
+export default function TestStory(): React.JSX.Element {
   const mediaIndex = useMediaIndex()
 
   return (
     <Card padding={[3, 4, 5]}>
-      <Stack space={2}>
+      <Stack gap={2}>
         <Text weight="medium">The current media index is {mediaIndex}.</Text>
         <Text muted>Try resizing the browser.</Text>
       </Stack>

package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,13 +1,10 @@
 /** @jest-environment node */
 
-import {buildTheme} from '@sanity/ui/theme'
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
-import {ThemeProvider} from '../../theme'
 import {useMediaIndex} from './useMediaIndex'
 
-const theme = buildTheme()
-
 function Log() {
   const mediaIndex = useMediaIndex()
 
@@ -16,21 +13,9 @@ function Log() {
 
 describe('useMediaIndex', () => {
   it(`SSR to static markup returns 0`, () => {
-    expect(
-      renderToStaticMarkup(
-        <ThemeProvider theme={theme}>
-          <Log />
-        </ThemeProvider>,
-      ),
-    ).toBe('mediaIndex: 0')
+    expect(renderToStaticMarkup(<Log />)).toBe('mediaIndex: 0')
   })
   it(`SSR to markup for hydration doesn't throw`, () => {
-    expect(
-      renderToString(
-        <ThemeProvider theme={theme}>
-          <Log />
-        </ThemeProvider>,
-      ),
-    ).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
+    expect(renderToString(<Log />)).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
   })
 })

package/src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,13 +1,14 @@
+import {type Breakpoint, BREAKPOINTS} from '@sanity/ui/css'
 import {useMemo, useSyncExternalStore} from 'react'
 
-import {useTheme_v2} from '../../theme'
+const media = Object.values(BREAKPOINTS)
 
 /**
  * @internal
  */
 export interface _MediaStore {
   subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
+  getSnapshot: () => Breakpoint
 }
 
 type MediaQueryMinWidth = `(min-width: ${number}px)`
@@ -17,24 +18,29 @@ type MediaQuery = `screen and ${MediaQueryMinWidth | MediaQueryMaxWidth | MediaQ
 
 function _getMediaQuery(media: number[], index: number): MediaQuery {
   if (index === 0) {
-    return `screen and (max-width: ${media[index] - 1}px)`
+    return `screen and (max-width: ${media[index + 1] - 1}px)`
   }
 
-  if (index === media.length) {
-    return `screen and (min-width: ${media[index - 1]}px)`
+  if (index === media.length - 1) {
+    return `screen and (min-width: ${media[index]}px)`
   }
 
-  return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
+  return `screen and (min-width: ${media[index]}px) and (max-width: ${media[index + 1] - 1}px)`
 }
 
-function _createMediaStore(media: number[]): _MediaStore {
+function _createMediaStore(): _MediaStore {
   const mediaLen = media.length
-  let sizes: {mq: MediaQueryList; index: number}[]
+
+  let sizes: {mq: MediaQueryList; index: number}[] | undefined = undefined
 
   // The _createMediaStore function is called in both server and client environments.
   // However since subscribe and getSnapshot are only called on the client we lazy init what we need for them
   // so that we don't need to run checks for wether it's safe to call `window.matchMedia`
   const getSizes = () => {
+    if (typeof window === 'undefined') {
+      return sizes
+    }
+
     if (!sizes) {
       sizes = []
 
@@ -49,8 +55,8 @@ function _createMediaStore(media: number[]): _MediaStore {
   }
 
   const getSnapshot = () => {
-    for (const {index, mq} of getSizes()) {
-      if (mq.matches) return index
+    for (const {index, mq} of getSizes() ?? []) {
+      if (mq.matches) return index as Breakpoint
     }
 
     return 0
@@ -59,7 +65,7 @@ function _createMediaStore(media: number[]): _MediaStore {
   const subscribe = (onStoreChange: () => void) => {
     const disposeFns: (() => void)[] = []
 
-    for (const {mq} of getSizes()) {
+    for (const {mq} of getSizes() ?? []) {
       const handleChange = () => {
         if (mq.matches) onStoreChange()
       }
@@ -86,7 +92,7 @@ function _createMediaStore(media: number[]): _MediaStore {
  *
  * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
  */
-function getServerSnapshot() {
+function getServerSnapshot(): Breakpoint {
   return 0
 }
 
@@ -94,9 +100,8 @@ function getServerSnapshot() {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function useMediaIndex(): number {
-  const {media} = useTheme_v2()
-  const store = useMemo(() => _createMediaStore(media), [media])
+export function useMediaIndex(): Breakpoint {
+  const store = useMemo(() => _createMediaStore(), [])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
 }

package/src/core/hooks/usePrefersDark.hydration.test.tsx

@@ -1,10 +1,10 @@
-/** @jest-environment jsdom */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration
  */
 import {waitFor} from '@testing-library/dom'
 import {hydrateRoot} from 'react-dom/client'
+import {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
 
 import {usePrefersDark} from './usePrefersDark'
 
@@ -20,10 +20,10 @@ describe('usePrefersDark SSR hydration', () => {
   beforeAll(() => {
     window.matchMedia = () =>
       ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
         matches: true,
-      }) as any
+      }) as unknown as MediaQueryList
   })
 
   afterAll(() => {
@@ -31,7 +31,7 @@ describe('usePrefersDark SSR hydration', () => {
   })
 
   it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
+    const spy = vi.spyOn(console, 'error') // .mockImplementation()
 
     const node = document.createElement('div')
 

package/src/core/hooks/usePrefersDark.test.tsx

@@ -1,5 +1,6 @@
 /** @jest-environment node */
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {usePrefersDark} from './usePrefersDark'
 

package/src/core/hooks/usePrefersDark.ts

@@ -3,7 +3,7 @@ import {useMatchMedia} from './useMatchMedia'
 /**
  * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
  * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme

package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx

@@ -1,10 +1,10 @@
-/** @jest-environment jsdom */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration
  */
 import {waitFor} from '@testing-library/dom'
 import {hydrateRoot} from 'react-dom/client'
+import {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
 
 import {usePrefersReducedMotion} from './usePrefersReducedMotion'
 
@@ -20,10 +20,10 @@ describe('usePrefersReducedMotion SSR hydration', () => {
   beforeAll(() => {
     window.matchMedia = () =>
       ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
         matches: true,
-      }) as any
+      }) as unknown as MediaQueryList
   })
 
   afterAll(() => {
@@ -31,7 +31,7 @@ describe('usePrefersReducedMotion SSR hydration', () => {
   })
 
   it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
+    const spy = vi.spyOn(console, 'error') // .mockImplementation()
 
     const node = document.createElement('div')
 

package/src/core/hooks/usePrefersReducedMotion.test.tsx

@@ -1,5 +1,6 @@
 /** @jest-environment node */
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {usePrefersReducedMotion} from './usePrefersReducedMotion'
 

package/src/core/hooks/usePrefersReducedMotion.ts

@@ -3,7 +3,7 @@ import {useMatchMedia} from './useMatchMedia'
 /**
  * Returns true if motion should be reduced
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
  * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion

package/src/core/hooks/useResponsiveProp.ts

@@ -0,0 +1,28 @@
+import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
+import {useState} from 'react'
+
+import {_getResponsiveProp} from '../helpers/props'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useResponsiveProp<T>(
+  val: ResponsiveProp<T> | undefined,
+  defaultVal?: Partial<Record<Breakpoint, T>>,
+): Partial<Record<Breakpoint, T>> {
+  const [[cachedVal, cachedHash], setCache] = useState<[Partial<Record<Breakpoint, T>>, string]>(
+    () => [_getResponsiveProp(val, defaultVal), JSON.stringify(val ?? defaultVal)],
+  )
+
+  const hash = JSON.stringify(val ?? defaultVal)
+
+  if (hash !== cachedHash) {
+    // If the cached hash has changed, update the cache right away.
+    // Calling setState during render is fine in this case, and preferred over a useEffect loop
+    // https://19.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+    setCache([_getResponsiveProp(val, defaultVal), hash])
+  }
+
+  return cachedVal
+}

package/src/core/index.ts

@@ -1,10 +1,115 @@
-export * from './_compat'
-export * from './components'
-export * from './helpers'
-export * from './hooks'
-export * from './observers'
-export * from './primitives'
-export * from './styles'
-export * from './theme'
+// components
+export * from './components/autocomplete/autocomplete'
+export * from './components/autocomplete/types'
+export * from './components/breadcrumbs/breadcrumbs'
+export * from './components/dialog/dialog'
+export * from './components/dialog/dialogContext'
+export * from './components/dialog/dialogProvider'
+export * from './components/dialog/types'
+export * from './components/dialog/useDialog'
+export * from './components/hotkeys/hotkeys'
+export * from './components/menu/menu'
+export * from './components/menu/menuButton'
+export * from './components/menu/menuDivider'
+export * from './components/menu/menuGroup'
+export * from './components/menu/menuItem'
+export * from './components/tab/tab'
+export * from './components/tab/tabList'
+export * from './components/tab/tabPanel'
+export * from './components/toast/toast'
+export * from './components/toast/toastProvider'
+export * from './components/toast/types'
+export * from './components/toast/useToast'
+export * from './components/tree/tree'
+export * from './components/tree/treeItem'
+export * from './components/tree/types'
+export * from './components/tree/useTree'
+export * from './components/virtualList/virtualList'
+
+// helpers
+export * from './helpers/animation'
+export * from './helpers/element'
+export * from './helpers/focus'
+export * from './helpers/props'
+export * from './helpers/scroll'
+
+// hooks
+export * from './hooks/useClickOutsideEvent'
+export * from './hooks/useCustomValidity'
+export * from './hooks/useElementSize'
+export * from './hooks/useGlobalKeyDown'
+export * from './hooks/useMatchMedia'
+export * from './hooks/useMediaIndex/useMediaIndex'
+export * from './hooks/usePrefersDark'
+export * from './hooks/usePrefersReducedMotion'
+export * from './hooks/useResponsiveProp'
+
+// observers
+export * from './observers/elementSize'
+export * from './observers/resize'
+
+// primitives
+export * from './primitives/arrow/arrow'
+export * from './primitives/avatar/avatar'
+export * from './primitives/avatar/avatarCounter'
+export * from './primitives/avatar/avatarStack'
+export * from './primitives/avatar/types'
+export * from './primitives/badge/badge'
+export * from './primitives/box/box'
+export * from './primitives/button/button'
+export * from './primitives/button/types'
+export * from './primitives/card/card'
+export * from './primitives/card/cardProvider'
+export * from './primitives/card/types'
+export * from './primitives/card/useCard'
+export * from './primitives/checkbox/checkbox'
+export * from './primitives/code/code'
+export * from './primitives/container/container'
+export * from './primitives/container/types'
+export * from './primitives/flex/flex'
+export * from './primitives/grid/grid'
+export * from './primitives/heading/heading'
+export * from './primitives/inline/inline'
+export * from './primitives/kbd/kbd'
+export * from './primitives/label/label'
+export * from './primitives/layer/layer'
+export * from './primitives/layer/layerProvider'
+export * from './primitives/layer/types'
+export * from './primitives/layer/useLayer'
+export * from './primitives/popover/popover'
+export * from './primitives/popover/types'
+export * from './primitives/radio/radio'
+export * from './primitives/select/select'
+export * from './primitives/selectable/selectable'
+export * from './primitives/skeleton/codeSkeleton'
+export * from './primitives/skeleton/headingSkeleton'
+export * from './primitives/skeleton/labelSkeleton'
+export * from './primitives/skeleton/skeleton'
+export * from './primitives/skeleton/textSkeleton'
+export * from './primitives/spinner/spinner'
+export * from './primitives/srOnly/srOnly'
+export * from './primitives/stack/stack'
+export * from './primitives/switch/switch'
+export * from './primitives/text/text'
+export * from './primitives/textArea/textArea'
+export * from './primitives/textInput/textInput'
+export * from './primitives/tooltip/tooltip'
+export * from './primitives/tooltip/tooltipDelayGroup'
+
+// utils
+export * from './utils/boundaryElement/boundaryElementProvider'
+export * from './utils/boundaryElement/types'
+export * from './utils/boundaryElement/useBoundaryElement'
+export * from './utils/elementQuery/elementQuery'
+export * from './utils/errorBoundary'
+export * from './utils/portal/portal'
+export * from './utils/portal/portalProvider'
+export * from './utils/portal/types'
+export * from './utils/portal/usePortal'
+
+// root
+export * from './Root'
+export * from './RootProvider'
+
+// types
 export * from './types'
-export * from './utils'

package/src/core/lib/createGlobalScopedContext.ts

@@ -16,7 +16,7 @@ export function createGlobalScopedContext<ContextType, const T extends ContextTy
   /**
    * Enforce that all Symbol.for keys used for globally scoped contexts have a predictable prefix
    */
-  key: `@sanity/ui/context/${string}`,
+  key: `@sanity/ui/v3/${string}`,
   defaultValue: T,
 ): Context<ContextType> {
   const symbol = Symbol.for(key)
@@ -28,7 +28,10 @@ export function createGlobalScopedContext<ContextType, const T extends ContextTy
     return createContext<ContextType>(defaultValue)
   }
 
-  globalScope[symbol] = globalScope[symbol] || createContext<T>(defaultValue)
+  // Use the global scope as a map of symbols to contexts
+  const symbolMap = globalScope as Record<symbol, Context<ContextType>>
 
-  return globalScope[symbol]
+  symbolMap[symbol] = symbolMap[symbol] || createContext<T>(defaultValue)
+
+  return symbolMap[symbol]
 }

package/src/core/lib/globalScope.ts

@@ -16,4 +16,4 @@ function getGlobalScope() {
   throw new Error('@sanity/ui: could not locate global scope')
 }
 
-export const globalScope = getGlobalScope() as any
+export const globalScope: typeof globalThis = getGlobalScope()

package/src/core/lib/isArray.ts

@@ -0,0 +1,3 @@
+export function isArray(val: unknown): val is unknown[] {
+  return Array.isArray(val)
+}

package/src/core/middleware/origin.ts

@@ -1,4 +1,4 @@
-import {Middleware} from '@floating-ui/react-dom'
+import type {Middleware} from '@floating-ui/react-dom'
 
 /**
  * Custom floating-ui middleware which calculates transform-origin X + Y offsets

package/src/core/observers/{elementSizeObserver.ts → elementSize.ts}

@@ -1,4 +1,4 @@
-import {_ResizeObserver} from './resizeObserver'
+import {_ResizeObserver} from './resize'
 
 /**
  * @beta
@@ -43,7 +43,7 @@ export interface _ElementSizeListener {
 /**
  * @internal
  */
-export const _elementSizeObserver = _createElementSizeObserver()
+export const _elementSizeObserver: _ElementSizeObserver = _createElementSizeObserver()
 
 function _createElementRectValueListener(): _ElementSizeListener {
   return {