@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/{chunk-AUD3VOLO.mjs → chunk-5TQFSORK.mjs}

@@ -1,15 +1,28 @@
 import {
   usePopup
-} from "./chunk-WTHWLCRL.mjs";
+} from "./chunk-S37KEELR.mjs";
 import {
-  renderOverlayPortal
-} from "./chunk-HKAZXG74.mjs";
+  composeRefs,
+  renderOverlayTrigger
+} from "./chunk-WWZZRB7H.mjs";
+import {
+  Button
+} from "./chunk-WFLXJOFU.mjs";
+import {
+  renderOverlayPortal,
+  useFocusTrap
+} from "./chunk-OU2AV7DY.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/Popconfirm.tsx
-import React, { useMemo, useRef } from "react";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
 import {
   classNames,
-  createFloatingIdFactory,
+  getArrowStyles,
+  getFocusableElements,
+  getOverlayTriggerAria,
   getPopconfirmIconPath,
   getPopconfirmContainerClasses,
   getPopconfirmTriggerClasses,
@@ -19,16 +32,14 @@ import {
   getPopconfirmIconClasses,
   getPopconfirmArrowClasses,
   getPopconfirmButtonsClasses,
-  getPopconfirmCancelButtonClasses,
-  getPopconfirmOkButtonClasses,
   mergeStyleValues,
   popconfirmIconPathStrokeLinecap,
   popconfirmIconPathStrokeLinejoin,
   popconfirmIconStrokeWidth,
-  popconfirmIconViewBox
+  popconfirmIconViewBox,
+  resolveLocaleText
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
-var createPopconfirmId = createFloatingIdFactory("popconfirm");
 var PopconfirmIcon = ({ type }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -47,19 +58,20 @@ var PopconfirmIcon = ({ type }) => /* @__PURE__ */ jsx(
     )
   }
 );
-var Popconfirm = ({
+var Popconfirm = forwardRef(function Popconfirm2({
   open,
   defaultOpen = false,
-  title = "\u786E\u5B9A\u8981\u6267\u884C\u6B64\u64CD\u4F5C\u5417\uFF1F",
+  title,
   description,
   icon = "warning",
   showIcon = true,
-  okText = "\u786E\u5B9A",
-  cancelText = "\u53D6\u6D88",
+  okText,
+  cancelText,
   okType = "primary",
   placement: initialPlacement = "top",
   offset = 8,
   disabled = false,
+  asChild = false,
   className,
   style,
   children,
@@ -69,13 +81,22 @@ var Popconfirm = ({
   onConfirm,
   onCancel,
   ...divProps
-}) => {
-  const popconfirmIdRef = useRef(null);
-  if (!popconfirmIdRef.current) popconfirmIdRef.current = createPopconfirmId();
-  const popconfirmId = popconfirmIdRef.current;
+}, forwardedRef) {
+  const { locale } = useTigerConfig();
+  const resolvedTitle = resolveLocaleText(
+    "Are you sure you want to continue?",
+    title,
+    locale?.common?.confirmTitle
+  );
+  const resolvedOkText = resolveLocaleText("OK", okText, locale?.common?.okText);
+  const resolvedCancelText = resolveLocaleText("Cancel", cancelText, locale?.common?.cancelText);
+  const popconfirmId = `tiger-popconfirm-${useId()}`;
   const titleId = `${popconfirmId}-title`;
   const descriptionId = `${popconfirmId}-description`;
   const describedBy = description || descriptionContent ? descriptionId : void 0;
+  const arrowRef = useRef(null);
+  const cancelRef = useRef(null);
+  const [confirming, setConfirming] = useState(false);
   const {
     currentVisible,
     setVisible,
@@ -87,7 +108,9 @@ var Popconfirm = ({
     overlayTarget,
     closeAndRestoreFocus,
     actualPlacement,
-    floatingStyles: baseFloatingStyles
+    floatingStyles: baseFloatingStyles,
+    arrowX,
+    arrowY
   } = usePopup({
     open,
     defaultOpen,
@@ -95,82 +118,86 @@ var Popconfirm = ({
     placement: initialPlacement,
     offset,
     multiTrigger: false,
+    arrowRef,
     onOpenChange
   });
-  const handleConfirm = () => {
-    onConfirm?.();
+  useFocusTrap({ enabled: Boolean(currentVisible), containerRef: floatingRef });
+  useEffect(() => {
+    if (!currentVisible) {
+      setConfirming(false);
+      return;
+    }
+    const frame = requestAnimationFrame(() => {
+      if (cancelRef.current) {
+        cancelRef.current.focus();
+        return;
+      }
+      const root = floatingRef.current;
+      if (!root) return;
+      const first = getFocusableElements(root)[0];
+      first?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [currentVisible, floatingRef]);
+  const handleConfirm = async () => {
+    const result = onConfirm?.();
+    if (result && typeof result.then === "function") {
+      setConfirming(true);
+      try {
+        await result;
+        closeAndRestoreFocus();
+      } catch {
+        setConfirming(false);
+      }
+      return;
+    }
     closeAndRestoreFocus();
   };
   const handleCancel = () => {
+    if (confirming) return;
     onCancel?.();
     closeAndRestoreFocus();
   };
-  const handleTriggerClick = () => {
-    if (disabled) return;
-    setVisible(!currentVisible);
-  };
   const containerClasses = useMemo(
     () => classNames(getPopconfirmContainerClasses(), className),
     [className]
   );
   const triggerClasses = useMemo(() => getPopconfirmTriggerClasses(disabled), [disabled]);
-  const arrowClasses = useMemo(() => getPopconfirmArrowClasses(actualPlacement), [actualPlacement]);
   const contentClasses = getPopconfirmContentClasses();
   const titleClasses = getPopconfirmTitleClasses();
   const descriptionClasses = getPopconfirmDescriptionClasses();
   const iconClasses = useMemo(() => getPopconfirmIconClasses(icon), [icon]);
   const buttonsClasses = getPopconfirmButtonsClasses();
-  const cancelButtonClasses = getPopconfirmCancelButtonClasses();
-  const okButtonClasses = useMemo(() => getPopconfirmOkButtonClasses(okType), [okType]);
+  const arrowClasses = getPopconfirmArrowClasses();
+  const arrowStyle = useMemo(
+    () => getArrowStyles(actualPlacement, { x: arrowX, y: arrowY }),
+    [actualPlacement, arrowX, arrowY]
+  );
   if (!children) return null;
   const resolvedChildren = typeof children === "function" ? children({ open: Boolean(currentVisible) }) : children;
+  const triggerAria = getOverlayTriggerAria({
+    kind: "dialog",
+    open: Boolean(currentVisible),
+    controlsId: popconfirmId,
+    disabled
+  });
   const mergedStyle = mergeStyleValues(style);
-  const triggerProps = {
-    className: triggerClasses,
-    onClick: (event) => {
-      const target = resolvedChildren;
-      if (React.isValidElement(target)) {
-        const onChildClick = target.props.onClick;
-        if (typeof onChildClick === "function") {
-          ;
-          onChildClick(event);
-        }
-      }
-      if (event.defaultPrevented) return;
-      handleTriggerClick();
-    },
-    "aria-haspopup": "dialog",
-    "aria-expanded": Boolean(currentVisible),
-    "aria-controls": currentVisible ? popconfirmId : void 0,
-    "data-state": currentVisible ? "open" : "closed"
-  };
-  const triggerNode = (() => {
-    if (React.isValidElement(resolvedChildren)) {
-      return React.cloneElement(resolvedChildren, {
-        ...triggerProps,
-        className: classNames(resolvedChildren.props.className, triggerProps.className)
-      });
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...triggerProps,
-        role: "button",
-        tabIndex: disabled ? -1 : 0,
-        "aria-disabled": disabled,
-        onKeyDown: (event) => {
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style: mergedStyle, ...divProps, children: [
+    renderOverlayTrigger({
+      asChild,
+      child: resolvedChildren,
+      triggerRef: composeRefs(forwardedRef, triggerRef),
+      className: asChild ? void 0 : triggerClasses,
+      disabled,
+      preventDefaultOnClick: true,
+      aria: triggerAria,
+      handlers: {
+        onClick: () => {
           if (disabled) return;
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            handleTriggerClick();
-          }
-        },
-        children: resolvedChildren
+          setVisible(!currentVisible);
+        }
       }
-    );
-  })();
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style: mergedStyle, ...divProps, children: [
-    /* @__PURE__ */ jsx("div", { ref: triggerRef, children: triggerNode }),
+    }),
     renderOverlayPortal(
       /* @__PURE__ */ jsx(
         "div",
@@ -182,13 +209,14 @@ var Popconfirm = ({
           hidden: !currentVisible,
           "aria-hidden": !currentVisible,
           children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx("div", { className: arrowClasses, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("div", { ref: arrowRef, className: arrowClasses, style: arrowStyle, "aria-hidden": "true" }),
             /* @__PURE__ */ jsxs(
               "div",
               {
                 id: popconfirmId,
                 role: "dialog",
                 "aria-modal": "false",
+                tabIndex: -1,
                 "aria-labelledby": titleId,
                 "aria-describedby": describedBy,
                 className: contentClasses,
@@ -196,13 +224,23 @@ var Popconfirm = ({
                   /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
                     showIcon && /* @__PURE__ */ jsx("div", { className: iconClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsx(PopconfirmIcon, { type: icon }) }),
                     /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                      /* @__PURE__ */ jsx("div", { id: titleId, className: titleClasses, children: titleContent || title }),
+                      /* @__PURE__ */ jsx("div", { id: titleId, className: titleClasses, children: titleContent || resolvedTitle }),
                       (description || descriptionContent) && /* @__PURE__ */ jsx("div", { id: descriptionId, className: descriptionClasses, children: descriptionContent || description })
                     ] })
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: buttonsClasses, children: [
-                    /* @__PURE__ */ jsx("button", { type: "button", className: cancelButtonClasses, onClick: handleCancel, children: cancelText }),
-                    /* @__PURE__ */ jsx("button", { type: "button", className: okButtonClasses, onClick: handleConfirm, children: okText })
+                    /* @__PURE__ */ jsx(Button, { ref: cancelRef, size: "sm", variant: "outline", onClick: handleCancel, children: resolvedCancelText }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: okType === "danger" ? "primary" : "primary",
+                        danger: okType === "danger",
+                        loading: confirming,
+                        onClick: () => void handleConfirm(),
+                        children: resolvedOkText
+                      }
+                    )
                   ] })
                 ]
               }
@@ -213,7 +251,8 @@ var Popconfirm = ({
       overlayTarget
     )
   ] });
-};
+});
+Popconfirm.displayName = "Popconfirm";
 
 export {
   Popconfirm

package/dist/chunk-5XI3Q6A6.mjs

@@ -0,0 +1,279 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/CodeEditor.tsx
+import React, {
+  useState,
+  useRef,
+  useMemo,
+  useCallback,
+  useLayoutEffect,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import {
+  classNames,
+  getCodeEditorContainerClasses,
+  getLineNumberClasses,
+  getTokenClasses,
+  generateLineNumbers,
+  handleTabKey,
+  getActiveLineIndex,
+  getCodeEditorActiveLineClasses,
+  codeEditorTextareaClasses,
+  codeEditorHighlightClasses,
+  codeEditorScrollerClasses,
+  getCodeEditorWrapClass,
+  getCodeEditorThemeVars,
+  getCodeEditorHeightStyle,
+  buildCodeEditorLineModels,
+  resolveEditorTabAction,
+  getCodeEditorLabels,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CodeEditor = forwardRef(function CodeEditor2({
+  value: controlledValue,
+  defaultValue = "",
+  language = "plain",
+  theme = "light",
+  readOnly = false,
+  lineNumbers = true,
+  tabSize = 2,
+  placeholder,
+  wordWrap = false,
+  minLines = 3,
+  maxLines = 0,
+  highlightActiveLine = true,
+  disabled = false,
+  className,
+  style,
+  onChange,
+  highlighter,
+  locale,
+  labels: labelsOverride,
+  ariaLabel,
+  name,
+  id,
+  ...restProps
+}, ref) {
+  const config = useTigerConfig();
+  const formItemControl = useFormItemControlContext();
+  const formBoundValue = formItemControl?.value;
+  const resolvedValue = controlledValue !== void 0 ? controlledValue : typeof formBoundValue === "string" ? formBoundValue : void 0;
+  const [code, setCode] = useControlledState({
+    value: resolvedValue,
+    defaultValue,
+    onChange: (next) => {
+      onChange?.(next);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const [activeLine, setActiveLine] = useState(0);
+  const [allowTabExit, setAllowTabExit] = useState(false);
+  const textareaRef = useRef(null);
+  const pendingSelection = useRef(null);
+  const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getCodeEditorLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  useImperativeHandle(ref, () => textareaRef.current);
+  useLayoutEffect(() => {
+    const pending = pendingSelection.current;
+    if (!pending || !textareaRef.current) return;
+    pendingSelection.current = null;
+    textareaRef.current.selectionStart = pending.start;
+    textareaRef.current.selectionEnd = pending.end;
+  });
+  const model = useMemo(
+    () => buildCodeEditorLineModels({
+      value: code,
+      language,
+      theme,
+      activeLine,
+      highlightActiveLine,
+      disabled: effectiveDisabled,
+      highlighter
+    }),
+    [code, language, theme, activeLine, highlightActiveLine, effectiveDisabled, highlighter]
+  );
+  const lineNums = useMemo(() => generateLineNumbers(model.lines.length), [model.lines.length]);
+  const containerClasses = useMemo(
+    () => getCodeEditorContainerClasses(theme, effectiveDisabled, className),
+    [theme, effectiveDisabled, className]
+  );
+  const containerStyle = useMemo(() => {
+    const height = getCodeEditorHeightStyle(minLines, maxLines);
+    const themeVars = getCodeEditorThemeVars(theme);
+    return { ...height, ...themeVars, ...style };
+  }, [minLines, maxLines, theme, style]);
+  const updateActiveLine = useCallback(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    setActiveLine(getActiveLineIndex(ta.value, ta.selectionStart));
+  }, []);
+  const handleInput = useCallback(
+    (e) => {
+      const val = e.target.value;
+      setCode(val);
+      setActiveLine(getActiveLineIndex(val, e.target.selectionStart));
+    },
+    [setCode]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      const action = resolveEditorTabAction(e, {
+        readOnly,
+        disabled: effectiveDisabled,
+        allowTabExit
+      });
+      if (action === "arm-exit") {
+        setAllowTabExit(true);
+        return;
+      }
+      if (action === "passthrough") {
+        if (e.key !== "Tab") setAllowTabExit(false);
+        return;
+      }
+      e.preventDefault();
+      setAllowTabExit(false);
+      const ta = textareaRef.current;
+      if (!ta) return;
+      const result = handleTabKey(ta.value, ta.selectionStart, ta.selectionEnd, tabSize, {
+        shift: action === "outdent"
+      });
+      pendingSelection.current = {
+        start: result.selectionStart,
+        end: result.selectionEnd
+      };
+      setCode(result.value);
+    },
+    [allowTabExit, effectiveDisabled, readOnly, setCode, tabSize]
+  );
+  const wrapClass = getCodeEditorWrapClass(wordWrap);
+  const activeLineClass = getCodeEditorActiveLineClasses(theme);
+  const {
+    id: _ignoredId,
+    name: _ignoredName,
+    onFocus,
+    onBlur,
+    "aria-label": ariaLabelAttr,
+    "aria-labelledby": ariaLabelledBy,
+    ...containerRest
+  } = restProps;
+  const hostRest = {};
+  const extraContainer = {};
+  for (const [key, val] of Object.entries(containerRest)) {
+    if (key.startsWith("data-") || key.startsWith("aria-") || key === "onFocus" || key === "onBlur") {
+      if (key === "data-language" || key === "data-theme") extraContainer[key] = val;
+      else hostRest[key] = val;
+    } else {
+      extraContainer[key] = val;
+    }
+  }
+  const renderToken = (token, idx) => {
+    const cls = getTokenClasses(token.type, theme);
+    return cls ? /* @__PURE__ */ jsx("span", { className: cls, children: token.value }, idx) : /* @__PURE__ */ jsx(React.Fragment, { children: token.value }, idx);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: containerClasses,
+      style: containerStyle,
+      "data-language": language,
+      "data-theme": theme,
+      ...extraContainer,
+      children: /* @__PURE__ */ jsxs("div", { className: codeEditorScrollerClasses, "data-tiger-code-scroller": "", children: [
+        lineNumbers && /* @__PURE__ */ jsx("div", { className: getLineNumberClasses(theme), "aria-hidden": "true", children: lineNums.map((n) => /* @__PURE__ */ jsx("div", { className: "min-h-[1.625rem]", children: n }, n)) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+          model.blockHtml !== null ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames(codeEditorHighlightClasses, wrapClass),
+              "aria-hidden": "true",
+              dangerouslySetInnerHTML: { __html: model.blockHtml }
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true", children: model.lines.map((line) => {
+            const lineClass = classNames("min-h-[1.625rem]", line.isActive && activeLineClass);
+            if (line.html !== null) {
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: lineClass,
+                  "data-active-line": line.isActive ? "" : void 0,
+                  dangerouslySetInnerHTML: { __html: line.html }
+                },
+                line.index
+              );
+            }
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: lineClass,
+                "data-active-line": line.isActive ? "" : void 0,
+                children: [
+                  (line.tokens ?? []).map(renderToken),
+                  line.text === "" ? "\n" : null
+                ]
+              },
+              line.index
+            );
+          }) }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: classNames(codeEditorTextareaClasses, wrapClass),
+              value: code,
+              onChange: handleInput,
+              onKeyDown: handleKeyDown,
+              onSelect: updateActiveLine,
+              onClick: updateActiveLine,
+              onKeyUp: updateActiveLine,
+              onFocus,
+              onBlur: (event) => {
+                formItemControl?.onBlur?.();
+                onBlur?.(event);
+              },
+              readOnly: readOnly || effectiveDisabled,
+              disabled: effectiveDisabled,
+              placeholder,
+              spellCheck: false,
+              autoCapitalize: "off",
+              autoComplete: "off",
+              autoCorrect: "off",
+              "data-gramm": "false",
+              id: effectiveId,
+              name: effectiveName,
+              "aria-label": ariaLabel ?? ariaLabelAttr ?? labels.editorAriaLabel,
+              "aria-labelledby": ariaLabelledBy ?? formItemControl?.labelId,
+              "aria-multiline": true,
+              "aria-describedby": formItemControl?.describedBy,
+              ...hostRest
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+});
+var CodeEditor_default = CodeEditor;
+
+export {
+  CodeEditor,
+  CodeEditor_default
+};

package/dist/{chunk-NT7GW2FD.mjs → chunk-635ACZQW.mjs}

@@ -1,6 +1,7 @@
 // src/components/AspectRatio.tsx
 import { forwardRef, useMemo } from "react";
 import {
+  classNames,
   getAspectRatioContentClasses,
   getAspectRatioRootClasses,
   getAspectRatioStyle,
@@ -18,7 +19,7 @@ var AspectRatio = forwardRef(
   }, ref) => {
     const rootClasses = useMemo(() => getAspectRatioRootClasses(className), [className]);
     const contentClasses = useMemo(
-      () => getAspectRatioContentClasses(contentClassName),
+      () => classNames(getAspectRatioContentClasses(), contentClassName),
       [contentClassName]
     );
     const style = useMemo(
@@ -28,7 +29,7 @@ var AspectRatio = forwardRef(
       }),
       [ratio, styleProp]
     );
-    return /* @__PURE__ */ jsx("div", { ref, "data-aspect-ratio": "", className: rootClasses, style, ...rest, children: /* @__PURE__ */ jsx("div", { "data-aspect-ratio-content": "", className: contentClasses, children }) });
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, "data-aspect-ratio": "", className: rootClasses, style, children: /* @__PURE__ */ jsx("div", { "data-aspect-ratio-content": "", className: contentClasses, children }) });
   }
 );
 AspectRatio.displayName = "AspectRatio";