@expcat/tigercat-react 0.4.3 → 1.0.0

package/dist/chunk-24RUEJWB.js

@@ -0,0 +1,293 @@
+'use strict';
+
+var chunkUKGQ7256_js = require('./chunk-UKGQ7256.js');
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var Kanban = ({
+  columns: controlledColumns,
+  defaultColumns = [],
+  draggable = true,
+  columnDraggable = true,
+  enforceWipLimit = false,
+  beforeCardMove,
+  beforeColumnMove,
+  filterText = "",
+  hiddenColumns,
+  showCardCount = true,
+  allowAddCard = true,
+  allowAddColumn = false,
+  onCardMove,
+  onColumnMove,
+  onColumnsChange,
+  onCardAdd,
+  onColumnAdd,
+  renderCard,
+  renderColumnHeader,
+  className,
+  ...restProps
+}) => {
+  const boardRef = React.useRef(null);
+  const [rawColumns, setInternalColumns, isControlled] = chunkUKGQ7256_js.useControlledState(
+    controlledColumns,
+    defaultColumns
+  );
+  const visibleColumns = React.useMemo(
+    () => tigercatCore.filterColumns(rawColumns, filterText, hiddenColumns),
+    [rawColumns, filterText, hiddenColumns]
+  );
+  const [dragState, setDragState] = React.useState(null);
+  const [dropTargetCol, setDropTargetCol] = React.useState(null);
+  const [dropTargetIdx, setDropTargetIdx] = React.useState(-1);
+  function updateColumns(cols) {
+    if (!isControlled) setInternalColumns(cols);
+    onColumnsChange?.(cols);
+  }
+  function resetDrag() {
+    setDragState(null);
+    setDropTargetCol(null);
+    setDropTargetIdx(-1);
+  }
+  const handleCardDragStart = React.useCallback(
+    (e, card, colId, idx) => {
+      if (!draggable) return;
+      tigercatCore.setDragData(e.nativeEvent.dataTransfer, tigercatCore.createCardDragData(card.id, colId, idx));
+      setDragState({ type: "card", id: card.id, fromColumnId: colId, fromIndex: idx });
+    },
+    [draggable]
+  );
+  const handleColumnDragStart = React.useCallback(
+    (e, colId, idx) => {
+      if (!columnDraggable) return;
+      tigercatCore.setDragData(e.nativeEvent.dataTransfer, tigercatCore.createColumnDragData(colId, idx));
+      setDragState({ type: "column", id: colId, fromIndex: idx });
+    },
+    [columnDraggable]
+  );
+  const handleDragOver = React.useCallback(
+    (e, colId) => {
+      e.preventDefault();
+      if (!dragState) return;
+      setDropTargetCol(colId);
+      if (dragState.type === "card") {
+        const colEl = e.currentTarget.querySelector("[data-kanban-body]");
+        if (colEl) {
+          const cards = Array.from(colEl.querySelectorAll("[data-kanban-card]"));
+          const rects = cards.map((c) => c.getBoundingClientRect());
+          setDropTargetIdx(tigercatCore.getDropIndex(e.clientY, rects));
+        }
+      }
+    },
+    [dragState]
+  );
+  const handleColumnDragOver = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      if (!dragState || dragState.type !== "column") return;
+      const boardEl = boardRef.current;
+      if (!boardEl) return;
+      const cols = Array.from(boardEl.querySelectorAll("[data-kanban-column]"));
+      const rects = cols.map((c) => c.getBoundingClientRect());
+      setDropTargetIdx(tigercatCore.getColumnDropIndex(e.clientX, rects));
+    },
+    [dragState]
+  );
+  const handleDrop = React.useCallback(
+    async (e) => {
+      e.preventDefault();
+      const data = tigercatCore.parseDragData(e.nativeEvent.dataTransfer);
+      if (!data || !dragState) {
+        resetDrag();
+        return;
+      }
+      if (data.type === "card" && dropTargetCol != null) {
+        if (beforeCardMove) {
+          const evt = {
+            cardId: data.cardId,
+            fromColumnId: data.columnId,
+            toColumnId: dropTargetCol,
+            fromIndex: data.index,
+            toIndex: dropTargetIdx
+          };
+          const ok = await beforeCardMove(evt);
+          if (!ok) {
+            resetDrag();
+            return;
+          }
+        }
+        const result = tigercatCore.moveCard(
+          rawColumns,
+          data.cardId,
+          data.columnId,
+          dropTargetCol,
+          dropTargetIdx,
+          { enforceWipLimit }
+        );
+        if (result) {
+          updateColumns(result.columns);
+          onCardMove?.(result.event);
+        }
+      } else if (data.type === "column") {
+        if (beforeColumnMove) {
+          const evt = {
+            columnId: data.columnId,
+            fromIndex: data.index,
+            toIndex: dropTargetIdx
+          };
+          const ok = await beforeColumnMove(evt);
+          if (!ok) {
+            resetDrag();
+            return;
+          }
+        }
+        const result = tigercatCore.reorderColumns(rawColumns, data.index, dropTargetIdx);
+        if (result) {
+          updateColumns(result.columns);
+          onColumnMove?.(result.event);
+        }
+      }
+      resetDrag();
+    },
+    [
+      dragState,
+      dropTargetCol,
+      dropTargetIdx,
+      rawColumns,
+      enforceWipLimit,
+      beforeCardMove,
+      beforeColumnMove,
+      onCardMove,
+      onColumnMove
+    ]
+  );
+  const containerClasses = React.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getKanbanContainerClasses(className)),
+    [className]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: boardRef,
+      className: containerClasses,
+      role: "region",
+      "aria-label": "Kanban board",
+      onDragOver: handleColumnDragOver,
+      ...restProps,
+      children: [
+        visibleColumns.map((col, colIdx) => {
+          const wipExceeded = tigercatCore.isWipExceeded(col);
+          const cardCount = tigercatCore.getColumnCardCount(col);
+          const isDragOverCol = dropTargetCol === col.id;
+          const isColDragging = dragState?.type === "column" && dragState.id === col.id;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: tigercatCore.classNames(
+                tigercatCore.taskBoardColumnClasses,
+                isDragOverCol && dragState?.type === "card" && tigercatCore.taskBoardColumnDropTargetClasses,
+                isColDragging && tigercatCore.taskBoardColumnDraggingClasses
+              ),
+              "data-kanban-column": "",
+              draggable: columnDraggable,
+              onDragStart: (e) => handleColumnDragStart(e, col.id, colIdx),
+              onDragOver: (e) => handleDragOver(e, col.id),
+              onDrop: handleDrop,
+              onDragEnd: resetDrag,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: tigercatCore.classNames(
+                      tigercatCore.taskBoardColumnHeaderClasses,
+                      wipExceeded && tigercatCore.taskBoardWipExceededClasses
+                    ),
+                    children: [
+                      renderColumnHeader ? renderColumnHeader(col) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.title }),
+                      showCardCount && /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: tigercatCore.classNames(
+                            tigercatCore.kanbanCardCountClasses,
+                            wipExceeded && tigercatCore.taskBoardWipExceededClasses
+                          ),
+                          children: cardCount.limit ? `${cardCount.count}/${cardCount.limit}` : `${cardCount.count}`
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.taskBoardColumnBodyClasses, "data-kanban-body": "", children: [
+                  col.cards.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.taskBoardEmptyClasses, children: "No cards" }) : col.cards.map((card, cardIdx) => {
+                    const isCardDragging = dragState?.type === "card" && dragState.id === card.id;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+                      isDragOverCol && dragState?.type === "card" && dropTargetIdx === cardIdx && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.taskBoardDropIndicatorClasses }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: tigercatCore.classNames(
+                            tigercatCore.taskBoardCardClasses,
+                            isCardDragging && tigercatCore.taskBoardCardDraggingClasses
+                          ),
+                          draggable,
+                          "data-kanban-card": "",
+                          onDragStart: (e) => handleCardDragStart(e, card, col.id, cardIdx),
+                          children: renderCard ? renderCard(card, col.id) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-sm", children: card.title }),
+                            card.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-[var(--tiger-text-muted,#6b7280)] mt-1", children: card.description })
+                          ] })
+                        }
+                      )
+                    ] }, card.id);
+                  }),
+                  isDragOverCol && dragState?.type === "card" && dropTargetIdx >= col.cards.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.taskBoardDropIndicatorClasses })
+                ] }),
+                allowAddCard && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: tigercatCore.kanbanAddCardClasses,
+                    role: "button",
+                    tabIndex: 0,
+                    onClick: () => onCardAdd?.(col.id),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onCardAdd?.(col.id);
+                      }
+                    },
+                    children: "+ Add card"
+                  }
+                )
+              ]
+            },
+            col.id
+          );
+        }),
+        allowAddColumn && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tigercatCore.kanbanAddColumnClasses,
+            role: "button",
+            tabIndex: 0,
+            onClick: () => onColumnAdd?.(),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onColumnAdd?.();
+              }
+            },
+            children: "+ Add column"
+          }
+        )
+      ]
+    }
+  );
+};
+var Kanban_default = Kanban;
+
+exports.Kanban = Kanban;
+exports.Kanban_default = Kanban_default;

