@expcat/tigercat-react 2.0.19 → 2.1.1

package/dist/chunk-EW43YBPV.mjs

@@ -0,0 +1,457 @@
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
+
+// src/components/ContextMenu.tsx
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  useId
+} from "react";
+import {
+  classNames,
+  getContextMenuContainerClasses,
+  getContextMenuTriggerClasses,
+  getContextMenuMenuClasses,
+  getContextMenuItemClasses,
+  getContextMenuSubTriggerClasses,
+  getContextMenuSubChevronClasses,
+  getContextMenuPointStyle,
+  getContextMenuOpenPoint,
+  injectContextMenuStyles,
+  CONTEXT_MENU_ENTER_CLASS,
+  CONTEXT_MENU_SUB_CHEVRON_PATH,
+  isContextMenuKeyboardEvent,
+  handleMenuNavigation,
+  focusFirstMenuItem,
+  captureActiveElement,
+  restoreFocus
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ContextMenuContext = createContext(null);
+var ContextMenuMenu = ({
+  className,
+  style,
+  children,
+  role,
+  ...divProps
+}) => {
+  const menuClasses = classNames(getContextMenuMenuClasses(), className);
+  return /* @__PURE__ */ jsx("div", { className: menuClasses, style, role: role ?? "menu", ...divProps, children });
+};
+var ContextMenuItem = ({
+  disabled = false,
+  divided = false,
+  className,
+  onClick,
+  children,
+  ...buttonProps
+}) => {
+  const context = useContext(ContextMenuContext);
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+    if (context?.closeOnClick) {
+      context.handleItemClick();
+    }
+  };
+  const itemClasses = classNames(getContextMenuItemClasses(disabled, divided), className);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      role: "menuitem",
+      tabIndex: -1,
+      "aria-disabled": disabled,
+      disabled,
+      onClick: handleClick,
+      ...buttonProps,
+      children
+    }
+  );
+};
+var ContextMenuSub = ({
+  title = "",
+  disabled = false,
+  className,
+  style,
+  children
+}) => {
+  const context = useContext(ContextMenuContext);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isOpenByKeyboard, setIsOpenByKeyboard] = useState(false);
+  const popupCloseTimerRef = useRef(null);
+  const titleRef = useRef(null);
+  const popupRef = useRef(null);
+  const isExpanded = isHovered || isOpenByKeyboard;
+  const portalEnabled = Boolean(context?.portal);
+  const overlay = useAnchoredOverlay({
+    referenceRef: titleRef,
+    floatingRef: popupRef,
+    enabled: Boolean(context) && isExpanded && !disabled,
+    placement: "right-start",
+    offset: 4,
+    portal: portalEnabled,
+    dismissOnEscape: true,
+    onDismiss: () => {
+      setIsOpenByKeyboard(false);
+      setIsHovered(false);
+    }
+  });
+  useEffect(() => {
+    if (!context?.open) {
+      setIsHovered(false);
+      setIsOpenByKeyboard(false);
+    }
+  }, [context?.open]);
+  useEffect(() => {
+    return () => {
+      if (popupCloseTimerRef.current) {
+        clearTimeout(popupCloseTimerRef.current);
+      }
+    };
+  }, []);
+  const clearCloseTimer = useCallback(() => {
+    if (popupCloseTimerRef.current) {
+      clearTimeout(popupCloseTimerRef.current);
+      popupCloseTimerRef.current = null;
+    }
+  }, []);
+  const handleMouseEnter = useCallback(() => {
+    if (disabled) return;
+    clearCloseTimer();
+    setIsHovered(true);
+  }, [clearCloseTimer, disabled]);
+  const handleMouseLeave = useCallback(() => {
+    const close = () => {
+      setIsHovered(false);
+      setIsOpenByKeyboard(false);
+    };
+    if (portalEnabled) {
+      popupCloseTimerRef.current = setTimeout(close, 120);
+      return;
+    }
+    close();
+  }, [portalEnabled]);
+  const focusPopupFirstItem = useCallback(() => {
+    requestAnimationFrame(() => {
+      if (popupRef.current) focusFirstMenuItem(popupRef.current);
+    });
+  }, []);
+  const handleTitleKeyDown = useCallback(
+    (event) => {
+      if (disabled) return;
+      if (event.key === "ArrowRight" || event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsOpenByKeyboard(true);
+        setIsHovered(true);
+        focusPopupFirstItem();
+        return;
+      }
+      if (event.key === "ArrowLeft" || event.key === "Escape") {
+        if (isExpanded) {
+          event.preventDefault();
+          event.stopPropagation();
+          setIsOpenByKeyboard(false);
+          setIsHovered(false);
+          titleRef.current?.focus();
+        }
+      }
+    },
+    [disabled, focusPopupFirstItem, isExpanded]
+  );
+  const handlePopupKeyDown = useCallback((event) => {
+    if (popupRef.current) {
+      handleMenuNavigation(popupRef.current, event.nativeEvent);
+    }
+    if (event.key === "ArrowLeft" || event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsOpenByKeyboard(false);
+      setIsHovered(false);
+      titleRef.current?.focus();
+    }
+  }, []);
+  const handlePopupContextMenu = useCallback((event) => {
+    event.preventDefault();
+  }, []);
+  if (!context) return null;
+  const triggerClasses = classNames(getContextMenuSubTriggerClasses(disabled), className);
+  const popupClasses = classNames(overlay.floatingClasses, CONTEXT_MENU_ENTER_CLASS);
+  const popup = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: popupRef,
+      className: popupClasses,
+      style: overlay.floatingStyles,
+      "data-positioned": overlay.positioned,
+      "data-tiger-context-menu-sub": "",
+      hidden: !isExpanded,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onKeyDown: handlePopupKeyDown,
+      onContextMenu: handlePopupContextMenu,
+      children: /* @__PURE__ */ jsx("div", { className: getContextMenuMenuClasses(), role: "menu", children })
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: portalEnabled ? void 0 : "relative",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      role: "none",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: titleRef,
+            type: "button",
+            className: triggerClasses,
+            style,
+            role: "menuitem",
+            tabIndex: -1,
+            "aria-haspopup": "menu",
+            "aria-expanded": isExpanded,
+            "aria-disabled": disabled || void 0,
+            "data-state": isExpanded ? "open" : "closed",
+            "data-tiger-context-menu-sub-trigger": "",
+            disabled,
+            onClick: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+            },
+            onKeyDown: handleTitleKeyDown,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: title }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: getContextMenuSubChevronClasses(),
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { d: CONTEXT_MENU_SUB_CHEVRON_PATH })
+                }
+              )
+            ]
+          }
+        ),
+        renderOverlayPortal(popup, overlay.target, !portalEnabled)
+      ]
+    }
+  );
+};
+var ContextMenu = ({
+  disabled = false,
+  open: controlledOpen,
+  defaultOpen = false,
+  closeOnClick = true,
+  portal = true,
+  offset = 0,
+  placement = "bottom-start",
+  className,
+  style,
+  onOpenChange,
+  children,
+  ...divProps
+}) => {
+  const [internalVisible, setInternalVisible] = useState(defaultOpen);
+  const visible = controlledOpen !== void 0 ? controlledOpen : internalVisible;
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const pointNodeRef = useRef(null);
+  const floatingRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  const explicitPointRef = useRef(false);
+  const [point, setPoint] = useState({ x: 0, y: 0 });
+  const reactId = useId();
+  const menuId = useMemo(() => `tiger-context-menu-${reactId}`, [reactId]);
+  const pointReferenceRef = useMemo(
+    () => ({
+      get current() {
+        return pointNodeRef.current;
+      },
+      set current(node) {
+        pointNodeRef.current = node;
+      }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- point is an invalidation key, not a value
+    [point.x, point.y]
+  );
+  useEffect(() => {
+    injectContextMenuStyles();
+  }, []);
+  const setVisible = useCallback(
+    (newVisible) => {
+      if (disabled && newVisible) return;
+      if (newVisible && !visible) {
+        previousActiveElementRef.current = captureActiveElement();
+      }
+      if (controlledOpen === void 0) {
+        setInternalVisible(newVisible);
+      }
+      onOpenChange?.(newVisible);
+      if (newVisible) {
+        requestAnimationFrame(() => {
+          if (floatingRef.current) {
+            focusFirstMenuItem(floatingRef.current);
+          }
+        });
+      } else {
+        restoreFocus(previousActiveElementRef.current);
+        previousActiveElementRef.current = null;
+      }
+    },
+    [disabled, visible, controlledOpen, onOpenChange]
+  );
+  useLayoutEffect(() => {
+    if (!visible || explicitPointRef.current) return;
+    if (!triggerRef.current) return;
+    setPoint(getContextMenuOpenPoint(null, triggerRef.current));
+  }, [visible]);
+  const handleItemClick = useCallback(() => {
+    if (closeOnClick) {
+      setVisible(false);
+    }
+  }, [closeOnClick, setVisible]);
+  const openAt = useCallback(
+    (next) => {
+      explicitPointRef.current = true;
+      setPoint(next);
+      setVisible(true);
+    },
+    [setVisible]
+  );
+  const handleContextMenu = useCallback(
+    (event) => {
+      if (disabled) return;
+      event.preventDefault();
+      event.stopPropagation();
+      openAt(getContextMenuOpenPoint(event.nativeEvent, triggerRef.current));
+    },
+    [disabled, openAt]
+  );
+  const handleTriggerKeyDown = useCallback(
+    (event) => {
+      if (disabled || !isContextMenuKeyboardEvent(event)) return;
+      event.preventDefault();
+      openAt(getContextMenuOpenPoint(null, triggerRef.current));
+    },
+    [disabled, openAt]
+  );
+  const handleMenuKeyDown = useCallback((event) => {
+    if (floatingRef.current) {
+      handleMenuNavigation(floatingRef.current, event.nativeEvent);
+    }
+  }, []);
+  const handleMenuContextMenu = useCallback((event) => {
+    event.preventDefault();
+  }, []);
+  const overlay = useAnchoredOverlay({
+    referenceRef: pointReferenceRef,
+    floatingRef,
+    enabled: visible,
+    placement,
+    offset,
+    portal,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    onDismiss: () => setVisible(false)
+  });
+  const containerClasses = useMemo(
+    () => classNames(getContextMenuContainerClasses(), className),
+    [className]
+  );
+  const triggerClasses = useMemo(() => getContextMenuTriggerClasses(disabled), [disabled]);
+  const menuWrapperClasses = classNames(overlay.floatingClasses, CONTEXT_MENU_ENTER_CLASS);
+  const pointStyle = useMemo(() => getContextMenuPointStyle(point), [point]);
+  const contextValue = useMemo(
+    () => ({ closeOnClick, handleItemClick, portal, open: visible }),
+    [closeOnClick, handleItemClick, portal, visible]
+  );
+  const childrenArray = React.Children.toArray(children);
+  const triggerChildren = [];
+  let menuElement = null;
+  childrenArray.forEach((child) => {
+    if (React.isValidElement(child) && child.type === ContextMenuMenu) {
+      menuElement = child;
+      return;
+    }
+    triggerChildren.push(child);
+  });
+  const menuWrapperNode = menuElement ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: floatingRef,
+      className: menuWrapperClasses,
+      style: overlay.floatingStyles,
+      "data-positioned": overlay.positioned,
+      hidden: !visible,
+      "data-tiger-context-menu": "",
+      onKeyDown: handleMenuKeyDown,
+      onContextMenu: handleMenuContextMenu,
+      children: React.isValidElement(menuElement) ? React.cloneElement(menuElement, {
+        id: menuId
+      }) : menuElement
+    },
+    `${point.x},${point.y}`
+  ) : null;
+  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: triggerClasses,
+        onContextMenu: handleContextMenu,
+        onKeyDown: handleTriggerKeyDown,
+        "aria-haspopup": "menu",
+        "aria-expanded": visible,
+        "aria-controls": visible ? menuId : void 0,
+        "data-state": visible ? "open" : "closed",
+        "data-tiger-context-menu-trigger": "",
+        children: triggerChildren
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: pointNodeRef,
+        style: pointStyle,
+        "aria-hidden": "true",
+        "data-tiger-context-menu-point": ""
+      }
+    ),
+    menuWrapperNode && renderOverlayPortal(menuWrapperNode, overlay.target, !portal)
+  ] }) });
+};
+ContextMenu.displayName = "ContextMenu";
+ContextMenuMenu.displayName = "ContextMenuMenu";
+ContextMenuItem.displayName = "ContextMenuItem";
+ContextMenuSub.displayName = "ContextMenuSub";
+var ContextMenu_default = ContextMenu;
+
+export {
+  ContextMenuContext,
+  ContextMenuMenu,
+  ContextMenuItem,
+  ContextMenuSub,
+  ContextMenu,
+  ContextMenu_default
+};

