@expcat/tigercat-react 2.1.0 → 2.1.1

package/dist/{chunk-773LH7BK.mjs → chunk-O6VYD4E4.mjs}

@@ -28,11 +28,14 @@ import {
   kanbanSwimlaneCollapsedClasses,
   kanbanAddColumnClasses,
   filterColumns,
+  filterCards,
   groupBySwimlane,
   getColumnCardCount,
   moveCard,
+  mapVisibleCardIndexToSource,
   reorderColumns,
   isWipExceeded,
+  appendDefaultTaskBoardCard,
   createTaskBoardDragController,
   createDefaultDragSnapshot
 } from "@expcat/tigercat-core";
@@ -343,6 +346,17 @@ var TaskBoard = ({
     },
     [onColumnsChange]
   );
+  const consumerOnCardAdd = onCardAdd;
+  const showAddCard = Boolean(allowAddCard || consumerOnCardAdd);
+  const handleCardAdd = useCallback(
+    (columnId) => {
+      if (consumerOnCardAdd == null) {
+        updateColumns(appendDefaultTaskBoardCard(columnsRef.current, columnId));
+      }
+      consumerOnCardAdd?.(columnId);
+    },
+    [consumerOnCardAdd, updateColumns]
+  );
   const [dragSnap, setDragSnap] = useState(createDefaultDragSnapshot);
   const boardRef = useRef(null);
   const beforeCardMoveRef = useRef(beforeCardMove);
