xmlui 0.8.3 → 0.8.5

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 }));
 }

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

@@ -98,12 +98,12 @@ function XmluiCodeHighlighter({ value }) {
                 },
             });
     }, [initialized, value]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(XmluiCodeHighlighter_module_scss_1.default.wrapper, {
-            [XmluiCodeHighlighter_module_scss_1.default.dark]: activeThemeTone === "dark",
-            [XmluiCodeHighlighter_module_scss_1.default.light]: activeThemeTone === "light",
-        }), dangerouslySetInnerHTML: {
-            __html: html,
-        } }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: XmluiCodeHighlighter_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(XmluiCodeHighlighter_module_scss_1.default.innerWrapper, {
+                [XmluiCodeHighlighter_module_scss_1.default.dark]: activeThemeTone === "dark",
+                [XmluiCodeHighlighter_module_scss_1.default.light]: activeThemeTone === "light",
+            }), dangerouslySetInnerHTML: {
+                __html: html,
+            } }) }));
 }
 exports.codeComponentRenderer = (0, renderers_1.createComponentRenderer)("XmluiCodehighlighter", {}, ({ node, renderChild }) => {
     return (0, jsx_runtime_1.jsx)(XmluiCodeHighlighter, { value: renderChild(node.children) });

package/dist/scripts/src/components-core/theming/ThemeProvider.js

@@ -122,7 +122,7 @@ function useCompiledTheme(activeTheme, activeTone, themes = constants_1.EMPTY_AR
                 return (Object.assign(Object.assign(Object.assign({}, themeDef.themeVars), (_a = themeDef.themeVars) === null || _a === void 0 ? void 0 : _a[activeTone]), (_c = (_b = themeDef.tones) === null || _b === void 0 ? void 0 : _b[activeTone]) === null || _c === void 0 ? void 0 : _c.themeVars));
             })
                 .slice(0, themeDefChain.length - 1),
-            Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, transformThemeVars_1.generateBaseSpacings)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseFontSizes)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseTones)(mergedThemeVars)), (0, transformThemeVars_1.generatePaddingSegments)(mergedThemeVars)), (0, transformThemeVars_1.generateBorderSegments)(mergedThemeVars)), (0, transformThemeVars_1.generateButtonTones)(mergedThemeVars)),
+            Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, transformThemeVars_1.generateBaseSpacings)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseFontSizes)(mergedThemeVars)), (0, transformThemeVars_1.generatePaddingSegments)(mergedThemeVars)), (0, transformThemeVars_1.generateBorderSegments)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseTones)(mergedThemeVars)), (0, transformThemeVars_1.generateButtonTones)(mergedThemeVars)),
             Object.assign(Object.assign(Object.assign({}, themeDefChain[themeDefChain.length - 1].themeVars), (_a = themeDefChain[themeDefChain.length - 1].themeVars) === null || _a === void 0 ? void 0 : _a[activeTone]), (_c = (_b = themeDefChain[themeDefChain.length - 1].tones) === null || _b === void 0 ? void 0 : _b[activeTone]) === null || _c === void 0 ? void 0 : _c.themeVars),
         ];
         return resultedTheme;

package/dist/scripts/src/components-core/theming/themes/root.js

@@ -38,7 +38,6 @@ exports.RootThemeDefinition = {
         "color-primary-800": "hsl(212,71.9%,18.1%)",
         "color-primary-900": "hsl(212,71.9%,9.1%)",
         "color-primary-950": "hsl(212,71.9%,4.5%)",
-        "color-primary": "$color-primary-500",
         // --- Secondary color shades (steel-bluish)
         "color-secondary-50": "hsl(211.7,21.2%,96.9%)",
         "color-secondary-100": "hsl(211.7,21.2%,93.7%)",