@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/{chunk-AUD3VOLO.mjs → chunk-R7J37DKJ.mjs}

@@ -1,15 +1,28 @@
 import {
   usePopup
-} from "./chunk-WTHWLCRL.mjs";
+} from "./chunk-XKB7ECPU.mjs";
 import {
-  renderOverlayPortal
-} from "./chunk-HKAZXG74.mjs";
+  composeRefs,
+  renderOverlayTrigger
+} from "./chunk-WWZZRB7H.mjs";
+import {
+  Button
+} from "./chunk-WFLXJOFU.mjs";
+import {
+  renderOverlayPortal,
+  useFocusTrap
+} from "./chunk-NPGU6VYD.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-REJVXLW5.mjs

@@ -0,0 +1,97 @@
+// src/hooks/useDrag.ts
+import { useCallback, useEffect, useReducer, useRef } from "react";
+import {
+  createListReorderController,
+  isSameContainerDrag,
+  isCrossContainerDrag
+} from "@expcat/tigercat-core";
+function callbacksOf(options) {
+  return {
+    onDragStart: options.onDragStart,
+    onDragOver: options.onDragOver,
+    onDrop: options.onDrop,
+    onDragEnd: options.onDragEnd
+  };
+}
+function useDrag(options = {}) {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const controllerRef = useRef(null);
+  if (controllerRef.current === null) {
+    controllerRef.current = createListReorderController({
+      getContainerId: () => optionsRef.current.containerId ?? "default",
+      getConfig: () => optionsRef.current.config,
+      getCallbacks: () => callbacksOf(optionsRef.current)
+    });
+  }
+  const [, rerender] = useReducer((count) => count + 1, 0);
+  useEffect(() => {
+    const controller2 = controllerRef.current;
+    if (!controller2) return void 0;
+    const unsubscribe = controller2.subscribe(rerender);
+    return () => {
+      unsubscribe();
+      controller2.dispose();
+    };
+  }, []);
+  const controller = controllerRef.current;
+  const state = controller.getState();
+  const startDrag = useCallback((item, event) => {
+    controllerRef.current?.startDrag(item, event);
+  }, []);
+  const dragOver = useCallback((item, event) => {
+    controllerRef.current?.dragOver(item, event);
+  }, []);
+  const drop = useCallback((event) => {
+    return controllerRef.current?.drop(event) ?? null;
+  }, []);
+  const endDrag = useCallback((cancelled) => {
+    controllerRef.current?.endDrag(cancelled);
+  }, []);
+  const reorder = useCallback((items) => {
+    return controllerRef.current?.reorder(items) ?? null;
+  }, []);
+  const moveBetween = useCallback(
+    (sourceItems, targetItems) => {
+      return controllerRef.current?.moveBetween(sourceItems, targetItems) ?? null;
+    },
+    []
+  );
+  const getDragItemProps = useCallback((item) => {
+    const bindings = controllerRef.current?.getItemBindings(item);
+    if (!bindings) return {};
+    const { extraClass, onPointerDown, ...rest } = bindings;
+    return {
+      ...rest,
+      className: extraClass,
+      onPointerDown
+    };
+  }, []);
+  const getDropZoneProps = useCallback(() => {
+    const bindings = controllerRef.current?.getZoneBindings();
+    if (!bindings) return {};
+    return {
+      onDragOver: bindings.onDragOver,
+      onDrop: bindings.onDrop
+    };
+  }, []);
+  return {
+    state,
+    isDragging: state.isDragging,
+    draggedItem: state.draggedItem,
+    startDrag,
+    dragOver,
+    drop,
+    endDrag,
+    reorder,
+    moveBetween,
+    isSameContainer: isSameContainerDrag(state),
+    isCrossContainer: isCrossContainerDrag(state),
+    getDragItemProps,
+    getDropZoneProps
+  };
+}
+
+export {
+  useDrag
+};

package/dist/chunk-RLUBTLOT.mjs

@@ -0,0 +1,80 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Empty.tsx
+import { forwardRef, useMemo } from "react";
+import {
+  classNames,
+  emptyBaseClasses,
+  emptyImageClasses,
+  emptyDescriptionClasses,
+  emptyActionsClasses,
+  getEmptyDescription,
+  getEmptyIllustration,
+  resolveEmptyImageMode,
+  mergeTigerLocale,
+  devWarn
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Empty = forwardRef(function Empty2({
+  preset = "default",
+  description,
+  showImage = true,
+  image,
+  extra,
+  className,
+  children,
+  locale,
+  ...props
+}, ref) {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const descText = useMemo(
+    () => description ?? getEmptyDescription(preset, mergedLocale),
+    [description, preset, mergedLocale]
+  );
+  const hasCustomImage = image !== void 0 && image !== null;
+  const imageMode = resolveEmptyImageMode({ showImage, hasCustomImage, preset });
+  const illustration = imageMode === "builtin" ? getEmptyIllustration(preset) : null;
+  if (showImage === false && hasCustomImage) {
+    devWarn(
+      "Empty.showImage.custom",
+      "Empty: `image` still renders when `showImage` is false. Pass no `image` to hide the illustration."
+    );
+  }
+  const wrapperClasses = classNames(emptyBaseClasses, className);
+  return /* @__PURE__ */ jsxs("div", { ref, className: wrapperClasses, ...props, children: [
+    imageMode === "custom" ? /* @__PURE__ */ jsx("div", { className: emptyImageClasses || void 0, children: image }) : illustration ? /* @__PURE__ */ jsx("div", { className: emptyImageClasses || void 0, children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: illustration.viewBox,
+        className: "mx-auto h-24 w-24",
+        "aria-hidden": "true",
+        focusable: "false",
+        children: illustration.paths.map((p, i) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: p.d,
+            fill: p.fill ?? "none",
+            stroke: p.stroke,
+            strokeWidth: p.strokeWidth,
+            opacity: p.opacity
+          },
+          i
+        ))
+      }
+    ) }) : null,
+    descText ? /* @__PURE__ */ jsx("div", { className: emptyDescriptionClasses, children: descText }) : null,
+    extra ? /* @__PURE__ */ jsx("div", { className: emptyActionsClasses, children: extra }) : null,
+    children ? /* @__PURE__ */ jsx("div", { children }) : null
+  ] });
+});
+
+export {
+  Empty
+};