@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-CJSB5NOK.mjs

@@ -0,0 +1,348 @@
+import {
+  composeRefs,
+  renderOverlayTrigger
+} from "./chunk-WWZZRB7H.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-NPGU6VYD.mjs";
+
+// src/components/Dropdown.tsx
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef
+} from "react";
+import {
+  classNames,
+  createFloatingHoverDelayController,
+  DEFAULT_DROPDOWN_TRIGGER,
+  DROPDOWN_CHEVRON_PATH,
+  DROPDOWN_ENTER_CLASS,
+  devWarn,
+  focusFirstMenuItem,
+  getDropdownChevronClasses,
+  getDropdownContainerClasses,
+  getDropdownItemClasses,
+  getDropdownMenuClasses,
+  getDropdownTriggerClasses,
+  getOverlayTriggerAria,
+  getOverlayTriggerKeyboardAction,
+  handleMenuNavigation,
+  injectDropdownStyles,
+  restoreFocus
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownContext = createContext(null);
+var DropdownMenu = ({
+  className,
+  style,
+  children,
+  role,
+  ...divProps
+}) => {
+  const menuClasses = classNames(getDropdownMenuClasses(), className);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: menuClasses,
+      style,
+      "data-tiger-dropdown-menu": "",
+      ...divProps,
+      role: role ?? "menu",
+      children
+    }
+  );
+};
+var DropdownItem = ({
+  disabled = false,
+  divided = false,
+  closeOnClick,
+  href,
+  className,
+  onClick,
+  children,
+  ...rest
+}) => {
+  const context = useContext(DropdownContext);
+  if (context == null) {
+    devWarn("DropdownItem.orphan", "DropdownItem must be used inside Dropdown.");
+  }
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+    const shouldClose = closeOnClick ?? context?.closeOnClick ?? true;
+    if (shouldClose) {
+      context?.handleItemClick();
+    }
+  };
+  const itemClasses = classNames(getDropdownItemClasses(disabled, divided), className);
+  const Comp = href && !disabled ? "a" : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ...rest,
+      ...Comp === "a" ? { href } : { type: "button" },
+      className: itemClasses,
+      role: "menuitem",
+      tabIndex: -1,
+      "aria-disabled": disabled || void 0,
+      disabled: Comp === "button" ? disabled : void 0,
+      onClick: handleClick,
+      children
+    }
+  );
+};
+var Dropdown = forwardRef(function Dropdown2({
+  trigger = DEFAULT_DROPDOWN_TRIGGER,
+  placement: initialPlacement = "bottom-start",
+  offset = 4,
+  disabled = false,
+  open: controlledOpen,
+  defaultOpen = false,
+  closeOnClick = true,
+  showArrow = true,
+  portal = true,
+  asChild = false,
+  className,
+  style,
+  onOpenChange,
+  children,
+  renderTrigger,
+  ...divProps
+}, forwardedRef) {
+  const [visible, setVisibleState] = useControlledState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  const openIntentRef = useRef("menu");
+  const skipRestoreRef = useRef(false);
+  const reactId = useId();
+  const menuId = useMemo(() => `tiger-dropdown-menu-${reactId}`, [reactId]);
+  useEffect(() => {
+    injectDropdownStyles();
+  }, []);
+  const setVisibleRef = useRef(() => void 0);
+  const hoverControllerRef = useRef(
+    null
+  );
+  if (hoverControllerRef.current === null) {
+    hoverControllerRef.current = createFloatingHoverDelayController({
+      show: () => {
+        openIntentRef.current = "hover";
+        setVisibleRef.current(true);
+      },
+      hide: () => {
+        skipRestoreRef.current = true;
+        setVisibleRef.current(false);
+      }
+    });
+  }
+  const hoverController = hoverControllerRef.current;
+  const setVisible = useCallback(
+    (next) => {
+      if (disabled && next) return;
+      if (next && !visible) {
+        previousActiveElementRef.current = triggerRef.current;
+      }
+      setVisibleState(next);
+      if (!next) {
+        hoverController.cancel();
+        if (!skipRestoreRef.current) {
+          restoreFocus(previousActiveElementRef.current);
+        }
+        previousActiveElementRef.current = null;
+        skipRestoreRef.current = false;
+      }
+    },
+    [disabled, visible, setVisibleState, hoverController]
+  );
+  setVisibleRef.current = setVisible;
+  useEffect(() => {
+    if (!visible) return;
+    if (openIntentRef.current === "hover") return;
+    const frame = requestAnimationFrame(() => {
+      if (floatingRef.current) focusFirstMenuItem(floatingRef.current);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [visible]);
+  const handleItemClick = useCallback(() => {
+    skipRestoreRef.current = false;
+    setVisible(false);
+  }, [setVisible]);
+  const handleMouseEnter = useCallback(() => {
+    if (trigger !== "hover" || disabled) return;
+    hoverController.enter();
+  }, [trigger, disabled, hoverController]);
+  const handleMouseLeave = useCallback(() => {
+    if (trigger !== "hover") return;
+    hoverController.leave();
+  }, [trigger, hoverController]);
+  const handleClick = useCallback(() => {
+    if (disabled) return;
+    if (triggerRef.current?.getAttribute("aria-disabled") === "true") return;
+    if (trigger === "hover") {
+      hoverController.cancel();
+    }
+    openIntentRef.current = "menu";
+    setVisible(!visible);
+  }, [disabled, trigger, visible, setVisible, hoverController]);
+  const handleTriggerKeyDown = useCallback(
+    (event) => {
+      const action = getOverlayTriggerKeyboardAction(event.nativeEvent, {
+        kind: "menu",
+        open: visible,
+        disabled
+      });
+      if (!action) return;
+      event.preventDefault();
+      hoverController.cancel();
+      if (action === "close") {
+        setVisible(false);
+        return;
+      }
+      openIntentRef.current = "menu";
+      if (!visible) setVisible(true);
+    },
+    [visible, disabled, hoverController, setVisible]
+  );
+  const handleMenuKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Tab") {
+        skipRestoreRef.current = true;
+        setVisible(false);
+        return;
+      }
+      if (floatingRef.current) {
+        handleMenuNavigation(floatingRef.current, event.nativeEvent);
+      }
+    },
+    [setVisible]
+  );
+  const overlay = useAnchoredOverlay({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: visible,
+    placement: initialPlacement,
+    offset,
+    portal,
+    containerRef,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    onDismiss: (reason) => {
+      skipRestoreRef.current = reason !== "escape";
+      if (reason === "escape") openIntentRef.current = "menu";
+      setVisible(false);
+    }
+  });
+  useEffect(() => () => hoverController.dispose(), [hoverController]);
+  const containerClasses = useMemo(
+    () => classNames(getDropdownContainerClasses(), "tiger-dropdown-container", className),
+    [className]
+  );
+  const triggerClasses = useMemo(() => getDropdownTriggerClasses(disabled), [disabled]);
+  const contextValue = useMemo(
+    () => ({ closeOnClick, handleItemClick }),
+    [closeOnClick, handleItemClick]
+  );
+  const childrenArray = React.Children.toArray(children);
+  let triggerElement = renderTrigger ? renderTrigger({ open: visible }) : null;
+  let menuElement = null;
+  let sawTrigger = Boolean(renderTrigger);
+  childrenArray.forEach((child) => {
+    if (React.isValidElement(child) && child.type === DropdownMenu) {
+      menuElement = child;
+      return;
+    }
+    if (renderTrigger) return;
+    if (!sawTrigger) {
+      triggerElement = child;
+      sawTrigger = true;
+      return;
+    }
+    devWarn("Dropdown.extraTrigger", "Dropdown only uses the first non-menu child as the trigger.");
+  });
+  const triggerAria = getOverlayTriggerAria({
+    kind: "menu",
+    open: visible,
+    controlsId: menuId,
+    disabled
+  });
+  const composedTriggerRef = composeRefs(forwardedRef, triggerRef);
+  const chevronNode = showArrow && !asChild ? /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getDropdownChevronClasses(visible),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: DROPDOWN_CHEVRON_PATH })
+    }
+  ) : null;
+  const triggerNode = renderOverlayTrigger({
+    asChild,
+    child: triggerElement,
+    triggerRef: composedTriggerRef,
+    className: asChild ? void 0 : triggerClasses,
+    disabled,
+    extraChildren: chevronNode,
+    aria: triggerAria,
+    handlers: {
+      onClick: handleClick,
+      onKeyDown: handleTriggerKeyDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    }
+  });
+  const menuWrapperNode = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: floatingRef,
+      className: classNames(overlay.floatingClasses, DROPDOWN_ENTER_CLASS),
+      style: overlay.floatingStyles,
+      "data-positioned": overlay.positioned,
+      hidden: !visible,
+      "data-tiger-dropdown-menu": "",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onKeyDown: handleMenuKeyDown,
+      children: menuElement && React.isValidElement(menuElement) ? React.cloneElement(menuElement, {
+        id: menuId
+      }) : menuElement
+    }
+  );
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
+    triggerNode,
+    renderOverlayPortal(menuWrapperNode, overlay.target, !portal)
+  ] }) });
+});
+Dropdown.displayName = "Dropdown";
+DropdownMenu.displayName = "DropdownMenu";
+DropdownItem.displayName = "DropdownItem";
+
+export {
+  DropdownContext,
+  DropdownMenu,
+  DropdownItem,
+  Dropdown
+};

