@expcat/tigercat-react 1.0.7 → 1.1.0

package/dist/chunk-L6CL63GI.js

@@ -0,0 +1,93 @@
+'use strict';
+
+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);
+
+// src/components/Breadcrumb.tsx
+var BreadcrumbContext = React.createContext(null);
+function useBreadcrumbContext() {
+  return React.useContext(BreadcrumbContext);
+}
+var BreadcrumbItem = ({
+  href,
+  target,
+  current = false,
+  separator: customSeparator,
+  className,
+  style,
+  onClick,
+  children,
+  icon,
+  ...props
+}) => {
+  const breadcrumbContext = useBreadcrumbContext();
+  const itemClasses = React.useMemo(() => tigercatCore.getBreadcrumbItemClasses(className), [className]);
+  const linkClasses = React.useMemo(() => tigercatCore.getBreadcrumbLinkClasses(current), [current]);
+  const separatorClasses = React.useMemo(() => tigercatCore.getBreadcrumbSeparatorClasses(), []);
+  const separatorContent = React.useMemo(() => {
+    const separator = customSeparator !== void 0 ? customSeparator : breadcrumbContext?.separator || "/";
+    return tigercatCore.getSeparatorContent(separator);
+  }, [customSeparator, breadcrumbContext]);
+  const handleClick = React.useCallback(
+    (event) => {
+      if (!current) {
+        onClick?.(event);
+      }
+    },
+    [current, onClick]
+  );
+  const computedRel = React.useMemo(() => {
+    if (target === "_blank") {
+      return "noopener noreferrer";
+    }
+    return void 0;
+  }, [target]);
+  const contentElements = icon ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: icon }),
+    children
+  ] }) : children;
+  const linkElement = href && !current ? /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      className: linkClasses,
+      href,
+      target,
+      rel: computedRel,
+      onClick: handleClick,
+      children: contentElements
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: linkClasses, "aria-current": current ? "page" : void 0, children: contentElements });
+  const separatorElement = !current ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorClasses, "aria-hidden": "true", children: separatorContent }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: itemClasses, style, ...props, children: [
+    linkElement,
+    separatorElement
+  ] });
+};
+var Breadcrumb = ({
+  separator = "/",
+  className,
+  style,
+  extra,
+  children,
+  ...props
+}) => {
+  const hasExtra = Boolean(extra);
+  const containerClasses = React__default.default.useMemo(
+    () => tigercatCore.classNames(tigercatCore.breadcrumbContainerClasses, hasExtra && "w-full", className),
+    [className, hasExtra]
+  );
+  const contextValue = React__default.default.useMemo(() => ({ separator }), [separator]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center flex-wrap gap-2", children }),
+    hasExtra && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: extra })
+  ] }) });
+};
+
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbItem = BreadcrumbItem;
+exports.useBreadcrumbContext = useBreadcrumbContext;

package/dist/{chunk-RNEL4XIO.js → chunk-LA3CJOWA.js}

@@ -26,6 +26,12 @@ var updateCallbacks = {
   "bottom-left": null,
   "bottom-right": null
 };
+var stackUpdateScheduler = tigercatCore.createNotificationStackUpdateScheduler();
+function scheduleNotificationStackUpdate(position) {
+  const callback = updateCallbacks[position];
+  if (!callback) return;
+  stackUpdateScheduler.schedule(position, callback);
+}
 function getNextInstanceId() {
   return ++instanceIdCounter;
 }
@@ -103,6 +109,7 @@ var NotificationContainer = ({
     };
     updateCallbacks[position]();
     return () => {
+      stackUpdateScheduler.cancel(position);
       updateCallbacks[position] = null;
     };
   }, [position]);
