@ndlib/component-library 1.0.1 → 1.0.3

package/dist/components/providers/media.d.ts

@@ -4,6 +4,7 @@ type MediaContextType = {
     breakpoint: number;
 };
 export declare const MediaSizeProvider: React.FC<PropsWithChildren<{
+    ssrBreakpoint?: number;
     useHydrationPatch?: boolean;
 }>>;
 export declare const useMediaQuery: () => MediaContextType;

package/dist/components/providers/media.js

@@ -5,8 +5,9 @@ const MediaContext = createContext({
     screenSize: -1,
     breakpoint: -1,
 });
-export const MediaSizeProvider = ({ useHydrationPatch, children }) => {
+export const MediaSizeProvider = ({ useHydrationPatch, ssrBreakpoint: ssrBreakpointParam, children }) => {
     const [renderCount, setRenderCount] = useState(0);
+    const ssrBreakpoint = ssrBreakpointParam || -1;
     const theme = useTheme();
     const breakpoints = theme.breakpoints.map((bp) => parseInt(bp.slice(0, -2)), [theme]);
     const getBreakpoint = (screenSize) => {
@@ -15,7 +16,7 @@ export const MediaSizeProvider = ({ useHydrationPatch, children }) => {
     };
     const initialScreenSize = useHydrationPatch || typeof window === 'undefined' ? -1 : window.innerWidth;
     const initialBreakpoint = useHydrationPatch || typeof window === 'undefined'
-        ? -1
+        ? ssrBreakpoint
         : getBreakpoint(window.innerWidth);
     const [screenSize, setScreenSize] = useState(initialScreenSize);
     const [breakpoint, setBreakpoint] = useState(initialBreakpoint);

package/dist/components/providers/ui.d.ts

@@ -12,6 +12,7 @@ export type UiConfig = {
     loadFonts?: boolean;
     loadGlobalStyles?: boolean;
     includeTheme?: boolean;
+    ssrBreakpoint?: number;
     useHydrationPatch?: boolean;
 };
 type UiProviderProps = PropsWithChildren<UiConfig>;

package/dist/components/providers/ui.js

@@ -10,7 +10,7 @@ import { MediaSizeProvider } from './media';
 import StructuredData from '../composites/StructuredData';
 import { SnackBarProvider } from './snackBar';
 import { UniqueIdProvider } from './uniqueIds';
-export const UiProvider = ({ structuredData, env, components, alertsConfig, children, includeTheme = true, loadFonts, loadGlobalStyles, useHydrationPatch = true, }) => {
-    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProvider, Object.assign({ useHydrationPatch: useHydrationPatch }, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(UniqueIdProvider, { children: _jsx(SnackBarProvider, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) }) }) })) })), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {}), structuredData && _jsx(StructuredData, Object.assign({}, structuredData))] })));
+export const UiProvider = ({ structuredData, env, components, alertsConfig, children, includeTheme = true, loadFonts, loadGlobalStyles, useHydrationPatch, ssrBreakpoint, }) => {
+    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProvider, Object.assign({ ssrBreakpoint: ssrBreakpoint, useHydrationPatch: useHydrationPatch }, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(UniqueIdProvider, { children: _jsx(SnackBarProvider, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) }) }) })) })), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {}), structuredData && _jsx(StructuredData, Object.assign({}, structuredData))] })));
     return includeTheme ? _jsx(ThemeProvider, { children: core }) : core;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "sideEffects": false,
   "files": [