@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-KTBAJ3TL.mjs

@@ -0,0 +1,408 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Signature.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  SHAKE_CLASS,
+  appendSignaturePoint,
+  beginSignatureStroke,
+  classNames,
+  clampSignatureLineWidth,
+  clearSignatureStrokes,
+  createDocumentDragSession,
+  createSignatureChangePayload,
+  createSignatureSession,
+  exportSignatureDataUrl,
+  finishSignatureStroke,
+  getSignatureCanvasStatusClasses,
+  getSignatureCanvasWrapClasses,
+  getSignatureDevicePixelRatio,
+  getSignatureLabels,
+  getSignaturePoint,
+  isSignatureEmpty,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  resolveSignaturePenColor,
+  resolveSignatureSurfaceColor,
+  runShakeAnimation,
+  signatureCanvasClasses,
+  signatureRootClasses,
+  signatureStrokesToSvg,
+  signatureSvgToDataUrl,
+  signatureToolbarButtonClasses,
+  signatureToolbarClasses,
+  signatureValueToStrokes,
+  drawSignatureStrokes,
+  syncSignatureCanvasBackingStore,
+  undoSignatureStroke
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_HEIGHT = 180;
+var Signature = forwardRef(function Signature2({
+  value,
+  defaultValue,
+  width: widthProp,
+  height = DEFAULT_HEIGHT,
+  penColor,
+  backgroundColor,
+  lineWidth = 2,
+  disabled = false,
+  readonly = false,
+  clearable = true,
+  exportType = "image/png",
+  quality = 0.92,
+  ariaLabel,
+  clearText,
+  undoText,
+  locale,
+  labels: labelsOverride,
+  name,
+  id,
+  status: statusProp,
+  className,
+  onChange,
+  onBegin,
+  onEnd,
+  onClear,
+  onUndo,
+  onBlur,
+  style,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const formItemControl = useFormItemControlContext();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getSignatureLabels(mergedLocale, {
+      ...labelsOverride,
+      ariaLabel: ariaLabel?.trim() || labelsOverride?.ariaLabel,
+      undoText: undoText?.trim() || labelsOverride?.undoText,
+      clearText: clearText?.trim()
+    }),
+    [ariaLabel, clearText, labelsOverride, mergedLocale, undoText]
+  );
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const describedBy = mergeAriaDescribedBy(
+    typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const labelledby = typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim() ? rest["aria-labelledby"] : formItemControl?.labelId;
+  const parsedValue = value !== void 0 ? value : formItemControl?.value;
+  const [committed, setCommitted] = useControlledState({
+    value: value !== void 0 || formItemControl?.value !== void 0 ? parsedValue : void 0,
+    defaultValue: defaultValue ?? "",
+    onChange: (next, payload) => {
+      onChange?.(next, payload);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const rootRef = useRef(null);
+  const wrapRef = useRef(null);
+  const canvasRef = useRef(null);
+  const sessionRef = useRef(
+    createSignatureSession(signatureValueToStrokes(committed))
+  );
+  const dragDisposeRef = useRef(void 0);
+  const activePointerRef = useRef(null);
+  const [strokes, setStrokes] = useState(() => signatureValueToStrokes(committed));
+  const [observedWidth, setObservedWidth] = useState(0);
+  const logicalWidth = widthProp ?? observedWidth;
+  const isInteractive = !effectiveDisabled && !readonly;
+  const normalizedLineWidth = clampSignatureLineWidth(lineWidth);
+  const exportOptions = useCallback(
+    () => ({
+      width: Math.max(1, logicalWidth || widthProp || 1),
+      height,
+      backgroundColor,
+      surfaceColor: resolveSignatureSurfaceColor(canvasRef.current),
+      quality,
+      exportType
+    }),
+    [backgroundColor, exportType, height, logicalWidth, quality, widthProp]
+  );
+  const draw = useCallback(
+    (nextStrokes) => {
+      const canvas = canvasRef.current;
+      if (!canvas || logicalWidth <= 0 || height <= 0) return;
+      const context = syncSignatureCanvasBackingStore(
+        canvas,
+        logicalWidth,
+        height,
+        getSignatureDevicePixelRatio()
+      );
+      if (!context) return;
+      drawSignatureStrokes(context, nextStrokes, {
+        width: logicalWidth,
+        height,
+        backgroundColor
+      });
+    },
+    [backgroundColor, height, logicalWidth]
+  );
+  useLayoutEffect(() => {
+    draw(strokes);
+  }, [draw, strokes]);
+  useEffect(() => {
+    if (sessionRef.current.activeStroke) return;
+    const next = signatureValueToStrokes(committed);
+    sessionRef.current = createSignatureSession(next);
+    setStrokes(next);
+  }, [committed]);
+  useEffect(() => {
+    if (widthProp != null) return;
+    const wrap = wrapRef.current;
+    if (!wrap || typeof ResizeObserver === "undefined") {
+      if (wrap) setObservedWidth(Math.floor(wrap.clientWidth));
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const next = Math.floor(entries[0]?.contentRect.width ?? wrap.clientWidth);
+      if (next > 0) setObservedWidth(next);
+    });
+    observer.observe(wrap);
+    const initial = Math.floor(wrap.clientWidth);
+    if (initial > 0) setObservedWidth(initial);
+    return () => observer.disconnect();
+  }, [widthProp]);
+  useEffect(() => {
+    if (status === "error") runShakeAnimation(rootRef.current);
+  }, [status, formItemControl?.shakeTrigger]);
+  const emitPayload = useCallback(
+    (session, extra) => {
+      const payload = createSignatureChangePayload(session.strokes, exportOptions());
+      sessionRef.current = createSignatureSession(session.strokes);
+      setStrokes(session.strokes);
+      setCommitted(payload.value, payload);
+      formItemControl?.onChange?.(payload.value);
+      if (extra?.clear) onClear?.();
+      if (extra?.undo) onUndo?.();
+      return payload;
+    },
+    [exportOptions, formItemControl, onClear, onUndo, setCommitted]
+  );
+  const clear = useCallback(() => {
+    if (effectiveDisabled || readonly) return;
+    dragDisposeRef.current?.();
+    dragDisposeRef.current = void 0;
+    const session = clearSignatureStrokes();
+    emitPayload(session, { clear: true });
+  }, [effectiveDisabled, emitPayload, readonly]);
+  const undo = useCallback(() => {
+    if (effectiveDisabled || readonly) return;
+    dragDisposeRef.current?.();
+    dragDisposeRef.current = void 0;
+    const session = undoSignatureStroke(sessionRef.current);
+    emitPayload(session, { undo: true });
+  }, [effectiveDisabled, emitPayload, readonly]);
+  const toSVG = useCallback(
+    () => signatureStrokesToSvg(sessionRef.current.strokes, exportOptions()),
+    [exportOptions]
+  );
+  const toDataURL = useCallback(
+    (type = exportType, nextQuality = quality) => {
+      if (type === "image/svg+xml") return signatureSvgToDataUrl(toSVG());
+      return exportSignatureDataUrl(sessionRef.current.strokes, type, {
+        ...exportOptions(),
+        quality: nextQuality
+      });
+    },
+    [exportOptions, exportType, quality, toSVG]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      clear,
+      undo,
+      isEmpty: () => isSignatureEmpty(sessionRef.current.strokes),
+      toDataURL,
+      toSVG,
+      focus: () => canvasRef.current?.focus()
+    }),
+    [clear, toDataURL, toSVG, undo]
+  );
+  const getPoint = (clientX, clientY) => {
+    const canvas = canvasRef.current;
+    const rect = canvas?.getBoundingClientRect() ?? {
+      left: 0,
+      top: 0,
+      width: logicalWidth,
+      height
+    };
+    return getSignaturePoint(clientX, clientY, rect, logicalWidth || rect.width, height);
+  };
+  const handlePointerDown = (event) => {
+    if (!isInteractive) return;
+    event.preventDefault();
+    const pointerId = event.pointerId;
+    const color = resolveSignaturePenColor(event.currentTarget, penColor);
+    const next = beginSignatureStroke(
+      sessionRef.current,
+      getPoint(event.clientX, event.clientY),
+      pointerId,
+      color,
+      normalizedLineWidth
+    );
+    if (next.pointerId !== pointerId) return;
+    sessionRef.current = next;
+    activePointerRef.current = pointerId;
+    setStrokes(next.strokes);
+    onBegin?.();
+    dragDisposeRef.current?.();
+    const session = createDocumentDragSession({
+      startX: event.clientX,
+      startY: event.clientY,
+      pointerId,
+      pointerTarget: event.currentTarget,
+      dragThreshold: 0,
+      onMove: (payload) => {
+        const moved = appendSignaturePoint(
+          sessionRef.current,
+          getPoint(payload.currentX, payload.currentY),
+          pointerId
+        );
+        sessionRef.current = moved;
+        setStrokes(moved.strokes);
+      },
+      onEnd: () => endDrawing(pointerId)
+    });
+    dragDisposeRef.current = () => session.dispose();
+  };
+  const endDrawing = (id2) => {
+    dragDisposeRef.current?.();
+    dragDisposeRef.current = void 0;
+    if (activePointerRef.current !== id2) return;
+    activePointerRef.current = null;
+    if (!sessionRef.current.activeStroke) return;
+    const finished = finishSignatureStroke(sessionRef.current, id2);
+    sessionRef.current = finished;
+    const payload = emitPayload(finished);
+    if (payload) onEnd?.(payload);
+  };
+  useEffect(() => () => dragDisposeRef.current?.(), []);
+  const handleKeyDown = (event) => {
+    if (!clearable || effectiveDisabled || readonly) return;
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
+      event.preventDefault();
+      undo();
+      return;
+    }
+    if (event.key === "Backspace") {
+      event.preventDefault();
+      undo();
+      return;
+    }
+    if (event.key === "Delete") {
+      event.preventDefault();
+      clear();
+    }
+  };
+  const handleFocusOut = (event) => {
+    const next = event.relatedTarget;
+    if (rootRef.current && next && rootRef.current.contains(next)) return;
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  };
+  const empty = isSignatureEmpty(strokes) && !committed;
+  const { "aria-describedby": _describedBy, "aria-labelledby": _labelledby, ...rootRest } = rest;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: classNames(signatureRootClasses, className, status === "error" && SHAKE_CLASS),
+      style,
+      onBlur: handleFocusOut,
+      ...rootRest,
+      children: [
+        effectiveName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: effectiveName, value: committed ?? "" }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: wrapRef,
+            className: classNames(
+              getSignatureCanvasWrapClasses(effectiveDisabled, readonly),
+              getSignatureCanvasStatusClasses(status)
+            ),
+            children: /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: canvasRef,
+                className: signatureCanvasClasses,
+                width: Math.max(1, logicalWidth),
+                height,
+                tabIndex: effectiveDisabled ? -1 : 0,
+                role: "textbox",
+                "aria-multiline": "true",
+                id: effectiveId,
+                "aria-label": labelledby ? void 0 : labels.ariaLabel,
+                "aria-labelledby": labelledby,
+                "aria-describedby": describedBy,
+                "aria-disabled": effectiveDisabled || void 0,
+                "aria-readonly": readonly || void 0,
+                "aria-invalid": status === "error" ? true : void 0,
+                "aria-required": formItemControl?.required || void 0,
+                onPointerDown: handlePointerDown,
+                onLostPointerCapture: () => {
+                  const id2 = activePointerRef.current;
+                  if (id2 != null) endDrawing(id2);
+                },
+                onKeyDown: handleKeyDown
+              }
+            )
+          }
+        ),
+        clearable ? /* @__PURE__ */ jsxs("div", { className: signatureToolbarClasses, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: signatureToolbarButtonClasses,
+              disabled: effectiveDisabled || readonly || empty,
+              onClick: undo,
+              children: labels.undoText
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: signatureToolbarButtonClasses,
+              disabled: effectiveDisabled || readonly || empty,
+              onClick: clear,
+              children: labels.clearText
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+});
+Signature.displayName = "Signature";
+var Signature_default = Signature;
+
+export {
+  Signature,
+  Signature_default
+};

