@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-QOAOOD53.mjs

@@ -1,318 +0,0 @@
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/Calendar.tsx
-import { useState, useMemo, useCallback, useRef, useEffect } from "react";
-import { classNames } from "@expcat/tigercat-core";
-import {
-  getCalendarContainerClasses,
-  calendarHeaderClasses,
-  calendarNavButtonClasses,
-  calendarTitleClasses,
-  calendarWeekdayClasses,
-  getCalendarDayClasses,
-  getCalendarMonthClasses,
-  isCalendarMonthDisabled,
-  isSameDay,
-  getMonthDays,
-  getShortDayNames,
-  getShortMonthNames,
-  formatMonthYear,
-  formatDate,
-  parseDate,
-  addDays,
-  getCalendarLabels,
-  mergeTigerLocale
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Calendar = ({
-  value,
-  mode = "month",
-  fullscreen = false,
-  disabledDate,
-  locale,
-  onChange,
-  onPanelChange,
-  className
-}) => {
-  const config = useTigerConfig();
-  const mergedLocale = useMemo(
-    () => mergeTigerLocale(config.locale, locale),
-    [config.locale, locale]
-  );
-  const localeCode = mergedLocale?.locale;
-  const labels = useMemo(() => getCalendarLabels(mergedLocale), [mergedLocale]);
-  const weekdayNames = useMemo(() => getShortDayNames(localeCode), [localeCode]);
-  const monthNames = useMemo(() => getShortMonthNames(localeCode), [localeCode]);
-  const today = /* @__PURE__ */ new Date();
-  const [viewYear, setViewYear] = useState(value?.getFullYear() ?? today.getFullYear());
-  const [viewMonth, setViewMonth] = useState(value?.getMonth() ?? today.getMonth());
-  const days = useMemo(() => getMonthDays(viewYear, viewMonth), [viewYear, viewMonth]);
-  const weeks = useMemo(() => {
-    const out = [];
-    for (let i = 0; i < days.length; i += 7) out.push(days.slice(i, i + 7));
-    return out;
-  }, [days]);
-  const monthRows = useMemo(() => {
-    const out = [];
-    for (let i = 0; i < monthNames.length; i += 3) out.push(monthNames.slice(i, i + 3));
-    return out;
-  }, [monthNames]);
-  const navigate = useCallback(
-    (newYear, newMonth) => {
-      setViewYear(newYear);
-      setViewMonth(newMonth);
-      onPanelChange?.(new Date(newYear, newMonth, 1), mode);
-    },
-    [mode, onPanelChange]
-  );
-  const prevMonth = useCallback(() => {
-    if (viewMonth === 0) navigate(viewYear - 1, 11);
-    else navigate(viewYear, viewMonth - 1);
-  }, [viewYear, viewMonth, navigate]);
-  const nextMonth = useCallback(() => {
-    if (viewMonth === 11) navigate(viewYear + 1, 0);
-    else navigate(viewYear, viewMonth + 1);
-  }, [viewYear, viewMonth, navigate]);
-  const prevYear = useCallback(
-    () => navigate(viewYear - 1, viewMonth),
-    [viewYear, viewMonth, navigate]
-  );
-  const nextYear = useCallback(
-    () => navigate(viewYear + 1, viewMonth),
-    [viewYear, viewMonth, navigate]
-  );
-  const selectDay = useCallback(
-    (date) => {
-      if (disabledDate?.(date)) return;
-      onChange?.(date);
-    },
-    [disabledDate, onChange]
-  );
-  const selectMonth = useCallback(
-    (monthIdx) => {
-      if (isCalendarMonthDisabled(viewYear, monthIdx, disabledDate)) return;
-      setViewMonth(monthIdx);
-      const date = new Date(viewYear, monthIdx, 1);
-      onChange?.(date);
-      onPanelChange?.(date, "month");
-    },
-    [viewYear, disabledDate, onChange, onPanelChange]
-  );
-  const dayGridRef = useRef(null);
-  const pendingFocusIsoRef = useRef(null);
-  const [activeIso, setActiveIso] = useState(null);
-  const toIso = (d) => formatDate(d, "yyyy-MM-dd");
-  const defaultDayIso = (() => {
-    if (value && value.getFullYear() === viewYear && value.getMonth() === viewMonth)
-      return toIso(value);
-    if (today.getFullYear() === viewYear && today.getMonth() === viewMonth) return toIso(today);
-    return toIso(new Date(viewYear, viewMonth, 1));
-  })();
-  const rovingDayIso = activeIso ?? defaultDayIso;
-  const focusDayIso = (iso) => {
-    const el = dayGridRef.current?.querySelector(`button[data-date="${iso}"]`);
-    if (el && !el.disabled) {
-      el.focus();
-      setActiveIso(iso);
-      return true;
-    }
-    return false;
-  };
-  const moveDayFocus = (deltaDays) => {
-    const activeEl = document.activeElement;
-    const currentIso = activeEl?.getAttribute("data-date") ?? rovingDayIso;
-    const base = parseDate(currentIso);
-    if (!base) return;
-    let candidate = addDays(base, deltaDays);
-    for (let attempts = 0; attempts < 42; attempts++) {
-      const iso = toIso(candidate);
-      const el = dayGridRef.current?.querySelector(`button[data-date="${iso}"]`);
-      if (el && !el.disabled) {
-        el.focus();
-        setActiveIso(iso);
-        return;
-      }
-      if (!el) {
-        pendingFocusIsoRef.current = iso;
-        setActiveIso(iso);
-        navigate(candidate.getFullYear(), candidate.getMonth());
-        return;
-      }
-      candidate = addDays(candidate, deltaDays);
-    }
-  };
-  useEffect(() => {
-    const iso = pendingFocusIsoRef.current;
-    if (!iso) return;
-    const el = dayGridRef.current?.querySelector(`button[data-date="${iso}"]`);
-    if (el) {
-      el.focus();
-      pendingFocusIsoRef.current = null;
-    }
-  }, [days]);
-  const handleDayGridKeyDown = (e) => {
-    switch (e.key) {
-      case "ArrowLeft":
-        e.preventDefault();
-        moveDayFocus(-1);
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        moveDayFocus(1);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        moveDayFocus(-7);
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        moveDayFocus(7);
-        break;
-      case "Home":
-        e.preventDefault();
-        focusDayIso(toIso(new Date(viewYear, viewMonth, 1)));
-        break;
-      case "End":
-        e.preventDefault();
-        focusDayIso(toIso(new Date(viewYear, viewMonth + 1, 0)));
-        break;
-      case "Enter":
-      case " ": {
-        const activeEl = document.activeElement;
-        const iso = activeEl?.getAttribute("data-date");
-        if (iso) {
-          e.preventDefault();
-          const d = parseDate(iso);
-          if (d) selectDay(d);
-        }
-        break;
-      }
-      default:
-        break;
-    }
-  };
-  const [activeMonthIdx, setActiveMonthIdx] = useState(null);
-  const rovingMonthIdx = activeMonthIdx ?? viewMonth;
-  const monthGridRef = useRef(null);
-  const focusMonthIdx = (idx) => {
-    const els = monthGridRef.current?.querySelectorAll('button[role="gridcell"]');
-    els?.[idx]?.focus();
-    setActiveMonthIdx(idx);
-  };
-  const handleMonthKeyDown = (e, idx) => {
-    let target = idx;
-    switch (e.key) {
-      case "ArrowRight":
-        target = Math.min(11, idx + 1);
-        break;
-      case "ArrowLeft":
-        target = Math.max(0, idx - 1);
-        break;
-      case "ArrowDown":
-        target = Math.min(11, idx + 3);
-        break;
-      case "ArrowUp":
-        target = Math.max(0, idx - 3);
-        break;
-      case "Home":
-        target = 0;
-        break;
-      case "End":
-        target = 11;
-        break;
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        selectMonth(idx);
-        return;
-      default:
-        return;
-    }
-    e.preventDefault();
-    focusMonthIdx(target);
-  };
-  const containerClass = classNames(getCalendarContainerClasses(fullscreen), className);
-  return /* @__PURE__ */ jsxs("div", { className: containerClass, role: "group", children: [
-    /* @__PURE__ */ jsxs("div", { className: calendarHeaderClasses, children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: calendarNavButtonClasses,
-          "aria-label": mode === "month" ? labels.previousMonth : labels.previousYear,
-          onClick: mode === "month" ? prevMonth : prevYear,
-          children: "\u2039"
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: calendarTitleClasses, children: mode === "month" ? formatMonthYear(viewYear, viewMonth, localeCode) : `${viewYear}` }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: calendarNavButtonClasses,
-          "aria-label": mode === "month" ? labels.nextMonth : labels.nextYear,
-          onClick: mode === "month" ? nextMonth : nextYear,
-          children: "\u203A"
-        }
-      )
-    ] }),
-    mode === "year" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2", role: "grid", ref: monthGridRef, children: monthRows.map((row, ri) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", role: "row", children: row.map((m, ci) => {
-      const i = ri * 3 + ci;
-      const isDisabled = isCalendarMonthDisabled(viewYear, i, disabledDate);
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          role: "gridcell",
-          "aria-selected": viewMonth === i,
-          disabled: isDisabled,
-          tabIndex: rovingMonthIdx === i && !isDisabled ? 0 : -1,
-          className: getCalendarMonthClasses(viewMonth === i, isDisabled),
-          onClick: () => selectMonth(i),
-          onFocus: () => setActiveMonthIdx(i),
-          onKeyDown: (e) => handleMonthKeyDown(e, i),
-          children: m
-        },
-        i
-      );
-    }) }, ri)) }) : /* @__PURE__ */ jsxs("div", { role: "grid", "aria-rowcount": 7, "aria-colcount": 7, ref: dayGridRef, children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", role: "row", children: weekdayNames.map((wd) => /* @__PURE__ */ jsx("div", { className: calendarWeekdayClasses, role: "columnheader", children: wd }, wd)) }),
-      weeks.map((week, wi) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", role: "row", onKeyDown: handleDayGridKeyDown, children: week.map((date) => {
-        const isCurrentMonth = date.getMonth() === viewMonth;
-        const isSelected = value ? isSameDay(date, value) : false;
-        const isTodayDate = isSameDay(date, today);
-        const isDisabled = !!disabledDate?.(date);
-        const iso = toIso(date);
-        return /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "gridcell",
-            "data-date": iso,
-            "aria-label": iso,
-            "aria-selected": isSelected,
-            "aria-current": isTodayDate ? "date" : void 0,
-            disabled: isDisabled,
-            tabIndex: rovingDayIso === iso && !isDisabled ? 0 : -1,
-            className: classNames(
-              getCalendarDayClasses(isSelected, isTodayDate, isCurrentMonth, isDisabled),
-              "justify-self-center my-0.5"
-            ),
-            onClick: () => selectDay(date),
-            onFocus: () => setActiveIso(iso),
-            children: date.getDate()
-          },
-          iso
-        );
-      }) }, wi))
-    ] })
-  ] });
-};
-var Calendar_default = Calendar;
-
-export {
-  Calendar,
-  Calendar_default
-};

