@expcat/tigercat-react 2.0.0 → 2.0.19

package/dist/{chunk-ZEP7I6WB.mjs → chunk-DPWRXXXW.mjs}

@@ -1,15 +1,15 @@
 import {
   ImageGroupContext
-} from "./chunk-EKESN747.mjs";
+} from "./chunk-HSBN5MLS.mjs";
 import {
   ImagePreview
-} from "./chunk-SZBYEGKU.mjs";
+} from "./chunk-ZCGIZOMT.mjs";
 import {
   usePopup
-} from "./chunk-S7IB6YST.mjs";
+} from "./chunk-ZG56T75O.mjs";
 import {
-  renderBodyPortal
-} from "./chunk-SEWNVIHH.mjs";
+  renderOverlayPortal
+} from "./chunk-HKAZXG74.mjs";
 
 // src/components/Image.tsx
 import { useState, useRef, useEffect, useMemo, useContext, useCallback } from "react";
@@ -68,6 +68,9 @@ var Image = ({
     triggerRef: hoverTriggerRef,
     floatingRef: hoverFloatingRef,
     floatingStyles: hoverFloatingStyles,
+    floatingClasses: hoverFloatingClasses,
+    positioned: hoverPositioned,
+    overlayTarget: hoverOverlayTarget,
     triggerHandlers: hoverTriggerHandlers
   } = usePopup({
     trigger: "hover",
@@ -206,17 +209,22 @@ var Image = ({
         }
       }
     ),
-    hoverPreviewEnabled && hoverVisible && src && renderBodyPortal(
+    hoverPreviewEnabled && hoverVisible && src && renderOverlayPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
           ref: hoverFloatingRef,
           style: hoverFloatingStyles,
+          className: classNames(
+            hoverFloatingClasses,
+            "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
+          ),
+          "data-positioned": hoverPositioned,
           "aria-hidden": true,
-          className: "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg",
           children: /* @__PURE__ */ jsx("img", { src, alt: "", className: "block max-w-[16rem] max-h-[16rem] object-contain" })
         }
-      )
+      ),
+      hoverOverlayTarget
     )
   ] });
 };

package/dist/chunk-HKAZXG74.mjs

