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

package/dist/chunk-BBK37UMR.mjs

@@ -0,0 +1,134 @@
+// src/hooks/useDrag.ts
+import { useState, useCallback, useMemo } from "react";
+import {
+  createDragState,
+  handleDragStart,
+  handleDragOver,
+  handleDrop,
+  handleDragEnd,
+  reorderItems,
+  moveItemBetweenContainers,
+  resolveDragConfig,
+  isDragEnabled,
+  isValidDragHandle,
+  isSameContainerDrag,
+  isCrossContainerDrag
+} from "@expcat/tigercat-core";
+function useDrag(options = {}) {
+  const config = useMemo(() => resolveDragConfig(options.config), [options.config]);
+  const containerId = options.containerId ?? "default";
+  const callbacks = useMemo(
+    () => ({
+      onDragStart: options.onDragStart,
+      onDragOver: options.onDragOver,
+      onDrop: options.onDrop,
+      onDragEnd: options.onDragEnd
+    }),
+    [options.onDragStart, options.onDragOver, options.onDrop, options.onDragEnd]
+  );
+  const [state, setState] = useState(createDragState);
+  const updateState = useCallback((updater) => {
+    setState((prev) => {
+      const next = { ...prev };
+      updater(next);
+      return next;
+    });
+  }, []);
+  const startDrag = useCallback(
+    (item, event) => {
+      if (!isDragEnabled(config)) return;
+      if (event) {
+        const target = event.target;
+        if (!isValidDragHandle(target, config)) return;
+      }
+      updateState((s) => handleDragStart(s, item, containerId, callbacks));
+    },
+    [config, containerId, callbacks, updateState]
+  );
+  const dragOver = useCallback(
+    (item, event) => {
+      if (event) event.preventDefault();
+      updateState((s) => handleDragOver(s, item, containerId, callbacks));
+    },
+    [containerId, callbacks, updateState]
+  );
+  const drop = useCallback(
+    (event) => {
+      if (event) event.preventDefault();
+      const next = { ...state };
+      const result = handleDrop(next, callbacks);
+      setState(next);
+      return result;
+    },
+    [callbacks, state]
+  );
+  const endDrag = useCallback(
+    (cancelled = false) => {
+      updateState((s) => handleDragEnd(s, cancelled, callbacks));
+    },
+    [callbacks, updateState]
+  );
+  const reorder = useCallback(
+    (items) => {
+      if (!state.isDragging) return null;
+      return reorderItems(items, state.sourceIndex, state.targetIndex);
+    },
+    [state.isDragging, state.sourceIndex, state.targetIndex]
+  );
+  const moveBetween = useCallback(
+    (sourceItems, targetItems) => {
+      if (!state.isDragging) return null;
+      return moveItemBetweenContainers(
+        sourceItems,
+        targetItems,
+        state.sourceIndex,
+        state.targetIndex
+      );
+    },
+    [state.isDragging, state.sourceIndex, state.targetIndex]
+  );
+  const getDragItemProps = useCallback(
+    (item) => ({
+      draggable: !config.disabled,
+      "data-drag-id": item.id,
+      "data-drag-index": item.index,
+      className: state.isDragging && state.draggedItem?.id === item.id ? config.dragClass : void 0,
+      "aria-grabbed": state.isDragging && state.draggedItem?.id === item.id,
+      role: "listitem",
+      onDragStart: (e) => startDrag(item, e),
+      onDragOver: (e) => dragOver(item, e),
+      onDragEnd: () => endDrag(false)
+    }),
+    [config, state.isDragging, state.draggedItem, startDrag, dragOver, endDrag]
+  );
+  const getDropZoneProps = useCallback(
+    () => ({
+      "aria-dropeffect": state.isDragging ? "move" : "none",
+      onDragOver: (e) => {
+        e.preventDefault();
+        dragOver(null, e);
+      },
+      onDrop: (e) => drop(e)
+    }),
+    [state.isDragging, dragOver, drop]
+  );
+  return {
+    state,
+    isDragging: state.isDragging,
+    draggedItem: state.draggedItem,
+    startDrag,
+    dragOver,
+    drop,
+    endDrag,
+    reorder,
+    moveBetween,
+    isSameContainer: isSameContainerDrag(state),
+    isCrossContainer: isCrossContainerDrag(state),
+    getDragItemProps,
+    getDropZoneProps
+  };
+}
+
+export {
+  useDrag
+};