package/dist/chunk-KVXGNUIE.mjs

@@ -0,0 +1,101 @@
+import {
+  ImagePreview
+} from "./chunk-OYQ6HTLQ.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/ImageGroup.tsx
+import { useState, useCallback, useMemo, useRef, createContext } from "react";
+import {
+  clampImageGroupPreviewIndex,
+  getImageGroupClasses,
+  getImageGroupItemIndex,
+  getImageGroupLightboxItems,
+  getImageLabels,
+  registerImageGroupItem,
+  resolveImageGroupName,
+  unregisterImageGroupItem
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ImageGroupContext = createContext(null);
+var ImageGroup = ({
+  preview = true,
+  onPreviewOpenChange,
+  children,
+  className,
+  id,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...rest
+}) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getImageLabels(config.locale), [config.locale]);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState(0);
+  const [items, setItems] = useState([]);
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const register = useCallback((item) => {
+    setItems((current) => registerImageGroupItem(current, item).items);
+  }, []);
+  const unregister = useCallback((itemId) => {
+    setItems((current) => unregisterImageGroupItem(current, itemId));
+  }, []);
+  const openPreview = useCallback(
+    (itemId) => {
+      if (!preview) return;
+      const index = getImageGroupItemIndex(itemsRef.current, itemId);
+      if (index < 0) return;
+      setPreviewIndex(index);
+      setPreviewVisible(true);
+      onPreviewOpenChange?.(true);
+    },
+    [preview, onPreviewOpenChange]
+  );
+  const contextValue = useMemo(
+    () => ({ preview, register, unregister, openPreview }),
+    [preview, register, unregister, openPreview]
+  );
+  const images = getImageGroupLightboxItems(items);
+  const currentIndex = clampImageGroupPreviewIndex(previewIndex, images.length);
+  const groupName = resolveImageGroupName({
+    ariaLabel,
+    ariaLabelledby,
+    localeLabel: labels.groupAriaLabel
+  });
+  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      id,
+      style,
+      className: getImageGroupClasses(className),
+      role: groupName.role,
+      "aria-label": groupName["aria-label"],
+      "aria-labelledby": groupName["aria-labelledby"],
+      children: [
+        children,
+        preview && /* @__PURE__ */ jsx(
+          ImagePreview,
+          {
+            open: previewVisible && images.length > 0,
+            images,
+            currentIndex,
+            onOpenChange: (val) => {
+              setPreviewVisible(val);
+              if (!val) onPreviewOpenChange?.(false);
+            },
+            onCurrentIndexChange: setPreviewIndex
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+export {
+  ImageGroupContext,
+  ImageGroup
+};

package/dist/{chunk-XJ7U2W7S.mjs → chunk-LHHRNRND.mjs}

@@ -1,10 +1,11 @@
 // src/components/Space.tsx
+import { forwardRef } from "react";
 import {
   getSpaceClasses,
   getSpaceStyle
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
-var Space = ({
+var Space = forwardRef(function Space2({
   direction = "horizontal",
   size = "md",
   align = "start",
@@ -13,18 +14,21 @@ var Space = ({
   className,
   style,
   ...props
-}) => {
+}, ref) {
   const gapStyle = getSpaceStyle(size);
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...props,
+      ref,
+      "data-tiger-space": "",
       className: getSpaceClasses({ direction, size, align, wrap }, className),
       style: gapStyle ? { ...gapStyle, ...style } : style,
       children
     }
   );
-};
+});
+Space.displayName = "Space";
 
 export {
   Space

package/dist/{chunk-2JMI7TCM.mjs → chunk-LMSEOGKK.mjs}

@@ -1,24 +1,15 @@
 import {
   TaskBoard
-} from "./chunk-O6VYD4E4.mjs";
+} from "./chunk-X7NF2HZV.mjs";
 
 // src/components/Kanban.tsx
 import { jsx } from "react/jsx-runtime";
 var Kanban = ({
   showCardCount = true,
   allowAddCard = true,
-  allowAddColumn = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(
-    TaskBoard,
-    {
-      showCardCount,
-      allowAddCard,
-      allowAddColumn,
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(TaskBoard, { showCardCount, allowAddCard, ...props });
 };
 var Kanban_default = Kanban;
 

package/dist/{chunk-VJWSKJLJ.mjs → chunk-LPVE2LX3.mjs}

@@ -1,13 +1,18 @@
 import {
   ChartCanvas
-} from "./chunk-CUAXRBKO.mjs";
+} from "./chunk-OP77MPGN.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/OrgChart.tsx
 import { useMemo, useState } from "react";
 import {
-  classNames,
   computeOrgChartLayout,
-  getChartInnerRect,
+  getCartesianChartShellClasses,
+  getChartLabels,
+  mergeTigerLocale,
+  normalizeChartPadding,
   getOrgChartNodeAriaLabel,
   getOrgChartNodeClasses,
   orgChartLinkClasses,
@@ -33,23 +38,21 @@ function OrgChart({
   selectable = false,
   selectedId,
   activeOpacity = 1,
-  inactiveOpacity = 0.35,
+  inactiveOpacity = 0.25,
   colors,
   title,
   desc,
-  ariaLabel = "Organization chart",
+  ariaLabel,
   className,
   onNodeClick,
   onNodeHover,
   onSelectedIdChange
 }) {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getChartLabels(mergeTigerLocale(config.locale)), [config.locale]);
   const [innerSelectedId, setInnerSelectedId] = useState(null);
   const [hoveredId, setHoveredId] = useState(null);
   const resolvedSelectedId = selectedId === void 0 ? innerSelectedId : selectedId;
-  const innerRect = useMemo(
-    () => getChartInnerRect(width, height, padding),
-    [height, padding, width]
-  );
   const layout = useMemo(
     () => computeOrgChartLayout(data, {
       nodeWidth,
@@ -61,11 +64,22 @@ function OrgChart({
     }),
     [colors, data, direction, levelGap, nodeHeight, nodeWidth, siblingGap]
   );
-  const offsetX = Math.max(0, (innerRect.width - layout.width) / 2);
-  const offsetY = Math.max(0, (innerRect.height - layout.height) / 2);
+  const resolvedPadding = normalizeChartPadding(padding);
+  const plotWidth = Math.max(width, layout.width + resolvedPadding.left + resolvedPadding.right);
+  const plotHeight = Math.max(height, layout.height + resolvedPadding.top + resolvedPadding.bottom);
+  const offsetX = Math.max(
+    0,
+    (plotWidth - resolvedPadding.left - resolvedPadding.right - layout.width) / 2
+  );
+  const offsetY = Math.max(
+    0,
+    (plotHeight - resolvedPadding.top - resolvedPadding.bottom - layout.height) / 2
+  );
   const activeId = resolvedSelectedId ?? hoveredId;
+  const canClick = hoverable || selectable || Boolean(onNodeClick);
   const selectNode = (node) => {
-    if (selectable && !node.node.disabled) {
+    if (node.node.disabled) return;
+    if (selectable) {
       const nextId = resolvedSelectedId === node.id ? null : node.id;
       if (selectedId === void 0) setInnerSelectedId(nextId);
       onSelectedIdChange?.(nextId);
@@ -73,6 +87,7 @@ function OrgChart({
     onNodeClick?.(node.node);
   };
   const setHoveredNode = (node) => {
+    if (!hoverable && !onNodeHover) return;
     if (!hoverable) return;
     setHoveredId(node?.id ?? null);
     onNodeHover?.(node?.node ?? null);
@@ -81,17 +96,15 @@ function OrgChart({
     if (activeId === null) return activeOpacity;
     return activeId === node.id ? activeOpacity : inactiveOpacity;
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: getCartesianChartShellClasses({ showLegend: false, className }), children: /* @__PURE__ */ jsx(
     ChartCanvas,
     {
-      width,
-      height,
+      width: plotWidth,
+      height: plotHeight,
       padding,
       title,
       desc,
-      className: classNames(className),
-      role: "img",
-      "aria-label": ariaLabel,
+      "aria-label": ariaLabel ?? (title ? void 0 : labels.orgChartAriaLabel),
       children: /* @__PURE__ */ jsxs("g", { transform: `translate(${offsetX}, ${offsetY})`, "data-series-type": "org-chart", children: [
         /* @__PURE__ */ jsx("g", { "data-org-chart-links": "true", children: layout.links.map((link) => /* @__PURE__ */ jsx(
           "path",
@@ -103,7 +116,7 @@ function OrgChart({
         )) }),
         /* @__PURE__ */ jsx("g", { "data-org-chart-nodes": "true", children: layout.nodes.map((node) => {
           const selected = resolvedSelectedId === node.id;
-          const interactive = (hoverable || selectable) && !node.node.disabled;
+          const interactive = canClick && !node.node.disabled;
           const textStart = showAvatars && node.node.avatar ? 58 : 16;
           return /* @__PURE__ */ jsxs(
             "g",
@@ -112,7 +125,7 @@ function OrgChart({
               className: getOrgChartNodeClasses(interactive, selected),
               opacity: getNodeOpacity(node),
               role: interactive ? "button" : "group",
-              tabIndex: interactive ? 0 : void 0,
+              tabIndex: interactive ? activeId === node.id || activeId === null && node.index === 0 ? 0 : -1 : void 0,
               "aria-label": getOrgChartNodeAriaLabel(node.node),
               onMouseEnter: () => setHoveredNode(node),
               onMouseLeave: () => setHoveredNode(null),
@@ -158,7 +171,7 @@ function OrgChart({
         }) })
       ] })
     }
-  );
+  ) });
 }
 OrgChart.displayName = "OrgChart";