@@ -355,9 +369,17 @@ var TaskBoard = ({
   onColumnMoveRef.current = onColumnMove;
   const enforceWipLimitRef = useRef(enforceWipLimit);
   enforceWipLimitRef.current = enforceWipLimit;
+  const filterTextRef = useRef(filterText);
+  filterTextRef.current = filterText;
   const applyCardMove = useCallback(
     async (cardId, fromColumnId, toColumnId, toIdx) => {
-      const result = moveCard(columnsRef.current, cardId, fromColumnId, toColumnId, toIdx, {
+      const sourceCol = columnsRef.current.find((c) => c.id === toColumnId);
+      const mappedIdx = sourceCol == null ? toIdx : mapVisibleCardIndexToSource(
+        sourceCol.cards,
+        filterCards(sourceCol.cards, filterTextRef.current),
+        toIdx
+      );
+      const result = moveCard(columnsRef.current, cardId, fromColumnId, toColumnId, mappedIdx, {
         enforceWipLimit: enforceWipLimitRef.current
       });
       if (!result) return;
@@ -442,7 +464,7 @@ var TaskBoard = ({
               renderColumnHeader,
               renderColumnFooter,
               renderEmptyColumn,
-              onCardAdd,
+              onCardAdd: showAddCard ? handleCardAdd : void 0,
               dragType,
               dragCtrl,
               dragStateId,

package/dist/{chunk-G7D4QV7A.mjs → chunk-O7TV5OKS.mjs}

@@ -9,13 +9,28 @@ import {
   floatButtonSizeClasses,
   floatButtonTypeClasses,
   floatButtonDisabledClasses,
-  floatButtonGroupClasses,
+  floatButtonIconSizeClasses,
+  floatButtonPlusIconPath,
+  getFloatButtonGroupClasses,
   getViewportOffsetStyle,
   viewportFloatingBaseClasses,
   viewportPlacementClasses
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var FloatButtonGroupContext = createContext(null);
+var DefaultPlusIcon = ({ size }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    className: floatButtonIconSizeClasses[size],
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: floatButtonPlusIconPath })
+  }
+);
 var FloatButton = ({
   shape,
   size = "md",
@@ -58,11 +73,11 @@ var FloatButton = ({
       type: "button",
       disabled,
       style: buttonStyle,
-      "aria-label": ariaLabel ?? tooltip,
+      "aria-label": children != null ? ariaLabel ?? tooltip : ariaLabel ?? tooltip ?? "Add",
       title: tooltip,
       onClick: disabled ? void 0 : onClick,
       ...props,
-      children
+      children: children ?? /* @__PURE__ */ jsx(DefaultPlusIcon, { size })
     }
   );
 };
@@ -74,6 +89,10 @@ var FloatButtonGroup = ({
   children,
   className,
   onOpenChange,
+  placement = "bottom-right",
+  offset,
+  portal = true,
+  style,
   ...props
 }) => {
   const groupContextValue = useMemo(() => ({ shape: groupShape }), [groupShape]);
@@ -92,12 +111,20 @@ var FloatButtonGroup = ({
     setInternalOpen(false);
     onOpenChange?.(false);
   }, [onOpenChange]);
-  const groupClasses = useMemo(() => classNames(floatButtonGroupClasses, className), [className]);
-  if (!isBrowser()) return null;
+  const groupClasses = useMemo(
+    () => classNames(getFloatButtonGroupClasses({ placement, portal }), className),
+    [placement, portal, className]
+  );
+  const groupStyle = useMemo(
+    () => ({ ...getViewportOffsetStyle(placement, offset), ...style }),
+    [placement, offset, style]
+  );
+  if (portal && !isBrowser()) return null;
   const content = /* @__PURE__ */ jsx(FloatButtonGroupContext.Provider, { value: groupContextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: groupClasses,
+      style: groupStyle,
       onMouseEnter: trigger === "hover" ? handleMouseEnter : void 0,
       onMouseLeave: trigger === "hover" ? handleMouseLeave : void 0,
       ...props,
@@ -107,7 +134,7 @@ var FloatButtonGroup = ({
       ]
     }
   ) });
-  return ReactDOM.createPortal(content, document.body);
+  return portal ? ReactDOM.createPortal(content, document.body) : content;
 };
 
 export {

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

@@ -1,12 +1,12 @@
 import {
   ImageGroupContext
-} from "./chunk-HSBN5MLS.mjs";
+} from "./chunk-3LACOSJQ.mjs";
 import {
   ImagePreview
-} from "./chunk-ZCGIZOMT.mjs";
+} from "./chunk-V7HJ5HLC.mjs";
 import {
   usePopup
-} from "./chunk-ZG56T75O.mjs";
+} from "./chunk-WTHWLCRL.mjs";
 import {
   renderOverlayPortal
 } from "./chunk-HKAZXG74.mjs";

package/dist/{chunk-UYJJLHVA.mjs → chunk-PMQJ6AYT.mjs}

@@ -66,28 +66,30 @@ var Textarea = forwardRef(
       onChange?.(event);
     };
     const currentLength = currentValue?.length ?? 0;
+    const textarea = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: setRefs,
+        className: textareaClasses,
+        value: currentValue,
+        disabled,
+        readOnly: readonly,
+        required,
+        placeholder,
+        rows,
+        maxLength,
+        minLength,
+        onInput: handleInput,
+        onChange: handleChange,
+        onFocus,
+        onBlur,
+        ...props
+      }
+    );
+    if (!showCount) return textarea;
     return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: setRefs,
-          className: textareaClasses,
-          value: currentValue,
-          disabled,
-          readOnly: readonly,
-          required,
-          placeholder,
-          rows,
-          maxLength,
-          minLength,
-          onInput: handleInput,
-          onChange: handleChange,
-          onFocus,
-          onBlur,
-          ...props
-        }
-      ),
-      showCount && /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-gray-500 text-right", children: maxLength ? `${currentLength}/${maxLength}` : currentLength })
+      textarea,
+      /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-gray-500 text-right", children: maxLength ? `${currentLength}/${maxLength}` : currentLength })
     ] });
   }
 );

package/dist/{chunk-KC55B62J.mjs → chunk-PY2VUNEJ.mjs}