package/dist/{chunk-HOYBHB7B.mjs → chunk-FNK2VWPP.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-ZG56T75O.mjs";
+} from "./chunk-WTHWLCRL.mjs";
 import {
   renderOverlayPortal
 } from "./chunk-HKAZXG74.mjs";

package/dist/{chunk-RJPNBYK5.mjs → chunk-FQS24AUH.mjs}

@@ -26,9 +26,10 @@ import {
   tourFooterClasses,
   tourIndicatorClasses,
   tourCloseButtonClasses,
+  tourMaskClasses,
   getTourTargetRect,
   getTourPopoverPosition,
-  getTourSpotlightStyle,
+  getTourMaskHoleStyle,
   getActiveTourSteps,
   getCurrentActiveTourStep,
   getActiveTourStepPosition,
@@ -169,8 +170,16 @@ var Tour = ({
     };
   }
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    showMask && targetRect && /* @__PURE__ */ jsx("div", { style: getTourSpotlightStyle(targetRect), "aria-hidden": "true" }),
-    showMask && !targetRect && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[1000] bg-black/45", "aria-hidden": "true", onClick: close }),
+    showMask && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: tourMaskClasses,
+        "data-tiger-tour-mask": "",
+        "aria-hidden": "true",
+        style: targetRect ? getTourMaskHoleStyle(targetRect) : void 0,
+        onClick: close
+      }
+    ),
     /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/{chunk-LADKKOJT.mjs → chunk-GBEDWXLL.mjs}

