xmlui 0.9.19 → 0.9.20

package/dist/index.css

@@ -7162,16 +7162,55 @@ li .htmlOl {
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._wrapper_8djl9_13 {
+._wrapper_ntbxg_13 {
   opacity: 0.5;
 }
-._wrapper_8djl9_13:hover {
+._wrapper_ntbxg_13:hover {
   opacity: 1;
 }
-._wrapper_8djl9_13[data-popper-reference-hidden=true] {
+._wrapper_ntbxg_13[data-popper-reference-hidden=true] {
   opacity: 0;
   pointer-events: none;
   display: none;
+}
+
+._inspectableNode_ntbxg_25 {
+  outline: 1px solid var(--xmlui-outlineColor--focus);
+  outline-offset: 4px;
+  position: relative;
+}
+
+._inspectableNode_ntbxg_25:hover {
+  outline: 2px solid var(--xmlui-color-primary-500);
+}
+
+._inspectOverlay_ntbxg_35 {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  z-index: 1000;
+  pointer-events: auto;
+}
+
+._inspectOverlay_ntbxg_35:hover {
+  background: rgba(32, 107, 196, 0.1);
+}
+
+._inspectedNode_ntbxg_51 {
+  outline: 2px solid var(--xmlui-color-primary-500);
+}
+._inspectedNode_ntbxg_51 ._inspectOverlay_ntbxg_35 {
+  background: rgba(32, 107, 196, 0.1);
+}
+
+._inspectIcon_ntbxg_58 {
+  position: absolute;
+  right: 0;
+  top: -10px;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
  *
@@ -7921,6 +7960,20 @@ li .htmlOl {
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
+._active_rwrkr_13 {
+  background: var(--xmlui-color-primary-500);
+}/*
+ * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
+ *
+ * We use a subset of these CSS variables in themes.
+ */
+/*
+ * This function creates a CSS variable name by combining the prefix and the argument variable name
+ */
+/*
+ * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
+ Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
+ */
 ._dialogContent_1rief_13 {
   display: flex;
   flex-direction: column;

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

@@ -101,6 +101,7 @@ const HtmlTags_1 = require("./HtmlTags/HtmlTags");
 const ColorPicker_1 = require("./ColorPicker/ColorPicker");
 const RadioItem_1 = require("./RadioGroup/RadioItem");
 const SubNavPanel_1 = require("./SubNavPanel/SubNavPanel");
+const InspectButton_1 = require("./InspectButton/InspectButton");
 /**
  * The framework has a specialized component concept, the "property holder
  * component." These components only hold property values but do not render
@@ -151,6 +152,7 @@ class ComponentRegistry {
                 }
             });
         };
+        // --- Registers a renderable component using its renderer function
         this.registerCoreComponent = (component) => {
             const coreNamespaces = ["#xmlui-core-ns", ""];
             if ("compoundComponentDef" in component) {
@@ -169,7 +171,6 @@ class ComponentRegistry {
                 this.registerComponentRenderer(component, ...appNamespaces);
             }
         };
-        // --- Registers a renderable component using its renderer function
         // --- and metadata
         this.registerComponentRenderer = ({ type, renderer, metadata, isCompoundComponent, }, ...namespaces) => {
             const component = {
@@ -372,6 +373,7 @@ class ComponentRegistry {
             this.registerCoreComponent(AutoComplete_1.autoCompleteComponentRenderer);
             this.registerCoreComponent(DropdownMenu_1.dropdownMenuComponentRenderer);
             this.registerCoreComponent(ToneChangerButton_1.toneChangerButtonComponentRenderer);
+            this.registerCoreComponent(InspectButton_1.inspectButtonComponentRenderer);
             this.registerCoreComponent(FormSection_1.formSectionRenderer);
             this.registerCoreComponent(DropdownMenu_1.dropdownMenuComponentRenderer);
             this.registerCoreComponent(DropdownMenu_1.menuItemRenderer);
@@ -566,6 +568,19 @@ class ComponentRegistry {
             this.loaders.get(componentName) !== undefined ||
             this.actionFns.get(componentName) !== undefined);
     }
+    // --- Registers a loader renderer using its definition
+    registerLoaderRenderer({ type, renderer }) {
+        this.loaders.set(type, renderer);
+    }
+    /**
+     * This method destroys the component registry; It unsubscribes from the component manager.
+     * This method is called when the component registry is no longer needed, e.g., when the
+     * component provider is unmounted (HMR).
+     */
+    destroy() {
+        var _a;
+        (_a = this.extensionManager) === null || _a === void 0 ? void 0 : _a.unSubscribeFromRegistrations(this.extensionRegistered);
+    }
     // --- Registers a compound component using its definition and metadata
     registerCompoundComponentRenderer({ compoundComponentDef, metadata }, ...namespaces) {
         const component = {
@@ -582,19 +597,6 @@ class ComponentRegistry {
     registerActionFn({ actionName: functionName, actionFn }) {
         this.actionFns.set(functionName, actionFn);
     }
-    // --- Registers a loader renderer using its definition
-    registerLoaderRenderer({ type, renderer }) {
-        this.loaders.set(type, renderer);
-    }
-    /**
-     * This method destroys the component registry; It unsubscribes from the component manager.
-     * This method is called when the component registry is no longer needed, e.g., when the
-     * component provider is unmounted (HMR).
-     */
-    destroy() {
-        var _a;
-        (_a = this.extensionManager) === null || _a === void 0 ? void 0 : _a.unSubscribeFromRegistrations(this.extensionRegistered);
-    }
 }
 exports.ComponentRegistry = ComponentRegistry;
 /**

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inspectButtonComponentRenderer = exports.InspectButtonMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const ButtonNative_1 = require("../Button/ButtonNative");
+const InspectorContext_1 = require("../../components-core/InspectorContext");
+const InspectButton_module_scss_1 = __importDefault(require("./InspectButton.module.scss"));
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const COMP = "InspectButton";
+exports.InspectButtonMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `The \`${COMP}\` component is a component that allows the user to change the tone of the app.`,
+    props: {},
+    themeVars: (0, themeVars_1.parseScssVar)(InspectButton_module_scss_1.default.themeVars),
+});
+function InspectButton({ children, style }) {
+    const { setInspectMode, inspectMode } = (0, InspectorContext_1.useInspectMode)();
+    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { style: style, themeColor: inspectMode ? "primary" : "secondary", variant: inspectMode ? "solid" : "outlined", onClick: () => {
+            setInspectMode((prev) => !prev);
+        }, children: children }));
+}
+/**
+ * Define the renderer for the Button component
+ */
+exports.inspectButtonComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.InspectButtonMd, ({ renderChild, node, layoutCss }) => {
+    return (0, jsx_runtime_1.jsx)(InspectButton, { style: layoutCss, children: renderChild(node.children) });
+});

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InspectorContext = void 0;
 exports.InspectorProvider = InspectorProvider;
 exports.useDevTools = useDevTools;
+exports.useInspectMode = useInspectMode;
 exports.useInspector = useInspector;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -26,6 +27,8 @@ function InspectorProvider({ children, sources, projectCompilation, mockApi, })
     const [showCode, setShowCode] = (0, react_1.useState)(false);
     const [devToolsSize, setDevToolsSize] = (0, react_1.useState)(0);
     const [devToolsSide, setDevToolsSide] = (0, react_1.useState)("bottom");
+    const [inspectMode, setInspectMode] = (0, react_1.useState)(false);
+    const [lastInspectedElement, setLastInspectedElement] = (0, react_1.useState)(null);
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
     const devToolsEntry = componentRegistry.lookupComponentRenderer("XMLUIDevtools.DevTools");
     const contextValue = (0, react_1.useMemo)(() => {
@@ -61,19 +64,30 @@ function InspectorProvider({ children, sources, projectCompilation, mockApi, })
             setDevToolsSide,
             devToolsEnabled: showCode,
             projectCompilation: projectCompilation,
+            setInspectMode,
+            inspectMode,
             mockApi,
         };
-    }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation, mockApi]);
+    }, [
+        devToolsSide,
+        devToolsSize,
+        sources,
+        inspectedNode,
+        showCode,
+        projectCompilation,
+        inspectMode,
+        mockApi,
+    ]);
     return ((0, jsx_runtime_1.jsxs)(exports.InspectorContext.Provider, { value: contextValue, children: [children, process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
                 showCode &&
                 inspectedNode !== null &&
                 (0, react_dom_1.createPortal)(devToolsEntry === null || devToolsEntry === void 0 ? void 0 : devToolsEntry.renderer({}), root), process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
                 inspectable &&
                 Object.values(inspectable).map((item) => {
-                    return ((0, jsx_runtime_1.jsx)(InspectButton, { setShowCode: setShowCode, inspectId: item.inspectId, node: item.node, setInspectedNode: setInspectedNode }, item.inspectId + +"-" + item.key));
+                    return ((0, jsx_runtime_1.jsx)(InspectButton, { inspectedNode: inspectedNode, setShowCode: setShowCode, inspectId: item.inspectId, node: item.node, setInspectedNode: setInspectedNode, inspectMode: inspectMode }, item.inspectId + +"-" + item.key));
                 })] }));
 }
-function InspectButton({ inspectId, node, setInspectedNode, setShowCode, }) {
+function InspectButton({ inspectId, node, inspectedNode, setInspectedNode, setShowCode, inspectMode, }) {
     const { root } = (0, ThemeContext_1.useTheme)();
     const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
     const [popperElement, setPopperElement] = (0, react_1.useState)(null);
@@ -98,12 +112,55 @@ function InspectButton({ inspectId, node, setInspectedNode, setShowCode, }) {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const timeoutRef = (0, react_1.useRef)(null);
     const hoverRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!referenceElement) {
+            return;
+        }
+        if ((inspectedNode === null || inspectedNode === void 0 ? void 0 : inspectedNode.inspectId) === inspectId) {
+            referenceElement.classList.add(InspectorButton_module_scss_1.default.inspectedNode);
+        }
+        else {
+            referenceElement.classList.remove(InspectorButton_module_scss_1.default.inspectedNode);
+        }
+    }, [inspectId, inspectedNode, referenceElement]);
+    (0, react_1.useEffect)(() => {
+        if (inspectedNode) {
+            setShowCode(true);
+        }
+        else {
+            setShowCode(false);
+        }
+    }, [inspectedNode]);
     (0, react_1.useEffect)(() => {
         const htmlElement = document.querySelector(`[data-inspectId="${inspectId}"]`);
         if (!htmlElement) {
             return;
         }
         setReferenceElement(htmlElement);
+        if (inspectMode) {
+            htmlElement.classList.add(InspectorButton_module_scss_1.default.inspectableNode);
+            const overlay = document.createElement("div");
+            overlay.classList.add(InspectorButton_module_scss_1.default.inspectOverlay);
+            htmlElement.appendChild(overlay);
+            overlay.addEventListener("click", () => {
+                setInspectedNode((prev) => {
+                    if ((prev === null || prev === void 0 ? void 0 : prev.inspectId) === inspectId) {
+                        return null;
+                    }
+                    return Object.assign(Object.assign({}, node), { inspectId });
+                });
+            });
+        }
+        if (!inspectMode) {
+            htmlElement.classList.remove(InspectorButton_module_scss_1.default.inspectableNode);
+            setInspectedNode(null);
+            setShowCode(false);
+            const overlay = htmlElement.querySelector(`.${InspectorButton_module_scss_1.default.inspectOverlay}`);
+            if (overlay) {
+                overlay.remove();
+            }
+            htmlElement.classList.remove(InspectorButton_module_scss_1.default.inspectedNode);
+        }
         function mouseenter() {
             if (timeoutRef.current) {
                 clearTimeout(timeoutRef.current);
@@ -127,22 +184,24 @@ function InspectButton({ inspectId, node, setInspectedNode, setShowCode, }) {
             htmlElement.removeEventListener("mouseenter", mouseenter);
             htmlElement.removeEventListener("mouseleave", mouseleave);
         };
-    }, [inspectId]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: visible &&
-            !!root &&
-            (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, Object.assign({ variant: "ghost", className: (0, classnames_1.default)(InspectorButton_module_scss_1.default.wrapper, "_debug-inspect-button"), ref: (el) => setPopperElement(el), style: Object.assign(Object.assign({}, popperStyles.popper), { padding: 0 }) }, attributes.popper, { onMouseEnter: () => {
-                    hoverRef.current = true;
-                    if (timeoutRef.current) {
-                        clearTimeout(timeoutRef.current);
-                        timeoutRef.current = null;
-                    }
-                }, onMouseLeave: () => {
-                    hoverRef.current = false;
-                    setVisible(false);
-                }, onClick: () => {
-                    setInspectedNode(node);
-                    setShowCode(true);
-                }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "inspect", size: "md" }) })), root) }));
+    }, [inspectId, node, inspectMode, setInspectedNode, setShowCode]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: inspectMode
+            ? null
+            : visible &&
+                !!root &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, Object.assign({ variant: "ghost", className: (0, classnames_1.default)(InspectorButton_module_scss_1.default.wrapper, "_debug-inspect-button"), ref: (el) => setPopperElement(el), style: Object.assign(Object.assign({}, popperStyles.popper), { padding: 0 }) }, attributes.popper, { onMouseEnter: () => {
+                        hoverRef.current = true;
+                        if (timeoutRef.current) {
+                            clearTimeout(timeoutRef.current);
+                            timeoutRef.current = null;
+                        }
+                    }, onMouseLeave: () => {
+                        hoverRef.current = false;
+                        setVisible(false);
+                    }, onClick: () => {
+                        setInspectedNode(node);
+                        setShowCode(true);
+                    }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "inspect", size: "md" }) })), root) }));
 }
 function useDevTools() {
     const context = (0, react_1.useContext)(exports.InspectorContext);
@@ -159,6 +218,13 @@ function useDevTools() {
         mockApi: context === null || context === void 0 ? void 0 : context.mockApi,
     };
 }
+function useInspectMode() {
+    const context = (0, react_1.useContext)(exports.InspectorContext);
+    return {
+        setInspectMode: context === null || context === void 0 ? void 0 : context.setInspectMode,
+        inspectMode: context === null || context === void 0 ? void 0 : context.inspectMode,
+    };
+}
 function useInspector(node, uid) {
     var _a;
     const context = (0, react_1.useContext)(exports.InspectorContext);