package/dist/chunk-RE5ZLA5D.mjs

@@ -1,268 +0,0 @@
-import {
-  renderOverlayPortal,
-  useAnchoredOverlay
-} from "./chunk-HKAZXG74.mjs";
-
-// src/components/Dropdown.tsx
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  useMemo,
-  useId
-} from "react";
-import {
-  classNames,
-  getDropdownContainerClasses,
-  getDropdownTriggerClasses,
-  getDropdownChevronClasses,
-  getDropdownMenuClasses,
-  getDropdownItemClasses,
-  injectDropdownStyles,
-  DROPDOWN_CHEVRON_PATH,
-  DROPDOWN_ENTER_CLASS,
-  handleMenuNavigation,
-  focusFirstMenuItem,
-  captureActiveElement,
-  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, role: role ?? "menu", ...divProps, children });
-};
-var DropdownItem = ({
-  disabled = false,
-  divided = false,
-  closeOnClick,
-  className,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const context = useContext(DropdownContext);
-  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);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: itemClasses,
-      role: "menuitem",
-      tabIndex: -1,
-      "aria-disabled": disabled,
-      disabled,
-      onClick: handleClick,
-      ...buttonProps,
-      children
-    }
-  );
-};
-var Dropdown = ({
-  trigger = "hover",
-  placement: initialPlacement = "bottom-start",
-  offset = 4,
-  disabled = false,
-  open: controlledOpen,
-  defaultOpen = false,
-  closeOnClick = true,
-  showArrow = true,
-  portal = true,
-  className,
-  style,
-  onOpenChange,
-  children,
-  renderTrigger,
-  ...divProps
-}) => {
-  const [internalVisible, setInternalVisible] = useState(defaultOpen);
-  const visible = controlledOpen !== void 0 ? controlledOpen : internalVisible;
-  const containerRef = useRef(null);
-  const triggerRef = useRef(null);
-  const floatingRef = useRef(null);
-  const hoverTimerRef = useRef(null);
-  const previousActiveElementRef = useRef(null);
-  const reactId = useId();
-  const menuId = useMemo(() => `tiger-dropdown-menu-${reactId}`, [reactId]);
-  useEffect(() => {
-    injectDropdownStyles();
-  }, []);
-  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]
-  );
-  const handleItemClick = useCallback(() => {
-    setVisible(false);
-  }, [setVisible]);
-  const handleMouseEnter = useCallback(() => {
-    if (trigger !== "hover") return;
-    if (hoverTimerRef.current) {
-      clearTimeout(hoverTimerRef.current);
-    }
-    hoverTimerRef.current = setTimeout(() => {
-      setVisible(true);
-    }, 100);
-  }, [trigger, setVisible]);
-  const handleMouseLeave = useCallback(() => {
-    if (trigger !== "hover") return;
-    if (hoverTimerRef.current) {
-      clearTimeout(hoverTimerRef.current);
-    }
-    hoverTimerRef.current = setTimeout(() => {
-      setVisible(false);
-    }, 150);
-  }, [trigger, setVisible]);
-  const handleClick = useCallback(() => {
-    if (trigger !== "click") return;
-    setVisible(!visible);
-  }, [trigger, visible, setVisible]);
-  const handleMenuKeyDown = useCallback((event) => {
-    if (floatingRef.current) {
-      handleMenuNavigation(floatingRef.current, event.nativeEvent);
-    }
-  }, []);
-  const overlay = useAnchoredOverlay({
-    referenceRef: triggerRef,
-    floatingRef,
-    enabled: visible,
-    placement: initialPlacement,
-    offset,
-    portal,
-    containerRef,
-    dismissOnOutside: trigger === "click",
-    dismissOnEscape: true,
-    onDismiss: () => setVisible(false)
-  });
-  useEffect(() => {
-    return () => {
-      if (hoverTimerRef.current) {
-        clearTimeout(hoverTimerRef.current);
-      }
-    };
-  }, []);
-  const containerClasses = useMemo(
-    () => classNames(getDropdownContainerClasses(), "tiger-dropdown-container", className),
-    [className]
-  );
-  const triggerClasses = useMemo(() => getDropdownTriggerClasses(disabled), [disabled]);
-  const menuWrapperClasses = classNames(overlay.floatingClasses, DROPDOWN_ENTER_CLASS);
-  const menuWrapperStyles = overlay.floatingStyles;
-  const contextValue = useMemo(
-    () => ({ closeOnClick, handleItemClick }),
-    [closeOnClick, handleItemClick]
-  );
-  const childrenArray = React.Children.toArray(children);
-  let triggerElement = renderTrigger ? renderTrigger({ open: visible }) : null;
-  let menuElement = null;
-  childrenArray.forEach((child) => {
-    if (!React.isValidElement(child)) {
-      if (!renderTrigger && triggerElement == null) triggerElement = child;
-      return;
-    }
-    if (child.type === DropdownMenu) {
-      menuElement = child;
-      return;
-    }
-    if (!renderTrigger && triggerElement == null) {
-      triggerElement = child;
-    }
-  });
-  const chevronNode = showArrow ? /* @__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 menuWrapperNode = /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: floatingRef,
-      className: menuWrapperClasses,
-      style: menuWrapperStyles,
-      "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: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: triggerRef,
-        className: triggerClasses,
-        onClick: handleClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        "aria-haspopup": "menu",
-        "aria-expanded": visible,
-        "aria-controls": visible ? menuId : void 0,
-        "data-state": visible ? "open" : "closed",
-        children: [
-          triggerElement,
-          chevronNode
-        ]
-      }
-    ),
-    renderOverlayPortal(menuWrapperNode, overlay.target, !portal)
-  ] }) });
-};
-
-export {
-  DropdownContext,
-  DropdownMenu,
-  DropdownItem,
-  Dropdown
-};