xmlui 0.8.3 → 0.8.4

package/dist/scripts/src/components/Heading/HeadingNative.js

@@ -37,17 +37,17 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
     const anchorRef = (0, react_1.useRef)(null);
     const tableOfContentsContext = (0, react_1.useContext)(TableOfContentsContext_1.TableOfContentsContext);
     const registerHeading = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.registerHeading;
-    const observeIntersection = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.hasTableOfContents;
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(elementRef, forwardedRef) : elementRef;
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d;
-        if (observeIntersection && elementRef.current) {
+        if (elementRef.current) {
             const newAnchorId = (_d = (_c = (_b = (_a = elementRef.current.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.replace(/[^\w\s-]/g, "")) === null || _c === void 0 ? void 0 : _c.replace(/\s+/g, "-")) === null || _d === void 0 ? void 0 : _d.toLowerCase();
             setAnchorId(newAnchorId || null);
         }
-    }, [observeIntersection]);
+    }, []);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        if (observeIntersection && elementRef.current && anchorId && !omitFromToc) {
+        if (elementRef.current && anchorId && !omitFromToc) {
+            console.log("HERE", { anchorId, registerHeading, level, omitFromToc });
             return registerHeading === null || registerHeading === void 0 ? void 0 : registerHeading({
                 id: anchorId,
                 level: parseInt(level.replace("h", "")),
@@ -55,10 +55,10 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
                 anchor: anchorRef.current,
             });
         }
-    }, [anchorId, observeIntersection, registerHeading, level, omitFromToc]);
+    }, [anchorId, registerHeading, level, omitFromToc]);
     return ((0, jsx_runtime_1.jsxs)(Element, Object.assign({ ref: ref, id: uid, title: title, style: Object.assign(Object.assign(Object.assign({}, sx), style), (0, css_utils_1.getMaxLinesStyle)(maxLines)), className: (0, classnames_1.default)(Heading_module_scss_1.default.heading, Heading_module_scss_1.default[Element], className || "", {
             [Heading_module_scss_1.default.truncateOverflow]: maxLines > 0,
             [Heading_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks,
             [Heading_module_scss_1.default.noEllipsis]: !ellipses,
-        }) }, furtherProps, { children: [anchorId && observeIntersection && ((0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, style: { width: 0, height: 0 }, "data-anchor": true })), children] })));
+        }) }, furtherProps, { children: [anchorId && ((0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, style: { width: 0, height: 0 }, "data-anchor": true })), children] })));
 });

package/dist/scripts/src/components/TableOfContents/TableOfContentsNative.js

