@stratakit/foundations
Version:
Foundational pieces of StrataKit
312 lines (311 loc) • 9.07 kB
JavaScript
import { c as _c } from "react-compiler-runtime";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { PortalContext } from "@ariakit/react/portal";
import { Role } from "@ariakit/react/role";
import cx from "classnames";
import css from "./~styles.css.js";
import { forwardRef, getOwnerDocument, getWindow, identity, isBrowser, isDocument } from "./~utils.js";
import { HtmlSanitizerContext, RootContext, RootNodeContext, spriteSheetId, useRootNode } from "./Root.internal.js";
import { loadStyles } from "./styles.internal.js";
const packageName = "@stratakit/foundations";
const key = `${packageName}@${"0.4.9"}`;
const stack = new Error()?.stack?.split("Error")?.at(-1)?.trim() || "";
const versions = /* @__PURE__ */ new Map([[packageName, "0.4.9"]]);
const Root = forwardRef((props, forwardedRef) => {
throwIfNotSingleton();
const {
children,
synchronizeColorScheme = true,
unstable_htmlSanitizer = identity,
portalContainer: portalContainerProp,
...rest
} = props;
return /* @__PURE__ */ jsx(RootInternal, {
...rest,
ref: forwardedRef,
children: /* @__PURE__ */ jsxs(RootProvider, {
children: [/* @__PURE__ */ jsx(Styles, {}), /* @__PURE__ */ jsx(Fonts, {}), /* @__PURE__ */ jsx(InlineSpriteSheet, {}), synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, {
colorScheme: props.colorScheme
}) : null, /* @__PURE__ */ jsx(SynchronizeAccentColor, {
accentColor: props.unstable_accentColor
}), /* @__PURE__ */ jsx(HtmlSanitizerContext.Provider, {
value: unstable_htmlSanitizer,
children: /* @__PURE__ */ jsx(PortalProvider, {
colorScheme: props.colorScheme,
unstable_accentColor: props.unstable_accentColor,
density: props.density,
portalContainerProp,
children
})
})]
})
});
});
DEV: Root.displayName = "Root";
const RootProvider = (props) => {
const $ = _c(3);
const rootNode = useRootNode();
let t0;
if ($[0] !== props.children || $[1] !== rootNode) {
t0 = jsx(RootContext.Provider, {
value: {
versions,
rootNode,
loadStyles
},
children: props.children
});
$[0] = props.children;
$[1] = rootNode;
$[2] = t0;
} else {
t0 = $[2];
}
return t0;
};
const RootInternal = forwardRef((props, forwardedRef) => {
const {
children,
colorScheme,
unstable_accentColor,
density,
rootNode = isBrowser ? document : void 0,
...rest
} = props;
return /* @__PURE__ */ jsx(Role, {
...rest,
className: cx("\u{1F95D}Root", props.className),
"data-_sk-color-scheme": colorScheme,
"data-_sk-accent-color": unstable_accentColor,
"data-_sk-density": density,
ref: forwardedRef,
children: /* @__PURE__ */ jsx(RootNodeContext.Provider, {
value: rootNode,
children
})
});
});
function SynchronizeColorScheme({
colorScheme
}) {
const rootNode = useRootNode();
React.useInsertionEffect(() => {
if (!rootNode) return;
if (isDocument(rootNode)) {
rootNode.documentElement.dataset.colorScheme = colorScheme;
const meta = rootNode.querySelector("meta[name='color-scheme']");
if (meta) meta.content = colorScheme;
} else if (isShadow(rootNode)) {
rootNode.host.dataset.colorScheme = colorScheme;
}
}, [rootNode, colorScheme]);
return null;
}
function SynchronizeAccentColor({
accentColor
}) {
const rootNode = useRootNode();
React.useInsertionEffect(() => {
if (!rootNode || !isDocument(rootNode)) return;
if (!accentColor) return;
rootNode.documentElement.dataset._skAccentColor = accentColor;
}, [rootNode, accentColor]);
return null;
}
function PortalProvider(props) {
const $ = _c(7);
const [portalContainer, setPortalContainer] = React.useState(null);
let t0;
if ($[0] !== portalContainer || $[1] !== props.children || $[2] !== props.colorScheme || $[3] !== props.density || $[4] !== props.portalContainerProp || $[5] !== props.unstable_accentColor) {
t0 = jsxs(PortalContext.Provider, {
value: portalContainer,
children: [props.children, jsx(PortalContainer, {
colorScheme: props.colorScheme,
unstable_accentColor: props.unstable_accentColor,
density: props.density,
ref: setPortalContainer,
render: props.portalContainerProp
})]
});
$[0] = portalContainer;
$[1] = props.children;
$[2] = props.colorScheme;
$[3] = props.density;
$[4] = props.portalContainerProp;
$[5] = props.unstable_accentColor;
$[6] = t0;
} else {
t0 = $[6];
}
return t0;
}
const PortalContainer = forwardRef((props, forwardedRef) => {
const rootNode = useRootNode();
if (!rootNode) return null;
const destination = isDocument(rootNode) ? rootNode.body : rootNode;
if (!destination) return null;
return ReactDOM.createPortal(/* @__PURE__ */ jsx(Role, {
render: props.render,
className: "\u{1F95D}Root",
"data-_sk-color-scheme": props.colorScheme,
"data-_sk-accent-color": props.unstable_accentColor,
"data-_sk-density": props.density,
style: {
display: "contents"
},
ref: forwardedRef
}), destination);
});
function Styles() {
const $ = _c(6);
const rootNode = useRootNode();
let t0;
let t1;
if ($[0] !== rootNode) {
t0 = function addResetLayer() {
if (!rootNode) {
return;
}
const styleElement = document.createElement("style");
(rootNode.head || rootNode).prepend(styleElement);
styleElement.textContent = "@layer reset;";
};
t1 = [rootNode];
$[0] = rootNode;
$[1] = t0;
$[2] = t1;
} else {
t0 = $[1];
t1 = $[2];
}
React.useInsertionEffect(t0, t1);
let t2;
let t3;
if ($[3] !== rootNode) {
t2 = () => {
if (!rootNode) {
return;
}
const {
cleanup
} = loadStyles(rootNode, {
css,
key
});
return cleanup;
};
t3 = [rootNode];
$[3] = rootNode;
$[4] = t2;
$[5] = t3;
} else {
t2 = $[4];
t3 = $[5];
}
React.useInsertionEffect(t2, t3);
return null;
}
function Fonts() {
const $ = _c(3);
const rootNode = useRootNode();
let t0;
let t1;
if ($[0] !== rootNode) {
t0 = () => {
if (!rootNode) {
return;
}
loadFonts(rootNode);
};
t1 = [rootNode];
$[0] = rootNode;
$[1] = t0;
$[2] = t1;
} else {
t0 = $[1];
t1 = $[2];
}
React.useInsertionEffect(t0, t1);
return null;
}
function InlineSpriteSheet() {
const $ = _c(3);
const rootNode = useRootNode();
let t0;
let t1;
if ($[0] !== rootNode) {
t0 = function maybeCreateSpriteSheet() {
const ownerDocument = getOwnerDocument(rootNode);
if (!ownerDocument) {
return;
}
const spriteSheet = ownerDocument?.getElementById(spriteSheetId);
if (spriteSheet) {
return;
}
const svg = ownerDocument.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.id = spriteSheetId;
svg.style.display = "none";
Object.defineProperty(svg, /* @__PURE__ */ Symbol.for("\u{1F95D}"), {
value: {
icons: /* @__PURE__ */ new Map()
}
});
ownerDocument.body.appendChild(svg);
return () => {
if (svg.isConnected) {
ownerDocument.body.removeChild(svg);
}
};
};
t1 = [rootNode];
$[0] = rootNode;
$[1] = t0;
$[2] = t1;
} else {
t0 = $[1];
t1 = $[2];
}
React.useInsertionEffect(t0, t1);
return null;
}
function loadFonts(rootNode) {
const ownerWindow = getWindow(rootNode);
if (!ownerWindow?.document?.fonts || Array.from(ownerWindow.document.fonts).some((font) => font.family === "InterVariable")) {
return;
}
const interStyles = {
normal: "https://rsms.me/inter/font-files/InterVariable.woff2?v=4.1",
italic: "https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.1"
};
for (const [style, url] of Object.entries(interStyles)) {
const font = new ownerWindow.FontFace("InterVariable", `url(${url}) format("woff2")`, {
display: "swap",
weight: "100 900",
style
});
ownerWindow.document.fonts.add(font);
}
}
function throwIfNotSingleton() {
const symbol = /* @__PURE__ */ Symbol.for("@stratakit/foundations");
const _globalThis = globalThis;
_globalThis[symbol] ??= {
versions: /* @__PURE__ */ new Set()
};
if (stack) _globalThis[symbol].versions?.add(stack);
if ((_globalThis[symbol].versions?.size || 0) > 1) {
console.table(Array.from(_globalThis[symbol].versions || []).map((stack2) => ({
"@stratakit/foundations location": stack2
})));
throw new Error(`Multiple instances of @stratakit/foundations detected. This can lead to unexpected behavior.`);
}
}
function isShadow(node) {
return node instanceof ShadowRoot || node?.nodeType === Node.DOCUMENT_FRAGMENT_NODE && !!node?.host;
}
export {
Root
};