@expcat/tigercat-react 2.1.2 → 2.1.3

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

@@ -1,7 +1,10 @@
+import {
+  renderOverlayTrigger
+} from "./chunk-WWZZRB7H.mjs";
 import {
   renderOverlayPortal,
   useAnchoredOverlay
-} from "./chunk-HKAZXG74.mjs";
+} from "./chunk-NPGU6VYD.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-B2IFWWM5.mjs

@@ -0,0 +1,352 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/CronEditor.tsx
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  applyCronFieldMode,
+  buildCronFieldValueFromDraft,
+  classNames,
+  cronEditorBaseClasses,
+  cronEditorErrorClasses,
+  cronEditorFieldClasses,
+  cronEditorFieldsClasses,
+  cronEditorLabelClasses,
+  cronFieldMetas,
+  cronFieldModes,
+  formatCronControlLabel,
+  getCronEditorControlClasses,
+  getCronEditorLabels,
+  getCronExpressionIssue,
+  getCronFieldIssue,
+  getCronFieldValue,
+  getCronModeLabels,
+  getDefaultCronPresets,
+  isCronExpressionEmpty,
+  isCronFieldCountValid,
+  markFormItemGroupControl,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  parseOptionalInt,
+  seedCronFieldDraft,
+  updateCronExpressionField,
+  validateCronExpressionWithLabels
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CronEditorInner = forwardRef(function CronEditor({
+  value,
+  defaultValue,
+  disabled = false,
+  readonly = false,
+  size = "md",
+  presets,
+  ariaLabel,
+  locale,
+  labels: labelsOverride,
+  className,
+  name,
+  id,
+  status: statusProp,
+  onChange,
+  onValidate,
+  onBlur,
+  style
+}, ref) {
+  const config = useTigerConfig();
+  const formItemControl = useFormItemControlContext();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getCronEditorLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const fieldLabels = useMemo(
+    () => ({
+      minute: labels.minuteLabel,
+      hour: labels.hourLabel,
+      dayOfMonth: labels.dayOfMonthLabel,
+      month: labels.monthLabel,
+      dayOfWeek: labels.dayOfWeekLabel
+    }),
+    [labels]
+  );
+  const localizedMetas = useMemo(
+    () => cronFieldMetas.map((meta) => ({ ...meta, label: fieldLabels[meta.key] })),
+    [fieldLabels]
+  );
+  const resolvedPresets = useMemo(
+    () => presets === void 0 ? getDefaultCronPresets(labels) : presets,
+    [labels, presets]
+  );
+  const modeLabels = useMemo(() => getCronModeLabels(labels), [labels]);
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const inactive = effectiveDisabled || readonly;
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const describedBy = mergeAriaDescribedBy(formItemControl?.describedBy, void 0);
+  const labelledby = formItemControl?.labelId;
+  const parsedValue = value !== void 0 ? value : formItemControl?.value;
+  const [expression, setExpression] = useControlledState({
+    value: value !== void 0 || formItemControl?.value !== void 0 ? parsedValue : void 0,
+    defaultValue: defaultValue ?? "",
+    onChange: (next, validation2) => {
+      onChange?.(next, validation2);
+      onValidate?.(validation2);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const currentExpression = expression ?? "";
+  const validation = useMemo(
+    () => validateCronExpressionWithLabels(currentExpression, labels, fieldLabels),
+    [currentExpression, labels, fieldLabels]
+  );
+  const fieldsReady = isCronFieldCountValid(currentExpression);
+  const instanceId = useId();
+  const errorId = `${instanceId}-error`;
+  const stickyModes = useRef({});
+  const [drafts, setDrafts] = useState(
+    () => seedAllDrafts(currentExpression, stickyModes.current)
+  );
+  useEffect(() => {
+    setDrafts(seedAllDrafts(currentExpression, stickyModes.current));
+  }, [currentExpression]);
+  function commit(nextValue) {
+    const nextValidation = validateCronExpressionWithLabels(nextValue, labels, fieldLabels);
+    setExpression(nextValue, nextValidation);
+  }
+  function handleRawExpressionChange(nextValue) {
+    stickyModes.current = {};
+    const nextValidation = validateCronExpressionWithLabels(nextValue, labels, fieldLabels);
+    setExpression(nextValue, nextValidation);
+  }
+  function writeField(meta, draft) {
+    const raw = buildCronFieldValueFromDraft(draft, meta);
+    if (isCronExpressionEmpty(currentExpression)) {
+      const parts = ["*", "*", "*", "*", "*"];
+      const index = cronFieldMetas.findIndex((item) => item.key === meta.key);
+      parts[index] = raw;
+      commit(parts.join(" "));
+      return;
+    }
+    const updated = updateCronExpressionField(currentExpression, meta.key, raw);
+    if (updated == null) return;
+    commit(updated);
+  }
+  function handleModeChange(meta, mode) {
+    stickyModes.current[meta.key] = mode;
+    const next = applyCronFieldMode(drafts[meta.key], mode, meta);
+    setDrafts((prev) => ({ ...prev, [meta.key]: next }));
+    writeField(meta, next);
+  }
+  function patchDraft(meta, patch, commitNow) {
+    const next = { ...drafts[meta.key], ...patch };
+    setDrafts((prev) => ({ ...prev, [meta.key]: next }));
+    if (commitNow) writeField(meta, next);
+  }
+  function handleBlur(event) {
+    const next = event.relatedTarget;
+    const root = event.currentTarget.closest("[data-tiger-croneditor]");
+    if (root && next && root.contains(next)) return;
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  }
+  function renderFieldControl(meta, draft, invalid) {
+    if (draft.mode === "any") return null;
+    if (draft.mode === "every") {
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          inputMode: "numeric",
+          className: getCronEditorControlClasses(size, invalid),
+          value: draft.stepText,
+          disabled: inactive || !fieldsReady,
+          "aria-label": formatCronControlLabel(labels.stepAriaLabel, meta.label),
+          onChange: (event) => {
+            const text = event.target.value;
+            patchDraft(meta, { stepText: text, mode: "every" }, parseOptionalInt(text) != null);
+          }
+        }
+      );
+    }
+    if (draft.mode === "specific") {
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          inputMode: "numeric",
+          className: getCronEditorControlClasses(size, invalid),
+          value: draft.valueText,
+          disabled: inactive || !fieldsReady,
+          "aria-label": formatCronControlLabel(labels.valueAriaLabel, meta.label),
+          onChange: (event) => {
+            const text = event.target.value;
+            patchDraft(meta, { valueText: text, mode: "specific" }, parseOptionalInt(text) != null);
+          }
+        }
+      );
+    }
+    if (draft.mode === "range") {
+      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            className: getCronEditorControlClasses(size, invalid),
+            value: draft.startText,
+            disabled: inactive || !fieldsReady,
+            "aria-label": formatCronControlLabel(labels.rangeStartAriaLabel, meta.label),
+            onChange: (event) => {
+              const text = event.target.value;
+              patchDraft(
+                meta,
+                { startText: text, mode: "range" },
+                parseOptionalInt(text) != null && parseOptionalInt(draft.endText) != null
+              );
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            className: getCronEditorControlClasses(size, invalid),
+            value: draft.endText,
+            disabled: inactive || !fieldsReady,
+            "aria-label": formatCronControlLabel(labels.rangeEndAriaLabel, meta.label),
+            onChange: (event) => {
+              const text = event.target.value;
+              patchDraft(
+                meta,
+                { endText: text, mode: "range" },
+                parseOptionalInt(draft.startText) != null && parseOptionalInt(text) != null
+              );
+            }
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: getCronEditorControlClasses(size, invalid),
+        value: draft.raw,
+        disabled: inactive || !fieldsReady,
+        "aria-label": formatCronControlLabel(labels.customValueAriaLabel, meta.label),
+        onChange: (event) => patchDraft(meta, { raw: event.target.value, mode: "custom" }, true)
+      }
+    );
+  }
+  const expressionIssue = getCronExpressionIssue(validation);
+  const expressionInvalid = Boolean(expressionIssue) && !isCronExpressionEmpty(currentExpression);
+  const groupName = ariaLabel ?? labels.ariaLabel;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(cronEditorBaseClasses, className),
+      style,
+      role: "group",
+      "data-tiger-croneditor": "",
+      "aria-label": labelledby ? void 0 : groupName,
+      "aria-labelledby": labelledby,
+      "aria-describedby": describedBy,
+      "aria-invalid": status === "error" || expressionInvalid ? true : void 0,
+      onBlur: handleBlur,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              id: effectiveId,
+              name: effectiveName,
+              className: classNames(getCronEditorControlClasses(size, expressionInvalid), "flex-1"),
+              value: currentExpression,
+              disabled: effectiveDisabled,
+              readOnly: readonly,
+              "aria-label": labels.expressionAriaLabel,
+              "aria-invalid": expressionInvalid || void 0,
+              "aria-describedby": expressionIssue ? errorId : describedBy,
+              onChange: (event) => handleRawExpressionChange(event.target.value)
+            }
+          ),
+          resolvedPresets.length > 0 && /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: getCronEditorControlClasses(size),
+              value: resolvedPresets.some((preset) => preset.value === currentExpression) ? currentExpression : "",
+              disabled: inactive,
+              "aria-label": labels.presetAriaLabel,
+              onChange: (event) => {
+                if (event.target.value) {
+                  stickyModes.current = {};
+                  commit(event.target.value);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: labels.presetPlaceholder }),
+                resolvedPresets.map((preset) => /* @__PURE__ */ jsx("option", { value: preset.value, children: preset.label }, preset.value))
+              ]
+            }
+          )
+        ] }),
+        expressionIssue ? /* @__PURE__ */ jsx("div", { id: errorId, className: cronEditorErrorClasses, role: "alert", children: expressionIssue.message }) : null,
+        /* @__PURE__ */ jsx("div", { className: cronEditorFieldsClasses, children: localizedMetas.map((meta) => {
+          const draft = drafts[meta.key];
+          const issue = getCronFieldIssue(validation, meta.key);
+          const modeId = `${instanceId}-${meta.key}-mode`;
+          const fieldErrorId = `${instanceId}-${meta.key}-error`;
+          return /* @__PURE__ */ jsxs("div", { className: cronEditorFieldClasses, children: [
+            /* @__PURE__ */ jsx("label", { className: cronEditorLabelClasses, htmlFor: modeId, children: meta.label }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                id: modeId,
+                className: getCronEditorControlClasses(size, Boolean(issue)),
+                value: draft.mode,
+                disabled: inactive || !fieldsReady,
+                "aria-invalid": issue ? true : void 0,
+                "aria-describedby": issue ? fieldErrorId : void 0,
+                "aria-label": formatCronControlLabel(labels.modeAriaLabel, meta.label),
+                onChange: (event) => handleModeChange(meta, event.target.value),
+                children: cronFieldModes.map((mode) => /* @__PURE__ */ jsx("option", { value: mode, children: modeLabels[mode] }, mode))
+              }
+            ),
+            renderFieldControl(meta, draft, Boolean(issue)),
+            issue ? /* @__PURE__ */ jsx("div", { id: fieldErrorId, className: cronEditorErrorClasses, children: issue.message }) : null
+          ] }, meta.key);
+        }) })
+      ]
+    }
+  );
+});
+var CronEditor2 = markFormItemGroupControl(CronEditorInner);
+function seedAllDrafts(expression, sticky) {
+  const ready = isCronFieldCountValid(expression);
+  return Object.fromEntries(
+    cronFieldMetas.map((meta) => {
+      const raw = ready ? getCronFieldValue(expression, meta.key) ?? "*" : "*";
+      return [meta.key, seedCronFieldDraft(raw, sticky[meta.key])];
+    })
+  );
+}
+var CronEditor_default = CronEditor2;
+
+export {
+  CronEditor2 as CronEditor,
+  CronEditor_default
+};