@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/{chunk-7EXOY7GD.mjs → chunk-FVA5VKN2.mjs}

@@ -1,9 +1,9 @@
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/Tag.tsx
-import { useMemo, useState } from "react";
+import { forwardRef, useMemo } from "react";
 import {
   classNames,
   getTagVariantClasses,
@@ -14,9 +14,10 @@ import {
   icon24ViewBox,
   tagBaseClasses,
   tagSizeClasses,
+  tagPillClasses,
   tagCloseButtonBaseClasses,
   tagCloseIconPath,
-  warnUnsupportedColorProp,
+  omitUnsupportedColorProp,
   getStatusLabels,
   mergeTigerLocale
 } from "@expcat/tigercat-core";
@@ -42,27 +43,36 @@ var CloseIcon = () => /* @__PURE__ */ jsx(
     )
   }
 );
-var Tag = ({
+var Tag = forwardRef(function Tag2({
   locale,
   variant = "default",
   size = "md",
   closable = false,
   closeAriaLabel,
+  closeTabIndex,
+  open,
+  onOpenChange,
+  pill = false,
   onClose,
   children,
   className,
   ...props
-}) => {
+}, ref) {
   const config = useTigerConfig();
   const labels = useMemo(
     () => getStatusLabels(mergeTigerLocale(config.locale, locale)),
     [config.locale, locale]
   );
-  warnUnsupportedColorProp("Tag", props);
-  const [isVisible, setIsVisible] = useState(true);
+  const rest = omitUnsupportedColorProp("Tag", props);
   const tagClasses = useMemo(
-    () => classNames(tagBaseClasses, getTagVariantClasses(variant), tagSizeClasses[size], className),
-    [variant, size, className]
+    () => classNames(
+      tagBaseClasses,
+      getTagVariantClasses(variant),
+      tagSizeClasses[size],
+      pill && tagPillClasses,
+      className
+    ),
+    [variant, size, pill, className]
   );
   const closeButtonClasses = useMemo(() => {
     const scheme = defaultTagThemeColors[variant];
@@ -71,14 +81,12 @@ var Tag = ({
   const handleClose = (event) => {
     event.stopPropagation();
     onClose?.(event);
-    if (!event.defaultPrevented) {
-      setIsVisible(false);
-    }
+    onOpenChange?.(false);
   };
-  if (!isVisible) {
+  if (open === false) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("span", { className: tagClasses, role: "status", ...props, children: [
+  return /* @__PURE__ */ jsxs("span", { ref, className: tagClasses, ...rest, children: [
     children != null && /* @__PURE__ */ jsx("span", { children }),
     closable && /* @__PURE__ */ jsx(
       "button",
@@ -86,12 +94,14 @@ var Tag = ({
         className: closeButtonClasses,
         onClick: handleClose,
         "aria-label": closeAriaLabel ?? labels.tagCloseAriaLabel,
+        tabIndex: closeTabIndex,
         type: "button",
         children: /* @__PURE__ */ jsx(CloseIcon, {})
       }
     )
   ] });
-};
+});
+Tag.displayName = "Tag";
 
 export {
   Tag

package/dist/{chunk-EW43YBPV.mjs → chunk-G4Y25JES.mjs}

@@ -1,7 +1,10 @@
+import {
+  renderOverlayTrigger
+} from "./chunk-WWZZRB7H.mjs";
 import {
   renderOverlayPortal,
   useAnchoredOverlay
-} from "./chunk-HKAZXG74.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 
 // src/components/ContextMenu.tsx
 import React, {
@@ -25,7 +28,10 @@ import {
   getContextMenuSubChevronClasses,
   getContextMenuPointStyle,
   getContextMenuOpenPoint,
+  getContextMenuSubPlacement,
+  getOverlayTriggerAria,
   injectContextMenuStyles,
+  CONTEXT_MENU_SUB_HIDE_DELAY_MS,
   CONTEXT_MENU_ENTER_CLASS,
   CONTEXT_MENU_SUB_CHEVRON_PATH,
   isContextMenuKeyboardEvent,
@@ -49,10 +55,11 @@ var ContextMenuMenu = ({
 var ContextMenuItem = ({
   disabled = false,
   divided = false,
+  href,
   className,
   onClick,
   children,
-  ...buttonProps
+  ...rest
 }) => {
   const context = useContext(ContextMenuContext);
   const handleClick = (event) => {
@@ -66,17 +73,18 @@ var ContextMenuItem = ({
     }
   };
   const itemClasses = classNames(getContextMenuItemClasses(disabled, divided), className);
+  const Comp = href && !disabled ? "a" : "button";
   return /* @__PURE__ */ jsx(
-    "button",
+    Comp,
     {
-      type: "button",
+      ...rest,
+      ...Comp === "a" ? { href } : { type: "button" },
       className: itemClasses,
       role: "menuitem",
       tabIndex: -1,
-      "aria-disabled": disabled,
-      disabled,
+      "aria-disabled": disabled || void 0,
+      disabled: Comp === "button" ? disabled : void 0,
       onClick: handleClick,
-      ...buttonProps,
       children
     }
   );
@@ -94,13 +102,16 @@ var ContextMenuSub = ({
   const popupCloseTimerRef = useRef(null);
   const titleRef = useRef(null);
   const popupRef = useRef(null);
+  const subMenuId = `tiger-context-menu-sub-${useId()}`;
   const isExpanded = isHovered || isOpenByKeyboard;
   const portalEnabled = Boolean(context?.portal);
   const overlay = useAnchoredOverlay({
     referenceRef: titleRef,
     floatingRef: popupRef,
     enabled: Boolean(context) && isExpanded && !disabled,
-    placement: "right-start",
+    placement: getContextMenuSubPlacement(
+      titleRef.current?.closest("[dir]")?.getAttribute("dir") ?? (typeof document === "undefined" ? void 0 : document.documentElement.getAttribute("dir"))
+    ),
     offset: 4,
     portal: portalEnabled,
     dismissOnEscape: true,
@@ -139,7 +150,7 @@ var ContextMenuSub = ({
       setIsOpenByKeyboard(false);
     };
     if (portalEnabled) {
-      popupCloseTimerRef.current = setTimeout(close, 120);
+      popupCloseTimerRef.current = setTimeout(close, CONTEXT_MENU_SUB_HIDE_DELAY_MS);
       return;
     }
     close();
@@ -152,7 +163,10 @@ var ContextMenuSub = ({
   const handleTitleKeyDown = useCallback(
     (event) => {
       if (disabled) return;
-      if (event.key === "ArrowRight" || event.key === "Enter" || event.key === " ") {
+      const dir = titleRef.current?.closest("[dir]")?.getAttribute("dir") ?? document.documentElement.getAttribute("dir");
+      const openKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+      const closeKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+      if (event.key === openKey || event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         event.stopPropagation();
         setIsOpenByKeyboard(true);
@@ -160,7 +174,7 @@ var ContextMenuSub = ({
         focusPopupFirstItem();
         return;
       }
-      if (event.key === "ArrowLeft" || event.key === "Escape") {
+      if (event.key === closeKey || event.key === "Escape") {
         if (isExpanded) {
           event.preventDefault();
           event.stopPropagation();
@@ -203,7 +217,7 @@ var ContextMenuSub = ({
       onMouseLeave: handleMouseLeave,
       onKeyDown: handlePopupKeyDown,
       onContextMenu: handlePopupContextMenu,
-      children: /* @__PURE__ */ jsx("div", { className: getContextMenuMenuClasses(), role: "menu", children })
+      children: /* @__PURE__ */ jsx("div", { id: subMenuId, className: getContextMenuMenuClasses(), role: "menu", children })
     }
   );
   return /* @__PURE__ */ jsxs(
@@ -225,6 +239,7 @@ var ContextMenuSub = ({
             tabIndex: -1,
             "aria-haspopup": "menu",
             "aria-expanded": isExpanded,
+            "aria-controls": isExpanded ? subMenuId : void 0,
             "aria-disabled": disabled || void 0,
             "data-state": isExpanded ? "open" : "closed",
             "data-tiger-context-menu-sub-trigger": "",
@@ -232,10 +247,18 @@ var ContextMenuSub = ({
             onClick: (event) => {
               event.preventDefault();
               event.stopPropagation();
+              if (disabled) return;
+              if (isExpanded) {
+                setIsOpenByKeyboard(false);
+                setIsHovered(false);
+                return;
+              }
+              setIsOpenByKeyboard(true);
+              setIsHovered(true);
             },
             onKeyDown: handleTitleKeyDown,
             children: [
-              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: title }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-start", children: title }),
               /* @__PURE__ */ jsx(
                 "svg",
                 {
@@ -266,6 +289,7 @@ var ContextMenu = ({
   portal = true,
   offset = 0,
   placement = "bottom-start",
+  asChild = false,
   className,
   style,
   onOpenChange,
@@ -315,6 +339,7 @@ var ContextMenu = ({
           }
         });
       } else {
+        explicitPointRef.current = false;
         restoreFocus(previousActiveElementRef.current);
         previousActiveElementRef.current = null;
       }
@@ -356,11 +381,18 @@ var ContextMenu = ({
     },
     [disabled, openAt]
   );
-  const handleMenuKeyDown = useCallback((event) => {
-    if (floatingRef.current) {
-      handleMenuNavigation(floatingRef.current, event.nativeEvent);
-    }
-  }, []);
+  const handleMenuKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Tab") {
+        setVisible(false);
+        return;
+      }
+      if (floatingRef.current) {
+        handleMenuNavigation(floatingRef.current, event.nativeEvent);
+      }
+    },
+    [setVisible]
+  );
   const handleMenuContextMenu = useCallback((event) => {
     event.preventDefault();
   }, []);
@@ -382,6 +414,12 @@ var ContextMenu = ({
   const triggerClasses = useMemo(() => getContextMenuTriggerClasses(disabled), [disabled]);
   const menuWrapperClasses = classNames(overlay.floatingClasses, CONTEXT_MENU_ENTER_CLASS);
   const pointStyle = useMemo(() => getContextMenuPointStyle(point), [point]);
+  const triggerAria = getOverlayTriggerAria({
+    kind: "menu",
+    open: visible,
+    controlsId: menuId,
+    disabled
+  });
   const contextValue = useMemo(
     () => ({ closeOnClick, handleItemClick, portal, open: visible }),
     [closeOnClick, handleItemClick, portal, visible]
@@ -414,21 +452,18 @@ var ContextMenu = ({
     `${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,
+    renderOverlayTrigger({
+      asChild,
+      child: triggerChildren.length === 1 ? triggerChildren[0] : triggerChildren,
+      triggerRef,
+      className: triggerClasses,
+      disabled,
+      aria: { ...triggerAria, "data-tiger-context-menu-trigger": "" },
+      handlers: {
         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
+        onKeyDown: handleTriggerKeyDown
       }
-    ),
+    }),
     /* @__PURE__ */ jsx(
       "div",
       {

package/dist/{chunk-ZJWUBR2X.mjs → chunk-G5NPND2T.mjs}

@@ -1,6 +1,9 @@
 // src/components/ButtonGroup.tsx
 import { createContext, useContext, useMemo } from "react";
-import { getButtonGroupClasses } from "@expcat/tigercat-core";
+import {
+  getButtonGroupClasses,
+  warnMissingAccessibleName
+} from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
 var ButtonGroupContext = createContext(null);
 function useButtonGroupContext() {
@@ -11,14 +14,27 @@ var ButtonGroup = ({
   vertical = false,
   className,
   children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
   ...rest
 }) => {
+  warnMissingAccessibleName("ButtonGroup", { ariaLabel, ariaLabelledby });
   const contextValue = useMemo(() => ({ size }), [size]);
   const groupClasses = useMemo(
     () => getButtonGroupClasses(vertical, className),
     [vertical, className]
   );
-  return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ...rest, className: groupClasses, role: "group", children }) });
+  return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: groupClasses,
+      role: "group",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      children
+    }
+  ) });
 };
 
 export {

package/dist/{chunk-L5KAXWQI.mjs → chunk-GF7W2FTZ.mjs}

@@ -1,10 +1,21 @@
-// src/components/NotificationRoot.ts
+// src/components/NotificationRoot.tsx
+import {
+  isBrowser
+} from "@expcat/tigercat-core";
 var notificationModulePromise = null;
+var resolvedNotification = null;
 function loadNotificationModule() {
-  notificationModulePromise ??= import("./components/Notification.mjs");
+  notificationModulePromise ??= import("./components/Notification.mjs").then((module) => {
+    resolvedNotification = module.notification;
+    return module;
+  });
   return notificationModulePromise;
 }
 function forwardNotification(method, options) {
+  if (!isBrowser()) return () => void 0;
+  if (resolvedNotification) {
+    return resolvedNotification[method](options);
+  }
   let closeNotification = null;
   let requestedClose = false;
   void loadNotificationModule().then(({ notification: notification2 }) => {
@@ -38,6 +49,11 @@ var notification = {
     return forwardNotification("info", options);
   },
   clear(position) {
+    if (!isBrowser()) return;
+    if (resolvedNotification) {
+      resolvedNotification.clear(position);
+      return;
+    }
     void loadNotificationModule().then(({ notification: notification2 }) => {
       notification2.clear(position);
     });

package/dist/{chunk-U4M3DC2P.mjs → chunk-GOIJNJ5D.mjs}

@@ -1,4 +1,5 @@
-// src/components/LoadingBarRoot.ts
+// src/components/LoadingBarRoot.tsx
+import { isBrowser } from "@expcat/tigercat-core";
 var loadingBarModulePromise = null;
 var pendingCommands = [];
 var resolvedApi = null;
@@ -11,9 +12,18 @@ function applyCommand(api, command) {
     api.start(command.options);
     return;
   }
+  if (command.type === "set") {
+    api.set(command.percentage);
+    return;
+  }
+  if (command.type === "inc") {
+    api.inc(command.delta);
+    return;
+  }
   api[command.type]();
 }
 function enqueue(command) {
+  if (!isBrowser()) return;
   if (resolvedApi) {
     applyCommand(resolvedApi, command);
     return;
@@ -32,6 +42,12 @@ var LoadingBar = {
   start(options) {
     enqueue({ type: "start", options });
   },
+  set(percentage) {
+    enqueue({ type: "set", percentage });
+  },
+  inc(delta) {
+    enqueue({ type: "inc", delta });
+  },
   finish() {
     enqueue({ type: "finish" });
   },