package/dist/chunk-CKKOBWER.mjs

@@ -0,0 +1,182 @@
+import {
+  StatusIcon
+} from "./chunk-ED7QR6PJ.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Alert.tsx
+import { forwardRef, useMemo, useCallback, useEffect, useRef } from "react";
+import {
+  classNames,
+  getAlertTypeClasses,
+  defaultAlertThemeColors,
+  alertBaseClasses,
+  alertSizeClasses,
+  alertIconSizeClasses,
+  alertTitleSizeClasses,
+  alertDescriptionSizeClasses,
+  alertCloseButtonBaseClasses,
+  alertIconContainerClasses,
+  getAlertContentClasses,
+  getAlertIconPath,
+  alertCloseIconPath,
+  alertBannerClasses,
+  alertCountdownContainerClasses,
+  alertCountdownBarClasses,
+  alertCountdownColorClasses,
+  resolveAlertRole,
+  getAlertLabels,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Alert = forwardRef(function Alert2({
+  locale,
+  type = "info",
+  size = "md",
+  title,
+  description,
+  showIcon = true,
+  closable = false,
+  closeAriaLabel,
+  duration,
+  open,
+  onOpenChange,
+  banner = false,
+  showCountdown = false,
+  className,
+  children,
+  titleSlot,
+  descriptionSlot,
+  onClose,
+  role: roleProp,
+  ...props
+}, ref) {
+  const config = useTigerConfig();
+  const labels = useMemo(
+    () => getAlertLabels(mergeTigerLocale(config.locale, locale)),
+    [config.locale, locale]
+  );
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const colorScheme = useMemo(() => getAlertTypeClasses(type, defaultAlertThemeColors), [type]);
+  const alertClasses = useMemo(
+    () => classNames(
+      alertBaseClasses,
+      alertSizeClasses[size],
+      colorScheme.bg,
+      colorScheme.border,
+      banner && alertBannerClasses,
+      className
+    ),
+    [size, colorScheme, banner, className]
+  );
+  const iconClasses = useMemo(
+    () => classNames(alertIconSizeClasses[size], colorScheme.icon),
+    [size, colorScheme]
+  );
+  const titleClasses = useMemo(
+    () => classNames(alertTitleSizeClasses[size], colorScheme.title),
+    [size, colorScheme]
+  );
+  const descriptionClasses = useMemo(
+    () => classNames(alertDescriptionSizeClasses[size], colorScheme.description),
+    [size, colorScheme]
+  );
+  const closeButtonClasses = useMemo(
+    () => classNames(
+      alertCloseButtonBaseClasses,
+      colorScheme.closeButton,
+      colorScheme.closeButtonHover,
+      colorScheme.focus
+    ),
+    [colorScheme]
+  );
+  const clearTimerRef = useRef(void 0);
+  const requestClose = useCallback(
+    (event) => {
+      onCloseRef.current?.(event);
+      onOpenChange?.(false);
+      clearTimerRef.current?.();
+    },
+    [onOpenChange]
+  );
+  const handleClose = useCallback(
+    (event) => {
+      event.stopPropagation();
+      requestClose(event.nativeEvent);
+    },
+    [requestClose]
+  );
+  useEffect(() => {
+    if (open === false || !(duration && duration > 0)) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      requestClose(new Event("close", { cancelable: true }));
+    }, duration);
+    const clear = () => window.clearTimeout(timer);
+    clearTimerRef.current = clear;
+    return () => {
+      clear();
+      if (clearTimerRef.current === clear) {
+        clearTimerRef.current = void 0;
+      }
+    };
+  }, [duration, open, requestClose]);
+  if (open === false) {
+    return null;
+  }
+  const iconPath = getAlertIconPath(type);
+  const hasTitle = !!(title || titleSlot);
+  const hasDescription = !!(description || descriptionSlot);
+  const hasChildren = children != null && children !== false;
+  const hasContent = hasTitle || hasDescription || hasChildren;
+  const role = roleProp ?? resolveAlertRole(type, hasContent);
+  return /* @__PURE__ */ jsxs("div", { ...props, ref, className: alertClasses, role, children: [
+    showIcon && /* @__PURE__ */ jsx("div", { className: alertIconContainerClasses, children: /* @__PURE__ */ jsx(
+      StatusIcon,
+      {
+        path: iconPath,
+        className: iconClasses,
+        "aria-hidden": "true",
+        focusable: "false"
+      }
+    ) }),
+    hasContent && /* @__PURE__ */ jsxs("div", { className: getAlertContentClasses(showIcon), children: [
+      hasTitle && /* @__PURE__ */ jsx("div", { className: titleClasses, children: titleSlot || title }),
+      hasDescription && /* @__PURE__ */ jsx("div", { className: descriptionClasses, children: descriptionSlot || description }),
+      hasChildren && /* @__PURE__ */ jsx("div", { className: hasTitle || hasDescription ? descriptionClasses : titleClasses, children })
+    ] }),
+    closable && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: closeButtonClasses,
+        onClick: handleClose,
+        "aria-label": closeAriaLabel ?? labels.closeAriaLabel,
+        type: "button",
+        children: /* @__PURE__ */ jsx(
+          StatusIcon,
+          {
+            path: alertCloseIconPath,
+            className: "h-4 w-4",
+            "aria-hidden": "true",
+            focusable: "false"
+          }
+        )
+      }
+    ),
+    showCountdown && duration && duration > 0 && /* @__PURE__ */ jsx("div", { className: alertCountdownContainerClasses, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(alertCountdownBarClasses, alertCountdownColorClasses[type]),
+        style: { animationDuration: `${duration}ms` }
+      }
+    ) })
+  ] });
+});
+Alert.displayName = "Alert";
+
+export {
+  Alert
+};