package/dist/{chunk-S4GNTA7V.mjs → chunk-2H43QM4B.mjs}

@@ -1,4 +1,4 @@
-import { PieChart } from './chunk-SH6O6LDJ.mjs';
+import { PieChart } from './chunk-QQDKQLHJ.mjs';
 import { useMemo } from 'react';
 import { getChartInnerRect, normalizeChartPadding, classNames } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-WGRYO5HX.mjs → chunk-2UQC3WOI.mjs}

@@ -1,7 +1,7 @@
 import { DropdownMenu } from './chunk-SIVJX7VU.mjs';
 import { useClickOutside, useEscapeKey, useFloating } from './chunk-WLIFEALE.mjs';
-import React, { createContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { injectDropdownStyles, classNames, getDropdownContainerClasses, getDropdownTriggerClasses, DROPDOWN_ENTER_CLASS, getTransformOrigin, getDropdownChevronClasses, DROPDOWN_CHEVRON_PATH } from '@expcat/tigercat-core';
+import React, { createContext, useState, useRef, useId, useMemo, useEffect, useCallback } from 'react';
+import { injectDropdownStyles, captureActiveElement, focusFirstMenuItem, restoreFocus, handleMenuNavigation, classNames, getDropdownContainerClasses, getDropdownTriggerClasses, DROPDOWN_ENTER_CLASS, getTransformOrigin, getDropdownChevronClasses, DROPDOWN_CHEVRON_PATH } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var DropdownContext = createContext(null);
@@ -10,34 +10,50 @@ var Dropdown = ({
   placement: initialPlacement = "bottom-start",
   offset = 4,
   disabled = false,
-  visible: controlledVisible,
-  defaultVisible = false,
+  open: controlledOpen,
+  defaultOpen = false,
   closeOnClick = true,
   showArrow = true,
   className,
   style,
-  onVisibleChange,
+  onOpenChange,
   children,
   ...divProps
 }) => {
-  const [internalVisible, setInternalVisible] = useState(defaultVisible);
-  const visible = controlledVisible !== void 0 ? controlledVisible : internalVisible;
+  const [internalVisible, setInternalVisible] = useState(defaultOpen);
+  const visible = controlledOpen !== void 0 ? controlledOpen : internalVisible;
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
   const floatingRef = useRef(null);
   const hoverTimerRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  const reactId = useId();
+  const menuId = useMemo(() => `tiger-dropdown-menu-${reactId}`, [reactId]);
   useEffect(() => {
     injectDropdownStyles();
   }, []);
   const setVisible = useCallback(
     (newVisible) => {
       if (disabled && newVisible) return;
-      if (controlledVisible === void 0) {
+      if (newVisible && !visible) {
+        previousActiveElementRef.current = captureActiveElement();
+      }
+      if (controlledOpen === void 0) {
         setInternalVisible(newVisible);
       }
-      onVisibleChange?.(newVisible);
+      onOpenChange?.(newVisible);
+      if (newVisible) {
+        requestAnimationFrame(() => {
+          if (floatingRef.current) {
+            focusFirstMenuItem(floatingRef.current);
+          }
+        });
+      } else {
+        restoreFocus(previousActiveElementRef.current);
+        previousActiveElementRef.current = null;
+      }
     },
-    [disabled, controlledVisible, onVisibleChange]
+    [disabled, visible, controlledOpen, onOpenChange]
   );
   const handleItemClick = useCallback(() => {
     if (closeOnClick) {
@@ -66,6 +82,11 @@ var Dropdown = ({
     if (trigger !== "click") return;
     setVisible(!visible);
   }, [trigger, visible, setVisible]);
+  const handleMenuKeyDown = useCallback((event) => {
+    if (floatingRef.current) {
+      handleMenuNavigation(floatingRef.current, event.nativeEvent);
+    }
+  }, []);
   useClickOutside({
     enabled: trigger === "click" && visible,
     refs: [containerRef],
@@ -138,45 +159,38 @@ var Dropdown = ({
       children: /* @__PURE__ */ jsx("path", { d: DROPDOWN_CHEVRON_PATH })
     }
   ) : null;
-  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: containerClasses,
-      style,
-      ...divProps,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: triggerRef,
-            className: triggerClasses,
-            onClick: handleClick,
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            "aria-haspopup": "menu",
-            "aria-expanded": visible,
-            children: [
-              triggerElement,
-              chevronNode
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: floatingRef,
-            className: menuWrapperClasses,
-            style: menuWrapperStyles,
-            hidden: !visible,
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            children: menuElement
-          }
-        )
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: triggerRef,
+        className: triggerClasses,
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        "aria-haspopup": "menu",
+        "aria-expanded": visible,
+        "aria-controls": visible ? menuId : void 0,
+        children: [
+          triggerElement,
+          chevronNode
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: floatingRef,
+        className: menuWrapperClasses,
+        style: menuWrapperStyles,
+        hidden: !visible,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onKeyDown: handleMenuKeyDown,
+        children: menuElement && React.isValidElement(menuElement) ? React.cloneElement(menuElement, { id: menuId }) : menuElement
+      }
+    )
+  ] }) });
 };
 
 export { Dropdown, DropdownContext };

