@sanity/ui 3.0.0-static.17 → 3.0.0-static.18

package/dist/index.d.cts

@@ -5,6 +5,7 @@ import {BoxHeight} from '@sanity/ui/css'
 import {BoxOverflow} from '@sanity/ui/css'
 import {BoxSizing} from '@sanity/ui/css'
 import type {BoxStyleProps} from '@sanity/ui/css'
+import {Breakpoint} from '@sanity/ui/css'
 import type {ButtonStyleProps} from '@sanity/ui/css'
 import {CardContextValue as CardContextValue_2} from './types'
 import {CardStyleProps as CardStyleProps_2} from '@sanity/ui/css'
@@ -1666,7 +1667,7 @@ export declare interface LayerProviderProps {
  */
 export declare interface _MediaStore {
   subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
+  getSnapshot: () => Breakpoint
 }
 
 /**
@@ -3264,7 +3265,7 @@ export declare function useMatchMedia(
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function useMediaIndex(): number
+export declare function useMediaIndex(): Breakpoint
 
 /** @public */
 export declare function usePortal(): PortalContextValue

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import {BoxHeight} from '@sanity/ui/css'
 import {BoxOverflow} from '@sanity/ui/css'
 import {BoxSizing} from '@sanity/ui/css'
 import type {BoxStyleProps} from '@sanity/ui/css'
+import {Breakpoint} from '@sanity/ui/css'
 import type {ButtonStyleProps} from '@sanity/ui/css'
 import {CardContextValue as CardContextValue_2} from './types'
 import {CardStyleProps as CardStyleProps_2} from '@sanity/ui/css'
@@ -1666,7 +1667,7 @@ export declare interface LayerProviderProps {
  */
 export declare interface _MediaStore {
   subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
+  getSnapshot: () => Breakpoint
 }
 
 /**
@@ -3264,7 +3265,7 @@ export declare function useMatchMedia(
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function useMediaIndex(): number
+export declare function useMediaIndex(): Breakpoint
 
 /** @public */
 export declare function usePortal(): PortalContextValue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.17",
+  "version": "3.0.0-static.18",
   "keywords": [
     "react",
     "ui",

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

@@ -1,13 +1,9 @@
 /** @jest-environment node */
 
-import {buildTheme} from '@sanity/ui/theme'
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
 
-import {ThemeProvider} from '../../_compat'
 import {useMediaIndex} from './useMediaIndex'
 
-const theme = buildTheme()
-
 function Log() {
   const mediaIndex = useMediaIndex()
 
@@ -16,21 +12,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,14 +1,14 @@
+import {Breakpoint, BREAKPOINTS} from '@sanity/ui/css'
 import {useMemo, useSyncExternalStore} from 'react'
 
-// TODO: get from theme?
-const media = [360, 600, 900, 1200, 1800, 2400]
+const media = Object.values(BREAKPOINTS)
 
 /**
  * @internal
  */
 export interface _MediaStore {
   subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
+  getSnapshot: () => Breakpoint
 }
 
 type MediaQueryMinWidth = `(min-width: ${number}px)`
@@ -18,14 +18,14 @@ 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)`
+    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(): _MediaStore {
@@ -51,7 +51,7 @@ function _createMediaStore(): _MediaStore {
 
   const getSnapshot = () => {
     for (const {index, mq} of getSizes()) {
-      if (mq.matches) return index
+      if (mq.matches) return index as Breakpoint
     }
 
     return 0
@@ -87,7 +87,7 @@ function _createMediaStore(): _MediaStore {
  *
  * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
  */
-function getServerSnapshot() {
+function getServerSnapshot(): Breakpoint {
   return 0
 }
 
@@ -95,7 +95,7 @@ function getServerSnapshot() {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function useMediaIndex(): number {
+export function useMediaIndex(): Breakpoint {
   const store = useMemo(() => _createMediaStore(), [])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)

package/src/css/constants.ts

@@ -1,5 +1,6 @@
 /** @public */
 export const BREAKPOINTS = {
+  0: 0,
   1: 360,
   2: 600,
   3: 900,

package/src/css/types.ts

@@ -1,24 +1,29 @@
-import {ColorTintKey} from '@sanity/color'
-import {
-  type AvatarSize,
-  type ContainerWidth,
-  type FontCodeSize,
-  type FontHeadingSize,
-  type FontLabelSize,
-  type FontTextSize,
-  type FontWeight,
-  type Hue,
-  type Radius,
-  type Shadow,
-  type Space,
-  type ThemeColorAvatarColorKey as AvatarColor,
-  type ThemeColorCardToneKey as CardTone,
-  type ThemeColorSchemeKey as Scheme,
-  type ThemeColorStateToneKey as ElementTone,
-  type Tint,
+import type {ColorTintKey} from '@sanity/color'
+import type {
+  AvatarSize,
+  ContainerWidth,
+  FontCodeSize,
+  FontHeadingSize,
+  FontLabelSize,
+  FontTextSize,
+  FontWeight,
+  Hue,
+  Radius,
+  Shadow,
+  Space,
+  ThemeColorAvatarColorKey as AvatarColor,
+  ThemeColorCardToneKey as CardTone,
+  ThemeColorSchemeKey as Scheme,
+  ThemeColorStateToneKey as ElementTone,
+  Tint,
 } from '@sanity/ui/theme'
 import CSS from 'csstype'
 
+import type {BREAKPOINTS} from './constants'
+
+/** @public */
+export type Breakpoint = keyof typeof BREAKPOINTS
+
 /** @public */
 export type ResponsiveProp<T> = T | Array<T | null | undefined>