xmlui 0.7.27 → 0.7.29

package/dist/scripts/src/components-core/TableOfContentsContext.js

@@ -7,6 +7,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const hooks_1 = require("./utils/hooks");
 const react_2 = require("@remix-run/react");
+const constants_1 = require("./constants");
+const react_router_dom_1 = require("react-router-dom");
 /**
  * Several components work together to represent the hierarchy of a particular
  * app page as a TOC. This React component provides a context for storing this
@@ -18,9 +20,8 @@ exports.TableOfContentsContext = (0, react_1.createContext)(null);
  */
 function TableOfContentsProvider({ children }) {
     var _a, _b;
-    const [headings, setHeadings] = (0, react_1.useState)({});
-    const [observeIntersection, setObserveIntersection] = (0, react_1.useState)(false);
-    const [activeId, setActiveId] = (0, react_1.useState)(null);
+    const [headings, setHeadings] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
+    const [callbacks, setCallbacks] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
     const observer = (0, react_1.useRef)(null);
     const initialHeading = (0, react_1.useRef)(null);
     const thisRef = (0, react_1.useRef)({
@@ -32,25 +33,33 @@ function TableOfContentsProvider({ children }) {
             thisRef.current.suspendPositionBasedSetActiveId = false;
         }, []),
     });
+    const notify = (0, react_1.useCallback)((id) => {
+        callbacks.forEach((cb) => cb(id));
+    }, [callbacks]);
     (0, react_1.useEffect)(() => {
-        if (observeIntersection) {
+        if (callbacks.length) {
             const handleObserver = (entries) => {
                 entries.forEach((entry) => {
                     if (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) {
                         if (!thisRef.current.suspendPositionBasedSetActiveId) {
-                            setActiveId(entry.target.id);
+                            notify(entry.target.id);
                         }
                     }
                 });
             };
+            // stolen from nextra: https://github.com/shuding/nextra/blob/3729f67059f1fbdd3f98125bebabbe568c918694/packages/nextra-theme-docs/src/mdx-components/heading-anchor.client.tsx
+            // let headerHeight = getComputedStyle(scrollParent || document.body).getPropertyValue(
+            //   '--header-abs-height'
+            // );
             observer.current = new IntersectionObserver(handleObserver, {
-                rootMargin: "0px 0px -50%",
-                threshold: [0, 1],
+                rootMargin: `0% 0% -80%`,
+                // root: scrollParent,
+                // threshold: [0, 1],
             });
             Object.values(headings).forEach((elem) => { var _a, _b; return (_b = (_a = observer === null || observer === void 0 ? void 0 : observer.current) === null || _a === void 0 ? void 0 : _a.observe) === null || _b === void 0 ? void 0 : _b.call(_a, elem.anchor); });
             return () => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); };
         }
-    }, [headings, observeIntersection]);
+    }, [callbacks.length, headings, notify, scrollParent]);
     const registerHeading = (0, react_1.useCallback)((headingItem) => {
         setHeadings((prevHeadings) => {
             return Object.assign(Object.assign({}, prevHeadings), { [headingItem.id]: headingItem });
@@ -63,12 +72,28 @@ function TableOfContentsProvider({ children }) {
             });
         };
     }, []);
-    const setActiveAnchorId = (0, react_1.useCallback)((id) => {
-        if (headings[id]) {
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const scrollToAnchor = (0, react_1.useCallback)((id, smoothScrolling) => {
+        const value = headings[id];
+        if (value) {
+            value.anchor.scrollIntoView({
+                block: "start",
+                inline: "start",
+                behavior: smoothScrolling ? "smooth" : "auto",
+            });
+            notify(id);
+            requestAnimationFrame(() => {
+                navigate({
+                    hash: `#${value.id}`,
+                }, {
+                    state: {
+                        preventHashScroll: true,
+                    },
+                });
+            });
             thisRef.current.suspendPositionBasedSetActiveId = true;
-            setActiveId(id);
         }
-    }, [headings]);
+    }, [headings, navigate, notify]);
     const sortedHeadings = (0, react_1.useMemo)(() => {
         return Object.values(headings).sort(function (a, b) {
             if (a.anchor === b.anchor)
@@ -100,16 +125,31 @@ function TableOfContentsProvider({ children }) {
             }
         }
     }, [location.hash, sortedHeadings]);
+    const subscribeToActiveAnchorChange = (0, react_1.useCallback)((cb) => {
+        setCallbacks((prev) => {
+            return [...prev, cb];
+        });
+        return () => {
+            setCallbacks((prev) => {
+                return prev.filter((item) => item !== cb);
+            });
+        };
+    }, []);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             registerHeading,
             headings: sortedHeadings,
-            observeIntersection,
-            setObserveIntersection,
-            activeAnchorId: activeId,
-            setActiveAnchorId,
+            scrollToAnchor,
+            subscribeToActiveAnchorChange,
+            hasTableOfContents: callbacks.length > 0,
         };
-    }, [registerHeading, sortedHeadings, observeIntersection, activeId, setActiveAnchorId]);
+    }, [
+        registerHeading,
+        sortedHeadings,
+        scrollToAnchor,
+        subscribeToActiveAnchorChange,
+        callbacks.length,
+    ]);
     return ((0, jsx_runtime_1.jsx)(exports.TableOfContentsContext.Provider, { value: contextValue, children: children }));
 }
 function useTableOfContents() {

package/dist/scripts/src/components-core/utils/extractParam.js

@@ -7,6 +7,7 @@ exports.extractParam = extractParam;
 exports.withStableObjectReference = withStableObjectReference;
 exports.shouldKeep = shouldKeep;
 exports.resolveAndCleanProps = resolveAndCleanProps;
+exports.removeStylesFromProps = removeStylesFromProps;
 const react_1 = __importDefault(require("react"));
 const lodash_es_1 = require("lodash-es");
 const ParameterParser_1 = require("../script-runner/ParameterParser");
@@ -158,7 +159,7 @@ function shouldKeep(when, componentState, appContext) {
  */
 function resolveAndCleanProps(props, extractValue, layoutCss = {}, resourceExtraction) {
     const { extractResourceUrl, resourceProps } = resourceExtraction !== null && resourceExtraction !== void 0 ? resourceExtraction : {};
-    const cleanedProps = cleanStyles(props, layoutCss);
+    const cleanedProps = removeStylesFromProps(props, layoutCss);
     const resultProps = {};
     const result = Object.keys(cleanedProps).reduce((acc, propName) => {
         if (resourceProps && extractResourceUrl && resourceProps.includes(propName)) {
@@ -177,7 +178,7 @@ function resolveAndCleanProps(props, extractValue, layoutCss = {}, resourceExtra
  * @param layoutCss which style properties to remove
  * @returns only component-specific properties
  */
-function cleanStyles(nodeProps, layoutCss = {}) {
+function removeStylesFromProps(nodeProps, layoutCss = {}) {
     if (nodeProps.hasOwnProperty("style")) {
         delete nodeProps["style"];
     }