@expcat/tigercat-react 1.4.0 → 2.0.0-preview.1

package/dist/{chunk-VM4ZQHT5.mjs → chunk-XHNR3A7A.mjs}

@@ -1,15 +1,9 @@
 import {
   useChartInteraction
-} from "./chunk-6QML6T3Y.mjs";
-import {
-  ChartLegend
-} from "./chunk-UBP7HZSU.mjs";
-import {
-  ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
+} from "./chunk-DNOPEJ5I.mjs";
 import {
   ChartTooltip
-} from "./chunk-NASC6XHN.mjs";
+} from "./chunk-YORCCCQX.mjs";
 import {
   ChartAxis
 } from "./chunk-RQSQXQN6.mjs";
@@ -19,6 +13,12 @@ import {
 import {
   ChartGrid
 } from "./chunk-677VSTPW.mjs";
+import {
+  ChartLegend
+} from "./chunk-ZG2W4HS5.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
 
 // src/components/AreaChart.tsx
 import { useId, useMemo, useState, useCallback } from "react";
@@ -50,13 +50,13 @@ var AreaChart = ({
   series,
   xScale: xScaleProp,
   yScale: yScaleProp,
-  areaColor: _areaColor = "var(--tiger-primary,#2563eb)",
+  areaColor = "var(--tiger-primary,#2563eb)",
   strokeWidth = 2,
   fillOpacity = 0.2,
   curve = "linear",
   showPoints = false,
   pointSize = 4,
-  pointColor: _pointColor,
+  pointColor,
   stacked = false,
   showGrid = true,
   showAxis = true,
@@ -114,8 +114,13 @@ var AreaChart = ({
     [width, height, padding]
   );
   const resolvedSeries = useMemo(
-    () => resolveSeriesData(series, data),
-    [series, data]
+    () => resolveSeriesData(series, data, {
+      // Single-series colors (`areaColor`/`pointColor`) seed the synthesized
+      // series so they take effect when only `data` is provided.
+      color: areaColor,
+      pointColor
+    }),
+    [series, data, areaColor, pointColor]
   );
   const {
     activeIndex,
@@ -291,6 +296,16 @@ var AreaChart = ({
     setHoveredPointInfo(null);
     onPointHover?.(null, null, null);
   }, [onPointHover]);
+  const showPointTooltipFromElement = useCallback(
+    (el, seriesIndex, pointIndex) => {
+      if (!hoverable) return;
+      const rect = el.getBoundingClientRect();
+      setHoveredPointInfo({ seriesIndex, pointIndex });
+      setTooltipPosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+      onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+    },
+    [hoverable, onPointHover, resolvedSeries]
+  );
   const handlePointClick = useCallback(
     (seriesIndex, pointIndex) => {
       onPointClick?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
@@ -307,6 +322,7 @@ var AreaChart = ({
     },
     [selectable, handleSeriesSelect]
   );
+  const pointClickable = selectable || !!onPointClick;
   const reversedSeriesData = useMemo(() => [...seriesData].reverse(), [seriesData]);
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
@@ -478,6 +494,8 @@ var AreaChart = ({
           (sd) => sd.showPoints && /* @__PURE__ */ jsx("g", { opacity: sd.opacity, "data-series-key": sd.seriesKey, children: sd.points.map((point) => {
             const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
             const hoverSize = sd.pointSize + 2;
+            const datum = resolvedSeries[sd.seriesIndex]?.data?.[point.pointIndex];
+            const pointInteractive = hoverable || pointClickable;
             return /* @__PURE__ */ jsx(
               "circle",
               {
@@ -487,17 +505,46 @@ var AreaChart = ({
                 fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                 stroke: sd.pointHollow ? sd.pointColor : "none",
                 strokeWidth: sd.pointHollow ? 2 : 0,
-                className: linePointTransitionClasses,
+                className: classNames(
+                  linePointTransitionClasses,
+                  pointInteractive && "cursor-pointer"
+                ),
                 style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
+                role: pointInteractive ? "button" : "img",
+                "aria-label": datum?.label ?? String(datum?.y ?? ""),
+                tabIndex: pointInteractive ? 0 : void 0,
                 "data-point-index": point.pointIndex,
                 "data-series-key": sd.seriesKey,
-                onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                onMouseMove: handlePointMouseMove,
-                onMouseLeave: handlePointMouseLeave,
-                onClick: (e) => {
+                onMouseEnter: hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                onMouseMove: hoverable ? handlePointMouseMove : void 0,
+                onMouseLeave: hoverable ? handlePointMouseLeave : void 0,
+                onClick: pointClickable ? (e) => {
                   e.stopPropagation();
                   handlePointClick(sd.seriesIndex, point.pointIndex);
-                }
+                } : void 0,
+                onFocus: hoverable ? (e) => showPointTooltipFromElement(
+                  e.currentTarget,
+                  sd.seriesIndex,
+                  point.pointIndex
+                ) : void 0,
+                onBlur: hoverable ? handlePointMouseLeave : void 0,
+                onKeyDown: pointInteractive ? (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (pointClickable) {
+                      handlePointClick(sd.seriesIndex, point.pointIndex);
+                    } else {
+                      showPointTooltipFromElement(
+                        e.currentTarget,
+                        sd.seriesIndex,
+                        point.pointIndex
+                      );
+                    }
+                  } else if (e.key === "Escape" && hoverable) {
+                    handlePointMouseLeave();
+                  }
+                } : void 0
               },
               `point-${sd.seriesKey}-${point.pointIndex}`
             );
@@ -510,7 +557,7 @@ var AreaChart = ({
     ChartTooltip,
     {
       content: tooltipContent,
-      visible: hoveredPointInfo !== null && tooltipContent !== "",
+      open: hoveredPointInfo !== null && tooltipContent !== "",
       x: tooltipPosition.x,
       y: tooltipPosition.y
     }

package/dist/{chunk-CME2IFUT.mjs → chunk-XSAKD4MX.mjs}

@@ -19,6 +19,7 @@ import {
   getTransferButtonClasses,
   splitTransferData,
   filterTransferItems,
+  moveTransferItems,
   getPickerListboxAria,
   getPickerOptionAria,
   classNames,
@@ -29,32 +30,42 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 var TRANSFER_KEYS = /* @__PURE__ */ new Set([
   "value",
+  "targetKeys",
   "dataSource",
   "size",
   "disabled",
-  "showSearch",
+  "searchable",
+  "searchValue",
+  "defaultSearchValue",
   "sourceTitle",
   "targetTitle",
-  "notFoundText",
+  "emptyText",
   "filterOption",
-  "onChange"
+  "onChange",
+  "onSearchChange"
 ]);
+var EMPTY_TRANSFER_VALUE = [];
 var Transfer = (props) => {
   const {
-    value = [],
+    value,
+    targetKeys,
     dataSource = [],
     size = "md",
     disabled = false,
-    showSearch = false,
+    searchable = false,
+    searchValue,
+    defaultSearchValue,
     sourceTitle = "Source",
     targetTitle = "Target",
-    notFoundText,
+    emptyText,
     filterOption,
     className,
     onChange,
+    onSearchChange,
     locale,
     ...rest
   } = props;
+  const resolvedValue = value ?? targetKeys ?? EMPTY_TRANSFER_VALUE;
   const config = useTigerConfig();
   const mergedLocale = useMemo(
     () => mergeTigerLocale(config.locale, locale),
@@ -68,11 +79,22 @@ var Transfer = (props) => {
   }
   const [sourceSelectedKeys, setSourceSelectedKeys] = useState(/* @__PURE__ */ new Set());
   const [targetSelectedKeys, setTargetSelectedKeys] = useState(/* @__PURE__ */ new Set());
-  const [sourceSearch, setSourceSearch] = useState("");
-  const [targetSearch, setTargetSearch] = useState("");
+  const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(
+    defaultSearchValue ?? {}
+  );
+  const resolvedSearchValue = searchValue ?? uncontrolledSearchValue;
+  const sourceSearch = resolvedSearchValue.source ?? "";
+  const targetSearch = resolvedSearchValue.target ?? "";
+  function updateSearchValue(panel, value2) {
+    const next = { ...resolvedSearchValue, [panel]: value2 };
+    if (searchValue === void 0) {
+      setUncontrolledSearchValue(next);
+    }
+    onSearchChange?.(next);
+  }
   const { sourceItems, targetItems } = useMemo(
-    () => splitTransferData(dataSource, value),
-    [dataSource, value]
+    () => splitTransferData(dataSource, resolvedValue),
+    [dataSource, resolvedValue]
   );
   const filteredSourceItems = useMemo(
     () => filterTransferItems(sourceItems, sourceSearch, filterOption),
@@ -108,27 +130,27 @@ var Transfer = (props) => {
   }
   function moveRight() {
     if (!canMoveRight) return;
-    const keysToMove = [...sourceSelectedKeys].filter((key) => {
-      const item = dataSource.find((d) => d.key === key);
-      return item && !item.disabled;
-    });
-    const newTargetKeys = [...value, ...keysToMove];
+    const { targetKeys: newTargetKeys, movedKeys } = moveTransferItems(
+      "right",
+      resolvedValue,
+      sourceSelectedKeys,
+      dataSource
+    );
     setSourceSelectedKeys(/* @__PURE__ */ new Set());
-    onChange?.(newTargetKeys, "right", keysToMove);
+    onChange?.(newTargetKeys, "right", movedKeys);
   }
   function moveLeft() {
     if (!canMoveLeft) return;
-    const keysToRemove = new Set(
-      [...targetSelectedKeys].filter((key) => {
-        const item = dataSource.find((d) => d.key === key);
-        return item && !item.disabled;
-      })
+    const { targetKeys: newTargetKeys, movedKeys } = moveTransferItems(
+      "left",
+      resolvedValue,
+      targetSelectedKeys,
+      dataSource
     );
-    const newTargetKeys = value.filter((k) => !keysToRemove.has(k));
     setTargetSelectedKeys(/* @__PURE__ */ new Set());
-    onChange?.(newTargetKeys, "left", [...keysToRemove]);
+    onChange?.(newTargetKeys, "left", movedKeys);
   }
-  function renderPanel(title, items, selectedKeys, toggleFn, searchValue, onSearch) {
+  function renderPanel(title, items, selectedKeys, toggleFn, searchValue2, onSearchInput) {
     return /* @__PURE__ */ jsxs("div", { className: transferPanelClasses, role: "group", "aria-label": title, children: [
       /* @__PURE__ */ jsx("div", { className: transferPanelHeaderClasses, children: /* @__PURE__ */ jsxs("span", { className: "font-medium text-[var(--tiger-transfer-title,var(--tiger-text,#111827))]", children: [
         title,
@@ -136,15 +158,15 @@ var Transfer = (props) => {
         items.length,
         ")"
       ] }) }),
-      showSearch && /* @__PURE__ */ jsx(
+      searchable && /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           className: transferSearchClasses,
           placeholder: resolveLocaleText("Search...", mergedLocale?.common?.searchPlaceholder),
-          value: searchValue,
+          value: searchValue2,
           "aria-label": `Search ${title}`,
-          onChange: (e) => onSearch(e.target.value)
+          onChange: (e) => onSearchInput(e.target.value)
         }
       ),
       /* @__PURE__ */ jsx(
@@ -178,7 +200,7 @@ var Transfer = (props) => {
               },
               String(item.key)
             );
-          }) : /* @__PURE__ */ jsx("div", { className: transferEmptyClasses, children: resolveLocaleText("No data", notFoundText, mergedLocale?.common?.emptyText) })
+          }) : /* @__PURE__ */ jsx("div", { className: transferEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) })
         }
       )
     ] });
@@ -190,7 +212,7 @@ var Transfer = (props) => {
       sourceSelectedKeys,
       toggleSourceItem,
       sourceSearch,
-      setSourceSearch
+      (value2) => updateSearchValue("source", value2)
     ),
     /* @__PURE__ */ jsxs("div", { className: transferOperationClasses, children: [
       /* @__PURE__ */ jsx(
@@ -240,7 +262,7 @@ var Transfer = (props) => {
       targetSelectedKeys,
       toggleTargetItem,
       targetSearch,
-      setTargetSearch
+      (value2) => updateSearchValue("target", value2)
     )
   ] });
 };

package/dist/{chunk-7DUHHRAU.mjs → chunk-Y5X3G2LD.mjs}

@@ -1,5 +1,5 @@
 // src/components/VirtualList.tsx
-import { useState, useMemo, useRef, useCallback } from "react";
+import { useState, useMemo, useRef, useCallback, useLayoutEffect } from "react";
 import {
   virtualListContainerClasses,
   virtualListInnerClasses,
@@ -22,7 +22,10 @@ var VirtualList = ({
   onScroll
 }) => {
   const [scrollTop, setScrollTop] = useState(0);
+  const [measureVersion, setMeasureVersion] = useState(0);
   const containerRef = useRef(null);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const isDynamic = !customStrategy && !getItemHeight && estimatedItemHeight !== void 0;
   const strategy = useMemo(() => {
     if (customStrategy) return customStrategy;
     if (getItemHeight) return variableSizeStrategy(getItemHeight, itemCount);
@@ -32,8 +35,23 @@ var VirtualList = ({
   }, [customStrategy, getItemHeight, estimatedItemHeight, itemHeight, itemCount]);
   const range = useMemo(
     () => strategy.getRange(scrollTop, height, itemCount, overscan),
-    [scrollTop, height, itemCount, overscan, strategy]
+    // measureVersion participates so re-measured heights recompute the window.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scrollTop, height, itemCount, overscan, strategy, measureVersion]
   );
+  useLayoutEffect(() => {
+    if (!isDynamic || !strategy.updateItemHeight) return;
+    let changed = false;
+    itemRefs.current.forEach((el, i) => {
+      if (!el) return;
+      const measured = el.offsetHeight;
+      if (measured > 0 && measured !== strategy.getItemHeight(i)) {
+        strategy.updateItemHeight(i, measured);
+        changed = true;
+      }
+    });
+    if (changed) setMeasureVersion((v) => v + 1);
+  }, [isDynamic, strategy]);
   const handleScroll = useCallback(() => {
     if (containerRef.current) {
       const st = containerRef.current.scrollTop;
@@ -45,9 +63,27 @@ var VirtualList = ({
   const items = [];
   for (let i = startIndex; i <= endIndex; i++) {
     const itemH = strategy.getItemHeight(i);
-    items.push(
-      /* @__PURE__ */ jsx("div", { style: { height: `${itemH}px`, width: "100%" }, children: renderItem({ index: i }) }, i)
-    );
+    if (isDynamic) {
+      const index = i;
+      items.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              if (el) itemRefs.current.set(index, el);
+              else itemRefs.current.delete(index);
+            },
+            style: { width: "100%" },
+            children: renderItem({ index })
+          },
+          index
+        )
+      );
+    } else {
+      items.push(
+        /* @__PURE__ */ jsx("div", { style: { height: `${itemH}px`, width: "100%" }, children: renderItem({ index: i }) }, i)
+      );
+    }
   }
   const offsetTop = startIndex >= 0 ? strategy.getItemOffset(startIndex) : 0;
   return /* @__PURE__ */ jsx(

package/dist/{chunk-NITD53UU.mjs → chunk-YI7NQWUV.mjs}

@@ -8,6 +8,7 @@ import {
 // src/components/Dropdown.tsx
 import React, {
   createContext,
+  useContext,
   useState,
   useEffect,
   useRef,
@@ -21,6 +22,7 @@ import {
   getDropdownTriggerClasses,
   getDropdownChevronClasses,
   getDropdownMenuClasses,
+  getDropdownItemClasses,
   getTransformOrigin,
   injectDropdownStyles,
   FLOATING_OVERLAY_Z_INDEX,
@@ -43,6 +45,41 @@ var DropdownMenu = ({
   const menuClasses = classNames(getDropdownMenuClasses(), className);
   return /* @__PURE__ */ jsx("div", { className: menuClasses, style, role: role ?? "menu", ...divProps, children });
 };
+var DropdownItem = ({
+  disabled = false,
+  divided = false,
+  className,
+  onClick,
+  children,
+  ...buttonProps
+}) => {
+  const context = useContext(DropdownContext);
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+    if (context?.closeOnClick) {
+      context.handleItemClick();
+    }
+  };
+  const itemClasses = classNames(getDropdownItemClasses(disabled, divided), className);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      role: "menuitem",
+      tabIndex: -1,
+      "aria-disabled": disabled,
+      disabled,
+      onClick: handleClick,
+      ...buttonProps,
+      children
+    }
+  );
+};
 var Dropdown = ({
   trigger = "hover",
   placement: initialPlacement = "bottom-start",
@@ -242,5 +279,6 @@ var Dropdown = ({
 export {
   DropdownContext,
   DropdownMenu,
+  DropdownItem,
   Dropdown
 };

package/dist/{chunk-NASC6XHN.mjs → chunk-YORCCCQX.mjs}

@@ -1,11 +1,16 @@
 // src/components/ChartTooltip.tsx
 import { useRef, useEffect, useState, useMemo } from "react";
 import { createPortal } from "react-dom";
-import { classNames, getChartTooltipTransform, isBrowser } from "@expcat/tigercat-core";
+import {
+  classNames,
+  getChartTooltipTransform,
+  isBrowser,
+  resolveChartTooltipPosition
+} from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
 var ChartTooltip = ({
   content,
-  visible = false,
+  open = false,
   x = 0,
   y = 0,
   className
@@ -13,27 +18,31 @@ var ChartTooltip = ({
   const tooltipRef = useRef(null);
   const [adjustedPosition, setAdjustedPosition] = useState({ x, y });
   useEffect(() => {
-    if (!visible) return;
-    let newX = x + 12;
-    let newY = y - 8;
+    if (!open) return;
+    const initialPosition = resolveChartTooltipPosition({
+      x,
+      y,
+      rect: { width: 0, height: 0 },
+      viewport: {
+        width: typeof window === "undefined" ? 0 : window.innerWidth,
+        height: typeof window === "undefined" ? 0 : window.innerHeight
+      }
+    });
     const frameHandle = requestAnimationFrame(() => {
       if (!tooltipRef.current) return;
       const rect = tooltipRef.current.getBoundingClientRect();
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      if (newX + rect.width > viewportWidth - 8) {
-        newX = x - rect.width - 12;
-      }
-      if (newY + rect.height > viewportHeight - 8) {
-        newY = y - rect.height - 8;
-      }
-      newX = Math.max(8, newX);
-      newY = Math.max(8, newY);
-      setAdjustedPosition({ x: newX, y: newY });
+      setAdjustedPosition(
+        resolveChartTooltipPosition({
+          x,
+          y,
+          rect,
+          viewport: { width: window.innerWidth, height: window.innerHeight }
+        })
+      );
     });
-    setAdjustedPosition({ x: newX, y: newY });
+    setAdjustedPosition(initialPosition);
     return () => cancelAnimationFrame(frameHandle);
-  }, [x, y, visible]);
+  }, [x, y, open]);
   const tooltipClasses = useMemo(
     () => classNames(
       "fixed left-0 top-0 z-[9999] pointer-events-none will-change-transform",
@@ -42,10 +51,10 @@ var ChartTooltip = ({
       "text-[color:var(--tiger-text-inverse,#f9fafb)]",
       "text-sm whitespace-nowrap",
       "transition-opacity duration-150",
-      visible ? "opacity-100" : "opacity-0",
+      open ? "opacity-100" : "opacity-0",
       className
     ),
-    [visible, className]
+    [open, className]
   );
   if (!content) return null;
   const tooltip = /* @__PURE__ */ jsx(