package/dist/{chunk-V5NIFF2F.mjs → chunk-2WBPUW75.mjs}

@@ -1,4 +1,4 @@
-import { usePopup } from './chunk-3PV2MDST.mjs';
+import { usePopup } from './chunk-AMOH5AMN.mjs';
 import React, { useRef, useMemo } from 'react';
 import { createFloatingIdFactory, classNames, getPopconfirmContainerClasses, getPopconfirmTriggerClasses, getPopconfirmArrowClasses, getPopconfirmContentClasses, getPopconfirmTitleClasses, getPopconfirmDescriptionClasses, getPopconfirmIconClasses, getPopconfirmButtonsClasses, getPopconfirmCancelButtonClasses, getPopconfirmOkButtonClasses, mergeStyleValues, popconfirmIconStrokeWidth, popconfirmIconViewBox, getPopconfirmIconPath, popconfirmIconPathStrokeLinejoin, popconfirmIconPathStrokeLinecap } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -23,8 +23,8 @@ var PopconfirmIcon = ({ type }) => /* @__PURE__ */ jsx(
   }
 );
 var Popconfirm = ({
-  visible,
-  defaultVisible = false,
+  open,
+  defaultOpen = false,
   title = "\u786E\u5B9A\u8981\u6267\u884C\u6B64\u64CD\u4F5C\u5417\uFF1F",
   description,
   icon = "warning",
@@ -40,7 +40,7 @@ var Popconfirm = ({
   children,
   titleContent,
   descriptionContent,
-  onVisibleChange,
+  onOpenChange,
   onConfirm,
   onCancel,
   ...divProps
@@ -60,13 +60,13 @@ var Popconfirm = ({
     actualPlacement,
     floatingStyles: baseFloatingStyles
   } = usePopup({
-    visible,
-    defaultVisible,
+    open,
+    defaultOpen,
     disabled,
     placement: initialPlacement,
     offset,
     multiTrigger: false,
-    onVisibleChange
+    onOpenChange
   });
   const handleConfirm = () => {
     onConfirm?.();

package/dist/{chunk-QL6UEG3U.js → chunk-2XOFRGY6.js}

@@ -10,13 +10,26 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/components/ConfigProvider.tsx
 var TigerConfigContext = React__default.default.createContext({});
-var ConfigProvider = ({ locale, children }) => {
+var ConfigProvider = ({
+  locale,
+  theme,
+  colorScheme,
+  children
+}) => {
   const parent = React.useContext(TigerConfigContext);
   const value = React.useMemo(() => {
     return {
-      locale: tigercatCore.mergeTigerLocale(parent.locale, locale)
+      locale: tigercatCore.mergeTigerLocale(parent.locale, locale),
+      theme: theme ?? parent.theme,
+      colorScheme: colorScheme ?? parent.colorScheme
     };
-  }, [parent.locale, locale]);
+  }, [parent.locale, locale, theme, parent.theme, colorScheme, parent.colorScheme]);
+  React.useEffect(() => {
+    if (value.theme) tigercatCore.ThemeManager.setTheme(value.theme);
+  }, [value.theme]);
+  React.useEffect(() => {
+    if (value.colorScheme) tigercatCore.ThemeManager.setColorScheme(value.colorScheme);
+  }, [value.colorScheme]);
   return /* @__PURE__ */ jsxRuntime.jsx(TigerConfigContext.Provider, { value, children });
 };
 function useTigerConfig() {

package/dist/chunk-333325LH.mjs

@@ -0,0 +1,87 @@
+import { useMemo, useState, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import { classNames, floatButtonBaseClasses, floatButtonShapeClasses, floatButtonSizeClasses, floatButtonTypeClasses, floatButtonDisabledClasses, floatButtonGroupClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/FloatButton.tsx
+var FloatButton = ({
+  shape = "circle",
+  size = "md",
+  type = "primary",
+  tooltip,
+  disabled = false,
+  ariaLabel,
+  className,
+  children,
+  onClick,
+  ...props
+}) => {
+  const classes = useMemo(
+    () => classNames(
+      floatButtonBaseClasses,
+      floatButtonShapeClasses[shape],
+      floatButtonSizeClasses[size],
+      floatButtonTypeClasses[type],
+      disabled && floatButtonDisabledClasses,
+      className
+    ),
+    [shape, size, type, disabled, className]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: classes,
+      type: "button",
+      disabled,
+      "aria-label": ariaLabel ?? tooltip,
+      title: tooltip,
+      onClick: disabled ? void 0 : onClick,
+      ...props,
+      children
+    }
+  );
+};
+var FloatButtonGroup = ({
+  shape = "circle",
+  trigger = "click",
+  open: controlledOpen,
+  triggerNode,
+  children,
+  className,
+  onOpenChange,
+  ...props
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen ?? internalOpen;
+  const toggle = useCallback(() => {
+    const next = !isOpen;
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isOpen, onOpenChange]);
+  const handleMouseEnter = useCallback(() => {
+    setInternalOpen(true);
+    onOpenChange?.(true);
+  }, [onOpenChange]);
+  const handleMouseLeave = useCallback(() => {
+    setInternalOpen(false);
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+  const groupClasses = useMemo(() => classNames(floatButtonGroupClasses, className), [className]);
+  if (typeof document === "undefined") return null;
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: groupClasses,
+      onMouseEnter: trigger === "hover" ? handleMouseEnter : void 0,
+      onMouseLeave: trigger === "hover" ? handleMouseLeave : void 0,
+      ...props,
+      children: [
+        triggerNode && /* @__PURE__ */ jsx("div", { onClick: trigger === "click" ? toggle : void 0, children: triggerNode }),
+        isOpen && children
+      ]
+    }
+  );
+  return ReactDOM.createPortal(content, document.body);
+};
+
+export { FloatButton, FloatButtonGroup };