@@ -0,0 +1,308 @@
+// src/utils/overlay.ts
+import {
+  createElement,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useCallback,
+  useMemo
+} from "react";
+import { createPortal } from "react-dom";
+import {
+  getFocusTrapNavigation,
+  getFocusableElements,
+  isEventOutside,
+  lockBodyScroll,
+  isBrowser,
+  computeFloatingPosition,
+  autoUpdateFloating,
+  resolveAnchoredOverlayTarget,
+  getAnchoredOverlayTabTarget,
+  getAnchoredOverlayLayoutClasses,
+  FLOATING_OVERLAY_Z_INDEX,
+  getTransformOrigin,
+  restoreFocus,
+  registerEscapeDismiss
+} from "@expcat/tigercat-core";
+var OVERLAY_LAYER_SELECTOR = "[data-tiger-overlay-layer]";
+function resolveOverlayLayer(element) {
+  return element?.closest(OVERLAY_LAYER_SELECTOR) ?? null;
+}
+function useClickOutside({
+  enabled,
+  refs,
+  onOutsideClick,
+  defer = false
+}) {
+  useEffect(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      const elements = refs.map((ref) => ref?.current);
+      if (isEventOutside(event, elements)) {
+        onOutsideClick();
+      }
+    };
+    const attach = () => document.addEventListener("click", handler);
+    const detach = () => document.removeEventListener("click", handler);
+    if (!defer) {
+      attach();
+      return () => detach();
+    }
+    const timer = window.setTimeout(() => attach(), 0);
+    return () => {
+      window.clearTimeout(timer);
+      detach();
+    };
+  }, [enabled, refs, onOutsideClick, defer]);
+}
+function useEscapeKey({ enabled, onEscape, layerRef }) {
+  useEffect(() => {
+    if (!enabled) return;
+    return registerEscapeDismiss(document, onEscape, () => layerRef?.current ?? null);
+  }, [enabled, layerRef, onEscape]);
+}
+function useBodyScrollLock({ enabled }) {
+  useEffect(() => {
+    if (!enabled) return;
+    return lockBodyScroll();
+  }, [enabled]);
+}
+function renderBodyPortal(node) {
+  if (!isBrowser()) return null;
+  return createPortal(node, document.body);
+}
+function renderOverlayPortal(node, target, disabled = false) {
+  if (node == null || typeof node === "boolean") return node;
+  const layeredNode = createElement(
+    "div",
+    { className: "contents", "data-tiger-overlay-layer": "" },
+    node,
+    createElement("div", {
+      key: "overlay-host",
+      className: "contents",
+      "data-tiger-overlay-host": ""
+    })
+  );
+  if (disabled || !target) return layeredNode;
+  return createPortal(layeredNode, target);
+}
+function useFocusTrap({ enabled, containerRef }) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!enabled || !container) return;
+    const ownerDocument = container.ownerDocument;
+    const handler = (event) => {
+      if (!(event.target instanceof Node) || !container.contains(event.target)) return;
+      const focusables = getFocusableElements(container);
+      const activeElement = ownerDocument.activeElement;
+      const nav = getFocusTrapNavigation(event, focusables, activeElement);
+      if (!nav.shouldHandle || !nav.next) return;
+      event.preventDefault();
+      nav.next.focus();
+    };
+    ownerDocument.addEventListener("keydown", handler, true);
+    return () => ownerDocument.removeEventListener("keydown", handler, true);
+  }, [enabled, containerRef]);
+}
+function useFloating(options) {
+  const {
+    referenceRef,
+    floatingRef,
+    enabled,
+    placement: initialPlacement = "bottom",
+    offset: offsetDistance = 8,
+    arrowRef,
+    onPlacementChange,
+    context
+  } = options;
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const [placement, setPlacement] = useState(initialPlacement);
+  const [arrowX, setArrowX] = useState(void 0);
+  const [arrowY, setArrowY] = useState(void 0);
+  const [isPositioned, setIsPositioned] = useState(false);
+  const [referenceWidth, setReferenceWidth] = useState(0);
+  const enabledRef = useRef(enabled);
+  const updateRequestRef = useRef(0);
+  enabledRef.current = enabled;
+  const onPlacementChangeRef = useRef(onPlacementChange);
+  onPlacementChangeRef.current = onPlacementChange;
+  const update = useCallback(async () => {
+    const request = ++updateRequestRef.current;
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+    if (!enabledRef.current || !reference || !floating) return;
+    const floatingOptions = {
+      placement: initialPlacement,
+      offset: offsetDistance,
+      flip: true,
+      shift: true,
+      arrowElement: arrowRef?.current
+    };
+    const result = await computeFloatingPosition(
+      reference,
+      floating,
+      floatingOptions
+    );
+    if (request !== updateRequestRef.current || !enabledRef.current || referenceRef.current !== reference || floatingRef.current !== floating) {
+      return;
+    }
+    setReferenceWidth(reference.getBoundingClientRect().width);
+    setX(result.x);
+    setY(result.y);
+    setPlacement((prev) => {
+      if (prev !== result.placement) {
+        onPlacementChangeRef.current?.(result.placement);
+        return result.placement;
+      }
+      return prev;
+    });
+    if (result.arrow) {
+      setArrowX(result.arrow.x);
+      setArrowY(result.arrow.y);
+    }
+    setIsPositioned(true);
+  }, [referenceRef, floatingRef, initialPlacement, offsetDistance, arrowRef]);
+  useEffect(() => {
+    updateRequestRef.current += 1;
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+    if (!enabled || !reference || !floating) {
+      setIsPositioned(false);
+      return;
+    }
+    update();
+    const cleanup = autoUpdateFloating(reference, floating, update);
+    return () => {
+      updateRequestRef.current += 1;
+      cleanup();
+    };
+  }, [enabled, referenceRef, floatingRef, update, context]);
+  return {
+    x,
+    y,
+    placement,
+    arrowX,
+    arrowY,
+    update,
+    isPositioned,
+    referenceWidth
+  };
+}
+function useAnchoredOverlay({
+  enabled,
+  referenceRef,
+  floatingRef,
+  containerRef,
+  outsideRefs = [],
+  placement = "bottom-start",
+  offset = 4,
+  layout = "anchored",
+  matchReferenceWidth = false,
+  portal = true,
+  dismissOnOutside = false,
+  dismissOnEscape = false,
+  restoreFocusOnDismiss = false,
+  onDismiss
+}) {
+  const [target, setTarget] = useState(null);
+  const floatingLayerRef = useMemo(
+    () => ({
+      get current() {
+        return resolveOverlayLayer(floatingRef.current) ?? floatingRef.current;
+      }
+    }),
+    [floatingRef]
+  );
+  useLayoutEffect(() => {
+    if (!portal) {
+      setTarget(null);
+      return;
+    }
+    setTarget(resolveAnchoredOverlayTarget(referenceRef.current));
+  }, [portal, referenceRef]);
+  const resolvedTarget = portal && referenceRef.current ? resolveAnchoredOverlayTarget(referenceRef.current) : null;
+  const effectiveTarget = resolvedTarget ?? target;
+  const {
+    x,
+    y,
+    placement: actualPlacement,
+    isPositioned,
+    referenceWidth
+  } = useFloating({
+    referenceRef,
+    floatingRef,
+    enabled,
+    placement,
+    offset,
+    context: effectiveTarget
+  });
+  const dismiss = useCallback(
+    (reason) => {
+      onDismiss?.(reason);
+      if (restoreFocusOnDismiss && reason === "escape") {
+        window.setTimeout(() => restoreFocus(referenceRef.current, { preventScroll: true }), 0);
+      }
+    },
+    [onDismiss, referenceRef, restoreFocusOnDismiss]
+  );
+  const dismissOutside = useCallback(() => dismiss("outside"), [dismiss]);
+  const dismissOnEscapeKey = useCallback(() => dismiss("escape"), [dismiss]);
+  useClickOutside({
+    enabled: enabled && dismissOnOutside,
+    refs: [containerRef, referenceRef, floatingLayerRef, ...outsideRefs],
+    onOutsideClick: dismissOutside,
+    defer: false
+  });
+  useEscapeKey({
+    enabled: enabled && dismissOnEscape,
+    onEscape: dismissOnEscapeKey,
+    layerRef: floatingLayerRef
+  });
+  useEffect(() => {
+    const floating = floatingRef.current;
+    if (!enabled || !floating) return;
+    const handleTab = (event) => {
+      if (event.key !== "Tab") return;
+      const target2 = getAnchoredOverlayTabTarget(
+        referenceRef.current,
+        floatingRef.current,
+        event.shiftKey
+      );
+      if (!target2) return;
+      event.preventDefault();
+      window.setTimeout(() => restoreFocus(target2, { preventScroll: true }), 0);
+    };
+    floating.addEventListener("keydown", handleTab, true);
+    return () => floating.removeEventListener("keydown", handleTab, true);
+  }, [enabled, floatingRef, referenceRef]);
+  const floatingStyles = useMemo(
+    () => ({
+      "--tiger-overlay-x": `${x}px`,
+      "--tiger-overlay-y": `${y}px`,
+      "--tiger-overlay-reference-width": `${referenceWidth}px`,
+      zIndex: FLOATING_OVERLAY_Z_INDEX,
+      transformOrigin: getTransformOrigin(actualPlacement)
+    }),
+    [actualPlacement, referenceWidth, x, y]
+  );
+  return {
+    target: portal ? effectiveTarget : null,
+    floatingStyles,
+    floatingClasses: getAnchoredOverlayLayoutClasses(layout, matchReferenceWidth),
+    positioned: isPositioned,
+    placement: actualPlacement,
+    x,
+    y
+  };
+}
+
+export {
+  useEscapeKey,
+  useBodyScrollLock,
+  renderBodyPortal,
+  renderOverlayPortal,
+  useFocusTrap,
+  useAnchoredOverlay
+};

