@expcat/tigercat-react 0.3.70 → 0.4.2

package/dist/chunk-JWFEJ4XG.js

@@ -0,0 +1,543 @@
+'use strict';
+
+var chunkQL6UEG3U_js = require('./chunk-QL6UEG3U.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 CardItem = React__default.default.memo(
+  ({
+    card,
+    column,
+    isDragging,
+    isKbGrabbed,
+    draggable,
+    dragHintText,
+    renderCard,
+    onDragStart,
+    onDragEnd,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onKeyDown
+  }) => {
+    const cardClasses = tigercatCore.classNames(
+      tigercatCore.taskBoardCardClasses,
+      isDragging && tigercatCore.taskBoardCardDraggingClasses,
+      isKbGrabbed && "ring-2 ring-[var(--tiger-primary,#2563eb)]"
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cardClasses,
+        draggable,
+        tabIndex: 0,
+        role: "listitem",
+        "aria-roledescription": dragHintText,
+        "aria-grabbed": isKbGrabbed ? "true" : void 0,
+        "data-tiger-taskboard-card": "",
+        "data-tiger-taskboard-card-id": String(card.id),
+        onDragStart: (e) => onDragStart(e, card, column),
+        onDragEnd,
+        onTouchStart: (e) => onTouchStart(e, card, column),
+        onTouchMove,
+        onTouchEnd,
+        onKeyDown: (e) => onKeyDown(e, card, column),
+        children: renderCard ? renderCard(card, column.id) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-sm text-[var(--tiger-text,#1f2937)]", children: card.title }),
+          card.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2", children: card.description })
+        ] })
+      }
+    );
+  },
+  (prev, next) => prev.card.id === next.card.id && prev.isDragging === next.isDragging && prev.isKbGrabbed === next.isKbGrabbed && prev.draggable === next.draggable && prev.card === next.card
+);
+CardItem.displayName = "TaskBoardCardItem";
+var ColumnItem = React__default.default.memo(
+  ({
+    column,
+    colIndex,
+    isDropTarget,
+    isColDragging,
+    dropIdx,
+    draggable,
+    columnDraggable,
+    labels,
+    renderCardProp,
+    renderColumnHeader,
+    renderColumnFooter,
+    renderEmptyColumn,
+    onCardAdd,
+    dragType,
+    onCardDragStart,
+    onCardDragOver,
+    onCardDrop,
+    onDragEnd,
+    onDragLeave,
+    onColumnDragStart,
+    onColumnDragOver,
+    onColumnDrop,
+    onCardTouchStart,
+    onCardTouchMove,
+    onCardTouchEnd,
+    onColumnTouchStart,
+    onColumnTouchMove,
+    onColumnTouchEnd,
+    onCardKeyDown,
+    dragStateId,
+    kbDragStateId
+  }) => {
+    const wipOver = tigercatCore.isWipExceeded(column);
+    const colClasses = tigercatCore.classNames(
+      tigercatCore.taskBoardColumnClasses,
+      isDropTarget && tigercatCore.taskBoardColumnDropTargetClasses,
+      isColDragging && tigercatCore.taskBoardColumnDraggingClasses
+    );
+    let cardsContent;
+    if (column.cards.length > 0) {
+      const nodes = [];
+      column.cards.forEach((card, i) => {
+        if (isDropTarget && dropIdx === i) {
+          nodes.push(/* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.taskBoardDropIndicatorClasses }, `drop-${i}`));
+        }
+        const isDragging = dragStateId === card.id;
+        const isKbGrabbed = kbDragStateId === card.id;
+        nodes.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CardItem,
+            {
+              card,
+              column,
+              isDragging,
+              isKbGrabbed,
+              draggable,
+              dragHintText: labels.dragHintText,
+              renderCard: renderCardProp,
+              onDragStart: onCardDragStart,
+              onDragEnd,
+              onTouchStart: onCardTouchStart,
+              onTouchMove: onCardTouchMove,
+              onTouchEnd: onCardTouchEnd,
+              onKeyDown: onCardKeyDown
+            },
+            String(card.id)
+          )
+        );
+      });
+      if (isDropTarget && dropIdx >= column.cards.length) {
+        nodes.push(/* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.taskBoardDropIndicatorClasses }, "drop-end"));
+      }
+      cardsContent = nodes;
+    } else {
+      cardsContent = isDropTarget ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.taskBoardDropIndicatorClasses }, "drop-empty") : renderEmptyColumn ? renderEmptyColumn(column) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.taskBoardEmptyClasses, children: tigercatCore.resolveLocaleText(labels.emptyColumnText) });
+    }
+    const wipTitle = column.wipLimit != null ? tigercatCore.resolveLocaleText(labels.wipLimitText.replace("{limit}", String(column.wipLimit))) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: colClasses,
+        "data-tiger-taskboard-column": "",
+        "data-tiger-taskboard-column-id": String(column.id),
+        onDragOver: dragType === "column" ? onColumnDragOver : void 0,
+        onDrop: dragType === "column" ? onColumnDrop : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tigercatCore.taskBoardColumnHeaderClasses,
+              draggable: columnDraggable,
+              onDragStart: (e) => onColumnDragStart(e, column, colIndex),
+              onDragEnd,
+              onTouchStart: (e) => onColumnTouchStart(e, column, colIndex),
+              onTouchMove: onColumnTouchMove,
+              onTouchEnd: onColumnTouchEnd,
+              style: columnDraggable ? { cursor: "grab" } : void 0,
+              children: renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: wipOver ? tigercatCore.taskBoardWipExceededClasses : void 0, children: [
+                  column.title,
+                  column.wipLimit != null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-2 text-xs font-normal opacity-70", title: wipTitle, children: [
+                    "(",
+                    column.cards.length,
+                    "/",
+                    column.wipLimit,
+                    ")"
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-xs font-normal opacity-50", children: column.cards.length })
+                ] }),
+                column.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-normal text-[var(--tiger-text-muted,#6b7280)] truncate max-w-[120px]", children: column.description })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tigercatCore.taskBoardColumnBodyClasses,
+              role: "list",
+              "aria-label": column.title,
+              onDragOver: (e) => onCardDragOver(e, column),
+              onDrop: (e) => onCardDrop(e, column),
+              onDragLeave,
+              children: cardsContent
+            }
+          ),
+          renderColumnFooter ? renderColumnFooter(column) : onCardAdd ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: tigercatCore.classNames(
+                "border-t border-[var(--tiger-border,#e5e7eb)]",
+                tigercatCore.taskBoardAddCardClasses
+              ),
+              onClick: () => onCardAdd(column.id),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "+" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: tigercatCore.resolveLocaleText(labels.addCardText) })
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  },
+  (prev, next) => prev.column === next.column && prev.colIndex === next.colIndex && prev.isDropTarget === next.isDropTarget && prev.isColDragging === next.isColDragging && prev.dropIdx === next.dropIdx && prev.draggable === next.draggable && prev.columnDraggable === next.columnDraggable && prev.dragType === next.dragType && prev.dragStateId === next.dragStateId && prev.kbDragStateId === next.kbDragStateId && prev.onCardAdd === next.onCardAdd
+);
+ColumnItem.displayName = "TaskBoardColumnItem";
+var TaskBoard = ({
+  columns: controlledColumns,
+  defaultColumns = [],
+  draggable = true,
+  columnDraggable = true,
+  enforceWipLimit = false,
+  beforeCardMove,
+  beforeColumnMove,
+  onCardMove,
+  onColumnMove,
+  onColumnsChange,
+  onCardAdd,
+  renderCard: renderCardProp,
+  renderColumnHeader,
+  renderColumnFooter,
+  renderEmptyColumn,
+  locale,
+  className,
+  style,
+  ...rest
+}) => {
+  const config = chunkQL6UEG3U_js.useTigerConfig();
+  const mergedLocale = React.useMemo(
+    () => tigercatCore.mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = React.useMemo(() => tigercatCore.getTaskBoardLabels(mergedLocale), [mergedLocale]);
+  const [innerColumns, setInnerColumns] = React.useState(defaultColumns);
+  React.useEffect(() => {
+    if (controlledColumns !== void 0) setInnerColumns(controlledColumns);
+  }, [controlledColumns]);
+  const currentColumns = controlledColumns ?? innerColumns;
+  const columnsRef = React.useRef(currentColumns);
+  columnsRef.current = currentColumns;
+  const updateColumns = React.useCallback(
+    (next) => {
+      setInnerColumns(next);
+      onColumnsChange?.(next);
+    },
+    [onColumnsChange]
+  );
+  const [dragState, setDragState] = React.useState(null);
+  const [dropTargetColumnId, setDropTargetColumnId] = React.useState(null);
+  const [dropIdx, setDropIdx] = React.useState(-1);
+  const [kbDragState, setKbDragState] = React.useState(null);
+  const boardRef = React.useRef(null);
+  const touchTrackerRef = React.useRef(null);
+  const touchRafRef = React.useRef(0);
+  const beforeCardMoveRef = React.useRef(beforeCardMove);
+  beforeCardMoveRef.current = beforeCardMove;
+  const beforeColumnMoveRef = React.useRef(beforeColumnMove);
+  beforeColumnMoveRef.current = beforeColumnMove;
+  const onCardMoveRef = React.useRef(onCardMove);
+  onCardMoveRef.current = onCardMove;
+  const onColumnMoveRef = React.useRef(onColumnMove);
+  onColumnMoveRef.current = onColumnMove;
+  const enforceWipLimitRef = React.useRef(enforceWipLimit);
+  enforceWipLimitRef.current = enforceWipLimit;
+  React.useEffect(() => {
+    if (typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0)) {
+      touchTrackerRef.current = tigercatCore.createTouchDragTracker();
+    }
+    return () => cancelAnimationFrame(touchRafRef.current);
+  }, []);
+  const resetDrag = React.useCallback(() => {
+    setDragState(null);
+    setDropTargetColumnId(null);
+    setDropIdx(-1);
+  }, []);
+  const applyCardMove = React.useCallback(
+    async (cardId, fromColumnId, toColumnId, toIdx) => {
+      const result = tigercatCore.moveCard(columnsRef.current, cardId, fromColumnId, toColumnId, toIdx, {
+        enforceWipLimit: enforceWipLimitRef.current
+      });
+      if (!result) return;
+      if (beforeCardMoveRef.current) {
+        const ok = await beforeCardMoveRef.current(result.event);
+        if (!ok) return;
+      }
+      updateColumns(result.columns);
+      onCardMoveRef.current?.(result.event);
+    },
+    [updateColumns]
+  );
+  const applyColumnMove = React.useCallback(
+    async (fromIdx, toIdx) => {
+      const cols = columnsRef.current;
+      const result = tigercatCore.reorderColumns(cols, fromIdx, Math.min(toIdx, cols.length - 1));
+      if (!result) return;
+      if (beforeColumnMoveRef.current) {
+        const ok = await beforeColumnMoveRef.current(result.event);
+        if (!ok) return;
+      }
+      updateColumns(result.columns);
+      onColumnMoveRef.current?.(result.event);
+    },
+    [updateColumns]
+  );
+  const handleCardDragStart = React.useCallback(
+    (e, card, column) => {
+      if (!draggable) return;
+      const idx = column.cards.findIndex((c) => c.id === card.id);
+      tigercatCore.setDragData(e.dataTransfer, tigercatCore.createCardDragData(card.id, column.id, idx));
+      setDragState({ type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx });
+    },
+    [draggable]
+  );
+  const handleCardDragOver = React.useCallback(
+    (e, column) => {
+      e.preventDefault();
+      if (!dragState || dragState.type !== "card") return;
+      setDropTargetColumnId(column.id);
+      const target = e.currentTarget;
+      const cardEls = target.querySelectorAll("[data-tiger-taskboard-card]");
+      const rects = [];
+      cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+      setDropIdx(tigercatCore.getDropIndex(e.clientY, rects));
+    },
+    [dragState]
+  );
+  const handleCardDrop = React.useCallback(
+    (e, column) => {
+      e.preventDefault();
+      const data = tigercatCore.parseDragData(e.dataTransfer);
+      if (!data || data.type !== "card") return;
+      applyCardMove(
+        data.cardId,
+        data.columnId,
+        column.id,
+        dropIdx >= 0 ? dropIdx : column.cards.length
+      );
+      resetDrag();
+    },
+    [dropIdx, applyCardMove, resetDrag]
+  );
+  const handleColumnDragStart = React.useCallback(
+    (e, column, index) => {
+      if (!columnDraggable) return;
+      tigercatCore.setDragData(e.dataTransfer, tigercatCore.createColumnDragData(column.id, index));
+      setDragState({ type: "column", id: column.id, fromIndex: index });
+    },
+    [columnDraggable]
+  );
+  const handleColumnDragOver = React.useCallback(
+    (e) => {
+      if (!dragState || dragState.type !== "column") return;
+      e.preventDefault();
+    },
+    [dragState]
+  );
+  const handleColumnDrop = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      const data = tigercatCore.parseDragData(e.dataTransfer);
+      if (!data || data.type !== "column") return;
+      const colEls = boardRef.current?.querySelectorAll("[data-tiger-taskboard-column]");
+      if (!colEls) return;
+      const rects = [];
+      colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+      const toIdx = tigercatCore.getColumnDropIndex(e.clientX, rects);
+      applyColumnMove(data.index, toIdx);
+      resetDrag();
+    },
+    [applyColumnMove, resetDrag]
+  );
+  const handleDragEnd = React.useCallback(() => resetDrag(), [resetDrag]);
+  const handleDragLeave = React.useCallback(
+    (e) => {
+      const related = e.relatedTarget;
+      if (!related || !e.currentTarget.contains(related)) {
+        if (dragState?.type === "card") {
+          setDropTargetColumnId(null);
+          setDropIdx(-1);
+        }
+      }
+    },
+    [dragState]
+  );
+  const handleTouchStart = React.useCallback(
+    (e, card, column) => {
+      if (!draggable || !touchTrackerRef.current) return;
+      const idx = column.cards.findIndex((c) => c.id === card.id);
+      touchTrackerRef.current.onTouchStart(e.nativeEvent, e.currentTarget);
+      setDragState({ type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx });
+    },
+    [draggable]
+  );
+  const handleTouchMove = React.useCallback(
+    (e) => {
+      if (!touchTrackerRef.current || !dragState) return;
+      touchTrackerRef.current.onTouchMove(e.nativeEvent);
+      cancelAnimationFrame(touchRafRef.current);
+      touchRafRef.current = requestAnimationFrame(() => {
+        const st = touchTrackerRef.current.getState();
+        if (dragState?.type === "card") {
+          const colEl = tigercatCore.findColumnFromPoint(st.currentX, st.currentY, boardRef.current);
+          if (colEl) {
+            const colId = colEl.getAttribute("data-tiger-taskboard-column-id");
+            setDropTargetColumnId(colId ?? null);
+            const cardEls = colEl.querySelectorAll("[data-tiger-taskboard-card]");
+            const rects = [];
+            cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+            setDropIdx(tigercatCore.getDropIndex(st.currentY, rects));
+          }
+        }
+      });
+    },
+    [dragState]
+  );
+  const handleTouchEnd = React.useCallback(() => {
+    if (!touchTrackerRef.current || !dragState) return;
+    touchTrackerRef.current.onTouchEnd();
+    if (dragState.type === "card" && dropTargetColumnId != null) {
+      applyCardMove(
+        dragState.id,
+        dragState.fromColumnId,
+        dropTargetColumnId,
+        dropIdx >= 0 ? dropIdx : 0
+      );
+    }
+    resetDrag();
+  }, [dragState, dropIdx, dropTargetColumnId, applyCardMove, resetDrag]);
+  const handleColumnTouchStart = React.useCallback(
+    (e, column, index) => {
+      if (!columnDraggable || !touchTrackerRef.current) return;
+      touchTrackerRef.current.onTouchStart(e.nativeEvent, e.currentTarget);
+      setDragState({ type: "column", id: column.id, fromIndex: index });
+    },
+    [columnDraggable]
+  );
+  const handleColumnTouchMove = React.useCallback(
+    (e) => {
+      if (!touchTrackerRef.current || !dragState || dragState.type !== "column") return;
+      touchTrackerRef.current.onTouchMove(e.nativeEvent);
+    },
+    [dragState]
+  );
+  const handleColumnTouchEnd = React.useCallback(() => {
+    if (!touchTrackerRef.current || !dragState || dragState.type !== "column") return;
+    const st = touchTrackerRef.current.onTouchEnd();
+    const colEls = boardRef.current?.querySelectorAll("[data-tiger-taskboard-column]");
+    if (!colEls) {
+      resetDrag();
+      return;
+    }
+    const rects = [];
+    colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+    const toIdx = tigercatCore.getColumnDropIndex(st.currentX, rects);
+    applyColumnMove(dragState.fromIndex, Math.min(toIdx, columnsRef.current.length - 1));
+    resetDrag();
+  }, [dragState, applyColumnMove, resetDrag]);
+  const handleCardKeyDown = React.useCallback(
+    (e, card, column) => {
+      if (!draggable) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (!kbDragState) {
+          const idx = column.cards.findIndex((c) => c.id === card.id);
+          setKbDragState({ type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx });
+        } else {
+          const cardIdx = column.cards.findIndex((c) => c.id === card.id);
+          if (kbDragState.fromColumnId !== void 0) {
+            applyCardMove(kbDragState.id, kbDragState.fromColumnId, column.id, cardIdx);
+          }
+          setKbDragState(null);
+        }
+        return;
+      }
+      if (e.key === "Escape" && kbDragState) {
+        e.preventDefault();
+        setKbDragState(null);
+      }
+    },
+    [draggable, kbDragState, applyCardMove]
+  );
+  const wrapperClasses = React.useMemo(() => tigercatCore.classNames(tigercatCore.taskBoardBaseClasses, className), [className]);
+  const dragType = dragState?.type ?? null;
+  const dragStateId = dragState?.type === "card" ? dragState.id : null;
+  const kbDragStateId = kbDragState?.id ?? null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: boardRef,
+      className: wrapperClasses,
+      style,
+      role: "region",
+      "aria-label": tigercatCore.resolveLocaleText(labels.boardAriaLabel),
+      "data-tiger-task-board": "",
+      ...rest,
+      children: currentColumns.map((col, i) => {
+        const isDropTarget = dragState?.type === "card" && dropTargetColumnId === col.id;
+        const isColDragging = dragState?.type === "column" && dragState.id === col.id;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnItem,
+          {
+            column: col,
+            colIndex: i,
+            isDropTarget,
+            isColDragging,
+            dropIdx: isDropTarget ? dropIdx : -1,
+            draggable,
+            columnDraggable,
+            labels,
+            renderCardProp,
+            renderColumnHeader,
+            renderColumnFooter,
+            renderEmptyColumn,
+            onCardAdd,
+            dragType,
+            onCardDragStart: handleCardDragStart,
+            onCardDragOver: handleCardDragOver,
+            onCardDrop: handleCardDrop,
+            onDragEnd: handleDragEnd,
+            onDragLeave: handleDragLeave,
+            onColumnDragStart: handleColumnDragStart,
+            onColumnDragOver: handleColumnDragOver,
+            onColumnDrop: handleColumnDrop,
+            onCardTouchStart: handleTouchStart,
+            onCardTouchMove: handleTouchMove,
+            onCardTouchEnd: handleTouchEnd,
+            onColumnTouchStart: handleColumnTouchStart,
+            onColumnTouchMove: handleColumnTouchMove,
+            onColumnTouchEnd: handleColumnTouchEnd,
+            onCardKeyDown: handleCardKeyDown,
+            dragStateId,
+            kbDragStateId
+          },
+          String(col.id)
+        );
+      })
+    }
+  );
+};
+var TaskBoard_default = TaskBoard;
+
+exports.TaskBoard = TaskBoard;
+exports.TaskBoard_default = TaskBoard_default;