@eventcatalog/visualiser 3.20.1 → 3.20.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.d.mts +1 -1
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +9 -7
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +9 -7
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles-core.css +6 -7
  8. package/dist/styles.css +6 -7
  9. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -164,7 +164,7 @@ interface BaseNodeData {
164
164
  /**
165
165
  * Node types supported by the visualizer
166
166
  */
167
- type NodeType = "service" | "services" | "event" | "events" | "command" | "commands" | "query" | "queries" | "domain" | "domains" | "flow" | "flows" | "channel" | "channels" | "entity" | "entities" | "step" | "user" | "custom" | "externalSystem" | "external-system" | "data" | "view" | "actor" | "data-product" | "data-products" | "note";
167
+ type NodeType = "service" | "services" | "event" | "events" | "command" | "commands" | "query" | "queries" | "domain" | "domains" | "flow" | "flows" | "channel" | "channels" | "entity" | "entities" | "step" | "user" | "custom" | "externalSystem" | "external-system" | "data" | "container" | "view" | "actor" | "data-product" | "data-products" | "note";
168
168
  /**
169
169
  * Edge types supported by the visualizer
170
170
  */
package/dist/index.d.ts CHANGED
@@ -164,7 +164,7 @@ interface BaseNodeData {
164
164
  /**
165
165
  * Node types supported by the visualizer
166
166
  */
167
- type NodeType = "service" | "services" | "event" | "events" | "command" | "commands" | "query" | "queries" | "domain" | "domains" | "flow" | "flows" | "channel" | "channels" | "entity" | "entities" | "step" | "user" | "custom" | "externalSystem" | "external-system" | "data" | "view" | "actor" | "data-product" | "data-products" | "note";
167
+ type NodeType = "service" | "services" | "event" | "events" | "command" | "commands" | "query" | "queries" | "domain" | "domains" | "flow" | "flows" | "channel" | "channels" | "entity" | "entities" | "step" | "user" | "custom" | "externalSystem" | "external-system" | "data" | "container" | "view" | "actor" | "data-product" | "data-products" | "note";
168
168
  /**
169
169
  * Edge types supported by the visualizer
170
170
  */
package/dist/index.js CHANGED
@@ -6781,8 +6781,7 @@ var StepWalkthrough_default = (0, import_react62.memo)(function StepWalkthrough(
6781
6781
  nodes,
6782
6782
  edges,
6783
6783
  isFlowVisualization,
6784
- onStepChange,
6785
- mode = "full"
6784
+ onStepChange
6786
6785
  }) {
6787
6786
  const [currentNodeId, setCurrentNodeId] = (0, import_react62.useState)(null);
6788
6787
  const [pathHistory, setPathHistory] = (0, import_react62.useState)([]);
@@ -6902,7 +6901,7 @@ var StepWalkthrough_default = (0, import_react62.memo)(function StepWalkthrough(
6902
6901
  setPathHistory([]);
6903
6902
  onStepChange(null, [], true);
6904
6903
  }, [onStepChange]);
6905
- if (!isFlowVisualization || nodes.length === 0 || mode !== "full") {
6904
+ if (!isFlowVisualization || nodes.length === 0) {
6906
6905
  return null;
6907
6906
  }
6908
6907
  const { title, description } = (0, import_react62.useMemo)(() => {
@@ -11769,6 +11768,9 @@ var NodeGraphBuilder = ({
11769
11768
  () => edges.some((edge) => edge.type === "flow-edge"),
11770
11769
  [edges]
11771
11770
  );
11771
+ const isCompactMenuButton = !title;
11772
+ const menuButtonClassName = isCompactMenuButton ? "h-9 w-9 p-0 bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center justify-center transition-colors duration-150 hover:border-[rgb(var(--ec-accent)/0.3)] group" : "py-2.5 px-4 bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-colors duration-150 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap";
11773
+ const menuIconClassName = isCompactMenuButton ? "h-4 w-4 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" : "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150";
11772
11774
  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
11773
11775
  "div",
11774
11776
  {
@@ -11788,11 +11790,11 @@ var NodeGraphBuilder = ({
11788
11790
  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
11789
11791
  "button",
11790
11792
  {
11791
- className: "py-2.5 px-4 bg-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-accent-subtle)/0.4)] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-all duration-200 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap",
11793
+ className: menuButtonClassName,
11792
11794
  "aria-label": "Open menu",
11793
11795
  children: [
11794
11796
  title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
11795
- /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.MoreVertical, { className: "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" })
11797
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.MoreVertical, { className: menuIconClassName })
11796
11798
  ]
11797
11799
  }
11798
11800
  ) }),
@@ -11890,11 +11892,11 @@ var NodeGraphBuilder = ({
11890
11892
  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
11891
11893
  "button",
11892
11894
  {
11893
- className: "py-2.5 px-4 bg-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-accent-subtle)/0.4)] border border-[rgb(var(--ec-page-border))] rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] flex items-center gap-3 transition-all duration-200 hover:border-[rgb(var(--ec-accent)/0.3)] group whitespace-nowrap",
11895
+ className: menuButtonClassName,
11894
11896
  "aria-label": "Open menu",
11895
11897
  children: [
11896
11898
  title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-base font-medium text-[rgb(var(--ec-page-text))] leading-tight", children: title }),
11897
- /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.MoreVertical, { className: "h-5 w-5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 group-hover:text-[rgb(var(--ec-accent))] transition-colors duration-150" })
11899
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react32.MoreVertical, { className: menuIconClassName })
11898
11900
  ]
11899
11901
  }
11900
11902
  ) }),