@@ -1,3 +1,7 @@
+import {
+  useControlledState
+} from "./chunk-MEFARVQI.mjs";
+
 // src/components/Stepper.tsx
 import { useEffect, useRef } from "react";
 import {
@@ -13,7 +17,8 @@ import {
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Stepper = ({
-  value = 0,
+  value,
+  defaultValue,
   min = -Infinity,
   max = Infinity,
   step = 1,
@@ -25,16 +30,17 @@ var Stepper = ({
   decrementAriaLabel = "Decrease",
   onChange
 }) => {
+  const [currentValue, setCurrentValue] = useControlledState(value, defaultValue ?? 0, onChange);
   const repeatControllerRef = useRef(createRafRepeatActionController());
-  const repeatValueRef = useRef(value);
+  const repeatValueRef = useRef(currentValue);
   const suppressNextClickRef = useRef(false);
   useEffect(() => () => repeatControllerRef.current.stop(), []);
   function setValue(v) {
     const clamped = clampStepperValue(v, min, max, precision);
-    onChange?.(clamped);
+    setCurrentValue(clamped);
     return clamped;
   }
-  function stepBy(direction, baseValue = value) {
+  function stepBy(direction, baseValue = currentValue) {
     return setValue(direction === "up" ? baseValue + step : baseValue - step);
   }
   function handleStepClick(direction) {
@@ -48,10 +54,10 @@ var Stepper = ({
     return (event) => {
       event.preventDefault();
       if (disabled) return;
-      if (direction === "down" && value <= min) return;
-      if (direction === "up" && value >= max) return;
+      if (direction === "down" && currentValue <= min) return;
+      if (direction === "up" && currentValue >= max) return;
       suppressNextClickRef.current = true;
-      repeatValueRef.current = value;
+      repeatValueRef.current = currentValue;
       repeatControllerRef.current.start(() => {
         const baseValue = repeatValueRef.current;
         const nextValue = stepBy(direction, baseValue);
@@ -65,8 +71,8 @@ var Stepper = ({
   function stopStepRepeat() {
     repeatControllerRef.current.stop();
   }
-  const atMin = value <= min;
-  const atMax = value >= max;
+  const atMin = currentValue <= min;
+  const atMax = currentValue >= max;
   const icon = (d) => /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: stepperIconViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d, fillRule: "evenodd", clipRule: "evenodd" }) });
   return /* @__PURE__ */ jsxs("div", { className: classNames(stepperBaseClasses, className), role: "group", "aria-label": "Stepper", children: [
     /* @__PURE__ */ jsx(
@@ -89,7 +95,7 @@ var Stepper = ({
       {
         type: "text",
         className: getStepperInputClasses(size),
-        value: precision !== void 0 ? value.toFixed(precision) : String(value),
+        value: precision !== void 0 ? currentValue.toFixed(precision) : String(currentValue),
         disabled,
         "aria-label": "Value",
         onChange: (e) => {

package/dist/chunk-GR3Y3XWP.mjs

@@ -0,0 +1,47 @@
+// src/components/Kbd.tsx
+import { forwardRef } from "react";
+import {
+  formatKbdSeparatorText,
+  getKbdParts,
+  getKbdRootClasses,
+  kbdKeyClasses,
+  kbdSeparatorClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function hasRenderableChildren(children) {
+  if (children == null || typeof children === "boolean") return false;
+  if (typeof children === "string" && children.length === 0) return false;
+  return true;
+}
+var Kbd = forwardRef(
+  ({ keys, separator, size = "md", variant = "default", className, style, children, ...rest }, ref) => {
+    const parts = getKbdParts(keys, separator);
+    const hasChildren = hasRenderableChildren(children);
+    return /* @__PURE__ */ jsxs(
+      "kbd",
+      {
+        ref,
+        "data-kbd": "",
+        "data-kbd-size": size,
+        "data-kbd-variant": variant,
+        className: getKbdRootClasses({ size, variant, className }),
+        style,
+        ...rest,
+        children: [
+          parts.map(
+            (part, index) => part.type === "separator" ? /* @__PURE__ */ jsx("span", { className: kbdSeparatorClasses, "data-kbd-separator": "", children: ` ${part.value} ` }, `sep-${index}`) : /* @__PURE__ */ jsx("kbd", { className: kbdKeyClasses, "data-kbd-key": "", children: part.value }, `key-${index}`)
+          ),
+          hasChildren && parts.length > 0 ? /* @__PURE__ */ jsx("span", { className: kbdSeparatorClasses, "data-kbd-separator": "", children: formatKbdSeparatorText(separator) }) : null,
+          hasChildren ? children : null
+        ]
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+var Kbd_default = Kbd;
+
+export {
+  Kbd,
+  Kbd_default
+};

package/dist/{chunk-2ENQZECC.mjs → chunk-HAXRHSCN.mjs}

@@ -15,6 +15,7 @@ import {
   getAutoCompleteInputClasses,
   getAutoCompleteOptionClasses,
   filterAutoCompleteOptions,
+  resolveAutoCompleteDisplayValue,
   getInitialPickerActiveIndex,
   getPickerComboboxAria,
   getPickerListboxAria,
@@ -87,7 +88,7 @@ var AutoComplete = (props) => {
   const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
   const [isOpen, setIsOpen] = useState(false);
   const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(
-    String(searchValue ?? value ?? defaultSearchValue ?? "")
+    searchValue ?? resolveAutoCompleteDisplayValue(value, options, defaultSearchValue)
   );
   const inputValue = searchValue ?? uncontrolledSearchValue;
   const [activeIndex, setActiveIndex] = useState(-1);
@@ -111,8 +112,8 @@ var AutoComplete = (props) => {
     if (searchValue !== void 0) {
       return;
     }
-    setUncontrolledSearchValue(String(value ?? defaultSearchValue ?? ""));
-  }, [defaultSearchValue, searchValue, value]);
+    setUncontrolledSearchValue(resolveAutoCompleteDisplayValue(value, options, defaultSearchValue));
+  }, [defaultSearchValue, options, searchValue, value]);
   const filteredOptions = useMemo(
     () => filterAutoCompleteOptions(options, inputValue, filterOption),
     [options, inputValue, filterOption]

package/dist/{chunk-K4GIKSZE.mjs → chunk-I2BENK5X.mjs}

@@ -19,6 +19,7 @@ import {
   getLoadingDotsWrapperClasses,
   getLoadingTextClasses,
   getSpinnerSVG,
+  DEFAULT_LOADING_BACKGROUND,
   loadingContainerBaseClasses,
   loadingFullscreenBaseClasses,
   loadingColorClasses,
@@ -32,7 +33,7 @@ var Loading = ({
   text,
   fullscreen = false,
   delay = 0,
-  background = "rgba(255, 255, 255, 0.9)",
+  background = DEFAULT_LOADING_BACKGROUND,
   customColor,
   lockScroll = true,
   className,