@readme/markdown 10.2.9 → 10.2.10

package/README.md

@@ -127,16 +127,16 @@ If you make changes to the docs or how the markdown is rendered, you may need to
 
 ### Linking Changes to Storybook
 
-In `markdown`, change `package.json` name to `@readme/mdx`. Then run:
+There's currently some `babel` issues that prevent `npm link`ing to our main repo. `npm link`ing does work with our storybook app.
+
+**In this repo, run:**
 
 ```
 npm link && npm run watch
 ```
 
-In `readme` run:
+**In the main app repo, run:**
 
 ```
-npm link PATH_TO_LOCAL_MARKDOWN_REPO
+npm link $PATH_TO_LOCAL_MARKDOWN_REPO
 ```
-
-Will not work with the monorepo app due to `core-js` issues.

package/components/Glossary/index.tsx

@@ -1,9 +1,9 @@
 import type { GlossaryTerm } from '../../contexts/GlossaryTerms';
 
-import Tooltip from '@tippyjs/react';
 import React, { useContext } from 'react';
 
 import GlossaryContext from '../../contexts/GlossaryTerms';
+import Tooltip from '../Tooltip';
 
 interface Props extends React.PropsWithChildren {
   term?: string;

package/components/Tooltip/index.tsx

@@ -0,0 +1,61 @@
+import Tippy from '@tippyjs/react';
+import React, { useEffect, useMemo, useRef, useState, type ComponentProps } from 'react';
+
+type TooltipProps = ComponentProps<typeof Tippy>;
+
+/**
+ * A custom wrapper around `@tippyjs/react` that attaches a MutationObserver to
+ * listen for changes of the trigger element's DOM tree.
+ * 
+ * This is necessary for features like translation, where we initially render a
+ * Glossary term in English but then replace it with the translated term, which
+ * creates a stale Tippy reference.
+ */ 
+export default function Tooltip({ children, ...rest }: TooltipProps) {
+  const triggerRef = useRef<HTMLElement>(null);
+  const [triggerTarget, setTriggerTarget] = useState<HTMLElement|null>(null);
+
+  const triggerId = useMemo(() => {
+    return `tooltip-trigger-${crypto.randomUUID()}`;
+  }, []);
+
+  useEffect(() => {
+    if (!triggerRef.current?.parentElement) return () => {};
+
+    const observer = new MutationObserver((records: MutationRecord[]) => {
+      records.forEach(record => {
+        // was the node tree changed?
+        if (record.type === 'childList') {
+          record.addedNodes.forEach(node => {
+            // was the node for the tooltip trigger replaced?
+            if(node instanceof HTMLElement && node.id === triggerId)  {
+              // if it was, update our reference to it
+              setTriggerTarget(node);
+            }
+          });
+        } 
+      });
+    });
+
+    observer.observe(triggerRef.current.parentElement, {
+      subtree: true,
+      childList: true,
+    });
+
+    return () => observer.disconnect();
+  }, [setTriggerTarget, triggerId, triggerTarget]);
+
+  const getReferenceClientRect = useMemo(() => {
+    return triggerTarget ? () => triggerTarget.getBoundingClientRect() : undefined;
+  }, [triggerTarget]);
+
+  return (
+    <Tippy 
+      getReferenceClientRect={getReferenceClientRect}
+      triggerTarget={triggerTarget}
+      {...rest}
+    >
+      <span ref={triggerRef} id={triggerId}>{children}</span>
+    </Tippy>
+  );
+}

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,13 @@
+import Tippy from '@tippyjs/react';
+import React, { type ComponentProps } from 'react';
+type TooltipProps = ComponentProps<typeof Tippy>;
+/**
+ * A custom wrapper around `@tippyjs/react` that attaches a MutationObserver to
+ * listen for changes of the trigger element's DOM tree.
+ *
+ * This is necessary for features like translation, where we initially render a
+ * Glossary term in English but then replace it with the translated term, which
+ * creates a stale Tippy reference.
+ */
+export default function Tooltip({ children, ...rest }: TooltipProps): React.JSX.Element;
+export {};

package/dist/main.js

@@ -10847,14 +10847,61 @@ const Embed = ({ lazy = true, url, html, providerName, providerUrl, title, ifram
 };
 /* harmony default export */ const components_Embed = (Embed);
 
-// EXTERNAL MODULE: external "@tippyjs/react"
-var react_ = __webpack_require__(4189);
-var react_default = /*#__PURE__*/__webpack_require__.n(react_);
 ;// ./contexts/GlossaryTerms.ts
 
 const GlossaryContext = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createContext)([]);
 /* harmony default export */ const GlossaryTerms = (GlossaryContext);
 
+// EXTERNAL MODULE: external "@tippyjs/react"
+var react_ = __webpack_require__(4189);
+var react_default = /*#__PURE__*/__webpack_require__.n(react_);
+;// ./components/Tooltip/index.tsx
+
+
+/**
+ * A custom wrapper around `@tippyjs/react` that attaches a MutationObserver to
+ * listen for changes of the trigger element's DOM tree.
+ *
+ * This is necessary for features like translation, where we initially render a
+ * Glossary term in English but then replace it with the translated term, which
+ * creates a stale Tippy reference.
+ */
+function Tooltip({ children, ...rest }) {
+    const triggerRef = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useRef)(null);
+    const [triggerTarget, setTriggerTarget] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(null);
+    const triggerId = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useMemo)(() => {
+        return `tooltip-trigger-${crypto.randomUUID()}`;
+    }, []);
+    (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
+        if (!triggerRef.current?.parentElement)
+            return () => { };
+        const observer = new MutationObserver((records) => {
+            records.forEach(record => {
+                // was the node tree changed?
+                if (record.type === 'childList') {
+                    record.addedNodes.forEach(node => {
+                        // was the node for the tooltip trigger replaced?
+                        if (node instanceof HTMLElement && node.id === triggerId) {
+                            // if it was, update our reference to it
+                            setTriggerTarget(node);
+                        }
+                    });
+                }
+            });
+        });
+        observer.observe(triggerRef.current.parentElement, {
+            subtree: true,
+            childList: true,
+        });
+        return () => observer.disconnect();
+    }, [setTriggerTarget, triggerId, triggerTarget]);
+    const getReferenceClientRect = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useMemo)(() => {
+        return triggerTarget ? () => triggerTarget.getBoundingClientRect() : undefined;
+    }, [triggerTarget]);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement((react_default()), { getReferenceClientRect: getReferenceClientRect, triggerTarget: triggerTarget, ...rest },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("span", { ref: triggerRef, id: triggerId }, children)));
+}
+
 ;// ./components/Glossary/index.tsx
 
 