@@ -33,6 +33,7 @@ import {
   getPickerOptionAria,
   getPickerTriggerKeyAction,
   getPickerNavigationIndex,
+  getPickerOptionId,
   findFirstEnabledIndex,
   classNames,
   icon20ViewBox,
@@ -165,18 +166,17 @@ var TreeSelect = (props) => {
       commitActiveIndex(-1);
       return;
     }
-    if (!virtual) return;
     commitActiveIndex(resolveActiveIndex());
-  }, [isOpen, searchQuery, virtual, commitActiveIndex, resolveActiveIndex]);
+  }, [isOpen, searchQuery, commitActiveIndex, resolveActiveIndex]);
   useLayoutEffect(() => {
-    if (!isOpen || !virtual) return;
+    if (!isOpen) return;
     const remapped = getTreeSelectVisibleIndex(visibleNodesRef.current, lastActiveKeyRef.current);
     if (remapped >= 0) setActiveIndex(remapped);
-  }, [expandedKeys, treeData, isOpen, virtual]);
+  }, [expandedKeys, treeData, isOpen]);
   useLayoutEffect(() => {
-    if (!isOpen || !virtual) return;
+    if (!isOpen) return;
     alignVirtualScroll(activeIndex);
-  }, [activeIndex, isOpen, virtual, alignVirtualScroll, visibleNodes.length]);
+  }, [activeIndex, isOpen, alignVirtualScroll, visibleNodes.length]);
   function handleVirtualListKeyDown(e) {
     if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") {
       return;
@@ -207,8 +207,7 @@ var TreeSelect = (props) => {
     if (isOpen) closeDropdown();
     else openDropdown();
   }
-  function toggleExpand(key, e) {
-    e.stopPropagation();
+  function toggleExpandKey(key) {
     setExpandedKeys((prev) => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);
@@ -216,6 +215,10 @@ var TreeSelect = (props) => {
       return next;
     });
   }
+  function toggleExpand(key, e) {
+    e.stopPropagation();
+    toggleExpandKey(key);
+  }
   function isSelected(key) {
     if (multiple && Array.isArray(value)) {
       return value.includes(key);
@@ -239,7 +242,51 @@ var TreeSelect = (props) => {
     e.stopPropagation();
     onChange?.(multiple ? [] : void 0);
   }
+  function handleOpenListKeyDown(e, fromSearchInput = false) {
+    const key = e.key;
+    if (fromSearchInput && key === " ") return false;
+    if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+      e.preventDefault();
+      e.stopPropagation();
+      setActiveIndex((current) => {
+        const next = getPickerNavigationIndex(visibleNodes, current, key, isNodeDisabled);
+        lastActiveKeyRef.current = visibleNodes[next]?.node.key;
+        return next;
+      });
+      return true;
+    }
+    if (key === "Enter" || key === " ") {
+      e.preventDefault();
+      e.stopPropagation();
+      const item = visibleNodes[activeIndex];
+      if (item && !item.node.disabled) {
+        handleNodeSelect(item.node);
+      }
+      return true;
+    }
+    if (key === "ArrowRight") {
+      e.preventDefault();
+      e.stopPropagation();
+      const item = visibleNodes[activeIndex];
+      if (item?.hasChildren && !item.isExpanded) {
+        toggleExpandKey(item.node.key);
+      }
+      return true;
+    }
+    if (key === "ArrowLeft") {
+      e.preventDefault();
+      e.stopPropagation();
+      const item = visibleNodes[activeIndex];
+      if (item?.hasChildren && item.isExpanded) {
+        toggleExpandKey(item.node.key);
+      }
+      return true;
+    }
+    return false;
+  }
   function handleKeyDown(e) {
+    if (disabled) return;
+    if (isOpen && handleOpenListKeyDown(e)) return;
     const action = getPickerTriggerKeyAction(e.key, isOpen);
     if (action === "none") return;
     e.preventDefault();
@@ -252,15 +299,43 @@ var TreeSelect = (props) => {
       closeDropdown();
     }
   }
-  function renderFlatNode(flatNode) {
+  function handleDropdownKeyDown(e) {
+    if (e.target instanceof HTMLInputElement) return;
+    if (!isOpen) return;
+    handleOpenListKeyDown(e);
+  }
+  function handleSearchKeyDown(e) {
+    switch (e.key) {
+      case " ":
+        e.stopPropagation();
+        return;
+      case "ArrowDown":
+      case "ArrowUp":
+      case "Enter":
+        handleOpenListKeyDown(e, true);
+        return;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        closeDropdown();
+        triggerRef.current?.focus();
+        return;
+      default:
+        return;
+    }
+  }
+  function renderFlatNode(flatNode, index) {
     const { node, level, hasChildren, isExpanded } = flatNode;
     const selected = isSelected(node.key);
+    const isActive = index === activeIndex;
     const indent = level * 20;
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        id: getPickerOptionId(listboxId, index),
+        "data-active": isActive || void 0,
         ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
-        className: getTreeSelectNodeClasses(selected, !!node.disabled, size),
+        className: getTreeSelectNodeClasses(selected || isActive, !!node.disabled, size),
         style: { paddingLeft: `${indent + 8}px`, height: virtual ? "100%" : void 0 },
         onClick: (e) => {
           e.stopPropagation();
@@ -285,45 +360,65 @@ var TreeSelect = (props) => {
     );
   }
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(treeSelectBaseClasses, className), ...divProps, children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "button",
       {
         ref: triggerRef,
         type: "button",
-        className: getTreeSelectTriggerClasses(size, disabled, isOpen),
-        ...getPickerComboboxAria({ expanded: isOpen, listboxId }),
+        className: classNames(
+          getTreeSelectTriggerClasses(size, disabled, isOpen),
+          showClearButton ? "pr-14" : void 0
+        ),
+        ...getPickerComboboxAria({
+          expanded: isOpen,
+          listboxId,
+          activeIndex: isOpen ? activeIndex : -1
+        }),
         disabled,
         onClick: toggleDropdown,
         onKeyDown: handleKeyDown,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(
+              "flex-1 truncate",
+              !displayLabel ? "text-[var(--tiger-treeselect-placeholder,var(--tiger-text-muted,#9ca3af))]" : ""
+            ),
+            children: displayLabel || placeholder
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1", children: [
+      showClearButton && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "pointer-events-auto inline-flex rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-treeselect-ring,var(--tiger-primary,#2563eb))] text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
+          "data-tiger-treeselect-clear": "",
+          "aria-label": resolveLocaleText("Clear selection", mergedLocale?.common?.clearText),
+          onClick: handleClear,
+          children: /* @__PURE__ */ jsx(
+            "svg",
             {
-              className: classNames(
-                "flex-1 truncate",
-                !displayLabel ? "text-[var(--tiger-treeselect-placeholder,var(--tiger-text-muted,#9ca3af))]" : ""
-              ),
-              children: displayLabel || placeholder
+              className: "w-4 h-4",
+              viewBox: icon20ViewBox,
+              fill: "currentColor",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx("path", { d: closeSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
             }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(
+            "inline-flex text-[var(--tiger-text-muted,#9ca3af)]",
+            isOpen && "rotate-180"
           ),
-          showClearButton ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
-              "aria-label": resolveLocaleText("Clear selection", mergedLocale?.common?.clearText),
-              onClick: handleClear,
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "w-4 h-4",
-                  viewBox: icon20ViewBox,
-                  fill: "currentColor",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx("path", { d: closeSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
-                }
-              )
-            }
-          ) : /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-text-muted,#9ca3af)] pointer-events-none", children: /* @__PURE__ */ jsx(
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(
             "svg",
             {
               className: "w-4 h-4 transition-transform",
@@ -332,10 +427,10 @@ var TreeSelect = (props) => {
               xmlns: "http://www.w3.org/2000/svg",
               children: /* @__PURE__ */ jsx("path", { d: chevronDownSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
             }
-          ) })
-        ]
-      }
-    ),
+          )
+        }
+      )
+    ] }),
     renderOverlayPortal(
       isOpen ? /* @__PURE__ */ jsxs(
         "div",
@@ -345,6 +440,7 @@ var TreeSelect = (props) => {
           className: classNames(getTreeSelectDropdownClasses(virtual), overlay.floatingClasses),
           style: overlay.floatingStyles,
           "data-positioned": overlay.positioned,
+          onKeyDown: handleDropdownKeyDown,
           children: [
             searchable && /* @__PURE__ */ jsx(
               "input",
@@ -360,7 +456,8 @@ var TreeSelect = (props) => {
                   "Search tree",
                   mergedLocale?.common?.searchPlaceholder
                 ),
-                onChange: (e) => updateSearchValue(e.target.value)
+                onChange: (e) => updateSearchValue(e.target.value),
+                onKeyDown: handleSearchKeyDown
               }
             ),
             visibleNodes.length > 0 ? virtual ? /* @__PURE__ */ jsx(
@@ -378,12 +475,12 @@ var TreeSelect = (props) => {
                     height,
                     renderItem: ({ index }) => {
                       const item = visibleNodes[index];
-                      return item ? renderFlatNode(item) : null;
+                      return item ? renderFlatNode(item, index) : null;
                     }
                   }
                 )
               }
-            ) : visibleNodes.map((flatNode) => renderFlatNode(flatNode)) : /* @__PURE__ */ jsx("div", { className: treeSelectEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) })
+            ) : visibleNodes.map((flatNode, index) => renderFlatNode(flatNode, index)) : /* @__PURE__ */ jsx("div", { className: treeSelectEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) })
           ]
         }
       ) : null,