package/dist/{chunk-QWUDJC6K.mjs → chunk-HOYBHB7B.mjs}

@@ -1,9 +1,9 @@
 import {
   usePopup
-} from "./chunk-S7IB6YST.mjs";
+} from "./chunk-ZG56T75O.mjs";
 import {
-  renderBodyPortal
-} from "./chunk-SEWNVIHH.mjs";
+  renderOverlayPortal
+} from "./chunk-HKAZXG74.mjs";
 
 // src/components/Popover.tsx
 import { useMemo, useRef } from "react";
@@ -41,7 +41,17 @@ var Popover = ({
   const popoverId = popoverIdRef.current;
   const titleId = `${popoverId}-title`;
   const contentId = `${popoverId}-content`;
-  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
+  const {
+    currentVisible,
+    containerRef,
+    triggerRef,
+    floatingRef,
+    floatingStyles,
+    floatingClasses,
+    positioned,
+    overlayTarget,
+    triggerHandlers
+  } = usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
   const containerClasses = useMemo(
     () => classNames(getPopoverContainerClasses(), className),
     [className]
@@ -64,22 +74,33 @@ var Popover = ({
         children: typeof children === "function" ? children({ open: Boolean(currentVisible) }) : children
       }
     ),
-    currentVisible && renderBodyPortal(
-      /* @__PURE__ */ jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxs(
+    currentVisible && renderOverlayPortal(
+      /* @__PURE__ */ jsx(
         "div",
         {
-          id: popoverId,
-          role: "dialog",
-          "aria-modal": "false",
-          "aria-labelledby": hasTitle ? titleId : void 0,
-          "aria-describedby": hasContent ? contentId : void 0,
-          className: contentClasses,
-          children: [
-            hasTitle && /* @__PURE__ */ jsx("div", { id: titleId, className: POPOVER_TITLE_CLASSES, children: titleContent || title }),
-            hasContent && /* @__PURE__ */ jsx("div", { id: contentId, className: POPOVER_TEXT_CLASSES, children: contentContent || content })
-          ]
+          ref: floatingRef,
+          className: floatingClasses,
+          style: floatingStyles,
+          "data-positioned": positioned,
+          "aria-hidden": false,
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: popoverId,
+              role: "dialog",
+              "aria-modal": "false",
+              "aria-labelledby": hasTitle ? titleId : void 0,
+              "aria-describedby": hasContent ? contentId : void 0,
+              className: contentClasses,
+              children: [
+                hasTitle && /* @__PURE__ */ jsx("div", { id: titleId, className: POPOVER_TITLE_CLASSES, children: titleContent || title }),
+                hasContent && /* @__PURE__ */ jsx("div", { id: contentId, className: POPOVER_TEXT_CLASSES, children: contentContent || content })
+              ]
+            }
+          )
         }
-      ) })
+      ),
+      overlayTarget
     )
   ] });
 };