@@ -10864,7 +10911,7 @@ const Glossary = ({ children, term: termProp, terms }) => {
     const foundTerm = terms.find(i => term.toLowerCase() === i?.term?.toLowerCase());
     if (!foundTerm)
         return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("span", null, term);
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement((react_default()), { content: external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "GlossaryItem-tooltip-content" },
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Tooltip, { content: external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "GlossaryItem-tooltip-content" },
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("strong", { className: "GlossaryItem-term" }, foundTerm.term),
             " - ",
             foundTerm.definition), offset: [-5, 5], placement: "bottom-start" },

package/dist/main.node.js

@@ -16403,6 +16403,11 @@ const Embed = ({ lazy = true, url, html, providerName, providerUrl, title, ifram
 };
 /* harmony default export */ const components_Embed = (Embed);
 
+;// ./contexts/GlossaryTerms.ts
+
+const GlossaryContext = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createContext)([]);
+/* harmony default export */ const GlossaryTerms = (GlossaryContext);
+
 ;// ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
   if (node == null) {
@@ -21350,10 +21355,52 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy_esm));
 
 //# sourceMappingURL=tippy-react.esm.js.map
 
-;// ./contexts/GlossaryTerms.ts
+;// ./components/Tooltip/index.tsx
 
-const GlossaryContext = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createContext)([]);
-/* harmony default export */ const GlossaryTerms = (GlossaryContext);
+
+/**
+ * A custom wrapper around `@tippyjs/react` that attaches a MutationObserver to
+ * listen for changes of the trigger element's DOM tree.
+ *
+ * This is necessary for features like translation, where we initially render a
+ * Glossary term in English but then replace it with the translated term, which
+ * creates a stale Tippy reference.
+ */
+function Tooltip({ children, ...rest }) {
+    const triggerRef = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useRef)(null);
+    const [triggerTarget, setTriggerTarget] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(null);
+    const triggerId = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useMemo)(() => {
+        return `tooltip-trigger-${crypto.randomUUID()}`;
+    }, []);
+    (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
+        if (!triggerRef.current?.parentElement)
+            return () => { };
+        const observer = new MutationObserver((records) => {
+            records.forEach(record => {
+                // was the node tree changed?
+                if (record.type === 'childList') {
+                    record.addedNodes.forEach(node => {
+                        // was the node for the tooltip trigger replaced?
+                        if (node instanceof HTMLElement && node.id === triggerId) {
+                            // if it was, update our reference to it
+                            setTriggerTarget(node);
+                        }
+                    });
+                }
+            });
+        });
+        observer.observe(triggerRef.current.parentElement, {
+            subtree: true,
+            childList: true,
+        });
+        return () => observer.disconnect();
+    }, [setTriggerTarget, triggerId, triggerTarget]);
+    const getReferenceClientRect = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useMemo)(() => {
+        return triggerTarget ? () => triggerTarget.getBoundingClientRect() : undefined;
+    }, [triggerTarget]);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(tippy_react_esm, { getReferenceClientRect: getReferenceClientRect, triggerTarget: triggerTarget, ...rest },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("span", { ref: triggerRef, id: triggerId }, children)));
+}
 
 ;// ./components/Glossary/index.tsx
 
@@ -21364,7 +21411,7 @@ const Glossary = ({ children, term: termProp, terms }) => {
     const foundTerm = terms.find(i => term.toLowerCase() === i?.term?.toLowerCase());
     if (!foundTerm)
         return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("span", null, term);
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(tippy_react_esm, { content: external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "GlossaryItem-tooltip-content" },
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Tooltip, { content: external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "GlossaryItem-tooltip-content" },
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("strong", { className: "GlossaryItem-term" }, foundTerm.term),
             " - ",
             foundTerm.definition), offset: [-5, 5], placement: "bottom-start" },