package/dist/chunk-BPFKTAF2.mjs

@@ -0,0 +1,49 @@
+// src/components/NotificationRoot.ts
+var notificationModulePromise = null;
+function loadNotificationModule() {
+  notificationModulePromise ??= import("./components/Notification.mjs");
+  return notificationModulePromise;
+}
+function forwardNotification(method, options) {
+  let closeNotification = null;
+  let requestedClose = false;
+  void loadNotificationModule().then(({ notification: notification2 }) => {
+    const close = notification2[method](options);
+    if (requestedClose) {
+      close();
+    } else {
+      closeNotification = close;
+    }
+  });
+  return () => {
+    if (closeNotification) {
+      closeNotification();
+      closeNotification = null;
+    } else {
+      requestedClose = true;
+    }
+  };
+}
+var notification = {
+  success(options) {
+    return forwardNotification("success", options);
+  },
+  warning(options) {
+    return forwardNotification("warning", options);
+  },
+  error(options) {
+    return forwardNotification("error", options);
+  },
+  info(options) {
+    return forwardNotification("info", options);
+  },
+  clear(position) {
+    void loadNotificationModule().then(({ notification: notification2 }) => {
+      notification2.clear(position);
+    });
+  }
+};
+
+export {
+  notification
+};

package/dist/chunk-BPQEM6AF.mjs