package/dist/{chunk-3RY6M4AK.mjs → chunk-HS6KUPTI.mjs}

@@ -1,6 +1,6 @@
 import {
   Modal
-} from "./chunk-K7MYQISG.mjs";
+} from "./chunk-54HN5BXW.mjs";
 import {
   ImageCropper
 } from "./chunk-PD6Q36OO.mjs";

package/dist/{chunk-EKESN747.mjs → chunk-HSBN5MLS.mjs}

@@ -1,6 +1,6 @@
 import {
   ImagePreview
-} from "./chunk-SZBYEGKU.mjs";
+} from "./chunk-ZCGIZOMT.mjs";
 
 // src/components/ImageGroup.tsx
 import { useState, useCallback, useMemo, createContext, useRef } from "react";

package/dist/{chunk-AJJJ6HWC.mjs → chunk-K4GIKSZE.mjs}

@@ -1,7 +1,7 @@
 import {
   renderBodyPortal,
   useBodyScrollLock
-} from "./chunk-SEWNVIHH.mjs";
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";

package/dist/{chunk-2UOGBS3C.mjs → chunk-KP6DEYWB.mjs}

@@ -1,9 +1,9 @@
 import {
   usePopup
-} from "./chunk-S7IB6YST.mjs";
+} from "./chunk-ZG56T75O.mjs";
 import {
-  renderBodyPortal
-} from "./chunk-SEWNVIHH.mjs";
+  renderOverlayPortal
+} from "./chunk-HKAZXG74.mjs";
 
 // src/components/Tooltip.tsx
 import { useMemo, useRef } from "react";
@@ -34,7 +34,17 @@ var Tooltip = ({
   if (!tooltipIdRef.current) tooltipIdRef.current = createTooltipId();
   const tooltipId = tooltipIdRef.current;
   const describedBy = content != null ? tooltipId : void 0;
-  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
+  const {
+    currentVisible,
+    containerRef,
+    triggerRef,
+    floatingRef,
+    floatingStyles,
+    floatingClasses,
+    positioned,
+    overlayTarget,
+    triggerHandlers
+  } = usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
   const containerClasses = useMemo(
     () => classNames(getTooltipContainerClasses(), className),
     [className]
@@ -53,8 +63,19 @@ var Tooltip = ({
         children
       }
     ),
-    currentVisible && renderBodyPortal(
-      /* @__PURE__ */ jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: content }) })
+    currentVisible && renderOverlayPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: floatingRef,
+          className: floatingClasses,
+          style: floatingStyles,
+          "data-positioned": positioned,
+          "aria-hidden": false,
+          children: /* @__PURE__ */ jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: content })
+        }
+      ),
+      overlayTarget
     )
   ] });
 };

package/dist/{chunk-PAN256RW.mjs → chunk-KVCI2346.mjs}

