@primer/react 38.30.1-rc.bce2a87c7 → 38.31.0-rc.099285e6a

package/dist/hooks/useResizeObserver.js

@@ -1,49 +1,40 @@
-import { useState, useRef } from 'react';
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
-
-// https://gist.github.com/strothj/708afcf4f01dd04de8f49c92e88093c3
-
+import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
+import { useRef, useState } from "react";
+//#region src/hooks/useResizeObserver.ts
 function useResizeObserver(callback, target, depsArray = [], enabled = true) {
-  const [targetClientRect, setTargetClientRect] = useState(null);
-  const savedCallback = useRef(callback);
-  useIsomorphicLayoutEffect(() => {
-    savedCallback.current = callback;
-  });
-  useIsomorphicLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    const targetEl = target && 'current' in target ? target.current : document.documentElement;
-    if (!targetEl) {
-      return;
-    }
-    if (typeof ResizeObserver === 'function') {
-      const observer = new ResizeObserver(entries => {
-        savedCallback.current(entries);
-      });
-      observer.observe(targetEl);
-      return () => {
-        observer.disconnect();
-      };
-    } else {
-      const saveTargetDimensions = () => {
-        const currTargetRect = targetEl.getBoundingClientRect();
-        if (currTargetRect.width !== (targetClientRect === null || targetClientRect === void 0 ? void 0 : targetClientRect.width) || currTargetRect.height !== targetClientRect.height) {
-          savedCallback.current([{
-            contentRect: currTargetRect
-          }]);
-        }
-        setTargetClientRect(currTargetRect);
-      };
-      // eslint-disable-next-line github/prefer-observers
-      window.addEventListener('resize', saveTargetDimensions);
-      return () => {
-        window.removeEventListener('resize', saveTargetDimensions);
-      };
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [target === null || target === void 0 ? void 0 : target.current, enabled, ...depsArray]);
+	const [targetClientRect, setTargetClientRect] = useState(null);
+	const savedCallback = useRef(callback);
+	useIsomorphicLayoutEffect(() => {
+		savedCallback.current = callback;
+	});
+	useIsomorphicLayoutEffect(() => {
+		if (!enabled) return;
+		const targetEl = target && "current" in target ? target.current : document.documentElement;
+		if (!targetEl) return;
+		if (typeof ResizeObserver === "function") {
+			const observer = new ResizeObserver((entries) => {
+				savedCallback.current(entries);
+			});
+			observer.observe(targetEl);
+			return () => {
+				observer.disconnect();
+			};
+		} else {
+			const saveTargetDimensions = () => {
+				const currTargetRect = targetEl.getBoundingClientRect();
+				if (currTargetRect.width !== (targetClientRect === null || targetClientRect === void 0 ? void 0 : targetClientRect.width) || currTargetRect.height !== targetClientRect.height) savedCallback.current([{ contentRect: currTargetRect }]);
+				setTargetClientRect(currTargetRect);
+			};
+			window.addEventListener("resize", saveTargetDimensions);
+			return () => {
+				window.removeEventListener("resize", saveTargetDimensions);
+			};
+		}
+	}, [
+		target === null || target === void 0 ? void 0 : target.current,
+		enabled,
+		...depsArray
+	]);
 }
-
+//#endregion
 export { useResizeObserver };

package/dist/hooks/useResponsiveValue.d.ts

