@primer/react 38.35.1-rc.f5a561aea → 38.36.0-rc.3fb350b1f

package/dist/experimental/SelectPanel2/SelectPanel.js

@@ -43,10 +43,11 @@ const responsiveButtonSizes = {
 const Panel = ({ title, description, variant: propsVariant, selectionVariant = "multiple", id, defaultOpen = false, open: propsOpen, anchorRef: providedAnchorRef, anchoredPositionSettings, onCancel: propsOnCancel, onClearSelection: propsOnClearSelection, onSubmit: propsOnSubmit, width = "medium", maxHeight = "large", className, ...props }) => {
 	var _position$top, _position$left, _slots$header;
 	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-	const currentVariant = useResponsiveValue(Object.assign({
+	const responsiveVariants = Object.assign({
 		regular: "anchored",
 		narrow: "full-screen"
-	}, typeof propsVariant === "string" ? { regular: propsVariant } : propsVariant), "anchored");
+	}, typeof propsVariant === "string" ? { regular: propsVariant } : propsVariant);
+	const currentVariant = useResponsiveValue(responsiveVariants, "anchored");
 	if (propsOpen !== void 0 && internalOpen !== propsOpen) setInternalOpen(propsOpen);
 	let Anchor;
 	const anchorRef = useProvidedRefOrCreate(providedAnchorRef);
@@ -348,18 +349,20 @@ const SelectPanelFooter = ({ ...props }) => {
 SelectPanelFooter.displayName = "SelectPanelFooter";
 SelectPanelFooter.__SLOT__ = Symbol("SelectPanel.Footer");
 const SecondaryButton = (props) => {
+	const size = useResponsiveValue(responsiveButtonSizes, "small");
 	return /*#__PURE__*/ jsx(ButtonComponent, {
 		type: "button",
-		size: useResponsiveValue(responsiveButtonSizes, "small"),
+		size,
 		block: true,
 		...props
 	});
 };
 SecondaryButton.displayName = "SecondaryButton";
 const SecondaryLink = ({ className, ...props }) => {
+	const size = useResponsiveValue(responsiveButtonSizes, "small");
 	return /*#__PURE__*/ jsx(ButtonComponent, {
 		as: Link,
-		size: useResponsiveValue(responsiveButtonSizes, "small"),
+		size,
 		variant: "invisible",
 		block: true,
 		...props,

package/dist/hooks/useFocusZone.js

@@ -5,7 +5,8 @@ import { FocusKeys as FocusKeys$1, focusZone } from "@primer/behaviors";
 function useFocusZone(settings = {}, dependencies = []) {
 	const containerRef = useProvidedRefOrCreate(settings.containerRef);
 	const useActiveDescendant = !!settings.activeDescendantFocus;
-	const activeDescendantControlRef = useProvidedRefOrCreate(typeof settings.activeDescendantFocus === "boolean" || !settings.activeDescendantFocus ? void 0 : settings.activeDescendantFocus);
+	const passedActiveDescendantRef = typeof settings.activeDescendantFocus === "boolean" || !settings.activeDescendantFocus ? void 0 : settings.activeDescendantFocus;
+	const activeDescendantControlRef = useProvidedRefOrCreate(passedActiveDescendantRef);
 	const disabled = settings.disabled;
 	const abortController = React.useRef();
 	useEffect(() => {

package/dist/internal/components/ThemeProviderBase.js

@@ -0,0 +1,50 @@
+import { ThemeContext } from "../../ThemeContext.js";
+import { c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/internal/components/ThemeProviderBase.tsx
+const ThemeProviderBase = (t0) => {
+	const $ = c(11);
+	const { children, contextOnly, value } = t0;
+	if (contextOnly) {
+		let t1;
+		if ($[0] !== children || $[1] !== value) {
+			t1 = /*#__PURE__*/ jsx(ThemeContext.Provider, {
+				value,
+				children
+			});
+			$[0] = children;
+			$[1] = value;
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
+	const t1 = value.colorMode === "auto" ? "auto" : value.colorScheme.includes("dark") ? "dark" : "light";
+	let t2;
+	if ($[3] !== children || $[4] !== t1 || $[5] !== value.dayScheme || $[6] !== value.nightScheme) {
+		t2 = /*#__PURE__*/ jsx("div", {
+			"data-component": "ThemeProvider",
+			"data-color-mode": t1,
+			"data-light-theme": value.dayScheme,
+			"data-dark-theme": value.nightScheme,
+			children
+		});
+		$[3] = children;
+		$[4] = t1;
+		$[5] = value.dayScheme;
+		$[6] = value.nightScheme;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== t2 || $[9] !== value) {
+		t3 = /*#__PURE__*/ jsx(ThemeContext.Provider, {
+			value,
+			children: t2
+		});
+		$[8] = t2;
+		$[9] = value;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+};
+//#endregion
+export { ThemeProviderBase };

package/dist/internal/hooks/useThemeProvider.js

@@ -0,0 +1,71 @@
+import { useSyncedState } from "../../hooks/useSyncedState.js";
+import { useTheme } from "../../useTheme.js";
+import { c } from "react-compiler-runtime";
+import React from "react";
+//#region src/internal/hooks/useThemeProvider.ts
+const defaultColorMode = "day";
+const defaultDayScheme = "light";
+const defaultNightScheme = "dark";
+function useThemeProvider(props) {
+	var _ref, _props$colorMode, _ref2, _props$dayScheme, _ref3, _props$nightScheme;
+	const $ = c(12);
+	const parentValue = useTheme();
+	const [colorMode, setColorMode] = useSyncedState((_ref = (_props$colorMode = props.colorMode) !== null && _props$colorMode !== void 0 ? _props$colorMode : parentValue.colorMode) !== null && _ref !== void 0 ? _ref : defaultColorMode);
+	const [dayScheme, setDayScheme] = useSyncedState((_ref2 = (_props$dayScheme = props.dayScheme) !== null && _props$dayScheme !== void 0 ? _props$dayScheme : parentValue.dayScheme) !== null && _ref2 !== void 0 ? _ref2 : defaultDayScheme);
+	const [nightScheme, setNightScheme] = useSyncedState((_ref3 = (_props$nightScheme = props.nightScheme) !== null && _props$nightScheme !== void 0 ? _props$nightScheme : parentValue.nightScheme) !== null && _ref3 !== void 0 ? _ref3 : defaultNightScheme);
+	const systemColorMode = useSystemColorMode();
+	const resolvedColorMode = colorMode === "auto" ? systemColorMode : colorMode;
+	const colorScheme = resolvedColorMode === "day" || resolvedColorMode === "light" ? dayScheme : nightScheme;
+	let t0;
+	if ($[0] !== colorMode || $[1] !== colorScheme || $[2] !== dayScheme || $[3] !== nightScheme || $[4] !== resolvedColorMode || $[5] !== setColorMode || $[6] !== setDayScheme || $[7] !== setNightScheme) {
+		t0 = {
+			colorScheme,
+			colorMode,
+			resolvedColorMode,
+			dayScheme,
+			nightScheme,
+			setColorMode,
+			setDayScheme,
+			setNightScheme
+		};
+		$[0] = colorMode;
+		$[1] = colorScheme;
+		$[2] = dayScheme;
+		$[3] = nightScheme;
+		$[4] = resolvedColorMode;
+		$[5] = setColorMode;
+		$[6] = setDayScheme;
+		$[7] = setNightScheme;
+		$[8] = t0;
+	} else t0 = $[8];
+	const value = t0;
+	let t1;
+	if ($[9] !== parentValue || $[10] !== value) {
+		t1 = {
+			parentValue,
+			value
+		};
+		$[9] = parentValue;
+		$[10] = value;
+		$[11] = t1;
+	} else t1 = $[11];
+	return t1;
+}
+function subscribeToSystemColorMode(callback) {
+	var _window, _window$matchMedia;
+	const media = (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
+	media === null || media === void 0 || media.addEventListener("change", callback);
+	return () => media === null || media === void 0 ? void 0 : media.removeEventListener("change", callback);
+}
+function useSystemColorMode() {
+	return React.useSyncExternalStore(subscribeToSystemColorMode, getSystemColorMode, _temp);
+}
+function _temp() {
+	return "day";
+}
+function getSystemColorMode() {
+	var _window2, _window2$matchMedia, _window2$matchMedia$c;
+	return (_window2 = window) !== null && _window2 !== void 0 && (_window2$matchMedia = _window2.matchMedia) !== null && _window2$matchMedia !== void 0 && (_window2$matchMedia$c = _window2$matchMedia.call(_window2, "(prefers-color-scheme: dark)")) !== null && _window2$matchMedia$c !== void 0 && _window2$matchMedia$c.matches ? "night" : "day";
+}
+//#endregion
+export { useThemeProvider };