@@ -0,0 +1,110 @@
+import {
+  StatusIcon,
+  StatusIconWithLoading
+} from "./chunk-FLYJVZED.mjs";
+
+// src/components/MessageContainer.tsx
+import { useCallback, useEffect, useState } from "react";
+import {
+  ANIMATION_DURATION_MS,
+  classNames,
+  defaultMessageThemeColors,
+  getMessageIconPath,
+  getMessageTypeClasses,
+  messageBaseClasses,
+  messageCloseButtonClasses,
+  messageCloseIconPath,
+  messageContainerBaseClasses,
+  messageContentClasses,
+  messageIconClasses,
+  messageLoadingSpinnerClasses,
+  messagePositionClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MESSAGE_CONTAINER_ID = "tiger-message-container";
+var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
+var MessageItem = ({ message, onClose }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => setIsVisible(true), 10);
+    return () => clearTimeout(timer);
+  }, []);
+  const colorScheme = getMessageTypeClasses(message.type, defaultMessageThemeColors);
+  const messageClasses = classNames(
+    messageBaseClasses,
+    colorScheme.bg,
+    colorScheme.border,
+    colorScheme.text,
+    message.className,
+    isVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"
+  );
+  const iconPath = message.icon || getMessageIconPath(message.type);
+  const iconClass = classNames(messageIconClasses, colorScheme.icon);
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+    setTimeout(() => onClose?.(message.id), ANIMATION_DURATION_MS);
+  }, [message.id, onClose]);
+  const a11yRole = message.type === "error" ? "alert" : "status";
+  const ariaLive = message.type === "error" ? "assertive" : "polite";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: messageClasses,
+      role: a11yRole,
+      "aria-live": ariaLive,
+      "aria-atomic": "true",
+      "aria-busy": message.type === "loading" || void 0,
+      "data-tiger-message": true,
+      "data-tiger-message-type": message.type,
+      "data-tiger-message-id": String(message.id),
+      children: [
+        /* @__PURE__ */ jsx(
+          StatusIconWithLoading,
+          {
+            path: iconPath,
+            className: iconClass,
+            isLoading: message.type === "loading",
+            spinnerClass: messageLoadingSpinnerClasses
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: messageContentClasses, children: message.content }),
+        message.closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: messageCloseButtonClasses,
+            onClick: handleClose,
+            "aria-label": MESSAGE_CLOSE_ARIA_LABEL,
+            type: "button",
+            children: /* @__PURE__ */ jsx(StatusIcon, { path: messageCloseIconPath, className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+};
+var MessageContainer = ({
+  position = "top",
+  messages = [],
+  onClose
+}) => {
+  const containerClasses = classNames(messageContainerBaseClasses, messagePositionClasses[position]);
+  const containerId = position === "top" ? MESSAGE_CONTAINER_ID : `${MESSAGE_CONTAINER_ID}-${position}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: containerClasses,
+      id: containerId,
+      "aria-live": "polite",
+      "aria-relevant": "additions",
+      "data-tiger-message-position": position,
+      "data-tiger-message-container": true,
+      children: messages.map((message) => /* @__PURE__ */ jsx(MessageItem, { message, onClose }, message.id))
+    }
+  );
+};
+var MessageContainer_default = MessageContainer;
+
+export {
+  MessageContainer,
+  MessageContainer_default
+};

package/dist/{chunk-QFUIGOOM.mjs → chunk-BSXPB2V6.mjs}

@@ -1,15 +1,15 @@
 import {
   useChartInteraction
-} from "./chunk-6QML6T3Y.mjs";
-import {
-  ChartLegend
-} from "./chunk-ZG2W4HS5.mjs";
+} from "./chunk-DNOPEJ5I.mjs";
 import {
   ChartTooltip
-} from "./chunk-O6YIPNXX.mjs";
+} from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
 } from "./chunk-DKNVSQSV.mjs";
+import {
+  ChartLegend
+} from "./chunk-ZG2W4HS5.mjs";
 
 // src/components/PieChart.tsx
 import { useId, useMemo } from "react";
@@ -288,7 +288,7 @@ var PieChart = ({
     ChartTooltip,
     {
       content: tooltipContent,
-      visible: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
+      open: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
       x: tooltipPosition.x,
       y: tooltipPosition.y
     }

package/dist/{chunk-QOEE2PW5.mjs → chunk-D524E52A.mjs}

@@ -1,3 +1,7 @@
+import {
+  useControlledState
+} from "./chunk-MEFARVQI.mjs";
+
 // src/components/Carousel.tsx
 import React, {
   useState,
@@ -40,16 +44,30 @@ var Carousel = forwardRef(
     arrows = false,
     infinite = true,
     speed = 500,
-    initialSlide = 0,
+    currentIndex: controlledCurrentIndex,
+    defaultCurrentIndex = 0,
     pauseOnHover = true,
     pauseOnFocus = true,
     className,
     style,
+    onCurrentIndexChange,
     onChange,
     onBeforeChange,
     children
   }, ref) => {
-    const [currentIndex, setCurrentIndex] = useState(initialSlide);
+    const slides = useMemo(() => {
+      return React.Children.toArray(children).filter((child) => React.isValidElement(child));
+    }, [children]);
+    const slideCount = slides.length;
+    const [currentIndexValue, setCurrentIndexValue] = useControlledState(
+      controlledCurrentIndex,
+      clampSlideIndex(defaultCurrentIndex, slideCount),
+      onCurrentIndexChange
+    );
+    const currentIndex = useMemo(
+      () => clampSlideIndex(currentIndexValue, slideCount),
+      [currentIndexValue, slideCount]
+    );
     const [isPaused, setIsPaused] = useState(false);
     const containerRef = useRef(null);
     const touchStartRef = useRef(null);
@@ -60,20 +78,24 @@ var Carousel = forwardRef(
     onBeforeChangeRef.current = onBeforeChange;
     const currentIndexRef = useRef(currentIndex);
     currentIndexRef.current = currentIndex;
-    const slides = useMemo(() => {
-      return React.Children.toArray(children).filter((child) => React.isValidElement(child));
-    }, [children]);
-    const slideCount = slides.length;
+    const navigateToIndex = useCallback(
+      (index) => {
+        const current = currentIndexRef.current;
+        const clampedIndex = clampSlideIndex(index, slideCount);
+        if (clampedIndex === current) return;
+        onBeforeChangeRef.current?.(current, clampedIndex);
+        setCurrentIndexValue(clampedIndex);
+        onChangeRef.current?.(clampedIndex, current);
+      },
+      [slideCount, setCurrentIndexValue]
+    );
     const navigateByDirection = useCallback(
       (direction) => {
         const current = currentIndexRef.current;
         const targetIndex = direction === "next" ? getNextSlideIndex(current, slideCount, infinite) : getPrevSlideIndex(current, slideCount, infinite);
-        if (targetIndex === current) return;
-        onBeforeChangeRef.current?.(current, targetIndex);
-        setCurrentIndex(targetIndex);
-        onChangeRef.current?.(targetIndex, current);
+        navigateToIndex(targetIndex);
       },
-      [slideCount, infinite]
+      [slideCount, infinite, navigateToIndex]
     );
     const containerClasses = useMemo(
       () => classNames(getCarouselContainerClasses(className)),
@@ -109,14 +131,9 @@ var Carousel = forwardRef(
     }, [dotPosition]);
     const goTo = useCallback(
       (index) => {
-        const clampedIndex = clampSlideIndex(index, slideCount);
-        if (clampedIndex === currentIndex) return;
-        onBeforeChange?.(currentIndex, clampedIndex);
-        const prevIndex = currentIndex;
-        setCurrentIndex(clampedIndex);
-        onChange?.(clampedIndex, prevIndex);
+        navigateToIndex(index);
       },
-      [currentIndex, slideCount, onBeforeChange, onChange]
+      [navigateToIndex]
     );
     const next = useCallback(() => {
       const nextIdx = getNextSlideIndex(currentIndex, slideCount, infinite);
@@ -147,15 +164,13 @@ var Carousel = forwardRef(
           const curr = currentIndexRef.current;
           const nextIdx = getNextSlideIndex(curr, slideCount, infinite);
           if (nextIdx !== curr) {
-            onBeforeChangeRef.current?.(curr, nextIdx);
-            setCurrentIndex(nextIdx);
-            onChangeRef.current?.(nextIdx, curr);
+            navigateToIndex(nextIdx);
           }
         }
       });
       controller.start();
       return () => controller.stop();
-    }, [autoplay, autoplaySpeed, isPaused, slideCount, infinite]);
+    }, [autoplay, autoplaySpeed, isPaused, slideCount, infinite, navigateToIndex]);
     useEffect(() => {
       const container = containerRef.current;
       if (!container || slideCount <= 1) return;

package/dist/{chunk-AQOXANET.mjs → chunk-EKILTLUO.mjs}

@@ -1,6 +1,6 @@
 import {
   ChartTooltip
-} from "./chunk-O6YIPNXX.mjs";
+} from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
 } from "./chunk-DKNVSQSV.mjs";
@@ -80,16 +80,16 @@ var GaugeChart = ({
   const needlePath = createGaugeNeedlePath(cx, cy, radius - arcWidth - 6, animatedAngle);
   const formattedValue = valueFormatter ? valueFormatter(value) : `${value}`;
   const [tooltip, setTooltip] = useState({
-    visible: false,
+    open: false,
     x: 0,
     y: 0
   });
   const tooltipContent = tooltipFormatter ? tooltipFormatter(value) : label ? `${label}: ${formattedValue}` : formattedValue;
   const handleTooltipMove = (e) => {
     if (!showTooltip) return;
-    setTooltip({ visible: true, x: e.clientX, y: e.clientY });
+    setTooltip({ open: true, x: e.clientX, y: e.clientY });
   };
-  const handleTooltipLeave = () => setTooltip((t) => ({ ...t, visible: false }));
+  const handleTooltipLeave = () => setTooltip((t) => ({ ...t, open: false }));
   const gradientId = useId();
   const gradientPrefix = useMemo(
     () => getStableChartGradientPrefix("gauge", gradientId),
@@ -101,7 +101,7 @@ var GaugeChart = ({
     if (!showTooltip) return;
     const rect = wrapperRef.current?.getBoundingClientRect();
     if (rect)
-      setTooltip({ visible: true, x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+      setTooltip({ open: true, x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -207,7 +207,7 @@ var GaugeChart = ({
           ChartTooltip,
           {
             content: tooltipContent,
-            visible: tooltip.visible && tooltipContent !== "",
+            open: tooltip.open && tooltipContent !== "",
             x: tooltip.x,
             y: tooltip.y
           }

package/dist/{chunk-6BOSSZM3.mjs → chunk-EPWAROC2.mjs}

@@ -1,9 +1,9 @@
 import {
   useCheckboxGroup
-} from "./chunk-MV2JQ6XQ.mjs";
+} from "./chunk-OL3RXYMG.mjs";
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/Checkbox.tsx
 import { useEffect, useRef } from "react";

package/dist/chunk-FNBTGIDG.mjs

@@ -0,0 +1,52 @@
+// src/components/MessageRoot.ts
+var messageModulePromise = null;
+function loadMessageModule() {
+  messageModulePromise ??= import("./components/Message.mjs");
+  return messageModulePromise;
+}
+function forwardMessage(method, options) {
+  let closeMessage = null;
+  let requestedClose = false;
+  void loadMessageModule().then(({ Message: Message2 }) => {
+    const close = Message2[method](options);
+    if (requestedClose) {
+      close();
+    } else {
+      closeMessage = close;
+    }
+  });
+  return () => {
+    if (closeMessage) {
+      closeMessage();
+      closeMessage = null;
+    } else {
+      requestedClose = true;
+    }
+  };
+}
+var Message = {
+  success(options) {
+    return forwardMessage("success", options);
+  },
+  warning(options) {
+    return forwardMessage("warning", options);
+  },
+  error(options) {
+    return forwardMessage("error", options);
+  },
+  info(options) {
+    return forwardMessage("info", options);
+  },
+  loading(options) {
+    return forwardMessage("loading", options);
+  },
+  clear() {
+    void loadMessageModule().then(({ Message: Message2 }) => {
+      Message2.clear();
+    });
+  }
+};
+
+export {
+  Message
+};

package/dist/{chunk-TRXNHYWB.mjs → chunk-G27UYCLT.mjs}

@@ -1,18 +1,18 @@
 import {
   Table
-} from "./chunk-S4NGDDAM.mjs";
+} from "./chunk-MQ34GFHN.mjs";
 import {
   Select
-} from "./chunk-LUABLBKS.mjs";
+} from "./chunk-JSBWEK6D.mjs";
 import {
   Popover
-} from "./chunk-RYHM75MP.mjs";
+} from "./chunk-QWUDJC6K.mjs";
 import {
   Input
-} from "./chunk-DEQZZKY5.mjs";
+} from "./chunk-NRWH5IWZ.mjs";
 import {
   Checkbox
-} from "./chunk-6BOSSZM3.mjs";
+} from "./chunk-EPWAROC2.mjs";
 import {
   Button
 } from "./chunk-5TE7KLE5.mjs";
@@ -35,10 +35,6 @@ var DataTableWithToolbar = ({
   toolbar,
   locale,
   labels,
-  onSearchChange,
-  onSearch,
-  onFiltersChange,
-  onBulkAction,
   hiddenColumnKeys,
   defaultHiddenColumnKeys,
   onHiddenColumnKeysChange,
@@ -131,7 +127,7 @@ var DataTableWithToolbar = ({
     return next;
   }, [toolbar?.filters, internalFilters]);
   const hasSearch = Boolean(
-    toolbar && (toolbar.searchPlaceholder || toolbar.searchValue !== void 0 || toolbar.defaultSearchValue !== void 0 || toolbar.showSearchButton || toolbar.onSearchChange || toolbar.onSearch || onSearchChange || onSearch)
+    toolbar && (toolbar.searchPlaceholder || toolbar.searchValue !== void 0 || toolbar.defaultSearchValue !== void 0 || toolbar.showSearchButton || toolbar.onSearchChange || toolbar.onSearch)
   );
   const hasFilters = Boolean(toolbar?.filters && toolbar.filters.length > 0);
   const hasFiltersExtra = Boolean(toolbar?.filtersExtra);
@@ -164,11 +160,9 @@ var DataTableWithToolbar = ({
     if (toolbar?.searchValue === void 0) {
       setInternalSearch(value);
     }
-    onSearchChange?.(value);
     toolbar?.onSearchChange?.(value);
   };
   const handleSearchSubmit = () => {
-    onSearch?.(searchValue ?? "");
     toolbar?.onSearch?.(searchValue ?? "");
   };
   const setFilterValue = (key, value, filter) => {
@@ -182,7 +176,6 @@ var DataTableWithToolbar = ({
         [key]: value
       }));
     }
-    onFiltersChange?.(nextFilters);
     toolbar?.onFiltersChange?.(nextFilters);
   };
   const handleFilterSelect = (filter, value) => {
@@ -191,7 +184,6 @@ var DataTableWithToolbar = ({
   const handleBulkAction = (action) => {
     const keys = selectedKeys ?? [];
     action.onClick?.(keys);
-    onBulkAction?.(action, keys);
     toolbar?.onBulkAction?.(action, keys);
   };
   const handleTablePageChange = ({ current, pageSize }) => {
@@ -350,7 +342,7 @@ var DataTableWithToolbar = ({
                       variant: "primary",
                       className: "whitespace-nowrap shrink-0 rounded-[var(--tiger-radius-md,0.5rem)] px-3",
                       onClick: handleSearchSubmit,
-                      disabled: !onSearch && !toolbar?.onSearch,
+                      disabled: !toolbar?.onSearch,
                       children: toolbar?.searchButtonText ?? tableLabels.searchButtonText
                     }
                   ) : null

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

@@ -9,7 +9,10 @@ import {
   floatButtonSizeClasses,
   floatButtonTypeClasses,
   floatButtonDisabledClasses,
-  floatButtonGroupClasses
+  floatButtonGroupClasses,
+  getViewportOffsetStyle,
+  viewportFloatingBaseClasses,
+  viewportPlacementClasses
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var FloatButtonGroupContext = createContext(null);
@@ -21,6 +24,10 @@ var FloatButton = ({
   disabled = false,
   ariaLabel,
   className,
+  floating = false,
+  placement = "bottom-right",
+  offset,
+  style,
   children,
   onClick,
   ...props
@@ -34,9 +41,15 @@ var FloatButton = ({
       floatButtonSizeClasses[size],
       floatButtonTypeClasses[type],
       disabled && floatButtonDisabledClasses,
+      floating && viewportFloatingBaseClasses,
+      floating && viewportPlacementClasses[placement],
       className
     ),
-    [resolvedShape, size, type, disabled, className]
+    [resolvedShape, size, type, disabled, floating, placement, className]
+  );
+  const buttonStyle = useMemo(
+    () => floating ? { ...getViewportOffsetStyle(placement, offset), ...style } : style,
+    [floating, placement, offset, style]
   );
   return /* @__PURE__ */ jsx(
     "button",
@@ -44,6 +57,7 @@ var FloatButton = ({
       className: classes,
       type: "button",
       disabled,
+      style: buttonStyle,
       "aria-label": ariaLabel ?? tooltip,
       title: tooltip,
       onClick: disabled ? void 0 : onClick,