package/dist/{chunk-BEJZPJIK.mjs → chunk-QOAOOD53.mjs}

@@ -13,6 +13,7 @@ import {
   calendarWeekdayClasses,
   getCalendarDayClasses,
   getCalendarMonthClasses,
+  isCalendarMonthDisabled,
   isSameDay,
   getMonthDays,
   getShortDayNames,
@@ -91,10 +92,13 @@ var Calendar = ({
   );
   const selectMonth = useCallback(
     (monthIdx) => {
+      if (isCalendarMonthDisabled(viewYear, monthIdx, disabledDate)) return;
       setViewMonth(monthIdx);
-      onPanelChange?.(new Date(viewYear, monthIdx, 1), mode);
+      const date = new Date(viewYear, monthIdx, 1);
+      onChange?.(date);
+      onPanelChange?.(date, "month");
     },
-    [viewYear, mode, onPanelChange]
+    [viewYear, disabledDate, onChange, onPanelChange]
   );
   const dayGridRef = useRef(null);
   const pendingFocusIsoRef = useRef(null);
@@ -256,14 +260,16 @@ var Calendar = ({
     ] }),
     mode === "year" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2", role: "grid", ref: monthGridRef, children: monthRows.map((row, ri) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", role: "row", children: row.map((m, ci) => {
       const i = ri * 3 + ci;
+      const isDisabled = isCalendarMonthDisabled(viewYear, i, disabledDate);
       return /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           role: "gridcell",
           "aria-selected": viewMonth === i,
-          tabIndex: rovingMonthIdx === i ? 0 : -1,
-          className: getCalendarMonthClasses(viewMonth === i),
+          disabled: isDisabled,
+          tabIndex: rovingMonthIdx === i && !isDisabled ? 0 : -1,
+          className: getCalendarMonthClasses(viewMonth === i, isDisabled),
           onClick: () => selectMonth(i),
           onFocus: () => setActiveMonthIdx(i),
           onKeyDown: (e) => handleMonthKeyDown(e, i),