@@ -15,8 +15,8 @@ const TableOfContentsContext_1 = require("../../components-core/TableOfContentsC
 const hooks_1 = require("../../components-core/utils/hooks");
 exports.TableOfContents = (0, react_1.forwardRef)(function TableOfContents({ style, smoothScrolling, maxHeadingLevel = 6 }, forwardedRef) {
     const tocRef = (0, react_1.useRef)(null);
-    const [activeAnchorId, setActiveId] = (0, react_1.useState)(null);
-    const { headings, scrollToAnchor, subscribeToActiveAnchorChange } = (0, TableOfContentsContext_1.useTableOfContents)();
+    const { headings, scrollToAnchor, subscribeToActiveAnchorChange, activeAnchorId: initialActiveAnchorId } = (0, TableOfContentsContext_1.useTableOfContents)();
+    const [activeAnchorId, setActiveId] = (0, react_1.useState)(initialActiveAnchorId);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         return subscribeToActiveAnchorChange((id) => {
             const foundHeading = headings.find((heading) => heading.id === id);

package/dist/scripts/src/components/abstractions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.httpMethodNames = exports.VariantPropsKeys = exports.variantOptionsMd = exports.TextVariantElement = exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
+exports.httpMethodNames = exports.VariantPropsKeys = exports.variantOptionsMd = exports.TextVariantElement = exports.orderingValues = exports.scrollAnchoringNames = exports.scrollAnchoringValues = exports.validationStatusMd = exports.validationStatusNames = exports.validationStatusValues = exports.triggerPositionNames = exports.labelPositionMd = exports.labelPositionNames = exports.labelPositionValues = exports.placementMd = exports.placementNames = exports.statusColorMd = exports.statusColorNames = exports.iconPositionMd = exports.iconPositionNames = exports.iconPositionValues = exports.orientationOptionMd = exports.orientationOptionNames = exports.alignmentOptionMd = exports.alignmentOptionNames = exports.alignmentOptionValues = exports.buttonAriaNames = exports.buttonVariantMd = exports.buttonVariantNames = exports.buttonVariantValues = exports.buttonTypesMd = exports.buttonTypeNames = exports.buttonTypeValues = exports.buttonThemeMd = exports.buttonThemeNames = exports.buttonThemeValues = exports.sizeNames = exports.sizeMd = exports.viewportSizeNames = exports.viewportSizeMd = exports.LinkTargetMd = exports.LinkTargetNames = void 0;
 exports.LinkTargetNames = ["_self", "_blank", "_parent", "_top", "_unfencedTop"];
 exports.LinkTargetMd = [
     {
@@ -47,8 +47,8 @@ exports.sizeMd = [
 const sizeValues = Object.keys(exports.sizeMd);
 exports.sizeNames = [...sizeValues];
 // --- Available button themes
-const buttonThemeValues = ["attention", "primary", "secondary"];
-exports.buttonThemeNames = [...buttonThemeValues];
+exports.buttonThemeValues = ["attention", "primary", "secondary"];
+exports.buttonThemeNames = [...exports.buttonThemeValues];
 exports.buttonThemeMd = [
     { value: "attention", description: "Attention state theme color" },
     { value: "primary", description: "Primary theme color" },
@@ -72,8 +72,8 @@ exports.buttonTypesMd = [
     },
 ];
 // --- Available button variants
-const buttonVariantValues = ["solid", "outlined", "ghost"];
-exports.buttonVariantNames = [...buttonVariantValues];
+exports.buttonVariantValues = ["solid", "outlined", "ghost"];
+exports.buttonVariantNames = [...exports.buttonVariantValues];
 exports.buttonVariantMd = [
     { value: "solid", description: "A button with a border and a filled background." },
     {

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

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const hooks_1 = require("./utils/hooks");
 const react_2 = require("@remix-run/react");
 const constants_1 = require("./constants");
+const AppContext_1 = require("./AppContext");
 /**
  * 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
@@ -22,7 +23,7 @@ function TableOfContentsProvider({ children }) {
     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 { forceRefreshAnchorScroll } = (0, AppContext_1.useAppContext)();
     const thisRef = (0, react_1.useRef)({
         suspendPositionBasedSetActiveId: false,
     });
@@ -32,8 +33,10 @@ function TableOfContentsProvider({ children }) {
             thisRef.current.suspendPositionBasedSetActiveId = false;
         }, []),
     });
+    const [activeAnchorId, setActiveAnchorId] = (0, react_1.useState)(null);
     const notify = (0, react_1.useCallback)((id) => {
         callbacks.forEach((cb) => cb(id));
+        setActiveAnchorId(id);
     }, [callbacks]);
     (0, react_1.useEffect)(() => {
         if (callbacks.length) {
@@ -75,6 +78,7 @@ function TableOfContentsProvider({ children }) {
     const scrollToAnchor = (0, react_1.useCallback)((id, smoothScrolling) => {
         const value = headings[id];
         if (value) {
+            thisRef.current.suspendPositionBasedSetActiveId = true;
             value.anchor.scrollIntoView({
                 block: "start",
                 inline: "start",
@@ -89,8 +93,13 @@ function TableOfContentsProvider({ children }) {
                         preventHashScroll: true,
                     },
                 });
+                //we clear the preventHashScroll route state:  https://stackoverflow.com/questions/72121228/how-to-update-location-state-in-react-router-v6
+                requestAnimationFrame(() => {
+                    navigate({
+                        hash: `#${value.id}`,
+                    }, { replace: true });
+                });
             });
-            thisRef.current.suspendPositionBasedSetActiveId = true;
         }
     }, [headings, navigate, notify]);
     const sortedHeadings = (0, react_1.useMemo)(() => {
@@ -104,26 +113,13 @@ function TableOfContentsProvider({ children }) {
             return -1;
         });
     }, [headings]);
-    const location = (0, react_2.useLocation)();
+    //the content could take time to load, this way we try to force the scroll to anchor mechanism to kick in
+    const hasHeadings = sortedHeadings.length > 0;
     (0, react_1.useEffect)(() => {
-        var _a;
-        const hash = location.hash;
-        if (hash) {
-            if (initialHeading.current) {
-                return;
-            }
-            else {
-                initialHeading.current = (_a = sortedHeadings.find((value) => `#${value.id}` === hash)) === null || _a === void 0 ? void 0 : _a.anchor;
-                if (initialHeading.current) {
-                    initialHeading.current.scrollIntoView({
-                        block: "start",
-                        inline: "start",
-                        behavior: "instant",
-                    });
-                }
-            }
+        if (hasHeadings) {
+            forceRefreshAnchorScroll();
         }
-    }, [location.hash, sortedHeadings]);
+    }, [forceRefreshAnchorScroll, hasHeadings]);
     const subscribeToActiveAnchorChange = (0, react_1.useCallback)((cb) => {
         setCallbacks((prev) => {
             return [...prev, cb];
@@ -141,6 +137,7 @@ function TableOfContentsProvider({ children }) {
             scrollToAnchor,
             subscribeToActiveAnchorChange,
             hasTableOfContents: callbacks.length > 0,
+            activeAnchorId
         };
     }, [
         registerHeading,
@@ -148,6 +145,7 @@ function TableOfContentsProvider({ children }) {
         scrollToAnchor,
         subscribeToActiveAnchorChange,
         callbacks.length,
+        activeAnchorId,
     ]);
     return ((0, jsx_runtime_1.jsx)(exports.TableOfContentsContext.Provider, { value: contextValue, children: children }));
 }