@@ -1,24 +1,15 @@
-export declare const viewportRanges: {
-    narrow: string;
-    regular: string;
-    wide: string;
-};
-export type ResponsiveValue<TRegular, TNarrow = TRegular, TWide = TRegular> = {
-    narrow?: TNarrow;
-    regular?: TRegular;
-    wide?: TWide;
+//#region src/hooks/useResponsiveValue.d.ts
+type ResponsiveValue<TRegular, TNarrow = TRegular, TWide = TRegular> = {
+  narrow?: TNarrow;
+  regular?: TRegular;
+  wide?: TWide;
 };
 /**
  * Flattens all possible value types into single union type
  * For example, if `T` is `'none' | 'line' | Responsive<'none' | 'line' | 'filled'>`,
  * `FlattenResponsiveValue<T>` will be `'none' | 'line' | 'filled'`
  */
-export type FlattenResponsiveValue<T> = (T extends ResponsiveValue<infer TRegular, infer TNarrow, infer TWide> ? TRegular | TNarrow | TWide : never) | Exclude<T, ResponsiveValue<any>>;
-/**
- * Checks if the value is a responsive value.
- * In other words, is it an object with viewport range keys?
- */
-export declare function isResponsiveValue(value: any): value is ResponsiveValue<any>;
+type FlattenResponsiveValue<T> = (T extends ResponsiveValue<infer TRegular, infer TNarrow, infer TWide> ? TRegular | TNarrow | TWide : never) | Exclude<T, ResponsiveValue<any>>;
 /**
  * Resolves responsive values based on the current viewport width.
  * For example, if the current viewport width is narrow (less than 768px), the value of `{regular: 'foo', narrow: 'bar'}` will resolve to `'bar'`.
@@ -29,5 +20,6 @@ export declare function isResponsiveValue(value: any): value is ResponsiveValue<
  * const value = useResponsiveValue({regular: 'foo', narrow: 'bar'})
  * console.log(value) // 'bar'
  */
-export declare function useResponsiveValue<T, F>(value: T, fallback: F): FlattenResponsiveValue<T> | F;
-//# sourceMappingURL=useResponsiveValue.d.ts.map
+declare function useResponsiveValue<T, F>(value: T, fallback: F): FlattenResponsiveValue<T> | F;
+//#endregion
+export { FlattenResponsiveValue, ResponsiveValue, useResponsiveValue };

package/dist/hooks/useResponsiveValue.js

@@ -1,67 +1,47 @@
-import { useMedia } from './useMedia.js';
-
-// This file contains utilities for working with responsive values.
-
-// The viewport range values from @primer/primtives don't work in Chrome
-// because they use `em` units inside `calc()` (e.g., calc(48em - 0.02px)).
-// As a temporary workaround, we're hardcoding the viewport ranges in `px` units.
-// TODO: Use viewport range tokens from @primer/primitives
+import { useMedia } from "./useMedia.js";
+//#region src/hooks/useResponsiveValue.ts
 const viewportRanges = {
-  narrow: '(max-width: calc(768px - 0.02px))',
-  // < 768px
-  regular: '(min-width: 768px)',
-  // >= 768px
-  wide: '(min-width: 1400px)' // >= 1400px
+	narrow: "(max-width: calc(768px - 0.02px))",
+	regular: "(min-width: 768px)",
+	wide: "(min-width: 1400px)"
 };
-
 /**
- * Flattens all possible value types into single union type
- * For example, if `T` is `'none' | 'line' | Responsive<'none' | 'line' | 'filled'>`,
- * `FlattenResponsiveValue<T>` will be `'none' | 'line' | 'filled'`
- */
-
+* Flattens all possible value types into single union type
+* For example, if `T` is `'none' | 'line' | Responsive<'none' | 'line' | 'filled'>`,
+* `FlattenResponsiveValue<T>` will be `'none' | 'line' | 'filled'`
+*/
 /**
- * Checks if the value is a responsive value.
- * In other words, is it an object with viewport range keys?
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+* Checks if the value is a responsive value.
+* In other words, is it an object with viewport range keys?
+*/
 function isResponsiveValue(value) {
-  return typeof value === 'object' && Object.keys(value).some(key => ['narrow', 'regular', 'wide'].includes(key));
+	return typeof value === "object" && Object.keys(value).some((key) => [
+		"narrow",
+		"regular",
+		"wide"
+	].includes(key));
 }
-
 /**
- * Resolves responsive values based on the current viewport width.
- * For example, if the current viewport width is narrow (less than 768px), the value of `{regular: 'foo', narrow: 'bar'}` will resolve to `'bar'`.
- *
- * @deprecated Prefer responsive data attributes with `getResponsiveAttributes` and CSS media queries instead.
- *
- * @example
- * const value = useResponsiveValue({regular: 'foo', narrow: 'bar'})
- * console.log(value) // 'bar'
- */
-// TODO: Improve SSR support
+* Resolves responsive values based on the current viewport width.
+* For example, if the current viewport width is narrow (less than 768px), the value of `{regular: 'foo', narrow: 'bar'}` will resolve to `'bar'`.
+*
+* @deprecated Prefer responsive data attributes with `getResponsiveAttributes` and CSS media queries instead.
+*
+* @example
+* const value = useResponsiveValue({regular: 'foo', narrow: 'bar'})
+* console.log(value) // 'bar'
+*/
 function useResponsiveValue(value, fallback) {
-  const isNarrowViewport = useMedia(viewportRanges.narrow, false);
-  const isRegularViewport = useMedia(viewportRanges.regular, false);
-  const isWideViewport = useMedia(viewportRanges.wide, false);
-  if (isResponsiveValue(value)) {
-    const responsiveValue = value;
-    if (isNarrowViewport && "narrow" in responsiveValue) {
-      return responsiveValue.narrow;
-    } else {
-      if (isWideViewport && "wide" in responsiveValue) {
-        return responsiveValue.wide;
-      } else {
-        if (isRegularViewport && "regular" in responsiveValue) {
-          return responsiveValue.regular;
-        } else {
-          return fallback;
-        }
-      }
-    }
-  } else {
-    return value;
-  }
+	const isNarrowViewport = useMedia(viewportRanges.narrow, false);
+	const isRegularViewport = useMedia(viewportRanges.regular, false);
+	const isWideViewport = useMedia(viewportRanges.wide, false);
+	if (isResponsiveValue(value)) {
+		const responsiveValue = value;
+		if (isNarrowViewport && "narrow" in responsiveValue) return responsiveValue.narrow;
+		else if (isWideViewport && "wide" in responsiveValue) return responsiveValue.wide;
+		else if (isRegularViewport && "regular" in responsiveValue) return responsiveValue.regular;
+		else return fallback;
+	} else return value;
 }
-
+//#endregion
 export { isResponsiveValue, useResponsiveValue, viewportRanges };

package/dist/hooks/useSafeTimeout.d.ts

@@ -1,3 +1,4 @@
+//#region src/hooks/useSafeTimeout.d.ts
 type SetTimeout = (handler: TimerHandler, timeout?: number, ...args: unknown[]) => number;
 type ClearTimeout = (id: number) => void;
 /**
@@ -5,9 +6,9 @@ type ClearTimeout = (id: number) => void;
  *
  * This hook ensures that all timeouts are cleared when the component unmounts.
  */
-export default function useSafeTimeout(): {
-    safeSetTimeout: SetTimeout;
-    safeClearTimeout: ClearTimeout;
+declare function useSafeTimeout(): {
+  safeSetTimeout: SetTimeout;
+  safeClearTimeout: ClearTimeout;
 };
-export {};
-//# sourceMappingURL=useSafeTimeout.d.ts.map
+//#endregion
+export { useSafeTimeout as default };

package/dist/hooks/useSafeTimeout.js

@@ -1,33 +1,30 @@
-import { useRef, useCallback, useEffect } from 'react';
-
+import { useCallback, useEffect, useRef } from "react";
+//#region src/hooks/useSafeTimeout.ts
 /**
- * Safely call `setTimeout` and `clearTimeout` within a component.
- *
- * This hook ensures that all timeouts are cleared when the component unmounts.
- */
+* Safely call `setTimeout` and `clearTimeout` within a component.
+*
+* This hook ensures that all timeouts are cleared when the component unmounts.
+*/
 function useSafeTimeout() {
-  const timers = useRef(new Set());
-  const safeSetTimeout = useCallback((handler, timeout, ...args) => {
-    const id = window.setTimeout(handler, timeout, ...args);
-    timers.current.add(id);
-    return id;
-  }, []);
-  const safeClearTimeout = useCallback(id => {
-    clearTimeout(id);
-    timers.current.delete(id);
-  }, []);
-  useEffect(() => {
-    return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      for (const id of timers.current) {
-        clearTimeout(id);
-      }
-    };
-  }, []);
-  return {
-    safeSetTimeout,
-    safeClearTimeout
-  };
+	const timers = useRef(/* @__PURE__ */ new Set());
+	const safeSetTimeout = useCallback((handler, timeout, ...args) => {
+		const id = window.setTimeout(handler, timeout, ...args);
+		timers.current.add(id);
+		return id;
+	}, []);
+	const safeClearTimeout = useCallback((id) => {
+		clearTimeout(id);
+		timers.current.delete(id);
+	}, []);
+	useEffect(() => {
+		return () => {
+			for (const id of timers.current) clearTimeout(id);
+		};
+	}, []);
+	return {
+		safeSetTimeout,
+		safeClearTimeout
+	};
 }
-
+//#endregion
 export { useSafeTimeout as default };

package/dist/hooks/useScrollFlash.js

@@ -1,27 +1,34 @@
-import { useEffect } from 'react';
-
+import { c } from "react-compiler-runtime";
+import { useEffect } from "react";
+//#region src/hooks/useScrollFlash.ts
 /**
- * This hook will flash the scrollbars for a ref of a container that has scrollable overflow
- * @param scrollContainerRef The ref of the scrollable content
- */
+* This hook will flash the scrollbars for a ref of a container that has scrollable overflow
+* @param scrollContainerRef The ref of the scrollable content
+*/
 function useScrollFlash(scrollContainerRef) {
-  // https://adxlv.computer/projects/flash-scrollers/
-  useEffect(() => {
-    const scrollContainer = scrollContainerRef.current;
-    if (!scrollContainer) {
-      return;
-    }
-
-    // Defer to the next frame to avoid forcing a synchronous reflow
-    // when the effect runs immediately after React commits DOM changes.
-    const id = requestAnimationFrame(() => {
-      const currentScroll = scrollContainer.scrollTop;
-      const altScroll = currentScroll < 1 ? currentScroll + 1 : currentScroll - 1;
-      scrollContainer.scrollTop = altScroll;
-      scrollContainer.scrollTop = currentScroll;
-    });
-    return () => cancelAnimationFrame(id);
-  }, [scrollContainerRef]);
+	const $ = c(3);
+	let t0;
+	let t1;
+	if ($[0] !== scrollContainerRef) {
+		t0 = () => {
+			const scrollContainer = scrollContainerRef.current;
+			if (!scrollContainer) return;
+			const id = requestAnimationFrame(() => {
+				const currentScroll = scrollContainer.scrollTop;
+				scrollContainer.scrollTop = currentScroll < 1 ? currentScroll + 1 : currentScroll - 1;
+				scrollContainer.scrollTop = currentScroll;
+			});
+			return () => cancelAnimationFrame(id);
+		};
+		t1 = [scrollContainerRef];
+		$[0] = scrollContainerRef;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
 }
-
+//#endregion
 export { useScrollFlash as default };

package/dist/hooks/useSlots.d.ts

@@ -1,4 +1,6 @@
-import React from 'react';
+import React from "react";
+
+//#region src/hooks/useSlots.d.ts
 /**
  * useSlots - Extract slot components from children for SSR-compatible slot APIs.
  *
@@ -50,15 +52,10 @@ import React from 'react';
 type Props = any;
 type ComponentMatcher = React.ElementType<Props>;
 type ComponentAndPropsMatcher = [ComponentMatcher, (props: Props) => boolean];
-export type SlotConfig = Record<string, ComponentMatcher | ComponentAndPropsMatcher>;
-type SlotElements<Config extends SlotConfig> = {
-    [Property in keyof Config]: SlotValue<Config, Property>;
-};
-type SlotValue<Config, Property extends keyof Config> = Config[Property] extends React.ElementType ? React.ReactElement<React.ComponentPropsWithoutRef<Config[Property]>, Config[Property]> : Config[Property] extends readonly [
-    infer ElementType extends React.ElementType,
-    infer _testFn
-] ? React.ReactElement<React.ComponentPropsWithoutRef<ElementType>, ElementType> : never;
+type SlotConfig = Record<string, ComponentMatcher | ComponentAndPropsMatcher>;
+type SlotElements<Config extends SlotConfig> = { [Property in keyof Config]: SlotValue<Config, Property> };
+type SlotValue<Config, Property extends keyof Config> = Config[Property] extends React.ElementType ? React.ReactElement<React.ComponentPropsWithoutRef<Config[Property]>, Config[Property]> : Config[Property] extends readonly [infer ElementType extends React.ElementType, infer _testFn] ? React.ReactElement<React.ComponentPropsWithoutRef<ElementType>, ElementType> : never;
 /** Extract slot components from children. See file header for details. */
-export declare function useSlots<Config extends SlotConfig>(children: React.ReactNode, config: Config): [Partial<SlotElements<Config>>, React.ReactNode[]];
-export {};
-//# sourceMappingURL=useSlots.d.ts.map
+declare function useSlots<Config extends SlotConfig>(children: React.ReactNode, config: Config): [Partial<SlotElements<Config>>, React.ReactNode[]];
+//#endregion
+export { SlotConfig, useSlots };