braid-design-system
Version:
Themeable design system for the SEEK Group
73 lines (70 loc) • 3.36 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import assert from "assert";
import dedent from "dedent";
import { forwardRef, useContext, createContext } from "react";
import { ensureResetImported } from "../../css/reset/resetTracker.mjs";
import { BraidTestProviderContext } from "../BraidTestProvider/BraidTestProviderContext.mjs";
import { BraidThemeContext } from "./BraidThemeContext.mjs";
import { BreakpointProvider } from "./BreakpointContext.mjs";
import { VanillaThemeContainer } from "./VanillaThemeContainer.mjs";
import { darkMode } from "../../css/atoms/sprinkles.css.mjs";
if (process.env.NODE_ENV === "development") {
ensureResetImported();
}
const makeLinkComponent = (render) => ({ __forwardRef__: forwardRef(render) });
const DefaultLinkComponent = makeLinkComponent((props, ref) => /* @__PURE__ */ jsx("a", { ref, ...props }));
const LinkComponentContext = createContext(DefaultLinkComponent);
const useLinkComponent = (ref) => {
const linkComponent = useContext(LinkComponentContext);
assert(
!ref || "__forwardRef__" in linkComponent,
dedent`
You're passing a ref to a Braid link, but your app is providing a custom link component to 'BraidProvider' that doesn't appear to support refs.
To fix this, you need to use Braid's 'makeLinkComponent' helper function when creating your custom link component. This ensures that refs are forwarded correctly, and allows us to silence this error message.
For more information and an example implementation, check out the documentation for 'BraidProvider': https://seek-oss.github.io/braid-design-system/components/BraidProvider
`
);
if ("__forwardRef__" in linkComponent) {
return linkComponent.__forwardRef__;
}
return linkComponent;
};
const BraidProvider = ({
theme,
styleBody = true,
linkComponent,
children
}) => {
const alreadyInBraidProvider = Boolean(useContext(BraidThemeContext));
const inTestProvider = useContext(BraidTestProviderContext);
const linkComponentFromContext = useContext(LinkComponentContext);
assert(
inTestProvider || typeof navigator === "undefined" || navigator.userAgent === void 0 || navigator.userAgent.indexOf("jsdom") === -1,
`Rendering 'BraidProvider' in Jest is not supported as it expects a browser environment. Please switch to 'BraidTestProvider'. See the docs for more info: https://seek-oss.github.io/braid-design-system/components/BraidTestProvider`
);
return /* @__PURE__ */ jsxs(BraidThemeContext.Provider, { value: theme, children: [
styleBody ? /* @__PURE__ */ jsx("style", { type: "text/css", children: `
html,body{margin:0;padding:0;background:${theme.background.lightMode}}
html.${darkMode},html.${darkMode} body{color-scheme:dark;background:${theme.background.darkMode}}
` }) : null,
/* @__PURE__ */ jsx(
VanillaThemeContainer,
{
theme: theme.vanillaTheme,
setDefaultTextTones: !alreadyInBraidProvider,
children: /* @__PURE__ */ jsx(
LinkComponentContext.Provider,
{
value: linkComponent || linkComponentFromContext,
children: alreadyInBraidProvider || inTestProvider ? children : /* @__PURE__ */ jsx(BreakpointProvider, { children })
}
)
}
)
] });
};
export {
BraidProvider,
makeLinkComponent,
useLinkComponent
};