@arkcit/engine-react 0.3.0

package/dist/hooks.js

@@ -0,0 +1,135 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/hooks/useUIEngineEffects.ts
+import { useEffect, useLayoutEffect, useMemo } from "react";
+var useUIEngineEffects = ({
+  schema,
+  runtime,
+  onNodeResize,
+  onNodeResizeEnd,
+  resizeStateRef,
+  pendingFieldFocusRef,
+  setVersion,
+  minWidthPct,
+  minHeightPct,
+  minHeightPx,
+  dependencies
+}) => {
+  const ancestorTypeMembership = useMemo(
+    () => dependencies.buildAncestorTypeMembership(schema.nodes, ["Form", "FormWizard", "StepForm"]),
+    [dependencies, schema.nodes]
+  );
+  const overlaysByNodeId = dependencies.readOverlayState(runtime);
+  const captureFieldFocus = (target) => {
+    pendingFieldFocusRef.current = dependencies.capturePendingFieldFocus(target);
+  };
+  useLayoutEffect(() => {
+    const pending = pendingFieldFocusRef.current;
+    if (!pending) return;
+    pendingFieldFocusRef.current = null;
+    dependencies.restorePendingFieldFocus(pending);
+  }, [dependencies, schema, pendingFieldFocusRef]);
+  useEffect(() => {
+    if (!runtime.subscribe) return;
+    return runtime.subscribe(() => {
+      setVersion((previous) => previous + 1);
+    });
+  }, [runtime, setVersion]);
+  useEffect(() => {
+    if (!onNodeResize) return;
+    const handleMouseMove = (event) => {
+      const state = resizeStateRef.current;
+      if (!state) return;
+      const nextSize = dependencies.computeMouseResizeSize({
+        state,
+        clientX: event.clientX,
+        clientY: event.clientY,
+        minWidthPct,
+        minHeightPct,
+        minHeightPx
+      });
+      resizeStateRef.current = __spreadProps(__spreadValues({}, state), {
+        lastSize: nextSize
+      });
+      onNodeResize(state.nodeId, __spreadValues({
+        widthPct: nextSize.widthPct,
+        heightPct: nextSize.heightPct
+      }, nextSize.heightPx !== void 0 ? { heightPx: nextSize.heightPx } : {}));
+    };
+    const handleMouseUp = () => {
+      const state = resizeStateRef.current;
+      if (state == null ? void 0 : state.lastSize) {
+        onNodeResizeEnd == null ? void 0 : onNodeResizeEnd(state.nodeId, __spreadValues({
+          widthPct: state.lastSize.widthPct,
+          heightPct: state.lastSize.heightPct
+        }, state.lastSize.heightPx !== void 0 ? { heightPx: state.lastSize.heightPx } : {}));
+      }
+      resizeStateRef.current = null;
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [
+    dependencies,
+    minHeightPct,
+    minHeightPx,
+    minWidthPct,
+    onNodeResize,
+    onNodeResizeEnd,
+    resizeStateRef
+  ]);
+  return {
+    ancestorTypeMembership,
+    overlaysByNodeId,
+    captureFieldFocus
+  };
+};
+
+// src/hooks/useUIEngineState.ts
+import { useState } from "react";
+var useUIEngineState = () => {
+  const [inlineEditing, setInlineEditing] = useState(null);
+  const [wizardActiveStepByNodeId, setWizardActiveStepByNodeId] = useState({});
+  const [expandablePanelOpenByNodeId, setExpandablePanelOpenByNodeId] = useState({});
+  const [accordionOpenIdsByNodeId, setAccordionOpenIdsByNodeId] = useState({});
+  const [dropdownOpenByNodeId, setDropdownOpenByNodeId] = useState(
+    {}
+  );
+  return {
+    inlineEditing,
+    setInlineEditing,
+    wizardActiveStepByNodeId,
+    setWizardActiveStepByNodeId,
+    expandablePanelOpenByNodeId,
+    setExpandablePanelOpenByNodeId,
+    accordionOpenIdsByNodeId,
+    setAccordionOpenIdsByNodeId,
+    dropdownOpenByNodeId,
+    setDropdownOpenByNodeId
+  };
+};
+export {
+  useUIEngineEffects,
+  useUIEngineState
+};

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { applyContentComposition, applyNavigationComposition } from './composition.js';
+export { applyRenderDirectives } from './directives.js';
+export { EngineWarningFallback, NodeErrorBoundary, ReactWebEngineRoot } from './engine.js';
+export { useUIEngineEffects, useUIEngineState } from './hooks.js';
+export { buildAccordionItems, buildCoverContent, buildCoverMedia, buildExpandablePanelChildren, buildScrollRevealChildren, materializeAccordionItems, materializeBoundTable, materializeChildContent, materializeCoverContent, materializeExpandablePanelContent, materializeTabsContent } from './materialization.js';
+export { BoundTableColumn, BoundTableRow, ReactNodeRenderPlan, ResolvedBoundTableData, ResolvedReactNode, buildNodeResetToken, configurePreviewLinkBehavior, finalizeRenderedNode, getGridItemWrapperProps, normalizeRenderableChild, prepareRenderableChildren, resolveBoundTableData, resolveReactNodePlan, resolveResolvedReactNode, toBoolean } from './rendering.js';
+export { r as renderReactNode } from './renderReactNode-DmxD8hot.js';
+export { AccordionItemDescriptor, CoverContentDescriptor, ExpandablePanelContentDescriptor, ResolvedNodeContentDescriptor as ResolvedChildContentDescriptor, ResolvedNodeChildDescriptor as ResolvedChildDescriptor, TabsContentDescriptor } from '@arkcit/engine-render-layer';
+export { ComponentRegistry, ComponentRegistryEntry } from '@arkcit/engine-core';
+import 'react';
+import '@arkcit/engine-schema';
+import '@arkcit/engine-runtime';
+import 'react/jsx-runtime';