@sanity/ui 2.6.4-canary.0 → 2.6.4-canary.2

package/dist/index.d.mts

@@ -628,7 +628,7 @@ export declare interface CheckboxProps {
 /**
  * @public
  */
-export declare type ClickOutsideListener = (event: MouseEvent) => void
+export declare type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
 
 /**
  * @public
@@ -1432,7 +1432,7 @@ export declare interface MenuProps extends ResponsivePaddingProps {
    * @deprecated Use `shouldFocus="last"` instead.
    */
   focusLast?: boolean
-  onClickOutside?: (event: MouseEvent) => void
+  onClickOutside?: (event: MouseEvent | TouchEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void
@@ -2069,7 +2069,7 @@ export declare interface TabPanelProps extends BoxProps {
    * The `id` of the correlating `Tab` component.
    */
   'aria-labelledby': string
-  id: string
+  'id': string
 }
 
 /**
@@ -2080,14 +2080,14 @@ export declare interface TabProps {
    * The `id` of the correlating `TabPanel` component.
    */
   'aria-controls': string
-  id: string
-  icon?: React.ElementType | React.ReactNode
-  focused?: boolean
-  fontSize?: number | number[]
-  label?: React.ReactNode
-  padding?: number | number[]
-  selected?: boolean
-  tone?: ButtonTone
+  'id': string
+  'icon'?: React.ElementType | React.ReactNode
+  'focused'?: boolean
+  'fontSize'?: number | number[]
+  'label'?: React.ReactNode
+  'padding'?: number | number[]
+  'selected'?: boolean
+  'tone'?: ButtonTone
 }
 
 /**
@@ -2649,13 +2649,22 @@ export declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPri
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
 /**
+ * Use the callback version of `elementsArg` if you're using `useRef` to handle elements:
+ * ```tsx
+ * useClickOutside(
+ *   () => {},
+ *   () => [ref.current],
+ * )
+ *
  * @public
  */
 export declare function useClickOutside(
   listener: ClickOutsideListener,
-  elementsArg?: Array<HTMLElement | HTMLElement[] | null>,
+  elementsArg?:
+    | Array<HTMLElement | HTMLElement[] | null>
+    | (() => Array<HTMLElement | HTMLElement[] | null>),
   boundaryElement?: HTMLElement | null,
-): (el: HTMLElement | null) => void
+): void
 
 /**
  * @beta
@@ -2713,6 +2722,18 @@ export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => vo
  */
 export declare function useLayer(): LayerContextValue
 
+/**
+ * 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)
+ *
+ * @public
+ */
+export declare function useMatchMedia(
+  mediaQueryString: `(${string})`,
+  getServerSnapshot?: () => boolean,
+): boolean
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
@@ -2725,15 +2746,30 @@ export declare function useMediaIndex(): number
 export declare function usePortal(): PortalContextValue
 
 /**
+ * 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)
+ *
+ * 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
+ * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
+ *
  * @public
  */
-export declare function usePrefersDark(): boolean
+export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
 
 /**
  * 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)
+ *
+ * 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
+ * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
+ *
  * @public
  */
-export declare function usePrefersReducedMotion(): boolean
+export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
 
 /**
  * @public

package/dist/index.d.ts

@@ -628,7 +628,7 @@ export declare interface CheckboxProps {
 /**
  * @public
  */
-export declare type ClickOutsideListener = (event: MouseEvent) => void
+export declare type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
 
 /**
  * @public
@@ -1432,7 +1432,7 @@ export declare interface MenuProps extends ResponsivePaddingProps {
    * @deprecated Use `shouldFocus="last"` instead.
    */
   focusLast?: boolean
-  onClickOutside?: (event: MouseEvent) => void
+  onClickOutside?: (event: MouseEvent | TouchEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void
@@ -2069,7 +2069,7 @@ export declare interface TabPanelProps extends BoxProps {
    * The `id` of the correlating `Tab` component.
    */
   'aria-labelledby': string
-  id: string
+  'id': string
 }
 
 /**
@@ -2080,14 +2080,14 @@ export declare interface TabProps {
    * The `id` of the correlating `TabPanel` component.
    */
   'aria-controls': string
-  id: string
-  icon?: React.ElementType | React.ReactNode
-  focused?: boolean
-  fontSize?: number | number[]
-  label?: React.ReactNode
-  padding?: number | number[]
-  selected?: boolean
-  tone?: ButtonTone
+  'id': string
+  'icon'?: React.ElementType | React.ReactNode
+  'focused'?: boolean
+  'fontSize'?: number | number[]
+  'label'?: React.ReactNode
+  'padding'?: number | number[]
+  'selected'?: boolean
+  'tone'?: ButtonTone
 }
 
 /**
@@ -2649,13 +2649,22 @@ export declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPri
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
 /**
+ * Use the callback version of `elementsArg` if you're using `useRef` to handle elements:
+ * ```tsx
+ * useClickOutside(
+ *   () => {},
+ *   () => [ref.current],
+ * )
+ *
  * @public
  */
 export declare function useClickOutside(
   listener: ClickOutsideListener,
-  elementsArg?: Array<HTMLElement | HTMLElement[] | null>,
+  elementsArg?:
+    | Array<HTMLElement | HTMLElement[] | null>
+    | (() => Array<HTMLElement | HTMLElement[] | null>),
   boundaryElement?: HTMLElement | null,
-): (el: HTMLElement | null) => void
+): void
 
 /**
  * @beta
@@ -2713,6 +2722,18 @@ export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => vo
  */
 export declare function useLayer(): LayerContextValue
 
+/**
+ * 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)
+ *
+ * @public
+ */
+export declare function useMatchMedia(
+  mediaQueryString: `(${string})`,
+  getServerSnapshot?: () => boolean,
+): boolean
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
@@ -2725,15 +2746,30 @@ export declare function useMediaIndex(): number
 export declare function usePortal(): PortalContextValue
 
 /**
+ * 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)
+ *
+ * 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
+ * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
+ *
  * @public
  */
-export declare function usePrefersDark(): boolean
+export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
 
 /**
  * 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)
+ *
+ * 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
+ * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
+ *
  * @public
  */
-export declare function usePrefersReducedMotion(): boolean
+export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
 
 /**
  * @public