@ndlib/component-library 1.0.6 → 1.0.8

package/dist/components/composites/Seo/index.js

@@ -11,6 +11,6 @@ export const Seo = ({ title, description, image, nofollow, noindex, pathname, })
         noindex: noindex || defaultNoindex,
         twitterUsername,
     };
-    return (_jsxs(_Fragment, { children: [seo.title ? _jsx("title", Object.assign({ "data-testid": "seo-title" }, { children: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-twitter-title", name: "twitter:title", content: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-og-title", property: "og:title", content: seo.title })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-twitter-url", name: "twitter:url", content: seo.url })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-og-url", property: "og:url", content: seo.url })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-twitter-description", name: "twitter:description", content: seo.description })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-og-description", property: "og:description", content: seo.description })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-twitter-image", name: "twitter:image", content: seo.image })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-og-image", name: "og:image", content: seo.image })) : null, seo.twitterUsername ? (_jsx("meta", { "data-testid": "seo-twitter-creator", name: "twitter:creator", content: seo.twitterUsername })) : null, seo.nofollow ? (_jsx("meta", { "data-testid": "seo-nofollow", name: "robots", content: "nofollow" })) : null, seo.noindex ? (_jsx("meta", { "data-testid": "seo-noindex", name: "robots", content: "noindex" })) : null, _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "canonical", href: seo.url }), seo.title ? _jsx("title", Object.assign({ "data-testid": "seo-title" }, { children: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-twitter-title", name: "twitter:title", content: seo.title })) : null, seo.title ? (_jsx("meta", { "data-testid": "seo-og-title", property: "og:title", content: seo.title })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-twitter-url", name: "twitter:url", content: seo.url })) : null, seo.url ? (_jsx("meta", { "data-testid": "seo-og-url", property: "og:url", content: seo.url })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-twitter-description", name: "twitter:description", content: seo.description })) : null, seo.description ? (_jsx("meta", { "data-testid": "seo-og-description", property: "og:description", content: seo.description })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-twitter-image", name: "twitter:image", content: seo.image })) : null, seo.image ? (_jsx("meta", { "data-testid": "seo-og-image", name: "og:image", content: seo.image })) : null, seo.twitterUsername ? (_jsx("meta", { "data-testid": "seo-twitter-creator", name: "twitter:creator", content: seo.twitterUsername })) : null, seo.nofollow ? (_jsx("meta", { "data-testid": "seo-nofollow", name: "robots", content: "nofollow" })) : null, seo.noindex ? (_jsx("meta", { "data-testid": "seo-noindex", name: "robots", content: "noindex" })) : null, _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" })] }));
 };
 export default Seo;

package/dist/components/elements/text/ReadMore/index.js

@@ -10,12 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTheme } from '../../../../theme';
 import { COLOR, colors } from '../../../../theme/colors';
 import { getTypographyStyles, } from '../../../../theme/typography';
 import { useMediaQuery } from '../../../providers/media';
 import { multiplyRemSize } from '../../../../utils/misc';
+import { useManualRerender } from '../../../../utils/hooks/useManualRerender';
 const ReadMoreLink = (props) => {
     const bg = colors[props.bg || COLOR.BACKGROUND];
     const color = colors[props.color || COLOR.ND_BLUE_LIGHT];
@@ -44,22 +45,23 @@ export const useLinesHeight = (args) => {
     });
 };
 export const ReadMore = (_a) => {
+    var _b, _c;
     var { typography, sx, role, lines, fixedHeight, children } = _a, rest = __rest(_a, ["typography", "sx", "role", "lines", "fixedHeight", "children"]);
     const ref = React.useRef(null);
     const [showEllipsis, setShowEllipsis] = useState(true);
+    const forceRerender = useManualRerender();
     const wrapperHeight = useLinesHeight({ typography, lines });
     const { screenSize } = useMediaQuery();
     const { color: _color, bg: _bg } = sx || {};
     const color = Array.isArray(_color) ? _color[0] : _color;
     const bg = Array.isArray(_bg) ? _bg[0] : _bg;
-    React.useEffect(() => {
+    useEffect(() => {
+        forceRerender({
+            delay: [100, 500, 2000],
+        });
+    }, []);
+    useEffect(() => {
         if (ref.current) {
-            if (fixedHeight) {
-                ref.current.style.height = wrapperHeight;
-            }
-            else {
-                ref.current.style.maxHeight = wrapperHeight;
-            }
             const isOverflowing = ref.current.scrollHeight > ref.current.clientHeight;
             if (isOverflowing) {
                 setShowEllipsis(true);
@@ -68,9 +70,12 @@ export const ReadMore = (_a) => {
                 setShowEllipsis(false);
             }
         }
-    }, [children, wrapperHeight, fixedHeight, screenSize]);
-    return (_jsxs("div", Object.assign({ role: role || 'paragraph', ref: ref, style: {
-            overflow: 'hidden',
-            position: 'relative',
-        }, sx: Object.assign(Object.assign({}, getTypographyStyles(typography)), sx) }, rest, { children: [children, showEllipsis && _jsx(ReadMoreLink, { bg: bg, color: color })] })));
+    }, [
+        children,
+        wrapperHeight,
+        screenSize,
+        (_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.scrollHeight,
+        (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.clientHeight,
+    ]);
+    return (_jsxs("div", Object.assign({ role: role || 'paragraph', ref: ref, sx: Object.assign(Object.assign({ maxHeight: wrapperHeight, overflow: 'hidden', position: 'relative', height: fixedHeight ? wrapperHeight : 'auto' }, getTypographyStyles(typography)), sx) }, rest, { children: [children, showEllipsis && _jsx(ReadMoreLink, { bg: bg, color: color })] })));
 };

package/dist/utils/hooks/useManualRerender.d.ts

@@ -0,0 +1,3 @@
+export declare const useManualRerender: () => (params?: {
+    delay: number | number[];
+}) => void;

package/dist/utils/hooks/useManualRerender.js

@@ -0,0 +1,18 @@
+import { useState, useCallback } from 'react';
+export const useManualRerender = () => {
+    const [renderCount, updateRenderCount] = useState(0);
+    return useCallback((params) => {
+        const { delay } = params || {};
+        if (delay) {
+            const delayArray = Array.isArray(delay) ? delay : [delay];
+            for (const timeout of delayArray) {
+                setTimeout(() => {
+                    updateRenderCount((renderCount) => renderCount + 1);
+                }, timeout);
+            }
+        }
+        else {
+            updateRenderCount(renderCount + 1);
+        }
+    }, [renderCount, updateRenderCount]);
+};

package/package.json

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