@@ -142,6 +149,7 @@ function ensureContainer(position) {
   if (containerRoots[position] && !existingRootEl) {
     containerRoots[position] = null;
     updateCallbacks[position] = null;
+    stackUpdateScheduler.cancel(position);
   }
   if (containerRoots[position]) {
     return;
@@ -162,6 +170,7 @@ function destroyContainer(position) {
     containerRoots[position] = null;
   }
   updateCallbacks[position] = null;
+  stackUpdateScheduler.cancel(position);
   if (tigercatCore.isBrowser()) {
     document.getElementById(rootId)?.remove();
   }
@@ -184,7 +193,7 @@ function addNotification(config) {
     position
   };
   notificationInstancesByPosition[position].push(instance);
-  updateCallbacks[position]?.();
+  scheduleNotificationStackUpdate(position);
   if (instance.duration > 0) {
     setTimeout(() => {
       removeNotification(id, position);
@@ -199,7 +208,9 @@ function removeNotification(id, position) {
     const instance = instances[index];
     instances.splice(index, 1);
     instance.onClose?.();
-    updateCallbacks[position]?.();
+    if (notificationInstancesByPosition[position].length > 0) {
+      scheduleNotificationStackUpdate(position);
+    }
   }
   if (notificationInstancesByPosition[position].length === 0) {
     destroyContainer(position);

package/dist/{chunk-EBLAM3YP.mjs → chunk-LE5VFMRR.mjs}

@@ -1,18 +1,18 @@
-import { PieChart } from './chunk-QQDKQLHJ.mjs';
+import { PieChart } from './chunk-UPO4LLNK.mjs';
 import { useMemo } from 'react';
 import { getChartInnerRect, normalizeChartPadding, classNames } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var DONUT_PALETTE = [
-  "#5470c6",
-  "#91cc75",
-  "#fac858",
-  "#ee6666",
-  "#73c0de",
-  "#3ba272",
-  "#fc8452",
-  "#9a60b4",
-  "#ea7ccc"
+  "var(--tiger-chart-1,#5470c6)",
+  "var(--tiger-chart-2,#91cc75)",
+  "var(--tiger-chart-3,#fac858)",
+  "var(--tiger-chart-4,#ee6666)",
+  "var(--tiger-chart-5,#73c0de)",
+  "var(--tiger-chart-6,#3ba272)",
+  "var(--tiger-chart-1,#fc8452)",
+  "var(--tiger-chart-2,#9a60b4)",
+  "var(--tiger-chart-3,#ea7ccc)"
 ];
 var DonutChart = ({
   width = 320,
@@ -30,7 +30,7 @@ var DonutChart = ({
   labelFormatter,
   labelPosition = "inside",
   borderWidth = 0,
-  borderColor = "#ffffff",
+  borderColor = "var(--tiger-surface,#ffffff)",
   hoverOffset = 10,
   shadow = true,
   // Interaction props
@@ -56,6 +56,8 @@ var DonutChart = ({
   centerValue,
   centerLabel,
   animated: _animated = false,
+  // Visual modes (forwarded to PieChart, opt-in per PR-19k(b6/b7))
+  gradient = false,
   // Callbacks
   onHoveredIndexChange,
   onSelectedIndexChange,
@@ -115,6 +117,7 @@ var DonutChart = ({
         borderColor,
         hoverOffset,
         shadow,
+        gradient,
         hoverable,
         hoveredIndex,
         activeOpacity,
@@ -147,7 +150,13 @@ var DonutChart = ({
           transform: "translate(-50%, -50%)",
           textAlign: "center",
           pointerEvents: "none",
-          lineHeight: "1.3"
+          lineHeight: "1.3",
+          padding: "var(--tiger-chart-donut-center-padding, 0)",
+          borderRadius: "var(--tiger-radius-pill, 9999px)",
+          background: "var(--tiger-chart-donut-center-bg, transparent)",
+          boxShadow: "var(--tiger-chart-donut-center-shadow, none)",
+          backdropFilter: "var(--tiger-chart-donut-center-backdrop, none)",
+          WebkitBackdropFilter: "var(--tiger-chart-donut-center-backdrop, none)"
         },
         children: [
           centerValue !== void 0 && /* @__PURE__ */ jsx(

package/dist/{chunk-4QQZ5H4V.mjs → chunk-LQT6ZGME.mjs}

@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react';
-import { splitTransferData, filterTransferItems, classNames, transferOperationClasses, getTransferButtonClasses, icon20ViewBox, chevronRightSolidIcon20PathD, chevronLeftSolidIcon20PathD, transferBaseClasses, transferPanelClasses, transferPanelHeaderClasses, transferSearchClasses, transferPanelBodyClasses, getTransferItemClasses, getTransferCheckboxClasses, transferEmptyClasses } from '@expcat/tigercat-core';
+import { splitTransferData, filterTransferItems, classNames, transferOperationClasses, getTransferButtonClasses, icon20ViewBox, chevronRightSolidIcon20PathD, chevronLeftSolidIcon20PathD, transferBaseClasses, transferPanelClasses, transferPanelHeaderClasses, transferSearchClasses, getPickerListboxAria, transferPanelBodyClasses, getPickerOptionAria, getTransferItemClasses, getTransferCheckboxClasses, transferEmptyClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Transfer.tsx
@@ -117,35 +117,40 @@ var Transfer = (props) => {
           onChange: (e) => onSearch(e.target.value)
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: transferPanelBodyClasses, role: "listbox", children: items.length > 0 ? items.map((item) => {
-        const isSelected = selectedKeys.has(item.key);
-        const isDisabled = disabled || !!item.disabled;
-        return /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: getTransferItemClasses(isSelected, isDisabled, size),
-            role: "option",
-            "aria-selected": isSelected,
-            "aria-disabled": isDisabled,
-            children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  className: getTransferCheckboxClasses(size),
-                  checked: isSelected,
-                  disabled: isDisabled,
-                  onChange: () => {
-                    if (!isDisabled) toggleFn(item.key);
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label })
-            ]
-          },
-          String(item.key)
-        );
-      }) : /* @__PURE__ */ jsx("div", { className: transferEmptyClasses, children: notFoundText }) })
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: transferPanelBodyClasses,
+          ...getPickerListboxAria({ label: `${title} items` }),
+          children: items.length > 0 ? items.map((item) => {
+            const isSelected = selectedKeys.has(item.key);
+            const isDisabled = disabled || !!item.disabled;
+            return /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: getTransferItemClasses(isSelected, isDisabled, size),
+                ...getPickerOptionAria({ selected: isSelected, disabled: isDisabled }),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      className: getTransferCheckboxClasses(size),
+                      checked: isSelected,
+                      disabled: isDisabled,
+                      onChange: () => {
+                        if (!isDisabled) toggleFn(item.key);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label })
+                ]
+              },
+              String(item.key)
+            );
+          }) : /* @__PURE__ */ jsx("div", { className: transferEmptyClasses, children: notFoundText })
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: classNames(transferBaseClasses, className), ...divProps, children: [

package/dist/{chunk-VAQDUVBP.mjs → chunk-LY2OTQ4E.mjs}

@@ -1,8 +1,8 @@
+import { VirtualList } from './chunk-SXNHXUUF.mjs';
 import React, { useState, useMemo } from 'react';
 import { getSpinnerSVG, paginateData, calculatePagination, classNames, getListClasses, listSizeClasses, listGridContainerClasses, getGridColumnClasses, listWrapperClasses, listLoadingOverlayClasses, getListHeaderFooterClasses, listEmptyStateClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getLoadingOverlaySpinnerClasses, getListItemClasses, listItemAvatarClasses, listItemTitleClasses, listItemDescriptionClasses, listItemContentClasses, listItemMetaClasses, listItemExtraClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/components/List.tsx
 var spinnerSvg = getSpinnerSVG("spinner");
 var LoadingSpinner = () => /* @__PURE__ */ jsx(
   "svg",
@@ -30,6 +30,10 @@ var List = ({
   footer,
   pagination = false,
   grid,
+  virtual = false,
+  virtualHeight = 400,
+  virtualItemHeight = 40,
+  virtualOverscan = 5,
   rowKey = "key",
   hoverable = false,
   renderItem,
@@ -211,6 +215,18 @@ var List = ({
         }
       );
     }
+    if (virtual) {
+      return /* @__PURE__ */ jsx(
+        VirtualList,
+        {
+          itemCount: paginatedData.length,
+          itemHeight: virtualItemHeight,
+          height: virtualHeight,
+          overscan: virtualOverscan,
+          renderItem: ({ index }) => renderListItem(paginatedData[index], index)
+        }
+      );
+    }
     return items;
   };
   const renderPagination = () => {

package/dist/{chunk-RRJTIKU6.mjs → chunk-M5GSLKUX.mjs}

@@ -1,5 +1,5 @@
 import { useId, useState, useRef, useMemo, useEffect } from 'react';
-import { getAllTreeSelectKeys, getTreeSelectDisplayLabel, filterTreeSelectNodes, flattenTreeSelectNodes, classNames, getTreeSelectTriggerClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, treeSelectDropdownClasses, treeSelectSearchClasses, getTreeSelectNodeClasses, chevronRightSolidIcon20PathD, treeSelectEmptyClasses, treeSelectBaseClasses } from '@expcat/tigercat-core';
+import { getAllTreeSelectKeys, getTreeSelectDisplayLabel, filterTreeSelectNodes, flattenTreeSelectNodes, classNames, getPickerComboboxAria, getTreeSelectTriggerClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, treeSelectDropdownClasses, getPickerListboxAria, treeSelectSearchClasses, getTreeSelectNodeClasses, getPickerOptionAria, chevronRightSolidIcon20PathD, treeSelectEmptyClasses, treeSelectBaseClasses, getPickerTriggerKeyAction } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/TreeSelect.tsx
@@ -106,12 +106,16 @@ var TreeSelect = (props) => {
     onChange?.(multiple ? [] : void 0);
   }
   function handleKeyDown(e) {
-    if (e.key === "Escape") {
-      e.preventDefault();
-      closeDropdown();
-    } else if ((e.key === "Enter" || e.key === " ") && !isOpen) {
-      e.preventDefault();
+    const action = getPickerTriggerKeyAction(e.key, isOpen);
+    if (action === "none") return;
+    e.preventDefault();
+    if (action === "toggle") {
+      if (isOpen) closeDropdown();
+      else openDropdown();
+    } else if (action === "open") {
       openDropdown();
+    } else if (action === "close") {
+      closeDropdown();
     }
   }
   useEffect(() => {
@@ -130,10 +134,7 @@ var TreeSelect = (props) => {
       {
         type: "button",
         className: getTreeSelectTriggerClasses(size, disabled, isOpen),
-        role: "combobox",
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-controls": isOpen ? listboxId : void 0,
+        ...getPickerComboboxAria({ expanded: isOpen, listboxId }),
         disabled,
         onClick: toggleDropdown,
         onKeyDown: handleKeyDown,
@@ -178,7 +179,7 @@ var TreeSelect = (props) => {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs("div", { id: listboxId, role: "listbox", className: treeSelectDropdownClasses, children: [
+    isOpen && /* @__PURE__ */ jsxs("div", { ...getPickerListboxAria({ id: listboxId }), className: treeSelectDropdownClasses, children: [
       showSearch && /* @__PURE__ */ jsx(
         "input",
         {
@@ -197,9 +198,7 @@ var TreeSelect = (props) => {
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            role: "option",
-            "aria-selected": selected,
-            "aria-disabled": node.disabled,
+            ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
             className: getTreeSelectNodeClasses(selected, !!node.disabled, size),
             style: { paddingLeft: `${indent + 8}px` },
             onClick: (e) => {

package/dist/{chunk-TZNTHABR.js → chunk-M73NMNZX.js}

@@ -22,32 +22,63 @@ var InfiniteScroll = ({
   ...rest
 }) => {
   const containerRef = react.useRef(null);
+  const sentinelRef = react.useRef(null);
   const containerClasses = react.useMemo(
     () => tigercatCore.getInfiniteScrollContainerClasses(direction, className),
     [direction, className]
   );
+  const onLoadMoreRef = react.useRef(onLoadMore);
+  onLoadMoreRef.current = onLoadMore;
   const checkScroll = react.useCallback(() => {
     if (disabled || loading || !hasMore) return;
     const el = containerRef.current;
     if (!el) return;
     if (tigercatCore.shouldLoadMore(el, threshold, direction, inverse)) {
-      onLoadMore?.();
+      onLoadMoreRef.current?.();
     }
-  }, [disabled, loading, hasMore, threshold, direction, inverse, onLoadMore]);
+  }, [disabled, loading, hasMore, threshold, direction, inverse]);
   react.useEffect(() => {
+    if (disabled || !hasMore) return;
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+    const teardown = tigercatCore.createInfiniteScrollObserver(sentinel, {
+      threshold,
+      direction,
+      root: containerRef.current,
+      onLoadMore: () => {
+        if (!disabled && !loading && hasMore) {
+          onLoadMoreRef.current?.();
+        }
+      }
+    });
+    if (teardown) {
+      return teardown;
+    }
     const el = containerRef.current;
-    if (!el) return;
-    el.addEventListener("scroll", checkScroll, { passive: true });
-    return () => el.removeEventListener("scroll", checkScroll);
-  }, [checkScroll]);
+    if (el) {
+      el.addEventListener("scroll", checkScroll, { passive: true });
+      return () => el.removeEventListener("scroll", checkScroll);
+    }
+  }, [disabled, loading, hasMore, threshold, direction, inverse, checkScroll]);
+  const sentinelEl = hasMore ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: sentinelRef,
+      className: tigercatCore.infiniteScrollSentinelClasses,
+      "aria-hidden": "true",
+      style: { height: 0, overflow: "hidden" }
+    }
+  ) : null;
   const loaderEl = loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.infiniteScrollLoaderClasses, role: "status", "aria-live": "polite", children: loader ?? loadingText }) : null;
   const endEl = !hasMore && !loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.infiniteScrollEndClasses, children: end ?? endText }) : null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: tigercatCore.classNames(containerClasses), ...rest, children: inverse ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    sentinelEl,
     loaderEl,
     children,
     endEl
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     children,
+    sentinelEl,
     loaderEl,
     endEl
   ] }) });

package/dist/{chunk-TKZO5UBH.js → chunk-MB3QU3US.js}

@@ -1,5 +1,6 @@
 'use strict';
 
+var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -15,9 +16,45 @@ var Stepper = ({
   className,
   onChange
 }) => {
+  const repeatControllerRef = react.useRef(tigercatCore.createRafRepeatActionController());
+  const repeatValueRef = react.useRef(value);
+  const suppressNextClickRef = react.useRef(false);
+  react.useEffect(() => () => repeatControllerRef.current.stop(), []);
   function setValue(v) {
     const clamped = tigercatCore.clampStepperValue(v, min, max, precision);
     onChange?.(clamped);
+    return clamped;
+  }
+  function stepBy(direction, baseValue = value) {
+    return setValue(direction === "up" ? baseValue + step : baseValue - step);
+  }
+  function handleStepClick(direction) {
+    if (suppressNextClickRef.current) {
+      suppressNextClickRef.current = false;
+      return;
+    }
+    stepBy(direction);
+  }
+  function startStepRepeat(direction) {
+    return (event) => {
+      event.preventDefault();
+      if (disabled) return;
+      if (direction === "down" && value <= min) return;
+      if (direction === "up" && value >= max) return;
+      suppressNextClickRef.current = true;
+      repeatValueRef.current = value;
+      repeatControllerRef.current.start(() => {
+        const baseValue = repeatValueRef.current;
+        const nextValue = stepBy(direction, baseValue);
+        repeatValueRef.current = nextValue;
+        if (nextValue === baseValue) {
+          repeatControllerRef.current.stop();
+        }
+      });
+    };
+  }
+  function stopStepRepeat() {
+    repeatControllerRef.current.stop();
   }
   const atMin = value <= min;
   const atMax = value >= max;
@@ -30,7 +67,11 @@ var Stepper = ({
         className: tigercatCore.getStepperButtonClasses(size, disabled || atMin, "left"),
         disabled: disabled || atMin,
         "aria-label": "Decrease",
-        onClick: () => setValue(value - step),
+        onPointerDown: startStepRepeat("down"),
+        onPointerUp: stopStepRepeat,
+        onPointerLeave: stopStepRepeat,
+        onPointerCancel: stopStepRepeat,
+        onClick: () => handleStepClick("down"),
         children: icon(tigercatCore.minusPathD)
       }
     ),
@@ -55,7 +96,11 @@ var Stepper = ({
         className: tigercatCore.getStepperButtonClasses(size, disabled || atMax, "right"),
         disabled: disabled || atMax,
         "aria-label": "Increase",
-        onClick: () => setValue(value + step),
+        onPointerDown: startStepRepeat("up"),
+        onPointerUp: stopStepRepeat,
+        onPointerLeave: stopStepRepeat,
+        onPointerCancel: stopStepRepeat,
+        onClick: () => handleStepClick("up"),
         children: icon(tigercatCore.plusPathD)
       }
     )