@ndlib/component-library 0.0.129 → 1.0.1

package/dist/components/elements/Markdown/index.js

@@ -73,7 +73,7 @@ const defaultFloatImageStyles = {
     float: 'right',
     margin: '16px',
     marginTop: '0px',
-    width: '400px',
+    maxWidth: '400px',
 };
 const dynamicTopMarginStyles = {
     [firstChildAltSelector]: {

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

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

package/dist/components/providers/media.js

@@ -1,28 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
+import { createContext, useContext, useEffect, useState, } from 'react';
 import { useTheme } from '../../theme';
 const MediaContext = createContext({
     screenSize: -1,
     breakpoint: -1,
 });
-export const MediaSizeProvider = ({ children, }) => {
+export const MediaSizeProvider = ({ useHydrationPatch, children }) => {
     const [renderCount, setRenderCount] = useState(0);
     const theme = useTheme();
     const breakpoints = theme.breakpoints.map((bp) => parseInt(bp.slice(0, -2)), [theme]);
-    const { screenSize, breakpoint } = useMemo(() => {
+    const getBreakpoint = (screenSize) => {
+        const closestBreakpoint = breakpoints.findIndex((bp) => screenSize < bp);
+        return closestBreakpoint === -1 ? breakpoints.length : closestBreakpoint;
+    };
+    const initialScreenSize = useHydrationPatch || typeof window === 'undefined' ? -1 : window.innerWidth;
+    const initialBreakpoint = useHydrationPatch || typeof window === 'undefined'
+        ? -1
+        : getBreakpoint(window.innerWidth);
+    const [screenSize, setScreenSize] = useState(initialScreenSize);
+    const [breakpoint, setBreakpoint] = useState(initialBreakpoint);
+    useEffect(() => {
         if (typeof window === 'undefined') {
-            return {
-                screenSize: -1,
-                breakpoint: -1,
-            };
+            return;
         }
         const screenSize = window.innerWidth;
-        const closestBreakpoint = breakpoints.findIndex((bp) => screenSize < bp);
-        const breakpoint = closestBreakpoint === -1 ? breakpoints.length : closestBreakpoint;
-        return {
-            screenSize,
-            breakpoint,
-        };
+        const breakpoint = getBreakpoint(screenSize);
+        setScreenSize(screenSize);
+        setBreakpoint(breakpoint);
     }, [renderCount, breakpoints]);
     useEffect(() => {
         if (typeof window === 'undefined')

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

@@ -12,6 +12,7 @@ export type UiConfig = {
     loadFonts?: boolean;
     loadGlobalStyles?: boolean;
     includeTheme?: boolean;
+    useHydrationPatch?: boolean;
 };
 type UiProviderProps = PropsWithChildren<UiConfig>;
 export declare const UiProvider: React.FC<UiProviderProps>;

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, }) => {
-    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProvider, { 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 = 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))] })));
     return includeTheme ? _jsx(ThemeProvider, { children: core }) : core;
 };

package/dist/theme/GlobalStyles.js

@@ -37,8 +37,6 @@ const globalStyles = css `
   small,
   strike,
   strong,
-  sub,
-  sup,
   tt,
   var,
   b,
@@ -91,6 +89,16 @@ const globalStyles = css `
     vertical-align: baseline;
   }
 
+  sub {
+    vertical-align: sub;
+    font-size: smaller;
+  }
+
+  sup {
+    vertical-align: super;
+    font-size: smaller;
+  }
+
   /* HTML5 display-role reset for older browsers */
   article,
   aside,

package/package.json

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