@@ -1,3 +1,7 @@
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
@@ -415,21 +419,6 @@ function useSelectState(props) {
     findFirstEnabledIndex,
     focusOptionAt
   ]);
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-    const handleClickOutside = (event) => {
-      const target = event.target;
-      if (dropdownRef.current && triggerRef.current && !dropdownRef.current.contains(target) && !triggerRef.current.contains(target)) {
-        closeDropdown();
-      }
-    };
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [isOpen]);
   return {
     listboxId,
     getOptionId,
@@ -639,6 +628,60 @@ function renderOptions(ctx) {
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Select = (props) => {
   const ctx = useSelectState(props);
+  const overlay = useAnchoredOverlay({
+    enabled: ctx.isOpen,
+    referenceRef: ctx.triggerRef,
+    floatingRef: ctx.dropdownRef,
+    placement: "bottom-start",
+    offset: 4,
+    layout: "fullscreen-sm",
+    matchReferenceWidth: true,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    restoreFocusOnDismiss: true,
+    onDismiss: ctx.closeDropdown
+  });
+  const dropdown = ctx.isOpen ? /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: ctx.dropdownRef,
+      className: classNames2(selectDropdownBaseClasses, overlay.floatingClasses),
+      style: overlay.floatingStyles,
+      "data-positioned": overlay.positioned,
+      "data-tiger-select-dropdown": "",
+      role: "listbox",
+      id: ctx.listboxId,
+      "aria-multiselectable": ctx.isMultiple ? true : void 0,
+      onKeyDown: ctx.handleDropdownKeyDown,
+      children: [
+        ctx.searchable && /* @__PURE__ */ jsx3(
+          "input",
+          {
+            ref: ctx.searchInputRef,
+            type: "text",
+            className: selectSearchInputClasses,
+            placeholder: ctx.searchPlaceholder,
+            value: ctx.searchQuery,
+            onChange: ctx.handleSearchInput,
+            onKeyDown: ctx.handleSearchKeyDown
+          }
+        ),
+        renderOptions(ctx),
+        /* @__PURE__ */ jsx3("div", { className: selectDoneActionClasses, children: /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: selectDoneButtonClasses,
+            onClick: ctx.closeDropdown,
+            onKeyDown: (event) => {
+              if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+            },
+            children: ctx.doneText
+          }
+        ) })
+      ]
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs2("div", { ...ctx.divProps, className: ctx.containerClasses, children: [
     /* @__PURE__ */ jsx3(
       "button",
@@ -680,46 +723,7 @@ var Select = (props) => {
       ),
       /* @__PURE__ */ jsx3("span", { className: classNames2("inline-flex", ctx.isOpen && "rotate-180"), "aria-hidden": "true", children: /* @__PURE__ */ jsx3(SelectChevronIcon, {}) })
     ] }),
-    ctx.isOpen && /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        ref: ctx.dropdownRef,
-        className: selectDropdownBaseClasses,
-        role: "listbox",
-        id: ctx.listboxId,
-        "aria-multiselectable": ctx.isMultiple ? true : void 0,
-        onKeyDown: ctx.handleDropdownKeyDown,
-        children: [
-          ctx.searchable && /* @__PURE__ */ jsx3(
-            "input",
-            {
-              ref: ctx.searchInputRef,
-              type: "text",
-              className: selectSearchInputClasses,
-              placeholder: ctx.searchPlaceholder,
-              value: ctx.searchQuery,
-              onChange: ctx.handleSearchInput,
-              onKeyDown: ctx.handleSearchKeyDown
-            }
-          ),
-          renderOptions(ctx),
-          /* @__PURE__ */ jsx3("div", { className: selectDoneActionClasses, children: /* @__PURE__ */ jsx3(
-            "button",
-            {
-              type: "button",
-              className: selectDoneButtonClasses,
-              onClick: ctx.closeDropdown,
-              onKeyDown: (event) => {
-                if (event.key === "Enter" || event.key === " ") {
-                  event.stopPropagation();
-                }
-              },
-              children: ctx.doneText
-            }
-          ) })
-        ]
-      }
-    )
+    dropdown && renderOverlayPortal(dropdown, overlay.target)
   ] });
 };
 

package/dist/{chunk-LBXNMCXN.mjs → chunk-OZ5XLR22.mjs}

@@ -11,6 +11,7 @@ import {
   handleTabKey,
   getActiveLineIndex,
   getCodeEditorActiveLineClasses,
+  getCodeEditorCaretClasses,
   codeEditorTextareaClasses,
   codeEditorHighlightClasses
 } from "@expcat/tigercat-core";
@@ -144,7 +145,11 @@ var CodeEditor = ({
             "textarea",
             {
               ref: textareaRef,
-              className: classNames(codeEditorTextareaClasses, wrapClass),
+              className: classNames(
+                codeEditorTextareaClasses,
+                getCodeEditorCaretClasses(theme),
+                wrapClass
+              ),
               value: code,
               onChange: handleInput,
               onKeyDown: handleKeyDown,